Search completed in 1.03 seconds.
Preloading content with rel="preload" - HTML: Hypertext Markup Language
the p
reload value of the <link> element's
rel attribute lets you declare fetch requests in the html's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. this ensures they are available earlier and are less likely to block the page's render, improving performance. this article provides a basic guide to how <link
rel="p
reload"> works. the basics you most commonly use <link> to load a css file to style your page with: <link
rel="stylesheet" href="styles/main.css"> here however, we will use a
rel value of p
reload, which turns <link> into a p
reloader for any resource we want. you will also need to specify: the path to the resource in the href attribute. th...
...yles/main.css"> here however, we will use a
rel value of p
reload, which turns <link> into a p
reloader for any resource we want. you will also need to specify: the path to the resource in the href attribute. the type of resource in the as attribute. ...
...e will use a
rel value of p
reload, which turns <link> into a p
reloader for any resource we want. you will also need to specify: the path to the resource in the href attribute. the type of resource in the as attribute. a simple example might look like this (see our js and css example source, and also live): <head> <meta charset="utf-8"> <title>js and css p
reload example</title> <link
rel="p
reload" href="style.css" as="style"> <link
rel="p
reload" href="main.js" as="script"> <link
rel="stylesheet" href="style.css"> </head> <body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js" defer></script> </body> here we p
reload our css and javascript files so they will be available as soon as they are required for the rendering of the page later on. this example i...
...And 30 more matches
HTMLAnchorElement.relList - Web APIs
the htmlancho
relement.
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. ...
... the htmlancho
relement.
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. ...
...lancho
relement.
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. ...
...And 2 more matches
RelativeOrientationSensor.RelativeOrientationSensor() - Web APIs
a whole number or decimal may be used, the latter for frequencies less than a second. ...
...a whole number or decimal may be used, the latter for frequencies less than a second. ...
...a whole number or decimal may be used, the latter for frequencies less than a second. ...
...ensor.onreading will be called. a whole number or decimal may be used, the latter for frequencies less than a second. the actual reading frequency depends device hardware and consequently may be less than requested. referenceframe: either 'device' or 'screen'. the default is 'device'. specifications specification status comment orientation sensorthe definition of '
relativeorientationsensor()' in that specification. candidate recommendation initial definition. ...
HTMLAnchorElement.rel - Web APIs
the htmlancho
relement.
rel property reflects the
rel attribute. 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. syntax var
relstr = ancho
relt.
rel; ancho
relt.
rel =
relstr; example var anchors = document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { alert("
rel: " + anchors[i].
rel); } specifications specification status comment html living standardthe definition of '
rel' in that specification. living standard no change from document object model (dom) level 2 html specification document object model (dom) level 2 html specificationthe definition of '
rel' in that specification. ...
...finition of '
rel' in that specification. living standard no change from document object model (dom) level 2 html specification document object model (dom) level 2 html specificationthe definition of '
rel' in that specification. obsolete no change from document object model (dom) level 1 specification document object model (dom) level 1 specificationthe definition of '
rel' in that specification. obsolete initial definition. ...
Index - MDN Web Docs Glossary: Definitions of Web-related terms
this glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web. 2 404 glossary, http errors, infrastructure, navigation a 404 is a standard response code meaning that the server cannot find the requested resource. ...
...lity (a11y) refers to best practices for keeping a website usable despite physical and technical restrictions. web accessibility is formally defined and discussed at the w3c through the web accessibility initiative (wai). 12 accessibility tree (aom) aom, accessibility, dom, glossary, reference the accessibility tree, or accessibility object model (aom), contains accessibility-
related information for most html elements. 13 adobe flash adobe, codingscripting, flash, glossary, infrastructure flash is an obsolescent technology developed by adobe for viewing expressive web applications, multimedia content, and streaming media. adobe flash can run from supporting web browsers via a browser plug-in. 14 ajax ajax, codingscripting, glossary, inf...
...gscripting, glossary, javascript, programming an array is an ordered collection of data (either primitive or object depending upon the language). arrays are used to store multiple values in a single variable. this is compared to a variable that can store only one value. 24 asynchronous glossary, web, webmechanics, asynchronous the term asynchronous refers to or multiple
related things happening without waiting for the previous one to complete). 25 attribute codingscripting, glossary, html an attribute extends an element, changing its behavior or providing metadata. 26 bandwidth glossary, infrastructure bandwidth is the measure of how much information can pass through a data connection in a given amount of time. it is usually...
...And 29 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
the
rel attribute defines the
relationship between a linked resource and the current document. valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found. 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. every keyword within a space seperated value should be unique within that value. values for the
rel attribute, and the elements for which each is
relevant
rel value description <link> <a> and <area> <form> alternate alternate representations of the current document. link link not allowed author author of the current...
.... link link link icon icon representing the current document. external resource not allowed not allowed license indicates that the main content of the current document is covered by the copyright license described by the referenced document. link link link manifest web app manifest link not allowed not allowed modulep
reload tells to browser to preemptively fetch the script and store it in the document's module map for later evaluation. optionally, the module's dependencies can be fetched as well. external resource not allowed not allowed next indicates that the current document is a part of a series, and that the next document in the series is the referenced document. link link li...
... allowed preconnect specifies that the user agent should preemptively connect to the target resource's origin. external resource not allowed not allowed prefetch specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. external resource not allowed not allowed p
reload specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination). external resource not allowed not allowed prerender specifies that the user agent should preemptively fetch the target resource and pr...
...And 27 more matches
Release notes for recent versions of NSS
the current stable
release of nss is 3.56, which was
released on 21 august 2020. (nss 3.56
release notes) the current esr
releases of nss are 3.44.4 (nss 3.44.4
release notes), intended for firefox esr 68, which was
released on 19 may 2020, and 3.53.1 (nss 3.53.1
release notes), intended for firefox esr 78, which was
released on 16 june 2020. ...
... the current stable
release of nss is 3.56, which was
released on 21 august 2020. (nss 3.56
release notes) the current esr
releases of nss are 3.44.4 (nss 3.44.4
release notes), intended for firefox esr 68, which was
released on 19 may 2020, and 3.53.1 (nss 3.53.1
release notes), intended for firefox esr 78, which was
released on 16 june 2020. ...
... the current stable
release of nss is 3.56, which was
released on 21 august 2020. (nss 3.56
release notes) the current esr
releases of nss are 3.44.4 (nss 3.44.4
release notes), intended for firefox esr 68, which was
released on 19 may 2020, and 3.53.1 (nss 3.53.1
release notes), intended for firefox esr 78, which was
released on 16 june 2020. ...
...And 21 more matches
Mozilla release FAQ - Archive of obsolete content
zilla is a project to continue netscape communicator as an open project. the project is maintained by employees of netscape (now a division of aol), red hat, some other companies, as well as contributors from the community. on what is mozilla based? the mozilla project started near the end of life of the 4.x line of netscape communicator. originally, the plan was just to re-stabilize the code and
release 5.0, but it was decided within the community that the more ambitious changes that were planned for later integration were close to being ready. the old layout engine, networking engine, and several of the older modules were gutted, and much later, the sources reached the point where netscape was comfortable making a
release, and so netscape 6.0 was
released. netscape 6.0 and above are based o...
...r integration were close to being ready. the old layout engine, networking engine, and several of the older modules were gutted, and much later, the sources reached the point where netscape was comfortable making a
release, and so netscape 6.0 was
released. netscape 6.0 and above are based off of the mozilla source. mozilla 1.0 (mozilla uses a different versioning system than netscape) is due for
release soon. when was mozilla
released? the source to mozilla was first
released on 31 march 1998. the code has been continually available since then via cvs (see section 1.8), and occasional binary
releases (first as milestones, and more recently as versioned
releases) have been made. as of the time of this update, mozilla 1.0
release candicate 2 is the most recent
release. what is the current vers...
...1 march 1998. the code has been continually available since then via cvs (see section 1.8), and occasional binary
releases (first as milestones, and more recently as versioned
releases) have been made. as of the time of this update, mozilla 1.0
release candicate 2 is the most recent
release. what is the current version of mozilla? ...
...And 11 more matches
Release phase
you've made it! you've setup up your local and remote environments, you've selected your l10n tools and projects, done some localization and even some testing! now you're ready for the final phase: becoming an official l10n
release. here, we'll continue to stay true to the original intent of this guide and only present you with the technical information you need to become an official
release. we'll primarily focus on getting your
release repository setup and the mercurial commands you'll need to know to use that repository. for more information on the
release part of the l10n process, visit the mozilla wiki here. your official
release repository now that your locale has been registered, the localization files will live on mozilla mercurial server at hg.mozilla.org. depending on which ...
...otherwise, in order to be able to make any changes to the localization files, you will need to clone the repository on your local machine and work in the local clone. ...
... username you wish to use for connecting with hg.mozilla.org. this should be your mozilla ldap account name. ...
...And 11 more matches
RTCIceCandidate.relatedPort - Web APIs
the rtcicecandidate interface's read-only
relatedport property indicates the port number of reflexive or
relay candidates. if the candidate is a host candidate (that is, its ip is in fact the real ip address of the remote peer),
relatedport is null. the
relatedport field's value is set when the rtcicecandidate() constructor is used. you can't specify the value of
relatedport in the options object, but the address is automatically extracted from the candidate a-line, if it's formatted properly, being taken from its
rel-port field. ...
... a host candidate (that is, its ip is in fact the real ip address of the remote peer),
relatedport is null. the
relatedport field's value is set when the rtcicecandidate() constructor is used. you can't specify the value of
relatedport in the options object, but the address is automatically extracted from the candidate a-line, if it's formatted properly, being taken from its
rel-port field. the
related address (
relatedaddress) and port are not used at all by ice itself; they are provided for analysis and diagnostic purposes only, and their inclusion may be blocked by security systems, so do not
rely on them having non-null values. syntax var
relport = rtcicecandidate.
relatedport; value an unsigned 16-bit value containing the candidate's
related port number, if any. for both peer and ser...
...and port are not used at all by ice itself; they are provided for analysis and diagnostic purposes only, and their inclusion may be blocked by security systems, so do not
rely on them having non-null values. syntax var
relport = rtcicecandidate.
relatedport; value an unsigned 16-bit value containing the candidate's
related port number, if any. for both peer and server reflexive candidates, the
related address and port describe the base for that candidate. for
relay candidates, the
related address and port provide the mapped address selected by the turn server. ...
...And 11 more matches
HTMLAnchorElement - Web APIs
the htmlancho
relement interface represents hyperlink elements and provides special properties and methods (beyond those of the regular htmlelement object interface that they inherit from) for manipulating the layout and presentation of such elements. ...
...nts hyperlink elements and provides special properties and methods (beyond those of the regular htmlelement object interface that they inherit from) for manipulating the layout and presentation of such elements. ...
...ndale 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/htmlancho
relement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlancho
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits pr...
...And 10 more matches
nsIAccessibleRelation
accessible/public/nsiaccessible
relation.idlscriptable this interface gives access to an accessibles set of
relations. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) note: be carefull, do not change constants until atk has a structure to map gecko constants into atk constants. method overview nsiaccessible gettarget(in unsigned long index); nsiarray gettargets(); attributes attribute type description
relationtype unsigned long returns the type of the
relation. read only. targetscount unsigned long returns the number of targets for this
relation. read only. constants c...
...siarray gettargets(); attributes attribute type description
relationtype unsigned long returns the type of the
relation. read only. targetscount unsigned long returns the number of targets for this
relation. read only. constants constant value description
relation_nul 0x00
relation_controlled_by 0x01 some attribute of this object is affected by a target object.
relation_controller_for 0x02 this object is interactive and controls some attribute of a target object. ...
.... read only. constants constant value description
relation_nul 0x00
relation_controlled_by 0x01 some attribute of this object is affected by a target object.
relation_controller_for 0x02 this object is interactive and controls some attribute of a target object.
relation_label_for 0x03 this object is label for a target object.
relation_labelled_by 0x04 this object is labelled by a target object. ...
...And 9 more matches
RTCIceCandidate.relatedAddress - Web APIs
the rtcicecandidate interface's read-only
relatedaddress property is a string indicating the
related address of a
relay or reflexive candidate. if the candidate is a host candidate (that is, its ip is in fact the real ip address of the remote peer),
relatedaddress is null. the
relatedaddress field's value is set when the rtcicecandidate() constructor is used. you can't specify the value of
relatedaddress in the options object, but the address is automatically extracted from the candidate a-line, if it's formatted properly, being taken from its
rel-address field. ...
...idate (that is, its ip is in fact the real ip address of the remote peer),
relatedaddress is null. the
relatedaddress field's value is set when the rtcicecandidate() constructor is used. you can't specify the value of
relatedaddress in the options object, but the address is automatically extracted from the candidate a-line, if it's formatted properly, being taken from its
rel-address field. the
related address and port (
relatedport) are not used at all by ice itself; they are provided for analysis and diagnostic purposes only, and their inclusion may be blocked by security systems, so do not
rely on them having non-null values. syntax var
reladdress = rtcicecandidate.
relatedaddress; value a domstring which contains the candidate's
related address. for both peer and server reflexive cand...
... and port (
relatedport) are not used at all by ice itself; they are provided for analysis and diagnostic purposes only, and their inclusion may be blocked by security systems, so do not
rely on them having non-null values. syntax var
reladdress = rtcicecandidate.
relatedaddress; value a domstring which contains the candidate's
related address. for both peer and server reflexive candidates, the
related address (and
related port) are the base for that server or peer reflexive candidate. for
relay candidates, the
related address and port are set to the mapped address selected by the turn server. for host candidates,
relatedaddress is null, meaning the field is not included in the candidate's a-line. ...
...And 8 more matches
Release notes - Archive of obsolete content
firefox 35 highlights added access keys for context menu. removed isprivatebrowsing from browserwindow. details github commits made between firefox 34 and firefox 35. this will not include any uplifts made after this
release entered aurora. bugs fixed between firefox 34 and firefox 35. this will not include any uplifts made after this
release entered aurora. firefox 34 highlights new api: dev/panel enables you to extend the firefox developer tools. jpm beta
released. "./my-file" introduced everywhere as an alias for require("sdk/self").data.url("my-file") added the ability to attach stylesheets to individual tabs. details github commits made between firefox 33 and firefox 34. this will not include any uplifts made after this
release entered aurora. bugs fixed between fir...
... firefox 33 highlights added support for context menus in panels via a new option in the panel constructor. added tab.readystate. added a browserwindow parameter to sidebar.show() and sidebar.hide(), to control the window for which the sidebar will be shown or hidden. details github commits made between firefox 32 and firefox 33. ...
... aurora. firefox 33 highlights added support for context menus in panels via a new option in the panel constructor. added tab.readystate. added a browserwindow parameter to sidebar.show() and sidebar.hide(), to control the window for which the sidebar will be shown or hidden. details github commits made between firefox 32 and firefox 33. this will not include any uplifts made after this
release entered aurora. bugs fixed between firefox 32 and firefox 33. this will not include any uplifts made after this
release entered aurora. firefox 32 highlights added exclude option to pagemod. added anonymous option to request. add-on debugger now includes a console and a scratchpad. details github commits made between firefox 31 and firefox 32. this will not include any uplifts made...
...And 6 more matches
Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
loaded in the background, this is based on the assumption that the content will likely be requested, enabling the content to load instantly if and when the user requests it. the content is downloaded and cached for anticipated future use without the user making an explicit request for it. dns prefetching domain lookups can be slow, especially with network latency on mobile phones. ...
...t request for it. dns prefetching domain lookups can be slow, especially with network latency on mobile phones. they are most
relevant when there are a plethora of links to external websites that may be clicked on, like search engine results, dns prefetching resolves domain names in advance thereby speeding up load times by reducing the time associated with domain lookup at request time. <link
rel="dns-prefetch" href="https://example.com/"> link prefetching link prefetching is a performance optimization technique that works by assuming which links the user is likely to click, then downloading the content of those links. if the user decides to click on one of the links, then the page will be rendered instantly as the content has already been downloaded. the prefetch hints are sent in htt...
...="https://example.com/"> link prefetching link prefetching is a performance optimization technique that works by assuming which links the user is likely to click, then downloading the content of those links. if the user decides to click on one of the links, then the page will be rendered instantly as the content has already been downloaded. ...
...And 6 more matches
NSS 3.35 release notes
this includes a large number of changes since 3.34, which supported only draft -18. see below for details. new types in sslt.h sslhandshaketype - the type of a tls handshake message. ...
...this includes a large number of changes since 3.34, which supported only draft -18. see below for details. new types in sslt.h sslhandshaketype - the type of a tls handshake message. ...
...upported only draft -18. see below for details. new types in sslt.h sslhandshaketype - the type of a tls handshake message. for the sslsignaturescheme enum, the enumerated values ssl_sig_rsa_pss_sha* are deprecated in response to a change in tls 1.3. please use the equivalent ssl_sig_rsa_pss_rsae_sha* for rsaencryption keys, or ssl_sig_rsa_pss_pss_sha* for pss keys. note that this
release does not include support for the latter. notable changes in nss 3.35 previously, nss used the dbm file format by default. starting with version 3.35, nss uses the sql file format by default. below, are explanations that could be helpful for environments that need to adopt to the new default. if nss is initialized, in read-write mode with a database directory provided, it uses ...
...And 6 more matches
NSPR Release Engineering Guide - Archive of obsolete content
this paper is for engineers performing formal
release for the netscape portable runtime (nspr) across all platforms. nspr generally follows the iplanet product lifecycle. ...
... this paper is for engineers performing formal
release for the netscape portable runtime (nspr) across all platforms. nspr generally follows the iplanet product lifecycle. ...
... this paper is for engineers performing formal
release for the netscape portable runtime (nspr) across all platforms. nspr generally follows the iplanet product lifecycle. ...
...And 5 more matches
NSS 3.15.3 release notes
users are encouraged to upgrade immediately. ...
...users are encouraged to upgrade immediately. ...
...ss 3.15.3 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_15_3_rtm. nss 3.15.3 requires nspr 4.10.2 or newer. nss 3.15.3 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_15_3_rtm/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.15.3. users are encouraged to upgrade immediately. bug 925100 - (cve-2013-1741) ensure a size is <= half of the maximum pruint32 value bug 934016 - (cve-2013-5605) handle invalid handshake packets bug 910438 - (cve-2013-5606) return the correct result in cert_verifycert on failure, if a verifylog isn't used new in nss 3.15.3 new functionality no new majo...
...And 5 more matches
HTMLHRElement - Web APIs
the htmlh
relement interface provides special properties (beyond those of the htmlelement interface it also has available to it by inheritance) for manipulating <hr> elements. ...
... the htmlh
relement interface provides special properties (beyond those of the htmlelement interface it also has available to it by inheritance) for manipulating <hr> 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/htmlh
relement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlh
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits proper...
...And 5 more matches
SVGFEGaussianBlurElement - Web APIs
the svgfegaussianblu
relement interface corresponds to the <fegaussianblur> element. ...
... the svgfegaussianblu
relement interface corresponds to the <fegaussianblur> element. ...
...mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfegaussianblu
relement" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfegaussianblu
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants ...
...And 5 more matches
SVGFilterElement - Web APIs
the svgfilte
relement interface provides access to the properties of <filter> elements, as well as methods to manipulate them. ...
... the svgfilte
relement interface provides access to the properties of <filter> elements, as well as methods to manipulate them. ...
...,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfilte
relement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilte
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgfiltere...
...And 5 more matches
Intl.RelativeTimeFormat.prototype.format() - JavaScript
possible values are: "year", "quarter", "month", "week", "day", "hour", "minute", "second". plural forms are also permitted. ...
...possible values are: "year", "quarter", "month", "week", "day", "hour", "minute", "second". plural forms are also permitted. ...
...possible values are: "year", "quarter", "month", "week", "day", "hour", "minute", "second". plural forms are also permitted. ...
...And 5 more matches
Tamarin Releases - Archive of obsolete content
this page tracks tamarin source code
releases, past, present and future. ...
... this page tracks tamarin source code
releases, past, present and future. ...
... this page tracks tamarin source code
releases, past, present and future. ...
...And 4 more matches
NSS_3.12.1_release_notes.html
nss 3.12.1 requires nspr 4.7.1. see the documentation section for the build instructions. ...
... nss 3.12.1 requires nspr 4.7.1. see the documentation section for the build instructions. ...
...tion distribution information new in nss 3.12.1 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12.1 is a patch
release for nss 3.12. the bug fixes in nss 3.12.1 are described in the "bugs fixed" section below. nss 3.12.1 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.1
release is nss_3_12_1_rtm. nss 3.12.1 requires nspr 4.7.1. see the documentation section for the build instructions. nss 3.12.1 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_12_1_rtm/src/. binary distributions: https://ftp.mozilla.org/pub/mozilla.org/securi...
...And 4 more matches
IAccessibleRelation
other-licenses/ia2/accessible
relation.idlnot scriptable this interface gives access to an object's set of
relations. 1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) method overview [propget] hresult localized
relationtype([out] bstr localized
relationtype ); [propget] hresult ntargets([out] long ntargets ); [propget] hresult
relationtype([out] bstr
relationtype ); [propget] hresult target([in] long targetindex, [out] iunknown target ); [propget] hresult targets([in] long maxtargets, [out, size_is(maxtargets), length_is( ntargets)] iunknown targets, [out] long ntargets ); methods localized
relationtype() returns a localized version of the
relation type. ...
... ntargets ); [propget] hresult
relationtype([out] bstr
relationtype ); [propget] hresult target([in] long targetindex, [out] iunknown target ); [propget] hresult targets([in] long maxtargets, [out, size_is(maxtargets), length_is( ntargets)] iunknown targets, [out] long ntargets ); methods localized
relationtype() returns a localized version of the
relation type. [propget] hresult localized
relationtype( [out] bstr localized
relationtype ); parameters localized
relationtype return value s_ok. ntargets() returns the number of targets() for this
relation. [propget] hresult ntargets( [out] long ntargets ); parameters ntargets return value s_ok.
relationtype() returns the type of the
relation. ...
...[propget] hresult target( [in] long targetindex, [out] iunknown target ); parameters targetindex 0 based index. ...
...And 4 more matches
NS_IF_RELEASE
this page still needs some work, help to improve it! ...
... this page still needs some work, help to improve it! ...
... this page still needs some work, help to improve it! ...
...And 4 more matches
FetchEvent.preloadResponse - Web APIs
else it fetches a response from the network. ...
...else it fetches a response from the network. ...
...else it fetches a response from the network. ...
...And 4 more matches
HTMLMeterElement - Web APIs
the html <meter> elements expose the htmlmete
relement interface, which provides special properties and methods (beyond the htmlelement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <meter> elements. ...
... the html <meter> elements expose the htmlmete
relement interface, which provides special properties and methods (beyond the htmlelement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <meter> elements. ...
...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/htmlmete
relement" 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">htmlmete
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherit...
...And 4 more matches
MouseEvent.relatedTarget - Web APIs
the mouseevent.
relatedtarget read-only property is the secondary target for the mouse event, if there is one. ...
... the mouseevent.
relatedtarget read-only property is the secondary target for the mouse event, if there is one. ...
... example try moving your mouse cursor into and out of the red and blue boxes. html <body id="body"> <div id="outer"> <div id="red"></div> <div id="blue"></div> </div> <p id="log"></p> </bo...
...And 4 more matches
Intl.RelativeTimeFormat - JavaScript
the intl.
relativetimeformat object enables language-sensitive
relative time formatting. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constructor intl.
relativetimeformat.
relativetimeformat() creates a new intl.
relativetimeformat object. static methods intl.
relativetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. ...
...hub.com/mdn/interactive-examples and send us a pull request. constructor intl.
relativetimeformat.
relativetimeformat() creates a new intl.
relativetimeformat object. static methods intl.
relativetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.
relativetimeformat.prototype.format() formats a value and a unit according to the locale and formatting options of the given intl.
relativetimeformat object. ...
...ect. static methods intl.
relativetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.
relativetimeformat.prototype.format() formats a value and a unit according to the locale and formatting options of the given intl.
relativetimeformat object. intl.
relativetimeformat.prototype.formattoparts() returns an array of objects representing the
relative time format in parts that can be used for custom locale-aware formatting. intl.
relativetimeformat.prototype.resolvedoptions() returns a new object with properties reflecting the locale and formatting options computed during initialization of the object. examples basic format usage the following e...
...And 4 more matches
NSS_3.11.10_release_notes.html
nss 3.11.10 requires nspr 4.7.1. see the documentation section for the build instructions. ...
... nss 3.11.10 requires nspr 4.7.1. see the documentation section for the build instructions. ...
...ews.mozilla.org="">mozilla.dev.tech.crypto</ahref="news:> contents introduction distribution information bugs fixed documentation compatibility feedback introduction network security services (nss) 3.11.10 is a patch
release for nss 3.11. the bug fixes in nss 3.11.10 are described in the "bugs fixed" section below. distribution information the cvs tag for the nss 3.11.10
release is nss_3_11_10_rtm. nss 3.11.10 requires nspr 4.7.1. see the documentation section for the build instructions. nss 3.11.10 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_11_10_rtm/src/. binary distributions: https://ftp.mozilla.org/pub/mozilla.org/se...
...And 3 more matches
NSS_3.12.2_release_notes.html
nss 3.12.2 requires nspr 4.7.1. see the documentation section for the build instructions. ...
... nss 3.12.2 requires nspr 4.7.1. see the documentation section for the build instructions. ...
...tion distribution information new in nss 3.12.2 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12.2 is a patch
release for nss 3.12. the bug fixes in nss 3.12.2 are described in the "bugs fixed" section below. nss 3.12.2 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.2
release is nss_3_12_2_rtm. nss 3.12.2 requires nspr 4.7.1. see the documentation section for the build instructions. nss 3.12.2 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_12_2_rtm/src/. binary distributions: https://ftp.mozilla.org/pub/mozilla.org/securi...
...And 3 more matches
NSS_3.12_release_notes.html
nss 3.12
release notes 17 june 2008 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12 is a minor
release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path validation library camellia cipher support tls session ticket extension (rfc 5077) nss 3.12 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. note: firefox 3 uses nss 3.12, but not the new sqlite-based shareable certificate and key databases. we missed the deadline to enable that feature in firefox 3. ...
...c 3280 compliant certificate path validation library camellia cipher support tls session ticket extension (rfc 5077) nss 3.12 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. note: firefox 3 uses nss 3.12, but not the new sqlite-based shareable certificate and key databases. we missed the deadline to enable that feature in firefox 3. distribution information the cvs tag for the nss 3.12
release is nss_3_12_rtm. nss 3.12 requires nspr 4.7.1. see the documentation section for the build instructions. nss 3.12 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_12_rtm/src/. binary distributions: https://ftp.mozilla.org/pub/mozilla.org/security/nss/r...
...nds to an nss-3.12 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to get the nspr 4.7.1 header files and shared libraries, which nss 3.12 requires. nspr 4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/
releases/v4.7.1/. nss 3.12 libraries have the following versions: sqlite3: 3.3.17 nssckbi: 1.70 softokn3 and freebl3: 3.12.0.3 other nss libraries: 3.12.0.3 new in nss 3.12 3 new shared library are shipped with nss 3.12: nssutil sqlite nssdbm 1 new include file is shipped with nss3.12: utilrename.h new functions in the nss shared library: cert_checknamespace (see cert.h) cert_encodecertpo...
...And 3 more matches
NSS 3.15.2 release notes
users are encouraged to upgrade immediately. bug 894370 - (cve-2013-1739) avoid uninitialized data read in the event of a decryption failure. ...
...users are encouraged to upgrade immediately. bug 894370 - (cve-2013-1739) avoid uninitialized data read in the event of a decryption failure. ...
...users are encouraged to upgrade immediately. bug 894370 - (cve-2013-1739) avoid uninitialized data read in the event of a decryption failure. new in nss 3.15.2 new functionality aes-gcm ciphersuites: aes-gcm cipher suite (rfc 5288 and rfc 5289) support has been added when tls 1.2 is negotiated. ...
...And 3 more matches
NSS 3.49 release notes
notable changes in nss 3.49 the legacy dbm database, libnssdbm, is no longer built by default when using gyp builds. see bug 1594933 for details. ...
... notable changes in nss 3.49 the legacy dbm database, libnssdbm, is no longer built by default when using gyp builds. see bug 1594933 for details. bugs fixed in nss 3.49 bug 1513586 - set downgrade sentinel for client tls versions lower than 1.2. ...
... notable changes in nss 3.49 the legacy dbm database, libnssdbm, is no longer built by default when using gyp builds. see bug 1594933 for details. bugs fixed in nss 3.49 bug 1513586 - set downgrade sentinel for client tls versions lower than 1.2. ...
...And 3 more matches
NSS 3.50 release notes
notable changes in nss 3.50 verified primitives from hacl* were updated, bringing performance improvements for several platforms. ...
... notable changes in nss 3.50 verified primitives from hacl* were updated, bringing performance improvements for several platforms. ...
... notable changes in nss 3.50 verified primitives from hacl* were updated, bringing performance improvements for several platforms. note that intel processors with sse4 but without avx are currently unable to use the improved chacha20/poly1305 due to a build issue; such platforms will fall-back to less optimized algorithms. ...
...And 3 more matches
NSS 3.51.1 release notes
notable changes in nss 3.51.1 bug 1617968 - update delegated credentials implementation to draft-07. ...
... notable changes in nss 3.51.1 bug 1617968 - update delegated credentials implementation to draft-07. ...
... notable changes in nss 3.51.1 bug 1617968 - update delegated credentials implementation to draft-07. bugs fixed in nss 3.51.1 bug 1619102 - add workaround option to include both dtls and tls versions in dtls supported_versions. ...
...And 3 more matches
NSS 3.56 release notes
notable changes in nss 3.56 nspr dependency updated to 4.28. the known issue where makefile builds failed to locate seccomon.h was fixed in bug 1653975. ...
... notable changes in nss 3.56 nspr dependency updated to 4.28. the known issue where makefile builds failed to locate seccomon.h was fixed in bug 1653975. ...
... notable changes in nss 3.56 nspr dependency updated to 4.28. the known issue where makefile builds failed to locate seccomon.h was fixed in bug 1653975. bugs fixed in nss 3.56 bug 1650702 - support sha-1 hw acceleration on armv8 bug 1656981 - use mpi comba and mulq optimizations on x86-64 macos. ...
...And 3 more matches
File.webkitRelativePath - Web APIs
example in this example, a directory picker is presented which lets the user choose one or more directories. when the change event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed. ...
... example in this example, a directory picker is presented which lets the user choose one or more directories. when the change event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed. ...
... example in this example, a directory picker is presented which lets the user choose one or more directories. when the change event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed. ...
...And 3 more matches
RelativeOrientationSensor - Web APIs
properties no specific properties; inherits methods from its ancestors orientationsensor and sensor. ...
...inate system. to use this sensor, the user must grant permission to the 'accelerometer', and 'gyroscope' device sensors through the permissions api. if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. constructor
relativeorientationsensor.
relativeorientationsensor() creates a new
relativeorientationsensor object. properties no specific properties; inherits methods from its ancestors orientationsensor and sensor. event handlers no specific event handlers; inherits methods from its ancestor, sensor. methods no specific methods; inherits methods from its ancestors orientationsensor and sensor. examples ...
...no specific properties; inherits methods from its ancestors orientationsensor and sensor. event handlers no specific event handlers; inherits methods from its ancestor, sensor. methods no specific methods; inherits methods from its ancestors orientationsensor and sensor. ...
...And 3 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. the specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item. a grid container as containing block to make the grid container a containing block you need to add the position property to the container with a value of
relative, just as you would make a containing block for any other absolutely positioned items. once you have done this, if you give a grid item position: absolute it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into. in the below example i have a wrapper containing four child items. item three is absolutely positione...
... once you have done this, if you give a grid item position: absolute it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into. in the below example i have a wrapper containing four child items. item three is absolutely positioned and also placed on the grid using line-based placement. the grid container has position:
relative and so becomes the positioning context of this item. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div...
...box3"> this block is absolutely positioned. in this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into. </div> <div class="box4">four</div> </div> .wrapper { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; grid-gap: 20px; position:
relative; } .box3 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; position: absolute; top: 40px; left: 40px; } you can see that the item is taking the area from grid column line 2 to 4, and starting after line 1. then it is offset in that area using the top and left properties. however, it has been taken out of flow as is usual for absolutely position...
...And 3 more matches
Intl.RelativeTimeFormat() constructor - JavaScript
a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. options optional. an object with some or all of the following properties: localematcher the locale matching algorithm to use. possible values are "lookup" and "best fit"; the default is "best fit". for information about this option, see intl. numeric the format of output message. possible values are: "always" (default, e.g., 1 day ago), or "auto" (e.g., yesterday). ...
...t always have to use numeric values in the output. style the length of the internationalized message. possible values are: "long" (default, e.g., in 1 month) "short" (e.g., in 1 mo.), or "narrow" (e.g., in 1 mo.). the narrow style could be similar to the short style for some locales. ...
... the length of the internationalized message. possible values are: "long" (default, e.g., in 1 month) "short" (e.g., in 1 mo.), or "narrow" (e.g., in 1 mo.). the narrow style could be similar to the short style for some locales. examples basic format usage the following example shows how to create a
relative time formatter using the english language. ...
...And 3 more matches
Intl.RelativeTimeFormat.prototype.formatToParts() - JavaScript
possible values are: "year", "quarter", "month", "week", "day", "hour", "minute", "second". plural forms are also permitted. ...
...at.prototype.formattoparts() method returns an array of objects representing the
relative time format in parts that can be used for custom locale-aware formatting. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax
relativetimeformat.formattoparts(value, unit) parameters value numeric value to use in the internationalized
relative time message. unit unit to use in the
relative time internationalized message. possible values are: "year", "quarter", "month", "week", "day", "hour", "minute", "second". ...
...yntax
relativetimeformat.formattoparts(value, unit) parameters value numeric value to use in the internationalized
relative time message. unit unit to use in the
relative time internationalized message. possible values are: "year", "quarter", "month", "week", "day", "hour", "minute", "second". plural forms are also permitted. return value an array of objects containing the formatted
relative time in parts. description the intl.
relativetimeformat.prototype.formattoparts method is a version of the format method which it returns an array of objects which represent "parts" of the object, separating the formatted number into its consituent parts and separating it from other surrounding text. these objects have two properties: type a numberformat formattoparts type, and value, which...
...And 3 more matches
4.3.1 Release Notes
ssl3 & tls renegotiation vulnerability see cve-2009-3555 and us-cert vu#120541 for more information about this security vulnerability. all ssl/tls renegotiation is disabled by default in nss 3.12.5 and therefore will be disabled by default with jss 4.3.1. ...
... ssl3 & tls renegotiation vulnerability see cve-2009-3555 and us-cert vu#120541 for more information about this security vulnerability. ...
...ed for an operation before the key can be used to perform that operation; other tokens don't care. nss/jss provides a way to specify a set of flags and a corresponding mask for these flags. see generateeckeypairwithopflags see generatersakeypairwithopflags see generatedsakeypairwithopflags distribution information jss is checked into mozilla/security/jss/. the cvs tag for the jss 4.3.1
release is jss_4_3_1_rtm. source tarballs are available from ftp://ftp.mozilla.org/pub/mozilla.or...-4.3.1.tar.bz2 binary
releases are no longer available on mozilla. jss is a jni library we provide the jss4.jar but expect you to build the jss's matching jni shared library. we provide the jss4.jar in case you do not want to obtain your own jce code signing certificate. jss is a jce provider and there...
...And 2 more matches
NSS 3.14.2 release notes
note: the new assembly code requires gnu as version 2.19 or newer. ...
...note: the new assembly code requires gnu as version 2.19 or newer. ...
...note: the new assembly code requires gnu as version 2.19 or newer. ...
...And 2 more matches
NSS 3.15.4 release notes
users are encouraged to upgrade immediately. ...
...users are encouraged to upgrade immediately. ...
...ss 3.15.4 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_15_4_rtm. nss 3.15.4 requires nspr 4.10.2 or newer. nss 3.15.4 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_15_4_rtm/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.15.4. users are encouraged to upgrade immediately. bug 919877 - (cve-2013-1740) when false start is enabled, libssl will sometimes return unencrypted, unauthenticated data from pr_recv new in nss 3.15.4 new functionality implemented ocsp querying using the http get method, which is the new default, and will fall back to the http post method. implemented...
...And 2 more matches
NSS 3.16.2.1 release notes
users are encouraged to upgrade immediately. bug 1064636 - (cve-2014-1568) rsa signature forgery in nss. ...
...users are encouraged to upgrade immediately. bug 1064636 - (cve-2014-1568) rsa signature forgery in nss. ...
...nss 3.16, based on the nss 3.16.2
release. the bug fixes in nss 3.16.2.1 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_16_2_1_rtm. nss 3.16.2.1 requires nspr 4.10.6 or newer. nss 3.16.2.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_16_2_1_rtm/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.16.2.1. users are encouraged to upgrade immediately. bug 1064636 - (cve-2014-1568) rsa signature forgery in nss. see also mfsa 2014-73 for details. new in nss 3.16.2.1 new functionality no new functionality is introduced in this
release. ...
...And 2 more matches
NSS 3.18 release notes
the tstclnt test utility program has new command-line options -c, -d, -b and -r. ...
... the tstclnt test utility program has new command-line options -c, -d, -b and -r. ...
... the tstclnt test utility program has new command-line options -c, -d, -b and -r. ...
...And 2 more matches
NSS 3.19.4 release notes
users are encouraged to upgrade immediately. ...
...users are encouraged to upgrade immediately. bug 1192028 (cve-2015-7181) and bug 1202868 (cve-2015-7182): several issues existed within the asn.1 decoder used by nss for handling streaming ber data. ...
...cribed in the "security advisories" section below. distribution information the hg tag is nss_3_19_4_rtm. nss 3.19.4 requires nspr 4.10.10 or newer. nss 3.19.4 and nspr 4.10.10 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_19_4_rtm/src/ https://ftp.mozilla.org/pub/nspr/
releases/v4.10.10/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.19.4. users are encouraged to upgrade immediately. bug 1192028 (cve-2015-7181) and bug 1202868 (cve-2015-7182): several issues existed within the asn.1 decoder used by nss for handling streaming ber data. while the majority of nss uses a separate, unaffected der decoder, several public ...
...And 2 more matches
NSS 3.20.1 release notes
users are encouraged to upgrade immediately. ...
...users are encouraged to upgrade immediately. bug 1192028 (cve-2015-7181) and bug 1202868 (cve-2015-7182): several issues existed within the asn.1 decoder used by nss for handling streaming ber data. ...
...cribed in the "security advisories" section below. distribution information the hg tag is nss_3_20_1_rtm. nss 3.20.1 requires nspr 4.10.10 or newer. nss 3.20.1 and nspr 4.10.10 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_20_1_rtm/src/ https://ftp.mozilla.org/pub/nspr/
releases/v4.10.10/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.20.1. users are encouraged to upgrade immediately. bug 1192028 (cve-2015-7181) and bug 1202868 (cve-2015-7182): several issues existed within the asn.1 decoder used by nss for handling streaming ber data. while the majority of nss uses a separate, unaffected der decoder, several public ...
...And 2 more matches
NSS 3.21 release notes
2016-01-07, this page has been updated to include additional information about the
release. the sections "security fixes" and "acknowledgements" have been added. introduction the nss team has
released network security services (nss) 3.21, which is a minor
release. distribution information the hg tag is nss_3_21_rtm. nss 3.21 requires nspr 4.10.10 or newer. nss 3.21 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_21_rtm/src/ security fixes in nss 3.21 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures. new in nss 3.21 new functionality certutil now supports a --rename option to change a nickname (bug 1142209) tls extended mas...
... in secmod.h secmod_createmoduleex - create a new secmodmodule structure from module name string, module parameters string, nss specific parameters string, and nss configuration parameter string. the module represented by the module structure is not loaded. the difference with secmod_createmodule is the new function handles nss configuration parameter strings. ...
...or ckm_tls12_master_key_derive ck_tls12_key_mat_params{_ptr} - parameters {or pointer} for ckm_tls12_key_and_mac_derive ck_tls_kdf_params{_ptr} - parameters {or pointer} for ckm_tls_kdf ck_tls_mac_params{_ptr} - parameters {or pointer} for ckm_tls_mac in sslt.h sslhashtype - identifies a hash function sslsignatureandhashalg - identifies a signature and hash function sslp
reliminarychannelinfo - provides information about the session state prior to handshake completion new macros in nss.h nss_rsa_min_key_size - used with nss_optionset and nss_optionget to set or get the minimum rsa key size nss_dh_min_key_size - used with nss_optionset and nss_optionget to set or get the minimum dh key size nss_dsa_min_key_size - used with nss_optionset and nss_...
...And 2 more matches
NSS 3.27.1 release notes
notable changes in nss 3.27.1 availability of the tls 1.3 (draft) implementation has been re-disabled in the default build. ...
... notable changes in nss 3.27.1 availability of the tls 1.3 (draft) implementation has been re-disabled in the default build. ...
... notable changes in nss 3.27.1 availability of the tls 1.3 (draft) implementation has been re-disabled in the default build. previous versions of nss made tls 1.3 (draft) available only when compiled with nss_enable_tls_1_3. ...
...And 2 more matches
NSS 3.28 release notes
this includes a number of improvements to tls 1.3: the signed certificate timestamp, used in certificate transparency, is supported in tls 1.3 (bug 1252745). key exporters for tls 1.3 are supported (bug 1310610). ...
... this includes a number of improvements to tls 1.3: the signed certificate timestamp, used in certificate transparency, is supported in tls 1.3 (bug 1252745). key exporters for tls 1.3 are supported (bug 1310610). ...
...res when sending a clienthello. ssl_signatureschemeprefset allows an application to set which signature schemes should be supported in tls and to specify the preference order of those schemes. ssl_signatureschemeprefget allows an application to learn the currently supported and enabled signature schemes for a socket. request to test and prepare for tls 1.3 this
release contains improved support for tls 1.3, however, the code that supports tls 1.3 is still disabled by default (not built). for the future nss 3.29
release, it is planned that standard builds of nss will support the tls 1.3 protocol (although the maximum tls protocol version enabled by default will remain at tls 1.2). we know that some applications which use nss, query nss for the supported ra...
...And 2 more matches
NSS 3.36.2 release notes
bugs fixed in nss 3.36.2 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_malformed_server_hello error. bug 1460673 - fix a rare bug with pkcs#12 files. ...
... bugs fixed in nss 3.36.2 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_malformed_server_hello error. bug 1460673 - fix a rare bug with pkcs#12 files. ...
... bugs fixed in nss 3.36.2 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_malformed_server_hello error. bug 1460673 - fix a rare bug with pkcs#12 files. ...
...And 2 more matches
NSS 3.37.1 release notes
bugs fixed in nss 3.37.1 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_malformed_server_hello error. bug 1460673 - fix a rare bug with pkcs#12 files. ...
... bugs fixed in nss 3.37.1 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_malformed_server_hello error. bug 1460673 - fix a rare bug with pkcs#12 files. ...
... bugs fixed in nss 3.37.1 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_malformed_server_hello error. bug 1460673 - fix a rare bug with pkcs#12 files. ...
...And 2 more matches
NSS 3.37.3 release notes
pk11or webauthn. ...
...pk11or webauthn. ...
...pk11or webauthn. compatibility nss 3.37.3 shared libraries are backward compatible with all older nss 3.x shared libraries. ...
...And 2 more matches
NSS 3.43 release notes
new in nss 3.43 new functionality new functions in sechash.h hash_gethashoidtagbyhashtype - convert type hash_hashtype to type secoidtag in sslexp.h ssl_sendcertificaterequest - allow server to request post-handshake client authentication. ...
... new in nss 3.43 new functionality new functions in sechash.h hash_gethashoidtagbyhashtype - convert type hash_hashtype to type secoidtag in sslexp.h ssl_sendcertificaterequest - allow server to request post-handshake client authentication. ...
... new in nss 3.43 new functionality new functions in sechash.h hash_gethashoidtagbyhashtype - convert type hash_hashtype to type secoidtag in sslexp.h ssl_sendcertificaterequest - allow server to request post-handshake client authentication. to use this both peers need to enable the ssl_enable_post_handshake_auth option. ...
...And 2 more matches
NSS 3.51 release notes
notable changes in nss 3.51 updated dtls 1.3 implementation to draft-34. see bug 1608892 for details. bugs fixed in nss 3.51 bug 1608892 - update dtls 1.3 implementation to draft-34. ...
... notable changes in nss 3.51 updated dtls 1.3 implementation to draft-34. see bug 1608892 for details. bugs fixed in nss 3.51 bug 1608892 - update dtls 1.3 implementation to draft-34. ...
... notable changes in nss 3.51 updated dtls 1.3 implementation to draft-34. see bug 1608892 for details. bugs fixed in nss 3.51 bug 1608892 - update dtls 1.3 implementation to draft-34. ...
...And 2 more matches
NSS 3.54 release notes
notable changes in nss 3.54 support for tls 1.3 external pre-shared keys (bug 1603042). use arm cryptography extension for sha256, when available. (bug 1528113). ...
... notable changes in nss 3.54 support for tls 1.3 external pre-shared keys (bug 1603042). use arm cryptography extension for sha256, when available. (bug 1528113). ...
... notable changes in nss 3.54 support for tls 1.3 external pre-shared keys (bug 1603042). use arm cryptography extension for sha256, when available. (bug 1528113). ...
...And 2 more matches
NSS 3.55 release notes
notable changes in nss 3.55 p384 and p521 elliptic curve implementations are replaced with verifiable implementations from fiat-crypto and ecckiila. ...
... notable changes in nss 3.55 p384 and p521 elliptic curve implementations are replaced with verifiable implementations from fiat-crypto and ecckiila. special thanks to the network and information security group (nisec) at tampere university. ...
... notable changes in nss 3.55 p384 and p521 elliptic curve implementations are replaced with verifiable implementations from fiat-crypto and ecckiila. special thanks to the network and information security group (nisec) at tampere university. pk11_findcertinslot is added. ...
...And 2 more matches
NSS_3.12.3_release_notes.html
nss 3.12.3
release notes 2009-04-01 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12.3 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12.3 is a patch
release for nss 3.12. the bug fixes in nss 3.12.3 are described in the "bugs fixed" section below. nss 3.12.3 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.3
release is nss_3_12_3_rtm. nss 3.12.3 requires nspr 4.7.4. see the documentation section for the build instructions. ...
...both debug and optimized builds are provided. go to the subdirectory for your platform, dbg (debug) or opt (optimized), to get the tar.gz or zip file. ...
...both debug and optimized builds are provided. ...
...And 2 more matches
GetAccessibleRelated
« nsiaccessible page summary this method returns an accessible
related to this one by the given
relation type. nsiaccessible getaccessible
related( in unsigned long a
relationtype ); parameters a
relationtype[in] the
relation type between the accessible (see constants listed in
relations documentation). return value returns an accessible which is
related to the one provided by the given
relation type. ...
...g a
relationtype ); parameters a
relationtype[in] the
relation type between the accessible (see constants listed in
relations documentation). return value returns an accessible which is
related to the one provided by the given
relation type. ...
...ation type between the accessible (see constants listed in
relations documentation). return value returns an accessible which is
related to the one provided by the given
relation type. ...
...And 2 more matches
RelationsCount
« nsiaccessible page summary returns the number of accessible
relations for this object. ...
... « nsiaccessible page summary returns the number of accessible
relations for this object. ...
... « nsiaccessible page summary returns the number of accessible
relations for this object. ...
...And 2 more matches
NS_RELEASE
summary macro decrements the reference count of a pointer by one. this macro also sets the pointer to null. ...
... summary macro decrements the reference count of a pointer by one. this macro also sets the pointer to null. ...
... summary macro decrements the reference count of a pointer by one. this macro also sets the pointer to null. ...
...And 2 more matches
HTMLBRElement - Web APIs
the htmlb
relement interface represents a html line break element (<br>). it inherits from htmlelement. ...
... the htmlb
relement interface represents a html line break element (<br>). it inherits from htmlelement. ...
...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/htmlb
relement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlb
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits proper...
...And 2 more matches
ReadableStreamDefaultReader.releaseLock() - Web APIs
return value undefined. exceptions typeerror the source object is not a readablestreamdefaultreader, or a read request is pending. ...
... return value undefined. exceptions typeerror the source object is not a readablestreamdefaultreader, or a read request is pending. ...
... return value undefined. exceptions typeerror the source object is not a readablestreamdefaultreader, or a read request is pending. ...
...And 2 more matches
SVGAnimateColorElement - Web APIs
the svganimatecolo
relement interface corresponds to the <animatecolor> element. ...
... the svganimatecolo
relement interface corresponds to the <animatecolor> element. ...
...rface corresponds to the <animatecolor> element. ...
...And 2 more matches
SVGCursorElement - Web APIs
the svgcurso
relement interface provides access to the properties of <cursor> elements, as well as methods to manipulate them. ...
... the svgcurso
relement interface provides access to the properties of <cursor> elements, as well as methods to manipulate them. ...
...,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcurso
relement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcurso
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interfa...
...And 2 more matches
SVGFEComponentTransferElement - Web APIs
the svgfecomponenttransfe
relement interface corresponds to the <fecomponenttransfer> element. ...
... the svgfecomponenttransfe
relement interface corresponds to the <fecomponenttransfer> element. ...
...monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecomponenttransfe
relement" target="_top"><rect x="191" y="65" width="290" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecomponenttransfe
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
...And 2 more matches
ServiceWorkerRegistration.navigationPreload - Web APIs
working draft initial definition. browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... working draft initial definition. browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... working draft initial definition. browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...And 2 more matches
Creating a Release Tag - Archive of obsolete content
warning: the content of this article may be out of date. it has not been updated for usage of mercurial. here are directions for creating a
release from a linux system. note that there are a couple of extra files for win32 and macintosh that aren't pulled by the normal script and need to be pulled by hand. the mini-branch is created so you can check in the build scripts with the necessary changes without touching the original branch. check out mozilla from the branch you want to tag. remember to also check out extra mac and win32 files that aren't normally checked out on linux or the tag won't build on those platforms. ...
...y the normal script and need to be pulled by hand. the mini-branch is created so you can check in the build scripts with the necessary changes without touching the original branch. check out mozilla from the branch you want to tag. remember to also check out extra mac and win32 files that aren't normally checked out on linux or the tag won't build on those platforms. cvs co -r netscape_6_2_
release mozilla/client.mk cd mozilla gmake -f client.mk checkout create a mini branch for the pull scripts on all three platforms so we can change them without changing anything on the original branch. cd .. cvs tag -b mozilla_0_9_4_1_
release_mini_branch mozilla/client.mk delete the existing build scripts and repull them from the mini-branch you just created. rm mozilla/client.mk ...
...mozilla gmake -f client.mk checkout create a mini branch for the pull scripts on all three platforms so we can change them without changing anything on the original branch. cd .. cvs tag -b mozilla_0_9_4_1_
release_mini_branch mozilla/client.mk delete the existing build scripts and repull them from the mini-branch you just created. rm mozilla/client.mk cvs co -r mozilla_0_9_4_1_
release_mini_branch mozilla/client.mk in each of the build scripts find the variables defining the branch and change it from the branch you originally pulled from to the new tag you are creating. mozilla/client.mk check the build scripts back in to the mini-branch. cvs ci mozilla/client.mk create the tag. find . -type d \! -name cvs | xargs -l -p10 cvs tag -l mozilla_0_...
...ini_branch mozilla/client.mk in each of the build scripts find the variables defining the branch and change it from the branch you originally pulled from to the new tag you are creating. mozilla/client.mk check the build scripts back in to the mini-branch. cvs ci mozilla/client.mk create the tag. find . -type d \! -name cvs | xargs -l -p10 cvs tag -l mozilla_0_9_4_1_
release >& ../taglog original document information author(s): dawn endico last updated date: november 1, 2005 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...
4.3 Release Notes
release date: 01 april 2009 introduction network security services for java (jss) 4.3 is a minor
release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path validation library pkcs11 needslogin method support hmacsha256, hmacsha384, and hmacsha512 support for all nss 3.12 initialization options jss 4.3 is tri-licensed under mpl 1.1/gpl 2.0/lgpl 2.1. 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. new sqlite-based shareable certificate and key databases by prepending the string "sql:" to the directory path passed to configdir parameter for crypomanager.initial...
...ith_camellia_256_cbc_sha tls_dh_rsa_with_camellia_256_cbc_sha tls_dh_anon_with_camellia_256_cbc_sha tls_ecdh_anon_with_null_sha tls_ecdh_anon_with_rc4_128_sha tls_ecdh_anon_with_3des_ede_cbc_sha tls_ecdh_anon_with_aes_128_cbc_sha tls_ecdh_anon_with_aes_256_cbc_sha distribution information jss is checked into mozilla/security/jss/. the cvs tag for the jss 4.3
release is jss_4_3_rtm. source tarballs are available from https://archive.mozilla.org/pub/security/jss/
releases/jss_4_3_rtm/src/jss-4.3.tar.bz2 binary
releases are no longer available on mozilla. jss is a jni library we provide the jss4.jar but expect you to build the jss's matching jni shared library. we provide the jss4.jar in case you do not want to obtain your own jce code signing certificate.
...jss_4_3_rtm/src/jss-4.3.tar.bz2 binary
releases are no longer available on mozilla. jss is a jni library we provide the jss4.jar but expect you to build the jss's matching jni shared library. we provide the jss4.jar in case you do not want to obtain your own jce code signing certificate. jss is a jce provider and therefore the jss4.jar must be signed. https://archive.mozilla.org/pub/security/jss/
releases/jss_4_3_rtm/ documentation documentation for jss 4.3 is available as follows: build instructions for jss 4.3 javadoc [online] [zipped] read the instructions on using jss. source may be viewed with a browser (via the mxr tool) at http://mxr.mozilla.org/mozilla/source/security/jss/ the run time behavior of jss can be affected by the nss environment variables. platform informatio...
...bles. platform information jss 4.3 works with jdk versions 4 or higher we suggest the latest. jss 4.3 requires nss 3.12 or higher. jss 4.3 requires nspr 4.7.1 or higher. jss only supports the native threading model (no green threads). known bugs and issues for a list of reported bugs that have not yet been fixed, click here. note that some bugs may have been fixed since jss 4.3 was
released. compatibility jss 4.3 is backwards compatible with jss 4.2. applications compiled against jss 4.2 will work with jss 4.3. the 4.3 version of libjss4.so/jss4.dll must only be used with jss4.jar. in general, a jss jar file must be used with the jss shared library from the exact same
release. to obtain the version info from the jar file use, "system.out.println(org.mozilla.jss.cryptom...
JSS 4.4.0 Release Notes
support for ipv6. ...
... support for ipv6. ...
... support for ipv6. support for tls v1.1 and tls v1.2 via nss though jss. ...
....28.3 is recommended. jss 4.3.1 requires nspr 4.7.1 or higher though nspr 3.13 is recommended. jss only supports the native threading model (no green threads). compatibility jss 3.30 shared libraries are not backward compatible with all older jss 4.3.2 shared libraries. a program linked with older jss 4.3.2 shared libraries will not work with jss 4.4.0 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product jss). ...
NSS 3.12.4 release notes
nss 3.12.4 requires nspr 4.8. this is not a hard requirement. our qa tested nss 3.12.4 with nspr 4.8, but it should work with nspr 4.7.1 or later. ...
... nss 3.12.4 requires nspr 4.8. this is not a hard requirement. our qa tested nss 3.12.4 with nspr 4.8, but it should work with nspr 4.7.1 or later. ...
...nt. our qa tested nss 3.12.4 with nspr 4.8, but it should work with nspr 4.7.1 or later. you can check out the source from cvs by cvs co -r nspr_4_8_rtm nspr cvs co -r nss_3_12_4_rtm nss see the documentation section for the build instructions. nss 3.12.4 source is also available on ftp.mozilla.org for secure https download: source tarball: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_12_4_rtm/src/. major changes in nss 3.12.4 nss 3.12.4 is the version that we submitted to nist for fips 140-2 validation. 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). cert_decodecrlissuingdistributionpoint cert_fi...
...rogram problems bug 508259: pk11mode crashed on linux2.4 bug 508467: libpkix ocsp checker should use date argument to obtain the time for cert validity verification bug 510367: fix the utf8 characters in the nickname string for ac raíz certicamara s.a. documentation for a list of the primary nss documentation pages on developer.mozilla.org, see nss. new and revised documents available since the
release of nss 3.12 include the following: build instructions for nss 3.12.4 compatibility nss 3.12.4 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.12.4 shared libraries without recompiling or
relinking. furthermore, applications that restrict their use of nss apis to the functions listed ...
NSS 3.12.6 release notes
nss 3.12.6
release notes 2010-03-03 newsgroup: mozilla.dev.tech.crypto introduction network security services (nss) 3.12.6 is a patch
release for nss 3.12. the bug fixes in nss 3.12.6 are described in the "bugs fixed" section below. nss 3.12.6 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.6
release is nss_3_12_6_rtm. nss 3.12.6 requires nspr 4.8.4. see the documentation section for the build instructions. ...
...ibution information the cvs tag for the nss 3.12.6
release is nss_3_12_6_rtm. nss 3.12.6 requires nspr 4.8.4. see the documentation section for the build instructions. nss 3.12.6 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_12_6_rtm/src/. you also need to download the nspr 4.8.4 binary distributions to get the nspr 4.8.4 header files and shared libraries, which nss 3.12.6 requires. nspr 4.8.4 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/
releases/v4.8.4/. new in nss 3.12.6 ssl3 & tls renegotiation indication ex...
...ion extension. the behavior of nss for renegotiation can be changed through api function calls, or with the following environment variables: nss_ssl_enable_renegotiation values: [0|n|n]: ssl_renegotiate_never never allow renegotiation - that was the default for 3.12.5
release. [1|u|u]: ssl_renegotiate_unrestricted server and client are allowed to renegotiate without any restrictions. this setting was the default prior 3.12.5 and makes products vulnerable. [2|r|r]: ssl_renegotiate_requires_xtn (default) ...
...ting 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. new and revised documents available since the
release of nss 3.11 include the following: build instructions nss shared db compatibility nss 3.12.6 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.12.6 shared libraries without recompiling or
relinking. furthermore,...
NSS 3.12.9 release notes
<center> 2010-09-23</center> <center> newsgroup: mozilla.dev.tech.crypto</center> introduction network security services (nss) 3.12.9 is a patch
release for nss 3.12. the bug fixes in nss 3.12.9 are described in the "bugs fixed" section below. nss 3.12.9 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.9
release is nss_3.12.9_rtm. nss 3.12.9 requires nspr 4.8.7. see the documentation section for the build instructions. nss 3.12.9 source distribution is also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3.12.9_rtm/src/. you also need to download the nspr 4.8.7 binary distributions to get the nspr 4.8.7 header files and sha...
... new in nss 3.12.9 removed functions new ssl options new error codes bugs fixed the following bugs have been fixed in nss 3.12.9. ...
...a program linked with older nss 3.x shared libr...
...g 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. new and revised documents available since the
release of nss 3.11 include the following:</for> build instructions for nss 3.11.4 and above nss shared db compatibility nss 3.12.9 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.12.9 shared libraries without recompiling or
relinking. furthermore, applications that restrict their ...
NSS 3.14.1 release notes
the ability to create signed ocsp responses has been added in nss 3.14.1. ...
...nss 3.14. the bug fixes in nss 3.14.1 are described in the "bugs fixed" section below. nss 3.14.1 is licensed under the mpl 2.0. distribution information the cvs tag is nss_3_14_1_rtm. nss 3.14.1 requires nspr 4.9.4 or newer. nss 3.14.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_14_1_rtm/src/ new in nss 3.14.1 new functionality nss now has the ability to create signed ocsp responses. the ability to create signed ocsp responses has been added in nss 3.14.1. note that this code is used primarily for purposes of testing. new functions in ocspt.h cert_createocspsingleresponsegood cert_createocspsingleresponseunknown ...
...e most recently added pkcs#11 token that supported them. bug 611451 - when built with the current version of apple xcode on mac os x, the nss shared libraries will now only export the public nss functions. bug 810582 - tls false start is now only used with servers that negotiate a cipher suite that supports forward secrecy. note: the criteria for false start may change again in future nss
releases. 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. a program link...
...: 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. a program linked with older nss 3.x shared libraries will work with nss 3.14.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered in this
release should be reported by filing a bug report at https://bugzilla.mozilla.org with the product of nss. ...
NSS 3.14 release notes
for more information about mpl 2.0, please see http://www.mozilla.org/mpl/2.0/faq.html. ...
...for more information about mpl 2.0, please see http://www.mozilla.org/mpl/2.0/faq.html. ...
...tal support for dtls 1.0 (rfc 4347) and dtls-srtp (rfc 5764) support for aes-ctr, aes-cts, and aes-gcm support for keying material exporters for tls (rfc 5705) in addition to the above new features, the following major changes have been introduced: support for certificate signatures using the md5 hash algorithm is now disabled by default. the nss license has changed to mpl 2.0. previous
releases were
released under a mpl 1.1/gpl 2.0/lgpl 2.1 tri-license. for more information about mpl 2.0, please see http://www.mozilla.org/mpl/2.0/faq.html. for an additional explantation on gpl/lgpl compatibility, see security/nss/copying in the source code. export and des cipher suites are disabled by default. non-ecc aes and triple des cipher suites are enabled by default. nss 3.14 source tarba...
...mation about mpl 2.0, please see http://www.mozilla.org/mpl/2.0/faq.html. for an additional explantation on gpl/lgpl compatibility, see security/nss/copying in the source code. export and des cipher suites are disabled by default. non-ecc aes and triple des cipher suites are enabled by default. nss 3.14 source tarballs can be downloaded from https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_14_rtm/src/. the cvs tag is nss_3_14_rtm. new in nss 3.14 the sections that follow discuss specific changes in nss 3.14 in more detail. support for tls 1.1 (rfc 4346) has been added (https://bugzilla.mozilla.org/show_bug.cgi?id=565047). to better support tls 1.1 and future versions of tls, a new version range api was introduced to allow applications to specify the desired...
NSS 3.16.2.2 release notes
notable changes in nss 3.16.2.2 bug 1049435: change rsa_privatekeycheck to not require p > q. ...
... notable changes in nss 3.16.2.2 bug 1049435: change rsa_privatekeycheck to not require p > q. ...
...ion below. distribution information the hg tag is nss_3_16_2_2_rtm. nss 3.16.2.2 requires nspr 4.10.6 or newer. nss 3.16.2.2 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_2_2_rtm/src/ new in nss 3.16.2.2 new functionality no new functionality is introduced in this
release. this is a patch
release to fix a regression. notable changes in nss 3.16.2.2 bug 1049435: change rsa_privatekeycheck to not require p > q. this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries. bugs fixed in nss 3.16.2.2 bug 1049435 - importing an rsa private key fails ...
...rivate keys (such as in pkcs #12 files) generated by other crypto libraries. bugs fixed in nss 3.16.2.2 bug 1049435 - importing an rsa private key fails if p < q compatibility nss 3.16.2.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.16.2.2 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.16.6 release notes
notable changes in nss 3.16.6 bug 1049435: change rsa_privatekeycheck to not require p > q. ...
... notable changes in nss 3.16.6 bug 1049435: change rsa_privatekeycheck to not require p > q. ...
...ixed" section below. distribution information the hg tag is nss_3_16_6_rtm. nss 3.16.6 requires nspr 4.10.6 or newer. nss 3.16.6 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_6_rtm/src/ new in nss 3.16.6 new functionality no new functionality is introduced in this
release. this is a patch
release to fix a regression. notable changes in nss 3.16.6 bug 1049435: change rsa_privatekeycheck to not require p > q. this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries. bugs fixed in nss 3.16.6 bug 1049435 - importing an rsa private key fails if p...
... rsa private keys (such as in pkcs #12 files) generated by other crypto libraries. bugs fixed in nss 3.16.6 bug 1049435 - importing an rsa private key fails if p < q compatibility nss 3.16.6 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.16.6 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.17.2 release notes
notable changes in nss 3.17.2 bug 1049435: change rsa_privatekeycheck to not require p > q. ...
...notable changes in nss 3.17.2 bug 1049435: change rsa_privatekeycheck to not require p > q. ...
..."bugs fixed" section below. distribution information the hg tag is nss_3_17_2_rtm. nss 3.17.2 requires nspr 4.10.7 or newer. nss 3.17.2 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_17_2_rtm/src/ new in nss 3.17.2 new functionality no new functionality is introduced in this
release. this is a patch
release to fix a regression and other bugs. notable changes in nss 3.17.2 bug 1049435: change rsa_privatekeycheck to not require p > q. this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries. bug 1057161: check that an imported elliptic curve public key is vali...
...l 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. a program linked with older nss 3.x shared libraries will work with nss 3.17.2 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.19.1 release notes
introduction network security services (nss) 3.19.1 is a security
release for nss 3.19. the bug fixes in nss 3.19.1 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_19_1_rtm. nss 3.19.1 requires nspr 4.10.8 or newer. nss 3.19.1 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_19_1_rtm/src/ security fixes in nss 3.19.1 bug 1138554 / cve-2015-4000 - the minimum strength of keys that libssl will accept for finite field algorithms (rsa, diffie-hellman, and dsa) have been increased to 1023 bits. ...
... notable changes in nss 3.19.1 nss reports the bit length of keys more accurately. thus, the seckey_publickeystrength and seckey_publickeystrengthinbits functions could report smaller values for values that have leading zero values. ...
... notable changes in nss 3.19.1 nss reports the bit length of keys more accurately. thus, the seckey_publickeystrength and seckey_publickeystrengthinbits functions could report smaller values for values that have leading zero values. ...
...lestone=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. compatibility nss 3.19.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.19.1 shared libraries without recompiling or
relinking. 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. note: nss 3.19.1 increases the minimum size of keys it is willing to use. this has been shown to break some applications. nss 3.19.2 reverts the behaviour to the nss 3.19 and earlier limits. feedback bugs d...
NSS 3.19.2.1 release notes
users are encouraged to upgrade immediately. ...
...ease for nss 3.19.2. the bug fixes in nss 3.19.2.1 are described in the "security advisories" section below. distribution information the hg tag is nss_3_19_2_1_rtm. nss 3.19.2.1 requires nspr 4.10.10 or newer. nss 3.19.2.1 and nspr 4.10.10 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_19_2_1_rtm/src/ https://ftp.mozilla.org/pub/nspr/
releases/v4.10.10/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.19.2.1. users are encouraged to upgrade immediately. bug 1192028 (cve-2015-7181) and bug 1202868 (cve-2015-7182): several issues existed within the asn.1 decoder used by nss for handling streaming ber data. while the majo...
...68 (cve-2015-7182): several issues existed within the asn.1 decoder used by nss for handling streaming ber data. while the majority of nss uses a separate, unaffected der decoder, several public routines also accept ber data, and thus are affected. an attacker that successfully exploited these issues can overflow the heap and may be able to obtain remote code execution. the following security-
relevant bugs have been resolved in nspr 4.10.10, which affect nss. because nss includes portions of the affected nspr code at build time, it is necessary to use nspr 4.10.10 when building nss. bug 1205157 (nspr, cve-2015-7183): a logic bug in the handling of large allocations would allow exceptionally large allocations to be reported as successful, without actually allocating the requested mem...
...lding nss. bug 1205157 (nspr, cve-2015-7183): a logic bug in the handling of large allocations would allow exceptionally large allocations to be reported as successful, without actually allocating the requested memory. this may allow attackers to bypass security checks and obtain control of arbitrary memory. new in nss 3.19.2.1 new functionality no new functionality is introduced in this
release. this is a patch
release to fix security-
relevant bugs. compatibility nss 3.19.2.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.19.2.1 shared libraries without recompiling or
relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss pub...
NSS 3.19 release notes
this was also known as smack. new in nss 3.19 new functionality for some certificates, such as root ca certificates that don't embed any constraints, nss might impose additional constraints such as name constraints. ...
...this was also known as smack. new in nss 3.19 new functionality for some certificates, such as root ca certificates that don't embed any constraints, nss might impose additional constraints such as name constraints. ...
...this was also known as smack. new in nss 3.19 new functionality for some certificates, such as root ca certificates that don't embed any constraints, nss might impose additional constraints such as name constraints. ...
...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. compatibility nss 3.19 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.19 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.21.3 release notes
security fixes in nss 3.21.3 bug 1306103 / cve-2016-5285 - fixed a possible dos on nss servers due to a missing null check. ...
... security fixes in nss 3.21.3 bug 1306103 / cve-2016-5285 - fixed a possible dos on nss servers due to a missing null check. bug 1221620 - fixed a possible left-shift of a negative integer value when parsing der. ...
...xes" section below. distribution information the hg tag is nss_3_21_3_rtm. nss 3.21.3 requires nspr 4.10.10 or newer. nss 3.21.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_21_3_rtm/src/ new in nss 3.21.3 new functionality no new functionality is introduced in this
release. security fixes in nss 3.21.3 bug 1306103 / cve-2016-5285 - fixed a possible dos on nss servers due to a missing null check. bug 1221620 - fixed a possible left-shift of a negative integer value when parsing der. bug 1206283 - fixed an out-of-bound read when parsing invalid utf-16. bug 1241034 - fixed an out-of-bounds write when parsing invalid utf-16. bug 1241037 - fixed bogus surrog...
...rsing invalid utf-16. bug 1241034 - fixed an out-of-bounds write when parsing invalid utf-16. bug 1241037 - fixed bogus surrogate detection when parsing invalid utf-16. compatibility nss 3.21.3 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.21.3 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.23 release notes
this code is not ready for production use. new functions in ssl.h ssl_setdowngradecheckversion - set maximum version for new serverrandom anti-downgrade mechanism. ...
...this code is not ready for production use. new functions in ssl.h ssl_setdowngradecheckversion - set maximum version for new serverrandom anti-downgrade mechanism. ...
...an attacker could create a specially-crafted certificate which, when parsed by nss, would cause a crash or execution of arbitrary code with the permissions of the user. 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_forma...
...&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. compatibility nss 3.23 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.23 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.28.3 release notes
introduction network security services (nss) 3.28.3 is a patch
release for nss 3.28. the bug fixes in nss 3.28.3 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_28_3_rtm. nss 3.28.3 requires netscape portable runtime (nspr) 4.13.1 or newer. nss 3.28.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/
releases/nss_3_28_3_rtm/src/ new in nss 3.28.3 new functionality no new functionality is introduced in this
release. this is a patch
release to fix binary compatibility issues. bugs fixed in nss 3.28.3 nss version 3.28, 3.28.1 and 3.28.2 contained changes that were in violation with the nss compatibility promise. ecparams, which is part of ...
...ey, nsslowkeypublickey, nsslowkeyprivatekey, or potentially other data structures that reference ecparams. the change has been reverted to the original state in bug 1334108. seckeyecpublickey had been extended with a new attribute, named "encoding". if an application passed type seckeyecpublickey to nss (as part of seckeypublickey), the nss library read the uninitialized attribute. with this nss
release seckeyecpublickey.encoding is deprecated. nss no longer reads the attribute, and will always set it to ecpoint_undefined. see bug 1340103. compatibility nss 3.28.3 shared libraries are backward compatible with most older nss 3.x shared libraries, but depending on your application, may be incompatible, if you application has been compiled against header files of versions 3.28, 3.28.1, or 3.2...
...red libraries are backward compatible with most older nss 3.x shared libraries, but depending on your application, may be incompatible, if you application has been compiled against header files of versions 3.28, 3.28.1, or 3.28.2. a program linked with most older nss 3.x shared libraries (excluding the exceptions mentioned above), will work with nss 3.28.3 shared libraries without recompiling or
relinking. 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. if you had compiled your application against header files of nss 3.28, nss 3.28.1 or nss 3.28.2, it it recommended that you recompile your application against nss 3.28.3, at the time you upgrade to nss 3.28.3...
...e nss shared libraries. if you had compiled your application against header files of nss 3.28, nss 3.28.1 or nss 3.28.2, it it recommended that you recompile your application against nss 3.28.3, at the time you upgrade to nss 3.28.3. please note that nss 3.29 also contained the incorrect change. you should avoid using nss 3.29, and rather use nss 3.29.1 or a newer version. see also the separate
release notes for nss 3.29.1 feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.29.3 release notes
notable changes in nss 3.29.3 a rare crash when initializing an ssl socket fails has been fixed. ...
... notable changes in nss 3.29.3 a rare crash when initializing an ssl socket fails has been fixed. ...
...ibed in the "bugs fixed" section below. distribution information the hg tag is nss_3_29_3_rtm. nss 3.29.3 requires nspr 4.13.1 or newer. nss 3.29.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_29_3_rtm/src/ new in nss 3.29.3 no new functionality is introduced in this
release. notable changes in nss 3.29.3 a rare crash when initializing an ssl socket fails has been fixed. bugs fixed in nss 3.29.3 bug 1342358 - crash in tls13_destroykeyshares compatibility nss 3.29.3 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.29.3 shared libraries without recomp...
...table changes in nss 3.29.3 a rare crash when initializing an ssl socket fails has been fixed. bugs fixed in nss 3.29.3 bug 1342358 - crash in tls13_destroykeyshares compatibility nss 3.29.3 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.29.3 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.29 release notes
tls 1.3 is now enabled by default in (bug1311296). ...
... tls 1.3 is now enabled by default in (bug1311296). ...
... tls 1.3 is now enabled by default in (bug1311296). ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.29 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.36.4 release notes
pk11or webauthn. ...
...pk11or webauthn. ...
...pk11or webauthn. compatibility nss 3.36.4 shared libraries are backward compatible with all older nss 3.x shared libraries. ...
...nss 3.36. distribution information the hg tag is nss_3_36_4_rtm. nss 3.36.4 requires nspr 4.19 or newer. nss 3.36.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/
releases/nss_3_36_4_rtm/src/ new in nss 3.36.4 new functionality no new functionality is introduced in this
release. this is a patch
release to fix regression bugs. bugs fixed in nss 3.36.4 bug 1461731 - fix crash on macos
related to authentication tokens, e.g. pk11or webauthn. compatibility nss 3.36.4 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.36.4 shared libraries without recompiling or
relinking. furtherm...
NSS 3.40 release notes
this is a c++ library for building certification paths. ...
... this is a c++ library for building certification paths. ...
... this is a c++ library for building certification paths. ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.40 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.41 release notes
bug 1423043 - enable half-closed states for tls. ...
... bug 1423043 - enable half-closed states for tls. ...
... bug 1423043 - enable half-closed states for tls. ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.41 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.44 release notes
new in nss 3.44 new functionality new functions in lib/certdb/cert.h cert_getcertificateder - access the der-encoded form of a certcertificate. ...
... new in nss 3.44 new functionality new functions in lib/certdb/cert.h cert_getcertificateder - access the der-encoded form of a certcertificate. notable changes in nss 3.44 it is now possible to build nss as a static library (bug 1543545) initial support for building for ios. ...
...ke to recognize first-time contributors: kevin jacobs, david carlier, alexander scheel, and edouard oger. distribution information the hg tag is nss_3_44_rtm. nss 3.44 requires nspr 4.21 or newer. nss 3.44 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_44_rtm/src/ other
releases are available in nss
releases. new in nss 3.44 new functionality new functions in lib/certdb/cert.h cert_getcertificateder - access the der-encoded form of a certcertificate. notable changes in nss 3.44 it is now possible to build nss as a static library (bug 1543545) initial support for building for ios. bugs fixed in nss 3.44 1501542 - implement checkarmsupport...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.44 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.45 release notes
introduction the nss team has
released network security services (nss) 3.45 on 5 july 2019, which is a minor
release. the nss team would like to recognize first-time contributors: bastien abadie christopher patton jeremie courreges-anglas marcus burghardt michael shigorin tomas mraz distribution information the hg tag is nss_3_45_rtm. nss 3.45 requires nspr 4.21 or newer. nss 3.45 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_45_rtm/src/ other
releases are available in nss
releases. new in nss 3.45 new functionality new functions in pk11pub.h: pk11_findrawcertswithsubject - finds all certificates on the given slot with the given subj...
... the experimental function ssl_initantireplay is removed. bug 1546477 - various changes in response to the ongoing fips review note: the source package size has increased substantially due to the new fips test vectors. this will likely prompt follow-on work, but please accept our apologies in the meantime. certificate authority changes the following c...
....3 (cve-2019-11727) bug 1227090 - fix a potential divide-by-zero in makepfromqandseed from lib/freebl/pqg.c (static analysis) bug 1227096 - fix a potential divide-by-zero in pqg_verifyparams from lib/freebl/pqg.c (static analysis) bug 1509432 - de-duplicate code between mp_set_long and mp_set_ulong bug 1515011 - fix a mistake with chacha20-poly1305 test code where tags could be faked. ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.45 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.46 release notes
introduction the nss team has
released network security services (nss) 3.46 on 30 august 2019, which is a minor
release. the nss team would like to recognize first-time contributors: giulio benetti louis dassy mike kaganski xhimanshuz distribution information the hg tag is nss_3_46_rtm. nss 3.46 requires nspr 4.22 or newer. nss 3.46 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_46_rtm/src/ other
releases are available in nss
releases. new in nss 3.46 this
release contains no significant new functionality, but concentrates on providing improved performance, stability, and security. of particular note are significant improvements to aes-gcm perfor...
... see bug 1573118 for details. tls extended master secret will be enabled by default, where possible. see bug 1575411 for details. bugs fixed in nss 3.46 bug 1572164 - don't unnecessarily free session in nsc_wrapkey bug 1574220 - improve controls after errors in tstcln, selfserv and vfyserv cmds bug 1550636 - upgrade sql...
...bug 1571316 - curve25519_32.c:280: undefined reference to `pr_assert' when building nss 3.45 on armhf-linux bug 1516593 - client to generate new random during renegotiation bug 1563258 - fips.sh fails due to non-existent "resp" directories bug 1561598 - remove -wmaybe-uninitialized warning in pqg.c bug 1560806 - increase softoken password max size to 500 characters bug 1568776 - output paths
relative to repository in nss coverity bug 1453408 - modutil -changepw fails in fips mode if password is an empty string bug 1564727 - use a pss spki when possible for delegated credentials bug 1493916 - fix ppc64 inline assembler for clang bug 1561588 - remove -wmaybe-uninitialized warning in p7env.c bug 1561548 - remove -wmaybe-uninitialized warning in pkix_pl_ldapdefaultclient.c bug 1512605 ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.46 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.48 release notes
notable changes in nss 3.48 tls 1.3 is the default maximum tls version. see bug 1573118 for details. tls extended master secret is enabled by default, where possible. ...
... notable changes in nss 3.48 tls 1.3 is the default maximum tls version. see bug 1573118 for details. tls extended master secret is enabled by default, where possible. see bug 1575411 for details. the master password pbe now uses 10,000 iterations by default when using the default sql (key4.db) storage. ...
...ike to recognize first-time contributors: craig disselkoen giulio benetti lauri kasanen tom prince distribution information the hg tag is nss_3_48_rtm. nss 3.48 requires nspr 4.24 or newer. nss 3.48 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_48_rtm/src/ other
releases are available in nss
releases. notable changes in nss 3.48 tls 1.3 is the default maximum tls version. see bug 1573118 for details. tls extended master secret is enabled by default, where possible. see bug 1575411 for details. the master password pbe now uses 10,000 iterations by default when using the default sql (key4.db) storage. because using an iteration count higher than 1 with...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.48 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.53 release notes
introduction the nss team
released network security services (nss) 3.53 on 29 may 2020. nss 3.53 will be a long-term support
release, supporting firefox 78 esr. the nss team would like to recognize first-time contributors: jan-marek glogowski jeff walden distribution information the hg tag is nss_3_53_rtm. nss 3.53 requires nspr 4.25 or newer. nss 3.53 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_53_rtm/src/ other
releases are available in nss
releases. notable changes in nss 3.53 when using the makefiles, nss can be built in parallel, speeding up those builds to more similar performance as the build.sh/ninja/gyp system. (bug 290526) seed is no...
...at that time, users will need to set the compile-time flag (bug 1622033) to disable that deprecation in order to use the algorithm. algorithms marked as deprecated will ultimately be removed. several root certificates in the mozilla program now set the cka_nss_server_distrust_after attribute, which nss consumers can query to further refine trust decisions. ...
...rect compilation error between vmx vs. vsx vector instructions bug 1639033 - fix various compile warnings in nss bug 1640041 - fix a null pointer in security/nss/lib/ssl/sslencode.c:67 bug 1640042 - fix a null pointer in security/nss/lib/ssl/sslsock.c:4460 bug 1638289 - avoid multiple definitions of sha{256,384,512}_* symbols when linking libfreeblpriv3.so in firefox on ppc64le bug 1636389 -
relocate deprecated seed algorithm bug 1637083 - lib/ckfw: no such file or directory. stop. bug 1561331 - additional modular inverse test bug 1629553 - rework and cleanup gmake builds bug 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 ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.53 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
GetRelation
« nsiaccessible page summary this method returns accessible
relation for this accessible object by index. nsiaccessible
relation get
relation( in unsigned long aindex ); parameters aindex[in] the index for which
relation is to be retrieved. return value returns nsiaccessible
relation object for this accessible. exception thrown ns_error_invalid_arg indicates that the given index is invalid. remark currently we do not support multiple
relations so the zero index may be valid only. refer to
relations documentation for more info. ...
...index ); parameters aindex[in] the index for which
relation is to be retrieved. return value returns nsiaccessible
relation object for this accessible. exception thrown ns_error_invalid_arg indicates that the given index is invalid. remark currently we do not support multiple
relations so the zero index may be valid only. refer to
relations documentation for more info. ...
...the index for which
relation is to be retrieved. return value returns nsiaccessible
relation object for this accessible. exception thrown ns_error_invalid_arg indicates that the given index is invalid. remark currently we do not support multiple
relations so the zero index may be valid only. refer to
relations documentation for more info. ...
...etrieved. return value returns nsiaccessible
relation object for this accessible. exception thrown ns_error_invalid_arg indicates that the given index is invalid. remark currently we do not support multiple
relations so the zero index may be valid only. refer to
relations documentation for more info. ...
GetRelations
« nsiaccessible page summary this method returns multiple accessible
relations for this accessible object. nsiarray get
relations(); return value returns nsiarray array of accessible
relations for this object, every accessible
relation object implements nsiaccessible
relation interface. ...
... « nsiaccessible page summary this method returns multiple accessible
relations for this accessible object. nsiarray get
relations(); return value returns nsiarray array of accessible
relations for this object, every accessible
relation object implements nsiaccessible
relation interface. ...
... « nsiaccessible page summary this method returns multiple accessible
relations for this accessible object. nsiarray get
relations(); return value returns nsiarray array of accessible
relations for this object, every accessible
relation object implements nsiaccessible
relation interface. ...
... « nsiaccessible page summary this method returns multiple accessible
relations for this accessible object. nsiarray get
relations(); return value returns nsiarray array of accessible
relations for this object, every accessible
relation object implements nsiaccessible
relation interface. ...
DynamicsCompressorNode.release - Web APIs
note: though the audioparam returned is read-only, the value it represents is not. example the below code demonstrates a simple usage of createdynamicscompressor() to add compression to an audio track. for a more complete example, have a look at our basic compressor example (view the source code). ...
... note: though the audioparam returned is read-only, the value it represents is not. ...
... into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); sourc...
... working draft ...
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. ...
...mlareaelement.
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. ...
...list 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. ...
...rce 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. living standard initial definition. ...
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. ...
...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. ...
...ellist 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. ...
...source 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. living standard initial definition. ...
NavigationPreloadManager - Web APIs
the navigationp
reloadmanager interface of the the service worker api provides methods for managing the p
reloading of resources with a service worker. methods navigationp
reloadmanager.enable() enables navigation p
reloading and returns a promise that resolves. navigationp
reloadmanager.disable() disables navigation p
reloading and returns a promise that resolves. navigationp
reloadmanager.setheadervalue() sets the value of the service-worker-navigation-p
reload header and returns an empty promise. navigationp
reloadmanager.getstate() returns a promise that resolves to an object with properties indicating whether p
reload is enabled and the contents of the service-worker-navigation-p
reload. ...
...t resolves. navigationp
reloadmanager.setheadervalue() sets the value of the service-worker-navigation-p
reload header and returns an empty promise. navigationp
reloadmanager.getstate() returns a promise that resolves to an object with properties indicating whether p
reload is enabled and the contents of the service-worker-navigation-p
reload. examples feature detecting and enabling navigation p
reloading addeventlistener('activate', event => { event.waituntil(async function() { if (self.registration.navigationp
reload) { // enable navigation p
reloads! await self.registration.navigationp
reload.enable(); } }()); }); using a p
reloaded response the following example shows the implementation of a fetch event that uses a p
reloaded response. addeventlistener('fetch', ...
...le(); } }()); }); using a p
reloaded response the following example shows the implementation of a fetch event that uses a p
reloaded response. 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 p
reloaded response, if it's there const response = await event.p
reloadresponse; if (response) return response; // else try the network. return fetch(event.request); }()); }); specifications specification status comment service workersthe definition of 'navigationp
reloadmanager' in that specification. working draft initial definition. browser co...
... browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
ReadableStreamBYOBReader.releaseLock() - Web APIs
return value undefined. exceptions typeerror the source object is not a readablestreambyobreader, or a read request is pending. examples tbd. ...
... return value undefined. exceptions typeerror the source object is not a readablestreambyobreader, or a read request is pending. examples tbd. ...
... return value undefined. exceptions typeerror the source object is not a readablestreambyobreader, or a read request is pending. examples tbd. ...
...ored when the lock is
released, the reader will appear errored in that same way subsequently; otherwise, the reader will appear closed. a reader’s lock cannot be
released while it still has a pending read request, i.e., if a promise returned by the reader’s readablestreambyobreader.read() method has not finished. this will result in a typeerror being thrown. syntax readablestreambyobreader.
releaselock(); parameters none. return value undefined. exceptions typeerror the source object is not a readablestreambyobreader, or a read request is pending. examples tbd. specifications specification status comment streamsthe definition of '
releaselock()' in that specification. living standard initial definition. ...
SVGFEFuncRElement - Web APIs
the svgfefunc
relement interface corresponds to the <fefuncr> element. ...
... the svgfefunc
relement interface corresponds to the <fefuncr> element. ...
...4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefunc
relement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefunc
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interfac...
... interface not provide any specific properties, but inherits properties from its parent interface, svgcomponenttransferfunctionelement. methods this interface does not provide any specific methods, but implements those of its parent, svgcomponenttransferfunctionelement. specifications specification status comment filter effects module level 1the definition of 'svgfefunc
relement' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfefunc
relement' in that specification. recommendation initial definition ...
SVGSolidcolorElement - Web APIs
the svgsolidcolo
relement interface corresponds to the <solidcolor> element. ...
... the svgsolidcolo
relement interface corresponds to the <solidcolor> element. ...
...interface corresponds to the <solidcolor> element. ...
...0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgsolidcolo
relement" target="_top"><rect x="1" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="101" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsolidcolo
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement. methods this interface doesn't implement any specific methods, but inherits methods from its parent interface, svgelement. ...
USBDevice.releaseInterface() - Web APIs
draft initial definition. ...
... draft initial definition. ...
... draft initial definition. ...
... the usbdevice interface returns a promise that resolves when a cliamed interface is
released from exclusive access. syntax var promise = usbdevice.
releaseinterface(interfacenumber) parameters interfacenumber the device-specific index of the currently-claimed interface. return value a promise. specifications specification status comment webusbthe definition of '
releaseinterface()' in that specification. draft initial definition. ...
Window.releaseEvents() - Web APIs
see also window.captureevents ( ). ...
... see also window.captureevents ( ). ...
... eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload. 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). see also window.captureevents ( ). specification this is not part of any specification. browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribut...
...ny specification. browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
te: css versions 1 and 2 were a single monolithic specification where all of css was defined in one large document. as css became a more feature rich language, maintaining one huge specification became problematic, with different parts of css moving on at different speeds. css was therefore modularised, and the various css specifications are different modules that make up css today. these modules
relate to each other, and are at different stages of development. the box alignment module for many people the first reason they start to look at flexbox is because of the ability to properly align flex items inside a flex container. flexbox provides access to properties that allow the alignment of items on their cross axis and justification of items on the main axis. these properties started lif...
...box spec is not held up by box alignment, which has to detail these methods for all layout types. there is a note in the flexbox spec stating that in the future, once it is completed, the definitions in box alignment level 3 will supersede those of flexbox: "note: while the alignment properties are defined in css box alignment [css-align-3], flexible box layout reproduces the definitions of the
relevant ones here so as to not create a normative dependency that may slow down advancement of the spec. these properties apply only to flex layout until css box alignment level 3 is finished and defines their effect for other layout modes. additionally, any new values defined in the box alignment module will apply to flexible box layout; in otherwords, the box alignment module, once completed, will...
...nd then placing items into them. in flexbox, while you create a flex container and set the direction at that level, any control over item sizing needs to happen on the items themselves. in some cases you could happily use either layout method, but as you become confident with both you will find each one suiting different layout needs, and you will end up with both methods in your css. there is ra
rely a right or wrong answer. as a rule of thumb, if you are adding widths to flex items in order to make items in one row of a wrapped flex container line up with the items above them you really want two-dimensional layout. in this case it is likely that the component would be better laid out using css grid layout. it isn't the case that you should use flexbox for small components and grid layout f...
... out using css grid layout. it isn't the case that you should use flexbox for small components and grid layout for larger ones; a tiny component can be two dimensional, and a large layout can be represented better with layout in one dimension. try things out — we have a choice in layout method for the first time, so take advantage of it. for more comparisons of grid and flexbox see the article
relationship of grid layout to other layout methods. this article details many of the ways that grid layout differs from flex layout, and demonstrates some of the extra functionality you get when using grid layout such as layering of items on the grid. this may also help in your decision as to which layout method to use. flexbox and display: contents the contents value of the display property is a ...
Intl.RelativeTimeFormat.supportedLocalesOf() - JavaScript
for the general form of the locales argument, see the intl page. options optional. ...
... 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. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax intl.
relativetimeformat.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings. for the general form of the locales argument, see the intl page. options optional. an object that may have the following property: localematcher the locale matching algorithm to use. possible values are "lookup" and "best fit"; the default is "...
...ate and time formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall back to the default locale. examples using supportedlocalesof assuming a runtime that supports indonesian and german but not balinese in date and time formatting, supportedlocalesof returns the indonesian and german language tags unchanged, even though pinyin collation is neither
relevant to date and time formatting nor used with indonesian, and a specialized german for indonesia is unlikely to be supported. note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well. const locales = ...
... is unlikely to be supported. note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well. const locales = ['ban', 'id-u-co-pinyin', 'de-id']; const options = { localematcher: 'lookup' }; console.log(intl.
relativetimeformat.supportedlocalesof(locales, options).join(', ')); // → "id-u-co-pinyin, de-id" specifications specification status comment ecmascript internationalization api (ecma-402)the definition of '
relativetimeformat.supportedlocalesof()' in that specification. stage 4 ...
related_applications - Web app manifests
type array mandatory no the
related_applications field is an array of objects specifying native applications that are installable by, or accessible to, the underlying platform — for example, a native android application obtainable through the google play store. such applications are intended to be alternatives to the manifest's website that provides similar/equivalent functionality — like the native app equivalent. note: developer can specify that the native applications are preferred over the web application by setting prefer_
related_applications to true. ...
...r example, a native android application obtainable through the google play store. such applications are intended to be alternatives to the manifest's website that provides similar/equivalent functionality — like the native app equivalent. note: developer can specify that the native applications are preferred over the web application by setting prefer_
related_applications to true. ...
...list of available values url the url at which the application can be found. ...
... member description platform the platform on which the application can be found. list of available values url the url at which the application can be found. id the id used to represent the application on the specified platform. specification specification status comment feedback web app manifestthe definition of '
related_applications' in that specification. working draft initial definition. web app manifest working group drafts ...
XULRunner 1.9.1 Release Notes - Archive of obsolete content
system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. ...
...system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. ...
... same application. on microsoft windows xp, all xul applications may wind up being grouped together in the taskbar. frequently asked questions why is installing xulrunner so painful? why isn't there a nice installer? because nobody has written that code yet! additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future
releases. i'm writing a xul application, how can i deploy that application to my users? right now mozilla recommends that xulrunner should be deployed privately with each application. see deploying xulrunner for more information. where is the source code? here. where is the sdk? here. i think i've found a bug, how do i report it? bugzilla.mozill...
XULRunner 1.9.2 Release Notes - Archive of obsolete content
system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. ...
...system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. ...
...lications as the same application. on microsoft windows xp, all xul applications may wind up being grouped together in the taskbar. frequently asked questions why is installing xulrunner so painful? why isn't there a nice installer? because nobody has written that code yet! additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future
releases. i'm writing a xul application, how can i deploy that application to my users? right now mozilla recommends that xulrunner should be deployed privately with each application. see deploying xulrunner for more information. where is the source code? here. where is the sdk? here. i think i've found a bug, how do i report it? bugzilla.mozilla.org is used to track bugs in all mozilla products. ple...
XULRunner 1.9 Release Notes - Archive of obsolete content
system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. ...
...tion framework. it replaces version 1.8.0.4; all users should upgrade. it provides facilities for launching standalone xul applications and embedding apis which can be used to render web pages within native and java applications. xulrunner 1.9 is built from the same source code snapshot as firefox 3. current version the current version of xulrunner is 1.9.0.17, matching firefox 3.0.17 detailed
release notes can be found here. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. installing xulrunner mozilla provides xulrunner for windows, mac os x, and linux, in english: download xulrunner for windows download xulrunner for mac os x download xulrunner ...
...ions as the same application. on microsoft windows xp, all xul applications may wind up being grouped together in the taskbar. frequently asked questions why is installing xulrunner so painful? why isn't there a nice installer? because nobody has written that code yet! additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future
releases. i'm writing a xul application, how can i deploy that application to my users? right now mozilla recommends that xulrunner should be deployed privately with each application. see deploying xulrunner for more information. where is the source code? here. where is the sdk? here. i think i've found a bug, how do i report it? bugzilla.mozilla.org is used to track bugs in all mozilla produ...
XULRunner 2.0 Release Notes - Archive of obsolete content
xulrunner 2.0 is a stable
release of the mozilla xulrunner application framework. it provides facilities for launching standalone xul applications and embedding apis which can be used to render web pages within native and java applications. xulrunner 2.0.x is built from the same source code snapshot as firefox 4.0.x. current version the current version of xulrunner 2.0 is 2.0, matching firefox 4.0 detailed
release notes can be found here. system requirements before installing, make sure your computer meets the system requirements (nb: that page will change for firefox 4 shipping). the system requirements for xulrunner are the same as the system requirements for firefox. ...
... specific runtimes can be found at: download xulrunner for windows download xulrunner for mac os x download xulrunner for 32-bit linux download xulrunner for 64-bit linux (warning: links may become out-of-date at times). windows unpack the zip file to a new directory using an archive tool (7zip is recommended). ...
...lications as the same application. on microsoft windows xp, all xul applications may wind up being grouped together in the taskbar. frequently asked questions why is installing xulrunner so painful? why isn't there a nice installer? because nobody has written that code yet! additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future
releases. i'm writing a xul application, how can i deploy that application to my users? right now mozilla recommends that xulrunner should be deployed privately with each application. see deploying xulrunner for more information. where is the source code? here. where is the sdk? here. see gecko sdk for information about the sdk. i think i've found a bug, how do i report it? bugzilla.mozilla.org is us...
Learning area release notes - Learn web development
-end development! also see our hacks post — introducing the mdn web docs front-end developer learning pathway — for more information about the rationale behind it. may 2020 our understanding client-side javascript frameworks module is now available. ...
...l frameworks, and how they
relate to the vanilla javascript you may already know. once you have a general understanding of frameworks, move on to tutorial series covering popular frameworks like react, ember, and vue. our web forms learning module now has "test your skills" assessments accompanying the articles. april 2020 our new understanding client-side web development tools module has been
released! learn the essentials of web development tooling, including what kind of tools exist, the command line, package managers, and how to assemble your own functioning tool chain. march 2020 you'll now find "test your skills" assessments accompanying the articles in the following modules: css building blocks javascript first steps javascript building blocks introducing javascript objects ...
... are adding a new type of assessment article to the learning area — "test your skills" — which will offer several short questions aimed at rapidly testing whether you understood what is going on. this is in addition to the longer assessment articles that you'll find in some of the learning modules already. you will find these new articles linked in "test your skills" sections at the bottom of
relevant articles. you can see these on: html text fundamentals creating hyperlinks advanced text formatting images in html video and audio content from object to iframe — other embedding technologies ...
NSS 3.14.4 release notes
introduction network security services (nss) 3.14.4 is a patch
release for nss 3.14. the bug fixes in nss 3.14.4 are described in the "bugs fixed" section below. distribution information the cvs tag is nss_3_14_4_rtm. nss 3.14.4 requires nspr 4.9.5 or newer. nss 3.14.4 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_14_4_rtm/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.14.4. users are encouraged to upgrade immediately. bug 894370 - (cve-2013-1739) avoid uninitialized data read in the event of a decryption failure. ...
...ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_14_4_rtm/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.14.4. users are encouraged to upgrade immediately. bug 894370 - (cve-2013-1739) avoid uninitialized data read in the event of a decryption failure. new in nss 3.14.4 new functionality no new major functionality is introduced in this
release. this
release is a patch
release to address cve-2013-1739. 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. a program li...
...la.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. a program linked with older nss 3.x shared libraries will work with nss 3.14.4 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.14.5 release notes
introduction network security services (nss) 3.14.5 is a patch
release for nss 3.14. the bug fixes in nss 3.14.5 are described in the "bugs fixed" section below. distribution information the cvs tag is nss_3_14_5_rtm. nss 3.14.5 requires nspr 4.9.5 or newer. nss 3.14.5 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_14_5_rtm/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.14.5. users are encouraged to upgrade immediately. ...
...wnload: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_14_5_rtm/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.14.5. users are encouraged to upgrade immediately. bug 934016 - (cve-2013-5605) handle invalid handshake packets new in nss 3.14.5 new functionality no new major functionality is introduced in this
release. this
release is a patch
release to address cve-2013-5605. 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. a program linked with older nss 3.x shared libr...
...xed 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. a program linked with older nss 3.x shared libraries will work with nss 3.14.5 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.15.1 release notes
hmac-sha256 cipher suites (rfc 5246 and rfc 5289) are supported, allowing tls to be used without md5 and sha-1. note the following limitations. ...
...hmac-sha256 cipher suites (rfc 5246 and rfc 5289) are supported, allowing tls to be used without md5 and sha-1. note the following limitations. ...
... 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. a program linked with older nss 3.x shared libraries will work with nss 3.15.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.15.3.1 release notes
introduction network security services (nss) 3.15.3.1 is a patch
release for nss 3.15. the bug fixes in nss 3.15.3.1 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_15_3_1_rtm. nss 3.15.3.1 requires nspr 4.10.2 or newer. nss 3.15.3.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_15_3_1_rtm/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.15.3.1. users are encouraged to upgrade immediately. ...
...s download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_15_3_1_rtm/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.15.3.1. users are encouraged to upgrade immediately. bug 946351 - misissued google certificates from dcssi new in nss 3.15.3.1 new functionality no new major functionality is introduced in this
release. this is a patch
release to revoke trust of a subordinate ca certificate that was mis-used to generate a certificate used by a network appliance. ...
...ogle certificates from dcssi new in nss 3.15.3.1 new functionality no new major functionality is introduced in this
release. this is a patch
release to revoke trust of a subordinate ca certificate that was mis-used to generate a certificate used by a network appliance. 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. a program linked with older nss 3.x shared libraries will work with nss 3.15.3.1 shared libraries without recompiling or r...
NSS 3.15.5 release notes
introduction network security services (nss) 3.15.5 is a patch
release for nss 3.15. the bug fixes in nss 3.15.5 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_15_5_rtm. nss 3.15.5 requires nspr 4.10.2 or newer. nss 3.15.5 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_15_5_rtm/src/ new in nss 3.15.5 new functionality added support for the tls application layer protocol negotiation (alpn) extension. two ssl socket options, ssl_enable_npn and ssl_enable_alpn, can be used to control whether npn or alpn (or both) should be used for application layer protocol negotiation. added the tls padding extension. the exte...
...es bug 949060: validate the iov input argument (an array of priovec structures) of ssl_writev (called via pr_writev). applications should still take care when converting struct iov to priovec because the iov_len members of the two structures have different types (size_t vs. int). size_t is unsigned and may be larger than int. ...
...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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.16.5 release notes
introduction network security services (nss) 3.16.5 is a patch
release for nss 3.16. the bug fixes in nss 3.16.5 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_16_5_rtm. nss 3.16.5 requires nspr 4.10.6 or newer. nss 3.16.5 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_16_5_rtm/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.16.5. users are encouraged to upgrade immediately. bug 1064636 - (cve-2014-1568) rsa signature forgery in nss. see also mfsa 2014-73 for details. new in nss 3.16.5 new functionality no new functionality is introduced in this
release. th...
.../mozilla.org/security/nss/
releases/nss_3_16_5_rtm/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.16.5. users are encouraged to upgrade immediately. bug 1064636 - (cve-2014-1568) rsa signature forgery in nss. see also mfsa 2014-73 for details. new in nss 3.16.5 new functionality no new functionality is introduced in this
release. this is a patch
release to fix a bug that caused nss to accept forged rsa signatures. a new symbol, _sgn_verifypkcs1digestinfo is exported in this
release. as with all exported nss symbols that have a leading underscore '_', this is an internal symbol for nss use only. applications that use or depend on these symbols can and will break in future nss
releases. bugs fixed in nss 3.16.5 bug 1064636 - (cve-2014-156...
...arch team at intel security, who both independently discovered and reported this issue, for responsibly disclosing the issue by providing advance copies of their research. compatibility nss 3.16.5 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.16.5 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.17.1 release notes
introduction network security services (nss) 3.17.1 is a patch
release for nss 3.17. the bug fixes in nss 3.17.1 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_17_1_rtm. nss 3.17.1 requires nspr 4.10.7 or newer. nss 3.17.1 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_17_1_rtm/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.17.1. users are encouraged to upgrade immediately. bug 1064636 - (cve-2014-1568) rsa signature forgery in nss. see also mfsa 2014-73 for details. ...
...for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_17_1_rtm/src/ security advisories the following security-
relevant bugs have been resolved in nss 3.17.1. users are encouraged to upgrade immediately. bug 1064636 - (cve-2014-1568) rsa signature forgery in nss. see also mfsa 2014-73 for details. new in nss 3.17.1 this patch
release adds new functionality and fixes a bug that caused nss to accept forged rsa signatures. a new symbol, _sgn_verifypkcs1digestinfo is exported in this
release. as with all exported nss symbols that have a leading underscore '_', this is an internal symbol for nss use only. applications that use or depend on these symbols can and will break in future nss
releases. new functionality tls_fall...
...arch team at intel security, who both independently discovered and reported this issue, for responsibly disclosing the issue by providing advance copies of their research. compatibility nss 3.17.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.17.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.17.3 release notes
notable changes in nss 3.17.3 the quickder decoder now decodes lengths robustly (cve-2014-1569). ...
... notable changes in nss 3.17.3 the quickder decoder now decodes lengths robustly (cve-2014-1569). ...
...he 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. a program linked with older nss 3.x shared libraries will work with nss 3.17.3 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.17.4 release notes
introduction network security services (nss) 3.17.4 is a patch
release for nss 3.17. the bug fixes in nss 3.17.4 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_17_4_rtm. nss 3.17.4 requires nspr 4.10.7 or newer. nss 3.17.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_17_4_rtm/src/ new in nss 3.17.4 new functionality no new functionality is introduced in this
release. this is a patch
release to fix multiple bugs. notable changes in nss 3.17.4 bug 1084986: if an ssl/tls connection fails, because client and server don't have any common protocol version enabled, nss has been changed to report error code ssl...
...t and server don't have any common protocol version enabled, nss has been changed to report error code ssl_error_unsupported_version (instead of reporting ssl_error_no_cypher_overlap). bug 1112461: libpkix was fixed to prefer the newest certificate, if multiple certificates match. bug 1094492: fixed a memory corruption issue during failure of keypair generation. bug 1113632: fixed a failure to
reload a pkcs#11 module in fips mode. bug 1119983: fixed interoperability of nss server code with a libressl client. 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 back...
...he 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. a program linked with older nss 3.x shared libraries will work with nss 3.17.4 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.19.2.3 release notes
introduction network security services (nss) 3.19.2.3 is a security patch
release for nss 3.19.2. the bug fixes in nss 3.19.2.3 are described in the "security fixes" section below. (current users of nss 3.19.3, nss 3.19.4 or nss 3.20.x are advised to update to nss 3.21.1, nss 3.22.2, or a later
release.) distribution information the hg tag is nss_3_19_2_3_rtm. nss 3.19.2.3 requires nspr 4.10.10 or newer. nss 3.19.2.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_19_2_3_rtm/src/ new in nss 3.19.2.3 new functionality no new functionality is introduced in this
release. security fixes in nss 3.19.2.3 bug 1245528 / cve-2016-1950 - fixed a heap-based buff...
...an attacker could create a specially-crafted certificate which, when parsed by nss, would cause a crash or execution of arbitrary code with the permissions of the user. ...
... of the user. acknowledgements the nss development team would like to thank security researcher francis gabriel for responsibly disclosing the issue in bug 1245528. compatibility nss 3.19.2.3 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.19.2.3 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.20 release notes
new functions in ssl.h ssl_dhegroupprefset - configure the set of allowed/enabled dhe group parameters that can be used by nss for a server socket. ...
... new functions in ssl.h ssl_dhegroupprefset - configure the set of allowed/enabled dhe group parameters that can be used by nss for a server socket. ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.20 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report at bugzilla.mozilla.org (product nss). ...
NSS 3.21.2 release notes
security fixes in nss 3.21.2 bug 1293334 / cve-2016-9074 - fixed a timing side channel in the tls cbc code. ...
... security fixes in nss 3.21.2 bug 1293334 / cve-2016-9074 - fixed a timing side channel in the tls cbc code. compatibility nss 3.21.2 shared libraries are backward compatible with all older nss 3.x shared libraries. ...
...xes" section below. distribution information the hg tag is nss_3_21_2_rtm. nss 3.21.2 requires nspr 4.10.10 or newer. nss 3.21.2 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_21_2_rtm/src/ new in nss 3.21.2 new functionality no new functionality is introduced in this
release. security fixes in nss 3.21.2 bug 1293334 / cve-2016-9074 - fixed a timing side channel in the tls cbc code. compatibility nss 3.21.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.21.2 shared libraries without recompiling or
relinking. furthermore, applications that restrict t...
NSS 3.22 release notes
pseudorandom functions based on hashes other than sha-1 are now supported with pbkdf (bug 554827). ...
... pseudorandom functions based on hashes other than sha-1 are now supported with pbkdf (bug 554827). ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.22 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.24 release notes
introduction the network security services (nss) team has
released nss 3.24, which is a minor
release. distribution information the hg tag is nss_3_24_rtm. nss 3.24 requires netscape portable runtime (nspr) 4.12 or newer. nss 3.24 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_24_rtm/src/ new in nss 3.24 nss 3.24 includes two nss softoken updates, a new function to configure ssl/tls server sockets, and two functions to improve the use of temporary arenas. new functionality nss softoken has been updated with the latest national institute of standards and technology (nist) guidance (as of 2015): software integrity checks and post functions are exec...
...gning rather than key exchange. update sslauthtype to define a larger number of authentication key types. deprecate the member attribute authalgorithm of type sslciphersuiteinfo. instead, applications should use the newly added attribute authtype. rename ssl_auth_rsa to ssl_auth_rsa_decrypt. add a shared library (libfreeblpriv3) on linux platforms that define freebl_lowhash. remove most code
related to ssl v2, including the ability to actively send a sslv2-compatible client hello. however, the server-side implementation of the ssl/tls protocol still supports processing of received v2-compatible client hello messages. disable (by default) nss support in optimized builds for logging ssl/tls key material to a logfile if the sslkeylogfile environment variable is set. to enable the functiona...
....24 acknowledgements the nss development team would like to thank yuval yarom for responsibly disclosing the cachebleed attack by providing advance copies of their research. compatibility nss 3.24 shared libraries are backward-compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.24 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.25 release notes
added support for chacha with tls 1.3. added support for tls 1.2 ciphersuites that use sha384 as the prf. ...
... added support for chacha with tls 1.3. added support for tls 1.2 ciphersuites that use sha384 as the prf. ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.25 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.26 release notes
introduction the network security services (nss) team has
released nss 3.26, which is a minor
release. distribution information the hg tag is nss_3_26_rtm. nss 3.26 requires netscape portable runtime (nspr) 4.12 or newer. ...
... introduction the network security services (nss) team has
released nss 3.26, which is a minor
release. distribution information the hg tag is nss_3_26_rtm. nss 3.26 requires netscape portable runtime (nspr) 4.12 or newer. ...
...s 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. a program linked with older nss 3.x shared libraries will work with nss 3.26 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.29.1 release notes
introduction network security services (nss) 3.29.1 is a patch
release for nss 3.29. the bug fixes in nss 3.29.1 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_29_1_rtm. nss 3.29.1 requires netscape portable runtime (nspr) 4.13.1 or newer. nss 3.29.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/
releases/nss_3_29_1_rtm/src/ new in nss 3.29.1 new functionality no new functionality is introduced in this
release. this is a patch
release to fix binary compatibility issues. bugs fixed in nss 3.29.1 nss version 3.28, 3.28.1, 3.28.2 and 3.29 contained changes that were in violation with the nss compatibility promise. ecparams, which is pa...
...ey, nsslowkeypublickey, nsslowkeyprivatekey, or potentially other data structures that reference ecparams. the change has been reverted to the original state in bug 1334108. seckeyecpublickey had been extended with a new attribute, named "encoding". if an application passed type seckeyecpublickey to nss (as part of seckeypublickey), the nss library read the uninitialized attribute. with this nss
release seckeyecpublickey.encoding is deprecated. nss no longer reads the attribute, and will always set it to ecpoint_undefined. see bug 1340103. note that nss 3.28.3 from the older nss 3.28.x branch has also been
released with the identical fixes. compatibility nss 3.29.1 shared libraries are backward compatible with most older nss 3.x shared libraries, but depending on your application, may be ...
...aries are backward compatible with most older nss 3.x shared libraries, but depending on your application, may be incompatible, if you application has been compiled against header files of versions 3.28, 3.28.1, 3.28.2 nss 3.29.1. a program linked with most older nss 3.x shared libraries (excluding the exceptions mentioned above), will work with nss 3.29.1 shared libraries without recompiling or
relinking. 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. if you had compiled your application against header files of nss 3.28, nss 3.28.1, nss 3.28.2 or nss 3.29, it it recommended that you recompile your application against nss 3.29.1 (or nss 3.28.3), at the time...
NSS 3.30 release notes
applications that need to distinguish them from other other root cas, may use the exported function pk11_hasattributeset. ...
...applications that need to distinguish them from other other root cas, may use the exported function pk11_hasattributeset. ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.30 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.31 release notes
allow querying a certificate object for its temporary or permanent storage status in a thread safe way. ...
... allow querying a certificate object for its temporary or permanent storage status in a thread safe way. ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.31 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.32 release notes
the code signing trust bit was turned off for all, included root certificates. the websites (tls/ssl) trust bit was turned off for the following root certificates. ...
... the code signing trust bit was turned off for all, included root certificates. the websites (tls/ssl) trust bit was turned off for the following root certificates. ...
... 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. a program linked with older nss 3.x shared libraries will work with nss 3.32 shared libraries, without recompiling, or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (select the product 'nss'). ...
NSS 3.33 release notes
api calls that attempt to enable compression are accepted without failure. however, tls compression will remain disabled. this version of nss uses a formally verified implementation of curve25519 on 64-bit systems. ...
...api calls that attempt to enable compression are accepted without failure. however, tls compression will remain disabled. this version of nss uses a formally verified implementation of curve25519 on 64-bit systems. ...
... 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. a program linked with older nss 3.x shared libraries will work with nss 3.33 shared libraries, without recompiling, or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (select product 'nss'). ...
NSS 3.34.1 release notes
it was previously removed in nss 3.34, but now re-added with only the email trust bit set. (bug 1418678) cn = certum ca, o=unizeto sp. z o.o. ...
...it was previously removed in nss 3.34, but now re-added with only the email trust bit set. (bug 1418678) cn = certum ca, o=unizeto sp. z o.o. ...
...he 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. a program linked with older nss 3.x shared libraries will work with nss 3.34 shared libraries, without recompiling, or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (select product 'nss'). ...
NSS 3.34 release notes
introduction the network security services (nss) team has
released nss 3.34, which is a minor
release. distribution information the hg tag is nss_3_34_rtm. nss 3.34 requires netscape portable runtime (nspr) 4.17, or newer. ...
... introduction the network security services (nss) team has
released nss 3.34, which is a minor
release. distribution information the hg tag is nss_3_34_rtm. nss 3.34 requires netscape portable runtime (nspr) 4.17, or newer. ...
... 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. a program linked with older nss 3.x shared libraries will work with nss 3.34 shared libraries, without recompiling, or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (select product 'nss'). ...
NSS 3.36.5 release notes
introduction network security services (nss) 3.36.5 is a patch
release for nss 3.36. the bug fixes in nss 3.36.5 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_36_5_rtm. nss 3.36.5 requires nspr 4.19 or newer. nss 3.36.5 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_36_5_rtm/src/ new in nss 3.36.5 new functionality no new functionality is introduced in this
release. ...
...istribution information the hg tag is nss_3_36_5_rtm. nss 3.36.5 requires nspr 4.19 or newer. nss 3.36.5 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_36_5_rtm/src/ new in nss 3.36.5 new functionality no new functionality is introduced in this
release. this is a patch
release to fix cve-2018-12384 bugs fixed in nss 3.36.5 bug 1483128 - nss responded to an sslv2-compatible clienthello with a serverhello that had an all-zero random (cve-2018-12384) compatibility nss 3.36.5 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.36.5 shared libraries without recomp...
...ix cve-2018-12384 bugs fixed in nss 3.36.5 bug 1483128 - nss responded to an sslv2-compatible clienthello with a serverhello that had an all-zero random (cve-2018-12384) compatibility nss 3.36.5 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.36.5 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.36 release notes
notable changes in nss 3.36 replaced existing vectorized chacha20 code with verified hacl* implementation. ...
... notable changes in nss 3.36 replaced existing vectorized chacha20 code with verified hacl* implementation. ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.36 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.38 release notes
when creating a certificate request (csr) using certutil -r, an existing orphan private key can be reused. parameter -k may be used to specify the id of an existing orphan key. the available orphan key ids can be displayed using command certutil -k. ...
... when creating a certificate request (csr) using certutil -r, an existing orphan private key can be reused. parameter -k may be used to specify the id of an existing orphan key. the available orphan key ids can be displayed using command certutil -k. ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.38 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.39 release notes
nss will use rsa-pss keys to authenticate in tls. support for these keys is disabled by default but can be enabled using ssl_signatureschemeprefset(). ...
... nss will use rsa-pss keys to authenticate in tls. support for these keys is disabled by default but can be enabled using ssl_signatureschemeprefset(). ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.39 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.40.1 release notes
introduction the nss team has
released network security services (nss) 3.40.1, which is a patch
release for nss 3.40 distribution information the hg tag is nss_3_40_1_rtm. nss 3.40.1 requires nspr 4.20 or newer. nss 3.40 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_40_1_rtm/src/ new in nss 3.40.1 new functionality no new functionality is introduced in this
release. ...
...ribution information the hg tag is nss_3_40_1_rtm. nss 3.40.1 requires nspr 4.20 or newer. nss 3.40 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_40_1_rtm/src/ new in nss 3.40.1 new functionality no new functionality is introduced in this
release. this is a patch
release to fix cve-2018-12404 new functions none bugs fixed in nss 3.40.1 bug 1485864 - cache side-channel variant of the bleichenbacher attack (cve-2018-12404) compatibility nss 3.40.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.40.1 shared libraries without...
...2018-12404 new functions none bugs fixed in nss 3.40.1 bug 1485864 - cache side-channel variant of the bleichenbacher attack (cve-2018-12404) compatibility nss 3.40.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.40.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.42 release notes
introduction the nss team has
released network security services (nss) 3.42 on 25 january 2019, which is a minor
release. distribution information the hg tag is nss_3_42_rtm. nss 3.42 requires nspr 4.20 or newer. nss 3.42 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_42_rtm/src/ other
releases are available in nss
releases. new in nss 3.42 new functionality bug 818686 - support xdg basedir specification new functions none notable changes in nss 3.42 the following ca certificates were added: none the following ca certificates were removed: none added support for some of the testcases from the wycheproof project: ...
...d the curve25519 test cases thanks to jonas allmann for adapting these tests. bugs fixed in nss 3.42 bug 1490006 - reject invalid ch.legacy_version in tls 1.3 bug 1507135 and bug 1507174 - add additional null checks to several cms functions to fix a rare cms crash. thanks to hanno böck and damian poddebniak for the discovery and fixes. note: this was mistakenly not in
release 3.42, and is instead in nss 3.42.1. 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 share...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.42 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.44.1 release notes
introduction network security services (nss) 3.44.1 is a patch
release for nss 3.44. the bug fixes in nss 3.44.1 are described in the "bugs fixed" section below. it was
released on 21 june 2019. the nss team would like to recognize first-time contributors: greg rubin distribution information the hg tag is nss_3_44_1_rtm. nss 3.44.1 requires nspr 4.21 or newer. nss 3.44.1 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_44_1_rtm/src/ other
releases are available in nss
releases. new in nss 3.44.1 new functionality 1546229 - add ipsec ike support to softoken many new fips test cases (note: this has increased the source archive by approximately 50...
...n ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_44_1_rtm/src/ other
releases are available in nss
releases. ...
...sting for fips validation 1552208 - prohibit use of rsassa-pkcs1-v1_5 algorithms in tls 1.3 (cve-2019-11727) 1551041 - unbreak build on gcc < 4.3 big-endian compatibility nss 3.44.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.44.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.47 release notes
introduction the nss team has
released network security services (nss) 3.47 on 18 october 2019, which is a minor
release. the nss team would like to recognize first-time contributors: christian weisgerber deian stefan jenine distribution information the hg tag is nss_3_47_rtm. nss 3.47 requires nspr 4.23 or newer. nss 3.47 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_47_rtm/src/ other
releases are available in nss
releases. ...
... see bug 1573118 for details. tls extended master secret will be enabled by default, where possible. see bug 1575411 for details. ...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.47 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.49.2 release notes
introduction network security services (nss) 3.49.2 is a patch
release for nss 3.49. the bug fixes in nss 3.49.2 are described in the "bugs fixed" section below. it was
released on 23 january 2020. distribution information the hg tag is nss_3_49_2_rtm. nss 3.49.2 requires nspr 4.24 or newer. nss 3.49.2 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_49_2_rtm/src/ other
releases are available in nss
releases. new in nss 3.49.2 no new functionality is introduced in this
release. bugs fixed in nss 3.49.2 bug 1606992 - cache the most recent pbkdf1 password hash, to speed up repeated sdr operations, important with the increased kdf iteration counts. nss 3.49.
...nss/
releases/nss_3_49_2_rtm/src/ other
releases are available in nss
releases. new in nss 3.49.2 no new functionality is introduced in this
release. bugs fixed in nss 3.49.2 bug 1606992 - cache the most recent pbkdf1 password hash, to speed up repeated sdr operations, important with the increased kdf iteration counts. nss 3.49.1 sped up pbkdf2 operations, though pbkdf1 operations are also
relevant for older nss databases. 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 s...
...ll 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. a program linked with older nss 3.x shared libraries will work with nss 3.49.2 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.52 release notes
notable changes in nss 3.52 bug 1603628 - update nss to support pkcs #11 v3.0. ...
...rity services (nss) 3.52 on 1 may 2020. the nss team would like to recognize first-time contributors: zhujianwei7 hans petter jansson distribution information the hg tag is nss_3_52_rtm. nss 3.52 requires nspr 4.25 or newer. nss 3.52 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_52_rtm/src/ other
releases are available in nss
releases. notable changes in nss 3.52 bug 1603628 - update nss to support pkcs #11 v3.0. note: this change modifies the ck_gcm_params struct to include the ulivbits field which, prior to pkcs #11 v3.0, was ambiguously defined and not included in the nss definition. if an application is recompiled with nss 3.52+, this field mu...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.52 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
SpiderMonkey releases
this page lists spidermonkey
release notes. note: standalone spidermonkey is not an official product. our continuous integration system does produce a tarball that is built into a binary that runs our smoke tests, but we do not maintain it nor actively test its suitability for general embedding. we have periodically created "
releases", but they are best-effort and incomplete. we do happily accept patches, and make some effort to keep the tip of the gecko tree minimally working as an embeddable source package. we are very limited in our ability to support older versions, including those labeled as "
releases" on this page. ...
...periodically created "
releases", but they are best-effort and incomplete. we do happily accept patches, and make some effort to keep the tip of the gecko tree minimally working as an embeddable source package. we are very limited in our ability to support older versions, including those labeled as "
releases" on this page. the easiest way to fetch the version corresponding to the current firefox
release is to visit the treeherder page for the
release repository and click on the first sm(pkg) link you see. that will open a small window in the bottom left with a line like "artifact uploaded: mozjs-57.0.1.tar.bz2". ...
...ed in our ability to support older versions, including those labeled as "
releases" on this page. the easiest way to fetch the version corresponding to the current firefox
release is to visit the treeherder page for the
release repository and click on the first sm(pkg) link you see. that will open a small window in the bottom left with a line like "artifact uploaded: mozjs-57.0.1.tar.bz2". ...
Document.releaseCapture() - Web APIs
example see the example for element.setcapture(). ...
... example see the example for element.setcapture(). ...
... example see the example for element.setcapture(). ...
Element.releasePointerCapture() - Web APIs
return value this method returns undefined. exceptions exception explanation invalidpointerid pointerid does not match any of the active pointers. example this example sets pointer capture on a <div> when you press down on it. this lets you slide the element horizontally, even when you pointer moves outside of its boundaries. ...
... you pointer moves outside of its boundaries. ...
...pointermove = null; slider.
releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding; result specifications specification status comment pointer events – level 2the definition of '
releasepointercapture' in that specification. recommendation non-stable version. pointer eventsthe definition of '
releasepointercapture' in that specification. obsolete initial definition. ...
FetchEvent.navigationPreload - Web APIs
the navigationp
reload read-only property of the fetchevent interface returns a promise that resolves to the instance of navigationp
reloadmanager associated with the current service worker registration. syntax var promise = fetchevent.navigationp
reload value a promise that resolves to the instance of navigationp
reloadmanager. example the following example shows the implementation of a fetch event that uses a p
reloaded response. ...
...o the instance of navigationp
reloadmanager. example the following example shows the implementation of a fetch event that uses a p
reloaded response. 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 p
reloaded response, if it's there const response = await event.p
reloadresponse; if (response) return response; // else try the network. return fetch(event.request); }()); }); specifications specification status comment service workersthe definition of 'navigationp
reload' in that specification. working draft initial definition. browser compatib...
... browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
RTCIceCandidateStats.relayProtocol - Web APIs
the possible values are: tcp tcp (transport control protocol) is being used to communicate with the turn server. tls tls (transport layer security) is being used to communicate with the turn server. udp udp (user datagram protocol) is being used to communicate with the turn server. ...
...the possible values are: tcp tcp (transport control protocol) is being used to communicate with the turn server. tls tls (transport layer security) is being used to communicate with the turn server. udp udp (user datagram protocol) is being used to communicate with the turn server. ...
...ity) is being used to communicate with the turn server. udp udp (user datagram protocol) is being used to communicate with the turn server. note: this property is only present on rtcicecandidatestats objects that represent local candidates. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatestats.
relayprotocol' in that specification. candidate recommendation initial specification. ...
WebGL2RenderingContext.framebufferTextureLayer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. gl.read_framebuffer: used as a source for reading operations. ...
...possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. gl.read_framebuffer: used as a source for reading operations. ...
...er. gl.stencil_attachment: attaches the texture to the framebuffer's stencil buffer. gl.depth_stencil_attachment: depth and stencil buffer. texture a webgltexture object whose image to attach. level a glint specifying the mipmap level of the texture image to attach. layer a glint specifying the layer of the texture image to attach. return value none. examples gl.framebuffertextu
relayer(gl.framebuffer, gl.color_attachment0, texture, 0, 8); specifications specification status comment webgl 2.0the definition of 'framebuffertextu
relayer' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glframebuffertextu
relayer' in that specification. standard man page o...
Using the aria-relevant attribute - Accessibility
the aria-
relevant attribute is an optional value used to describe what types of changes have occurred to an aria-live region, and which are
relevant and should be announced. any change that is not
relevant acts in the same manner it would if the aria-live attribute were set to off. aria-
relevant is commonly used when a web page contains content that may be updated while viewing the page. 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. removals are deletion of nodes in the accessiblity tree; should be considered
relevant. text are changes to the textual content of existing nodes; should be considered
relevant. all is equivalent to additions remov...
...imited 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. removals are deletion of nodes in the accessiblity tree; should be considered
relevant. text are changes to the textual content of existing nodes; should be considered
relevant. all is equivalent to additions removals text. ...
...live region; should be considered
relevant. removals are deletion of nodes in the accessiblity tree; should be considered
relevant. text are changes to the textual content of existing nodes; should be considered
relevant. all is equivalent to additions removals text. aria-
relevant="additions text" is the default value on a live region. ...
Intl.RelativeTimeFormat.prototype.resolvedOptions() - JavaScript
the intl.
relativetimeformat.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and
relative time formatting options computed during initialization of this
relativetimeformat object. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax
relativetimeformat.resolvedoptions() return value a new object with properties reflecting the locale and number formatting options computed during the initialization of the given
relativetimeformat object. description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. if ...
...ome locales. numeric the format of output message. possible values are: "always" (default, e.g., 1 day ago), or "auto" (e.g., yesterday). the "auto" value allows to not always have to use numeric values in the output. numberingsystem the value requested using the unicode extension key "nu" or filled in as a default. ...
... stage 4 ...
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
it provides facilities for launching standalone xul applications and embedding apis which can be used to render web pages within native and java applications. xulrunner 1.8.0.4 is now available as a security/stability update; all users should install this new version. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. ...
...sr/lib/vendor/applicationname known issues firewall software may identify all xul applications as the same application. on microsoft windows xp, all xul applications may wind up being grouped together in the taskbar. frequently asked questions why is installing xulrunner so painful? why isn't there a nice installer? because nobody has written that code yet! this is a developer preview
release: additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future
releases. i'm writing a xul application, how can i deploy that application to my users? right now mozilla recommends that xulrunner should be deployed privately with each application. see deploying xulrunner 1.8 for more information. where is the source code? her...
XULRunner/Old Releases - Archive of obsolete content
it has known security holes and should not be used in applications that deal with public web content. ...
...ble 1.9 branch. community contributed builds of xulrunner 1.8.1.3 these builds are contributed by the eclipse atf community and are intended for embedding. the windows and linux builds will run normal xulrunner applications, but the mac build uses cocoa widgets and will not run xulrunner applications. xulrunner 1.8.0.4 this is the last official stable developer preview
release from the 1.8.0 branch. it has known security holes and should not be used in applications that deal with public web content. ...
NPN_ReleaseVariantValue - Archive of obsolete content
« gecko plugin api reference « scripting plugins summary npn_
releasevariantvalue()
releases the value in the given variant. syntax #include <npruntime.h> void npn_
releasevariantvalue(npvariant *variant); parameters the function has the following parameters: <tt>variant</tt> the variant whose value is to be
released. returns nothing. description npn_
releasevariantvalue()
releases the value in the given variant. this must always be called on result variants and such in this api, i.e. any npvariant whose value comes from a call that passes back an npvariant must be
released using this function. access to the value in an npvariant that has been
released will result in undefined behavior. ...
... is to be
released. returns nothing. description npn_
releasevariantvalue()
releases the value in the given variant. this must always be called on result variants and such in this api, i.e. any npvariant whose value comes from a call that passes back an npvariant must be
released using this function. access to the value in an npvariant that has been
released will result in undefined behavior. npn_
releasevariantvalue() will call npn_
releaseobject() on npvariants of type npvarianttype_object, and npn_memfree() on npvariants of type npvarianttype_string. ...
Debug.msUpdateAsyncCallbackRelation - Archive of obsolete content
the debug.msupdateasynccallback
relation function updates the
relationship status between a synchronous work item and the associated asynchronous operation. syntax debug.msupdateasynccallback
relation(
relatedasyncoperationid,
relationtype) parameters
relatedasyncoperationid the id associated with the asynchronous operation.
relationtype optional the value that specifies the
relationship status. remarks the synchronous work item is typically the callback function for the asynchronous operation. this function may be called when an asynchronous operation is aborted, when a join operation is used, or in other scenarios. ...
...tedasyncoperationid the id associated with the asynchronous operation.
relationtype optional the value that specifies the
relationship status. remarks the synchronous work item is typically the callback function for the asynchronous operation. this function may be called when an asynchronous operation is aborted, when a join operation is used, or in other scenarios. the possible values for
relationtype include: debug.ms_async_callback_status_assign_delegate debug.ms_async_callback_status_join debug.ms_async_callback_status_chooseany debug.ms_async_callback_status_cancel debug.ms_async_callback_status_error for more information, see debug constants. note: some debugging tools do not display the information sent to the debugger by this function. re...
Asynchronous - MDN Web Docs Glossary: Definitions of Web-related terms
in computing, the word "asynchronous" is used in two major contexts. networking and communications asynchronous communication is a method of exchanging messages between two or more parties in which each party receives and processes messages whenever it's convenient or possible to do so, rather than doing so immediately upon receipt. ...
...tware communicates asynchronously, a program may make a request for information from another piece of software (such as a server), and continue to do other things while waiting for a reply. for example, the ajax (asynchronous javascript and xml) programming technique—now usually simply "ajax", even though json is usually used rather than xml in modern applications—is a mechanism that requests
relatively small amounts of data from the server using http, with the result being returned when available rather than immediately. software design asynchronous software design expands upon the concept by building code that allows a program to ask that a task be performed alongside the original task (or tasks), without stopping to wait for the task to complete. when the secondary task is comple...
Continuous Media - MDN Web Docs Glossary: Definitions of Web-related terms
css can be used in a variety of contexts, including print media and some css, in particular, that used for layout behaves differently depending on the context it is in. continuous media, therefore, identifies a context where the content is not broken up, it flows continuously. ...
... css can be used in a variety of contexts, including print media and some css, in particular, that used for layout behaves differently depending on the context it is in. continuous media, therefore, identifies a context where the content is not broken up, it flows continuously. ...
DTLS (Datagram Transport Layer Security) - MDN Web Docs Glossary: Definitions of Web-related terms
a similar level of security. as a datagram protocol, dtls doesn't guarantee the order of message delivery, or even that messages will be delivered at all. however, dtls gains the benefits of datagram protocols, too; in particular, the lower overhead and reduced latency. these features are especially useful for one of the most common areas in which dtls comes into play: webrtc. ...
...which dtls comes into play: webrtc. all of the webrtc
related protocols are required to encrypt their communications using dtls; this includes sctp, srtp, and stun. ...
HTML - MDN Web Docs Glossary: Definitions of Web-related terms
html (hypertext markup language) is a descriptive language that specifies webpage structure. brief history in 1990, as part of his vision of the web, tim berners-lee defined the concept of hypertext, which berners-lee formalized the following year through a markup mainly based on sgml. the ietf began formally specifying html in 1993, and after several drafts
released version 2.0 in 1995. in 1994 berners-lee founded the w3c to develop the web. in 1996, the w3c took over the html work and published the html 3.2 recommendation a year later. html 4.0 was
released in 1999 and became an iso standard in 2000. at that time, the w3c nearly abandoned html in favor of xhtml, prompting the founding of an independent group called whatwg in 2004. thanks to whatwg, work on html5 continued: the two organ...
... concept and syntax an html document is a plaintext document structured with elements. elements are surrounded by matching opening and closing tags. ...
ICE - MDN Web Docs Glossary: Definitions of Web-related terms
s on their respective local networks. ...
...ection (in this case—and only this case—a stun server is used to find the network-facing address of a peer) direct tcp connection, via the http port direct tcp connection, via the https port indirect connection via a
relay/turn server (if a direct connection fails, e.g., if one peer is behind a firewall that blocks nat traversal) learn more general knowledge webrtc, the principal web-
related protocol which uses ice webrtc protocols technical reference rfc 5245, the ietf specification for ice rtcicecandidate, the interface representing a ice candidate ...
TTL - MDN Web Docs Glossary: Definitions of Web-related terms
caching in the context of caching, ttl (as an unsigned 32-bit integer) being a part of the http response header or the dns query, indicates the amount of time in seconds during which the ressource can be cached by the requester. ...
... caching in the context of caching, ttl (as an unsigned 32-bit integer) being a part of the http response header or the dns query, indicates the amount of time in seconds during which the ressource can be cached by the requester. ...
WebDAV - MDN Web Docs Glossary: Definitions of Web-related terms
webdav (web distributed authoring and versioning) is an http extension that lets web developers update their content remotely from a client. webdav is ra
rely used alone, but two extensions are very common: caldav (remote-access calendar) and carddav (remote-access address book). webdav allows clients to add, delete, and retrieve webpage metadata (e.g. ...
...ibuted authoring and versioning) is an http extension that lets web developers update their content remotely from a client. webdav is ra
rely used alone, but two extensions are very common: caldav (remote-access calendar) and carddav (remote-access address book). webdav allows clients to add, delete, and retrieve webpage metadata (e.g. ...
HTMLIFrameElement.reload()
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the
reload() method of the htmliframeelement interface is used to
reload the content of the <iframe>. syntax instanceofhtmliframeelement.
reload(hard
reload); returns void. ...
...rack. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the
reload() method of the htmliframeelement interface is used to
reload the content of the <iframe>. syntax instanceofhtmliframeelement.
reload(hard
reload); returns void. parameters hard
reload optional a boolean that indicates whether all the resources to
reload must be revalidated (true) or may be taken directly from the browser cache (false). examples stop
reload.addeventlistener('touchend',function() { if(stop
reload.textcontent === 'x') { browser.stop(); } else { browser.
reload(); } }); specification not part of any specification. ...
NSS 3.12.5 release_notes
nss 3.12.5
release notes 2009-12-02 newsgroup: mozilla.dev.tech.crypto introduction network security services (nss) 3.12.5 is a patch
release for nss 3.12. the bug fixes in nss 3.12.5 are described in the "bugs fixed" section below. nss 3.12.5 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.5
release is nss_3_12_5_rtm. nss 3.12.5 requires nspr 4.8. you can check out the source from cvs by cvs co -r nspr_4_8_rtm nspr cvs co -r nss_3_12_5_rtm nss see the documentation section for the build instructions. nss 3.12.5 source is also available on ftp.mozilla.org for secure https download: source tarball: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_12_5_rtm/src/. new in nss 3.12.5 ssl...
...: add deprecated comments to key.h and pk11func.h bug 522580: nss uses port_memcmp for comparing secret data. 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. new and revised documents available since the
release of nss 3.11 include the following: build instructions nss shared db compatibility nss 3.12.5 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.12.5 shared libraries without recompiling or
relinking. furthermore, applications that restrict their use of nss apis to the functions...
NSS 3.14.3 release notes
introduction network security services (nss) 3.14.3 is a patch
release for nss 3.14. the bug fixes in nss 3.14.3 are described in the "bugs fixed" section below. distribution information the cvs tag is nss_3_14_3_rtm. nss 3.14.3 requires nspr 4.9.5 or newer. nss 3.14.3 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_14_3_rtm/src/ new in nss 3.14.3 new functionality no new major functionality is introduced in this
release. this
release is a patch
release to address cve-2013-1620. new functions in pk11pub.h pk11_signwithsymkey - similar to pk11_sign, performs a signing operation in a single operation. however, unlike pk11_sign, which uses a...
... 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. a program linked with older nss 3.x shared libraries will work with nss 3.14.3 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.15 release notes
tls client applications may enable this via a call to ssl_optionsetdefault(ssl_enable_ocsp_stapling, pr_true); added function secitem_reallocitemv2. ...
...tls client applications may enable this via a call to ssl_optionsetdefault(ssl_enable_ocsp_stapling, pr_true); added function secitem_reallocitemv2. ...
NSS 3.16.2.3 release notes
introduction network security services (nss) 3.16.2.3 is a patch
release for nss 3.16. the bug fixes in nss 3.16.2.3 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_16_2_3_rtm. nss 3.16.2.3 requires nspr 4.10.6 or newer. nss 3.16.2.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_2_3_rtm/src/ new in nss 3.16.2.3 this patch
release fixes a bug and contains a backport of the tls_fallback_scsv feature, which was originally made available in nss 3.17.1. new functionality tls_fallback_scsv is a signaling cipher suite value that indicates a handshake is the result of tls version fallback. new macros in ss...
...port time. bugs fixed in nss 3.16.2.3 bug 1057161 - nss hangs with 100% cpu on invalid ec key bug 1036735 - add support for draft-ietf-tls-downgrade-scsv to nss compatibility nss 3.16.2.3 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.16.2.3 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.16.2 release notes
the tls application layer protocol negotiation (alpn) extension is also supported on the server side. rsa-oeap is supported. ...
... the tls application layer protocol negotiation (alpn) extension is also supported on the server side. rsa-oeap is supported. use the new pk11_privdecrypt and pk11_pubencrypt functions with the ckm_rsa_pkcs_oaep mechanism. ...
NSS 3.16 release notes
(this requires nspr 4.10.4.) to build for the linux x32 target, set the environment variable use_x32=1 when building nss. new functions in cms.h nss_cmssignerinfo_verify - verify the signature of a single signerinfo. ...
...(this requires nspr 4.10.4.) to build for the linux x32 target, set the environment variable use_x32=1 when building nss. new functions in cms.h nss_cmssignerinfo_verify - verify the signature of a single signerinfo. ...
NSS 3.17 release notes
the ssl_reuse_server_ecdhe_key option defaults to pr_true, which means the server's ephemeral ecdh key is reused for multiple handshakes. ...
...the ssl_reuse_server_ecdhe_key option defaults to pr_true, which means the server's ephemeral ecdh key is reused for multiple handshakes. ...
NSS 3.18.1 release notes
introduction network security services (nss) 3.18.1 is a patch
release for nss 3.18. the bug fixes in nss 3.18.1 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_18_1_rtm. nss 3.18.1 requires nspr 4.10.8 or newer. nss 3.18.1 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_18_1_rtm/src/ new in nss 3.18.1 no new functionality is introduced in this
release. this is a patch
release to update the list of root ca certificates. notable changes in nss 3.18.1 the following ca certificate had the websites and code signing trust bits restored to their original state to allow more time to develop a better transition stra...
... 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. a program linked with older nss 3.18 shared libraries will work with nss 3.18.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.19.2.2 release notes
introduction network security services (nss) 3.19.2.2 is a security patch
release for nss 3.19.2. the bug fixes in nss 3.19.2.2 are described in the "security fixes" section below. (current users of nss 3.19.3 or nss 3.19.4 are advised to update to nss 3.20.2, nss 3.21, or a later
release.) distribution information the hg tag is nss_3_19_2_2_rtm. nss 3.19.2.2 requires nspr 4.10.10 or newer. nss 3.19.2.2 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_19_2_2_rtm/src/ security fixes in nss 3.19.2.2 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures. new in nss 3.19.2.2 new functionality no new functionality is introduced in this ...
...r. nss 3.19.2.2 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_19_2_2_rtm/src/ security fixes in nss 3.19.2.2 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures. new in nss 3.19.2.2 new functionality no new functionality is introduced in this
release. acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 1158489. compatibility nss 3.19.2.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.19.2.2 shared libraries without recompiling or
relinking. f...
NSS 3.19.2.4 release notes
introduction network security services (nss) 3.19.2.4 is a security patch
release for nss 3.19.2. the bug fixed in nss 3.19.2.4 have been described in the "security fixes" section below. (current users of nss 3.19.3, nss 3.19.4 or nss 3.20.x are advised to update to nss 3.21.1, nss 3.22.2 or a later
release.) distribution information the hg tag is nss_3_19_2_4_rtm. nss 3.19.2.4 requires nspr 4.10.10 or newer. nss 3.19.2.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_19_2_4_rtm/src/ new in nss 3.19.2.4 new functionality no new functionality has been introduced in this
release. security fixes in nss 3.19.2.4 the following security fixes from nss 3.21 h...
...e-2016-1978 - use-after-free in nss during ssl connections in low memory bug 1190248 / cve-2016-1938 - errors in mp_div and mp_exptmod cryptographic functions in nss compatibility nss 3.19.2.4 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.19.2.4 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.19.2 release notes
introduction network security services (nss) 3.19.2 is a patch
release for nss 3.19 that addresses compatibility issues in nss 3.19.1. distribution information the hg tag is nss_3_19_2_rtm. nss 3.19.2 requires nspr 4.10.8 or newer. nss 3.19.2 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_19_2_rtm/src/ new in nss 3.19.2 new functionality no new functionality is introduced in this
release. notable changes in nss 3.19.2 bug 1172128 - in nss 3.19.1, the minimum key sizes that the freebl cryptographic implementation (part of the softoken cryptographic module used by default by nss) was willing to generate or use was increased - for rsa keys, to 512 bits, ...
...he 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. a program linked with older nss 3.x shared libraries will work with nss 3.19.2 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.19.3 release notes
introduction network security services (nss) 3.19.3 is a patch
release for nss 3.19. the bug fixes in nss 3.19.3 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_19_3_rtm. nss 3.19.3 requires nspr 4.10.8 or newer. nss 3.19.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_19_3_rtm/src/ new in nss 3.19.3 no new functionality is introduced in this
release. this is a patch
release to update the list of root ca certificates. notable changes in nss 3.19.3 the following ca certificates were removed cn = buypass class 3 ca 1 sha1 fingerprint: 61:57:3a:11:df:0e:d8:7e:d5:92:65:22:ea:d0:56:d7:44:b3:23:...
... 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. a program linked with older nss 3.19 shared libraries will work with nss 3.19.3 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.20.2 release notes
introduction network security services (nss) 3.20.2 is a security patch
release for nss 3.20. the bug fixes in nss 3.20.2 are described in the "security fixes" section below. distribution information the hg tag is nss_3_20_2_rtm. nss 3.20.2 requires nspr 4.10.10 or newer. nss 3.20.2 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_20_2_rtm/src/ security fixes in nss 3.20.2 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures. new in nss 3.20.2 new functionality no new functionality is introduced in this
release. acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosi...
...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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.21.1 release notes
introduction network security services (nss) 3.21.1 is a security patch
release for nss 3.21. the bug fixes in nss 3.21.1 are described in the "security fixes" section below. distribution information the hg tag is nss_3_21_1_rtm. nss 3.21.1 requires nspr 4.10.10 or newer. nss 3.21.1 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_21_1_rtm/src/ new in nss 3.21.1 new functionality no new functionality is introduced in this
release. security fixes in nss 3.21.1 bug 1245528 / cve-2016-1950 - fixed a heap-based buffer overflow
related to the parsing of certain asn.1 structures. an attacker could create a specially-crafted certificate which, when parsed by n...
...ions of the user. acknowledgements the nss development team would like to thank security researcher francis gabriel for responsibly disclosing the issue in bug 1245528. compatibility nss 3.21.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.21.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.21.4 release notes
introduction network security services (nss) 3.21.4 is a security patch
release for nss 3.21. the bug fixes in nss 3.21.4 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_21_4_rtm. nss 3.21.4 requires nspr 4.12 or newer. nss 3.21.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_21_4_rtm/src/ new in nss 3.21.4 no new functionality is introduced in this
release. bugs fixed in nss 3.21.4 bug 1344380 / out-of-bounds write in base64 encoding in nss (cve-2017-5461) bug 1345089 / drbg flaw in nss (cve-2017-5462) acknowledgements the nss development team would like to thank ronald crane and vladimir klebanov for...
...ments the nss development team would like to thank ronald crane and vladimir klebanov for responsibly disclosing the issues by providing advance copies of their research. compatibility nss 3.21.4 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.21.4 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.22.1 release notes
introduction network security services (nss) 3.22.1 is a patch
release for nss 3.22. the bug fixes in nss 3.22.1 are described in the "notable changes" section below. distribution information the hg tag is nss_3_22_1_rtm. nss 3.22.1 requires nspr 4.12 or newer. nss 3.22.1 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_22_1_rtm/src/ new in nss 3.22.1 new functionality no new functionality is introduced in this
release. notable changes in nss 3.22.1 bug 1194680: nss has been changed to use the pr_getenvsecure function that was made available in nspr 4.12 compatibility nss 3.22.1 shared libraries are backward compatible with all older nss 3.22 shared ...
...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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.22.2 release notes
introduction network security services (nss) 3.22.2 is a security patch
release for nss 3.22. the bug fixes in nss 3.22.2 are described in the "security fixes" section below. distribution information the hg tag is nss_3_22_2_rtm. nss 3.22.2 requires nspr 4.12 or newer. nss 3.22.2 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_22_2_rtm/src/ new in nss 3.22.2 new functionality no new functionality is introduced in this
release. security fixes in nss 3.22.2 bug 1245528 / cve-2016-1950 - fixed a heap-based buffer overflow
related to the parsing of certain asn.1 structures. an attacker could create a specially-crafted certificate which, when parsed by n...
... been backported. acknowledgements the nss development team would like to thank security researcher francis gabriel for responsibly disclosing the issue in bug 1245528. compatibility nss 3.22.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.22.2 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.22.3 release notes
introduction network security services (nss) 3.22.3 is a patch
release for nss 3.22. the bug fixes in nss 3.22.3 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_22_3_rtm. nss 3.22.3 requires nspr 4.12 or newer. nss 3.22.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_22_3_rtm/src/ new in nss 3.22.3 new functionality no new functionality is introduced in this
release. bugs fixed in nss 3.22.3 bug 1243641 - increase compatibility of tls extended master secret, don't send an empty tls extension last in the handshake compatibility nss 3.22.3 shared libraries are backward compatible with all older nss 3.
...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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.25.1 release notes
introduction network security services (nss) 3.25.1 is a patch
release for nss 3.25. distribution information the hg tag is nss_3_25_1_rtm. nss 3.25.1 requires nspr 4.12 or newer. nss 3.25.1 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_25_1_rtm/src/ new in nss 3.25.1 new functionality no new functionality is introduced in this
release. this is a patch
release to address a tls compatibility issue that some client applications experienced with nss 3.25. notable changes in nss 3.25.1 md5 signature algorithms sent by the server in certificaterequest messages are now properly ignored. previously, with rare server configurations, an md5 signature algorit...
... to abort the connection soon after. bugs fixed in nss 3.25.1 the following bug has been fixed in nss 3.25.1: ignore md5 signature algorithms in certificate requests compatibility nss 3.25.1 shared libraries are backwards compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.25.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.26.2 release notes
introduction network security services (nss) 3.26.2 is a patch
release for nss 3.26. distribution information the hg tag is nss_3_26_2_rtm. nss 3.26.2 requires nspr 4.12 or newer. nss 3.26.2 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_26_2_rtm/src/ new in nss 3.26.2 new functionality no new functionality is introduced in this
release. this is a patch
release to address a tls compatibility issue that some client applications experienced with nss 3.26.1. notable changes in nss 3.26.2 md5 signature algorithms sent by the server in certificaterequest messages are now properly ignored. previously, with rare server configurations, an md5 signature algor...
...t to abort the connection soon after. bugs fixed in nss 3.26.2 the following bug has been fixed in nss 3.26.2: ignore md5 signature algorithms in certificate requests compatibility nss 3.26.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.26.2 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.27.2 Release Notes
introduction network security services (nss) 3.27.2 is a patch
release for nss 3.27. distribution information the hg tag is nss_3_27_2_rtm. nss 3.27.2 requires nspr 4.13 or newer. nss 3.27.2 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_27_2_rtm/src/ new in nss 3.27.2 new functionality no new functionality is introduced in this
release. this is a patch
release to address a memory leak in the ssl_settrustanchors() function. notable changes in nss 3.27.2 the ssl_settrustanchors() function is used to set the distinguished names that an nss server includes in its tls certificaterequest message. if this function is not used, nss will include the disting...
...rustanchors() function is used to set the distinguished names that an nss server includes in its tls certificaterequest message. if this function is not used, nss will include the distinguished names for all trust anchors installed in the database. this can be a lengthy list. previous versions of nss leaked the memory used to store distinguished names when ssl_settrustanchors() was used. this
release fixes that error. bugs fixed in nss 3.27.2 the following bug has been fixed in nss 3.27.2: bug 1318561 - ssl_settrustanchors leaks compatibility nss 3.27.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.27.2 shared libraries without recompiling or
relinking. furthermore, applica...
NSS 3.27 release notes
introduction the network security services (nss) team has
released nss 3.27, which is a minor
release. distribution information the hg tag is nss_3_27_rtm. nss 3.27 requires netscape portable runtime (nspr) 4.13 or newer. nss 3.27 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_27_rtm/src/ new in nss 3.27 new functionality allow custom named group priorities for tls key exchange handshake (ssl_namedgroupconfig). added support for rsa-pss signatures in tls 1.2 and tls 1.3 new functions in ssl.h ssl_namedgroupconfig notable changes in nss 3.27 update 2016-10-02: the maximum tls version supported has been increased to tls 1.3 (d...
...s 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. a program linked with older nss 3.x shared libraries will work with nss 3.27 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.28.1 release notes
introduction network security services (nss) 3.28.1 is a patch
release for nss 3.28. the bug fixes in nss 3.28.1 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_28_1_rtm. nss 3.28.1 requires nspr 4.13.1 or newer. nss 3.28.1 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_28_1_rtm/src/ new in nss 3.28.1 no new functionality is introduced in this
release. 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. notable changes in nss 3.28.1 the following ca certificates were removed cn = buypass cla...
...gs fixed in nss 3.28.1 bug 1296697 - december 2016 batch of root ca changes bug 1322496 - internal error assert when the other side closes connection before reading eoed compatibility nss 3.28.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.28.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.28.2 release notes
introduction network security services (nss) 3.28.2 is a patch
release for nss 3.28. distribution information the hg tag is nss_3_28_2_rtm. nss 3.28.2 requires nspr 4.13.1 or newer. nss 3.28.2 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_28_2_rtm/src/ incorrect version number note the version numbers embedded in the nss 3.28.2 are wrong (it reports itself as version 3.28.1). new in nss 3.28.2 no new functionality is introduced in this
release. this is a patch
release includes bug fixes and addresses some compatibility issues with tls. bugs fixed in nss 3.28.2 bug 1334114 - nss 3.28 regression in signature scheme flexibility, causes connectivi...
...vity issue between ios 8 clients and nss servers with ecdsa certificates bug 1330612 - x25519 is the default curve for ecdhe in nss bug 1323150 - crash [@ readdbentry ] compatibility nss 3.28.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.28.2 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.28.4 release notes
introduction network security services (nss) 3.28.4 is a security patch
release for nss 3.28. the bug fixes in nss 3.28.4 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_28_4_rtm. nss 3.28.4 requires nspr 4.13.1 or newer. nss 3.28.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_28_4_rtm/src/ new in nss 3.28.4 no new functionality is introduced in this
release. bugs fixed in nss 3.28.4 bug 1344380 / out-of-bounds write in base64 encoding in nss (cve-2017-5461) bug 1345089 / drbg flaw in nss (cve-2017-5462) bug 1342358 - crash in tls13_destroykeyshares acknowledgements the nss development team would lik...
...ments the nss development team would like to thank ronald crane and vladimir klebanov for responsibly disclosing the issues by providing advance copies of their research. compatibility nss 3.28.4 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.28.4 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.28.5 release notes
introduction network security services (nss) 3.28.5 is a patch
release for nss 3.28. the bug fixes in nss 3.28.5 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_28_5_rtm. nss 3.28.5 requires nspr 4.13.1 or newer. nss 3.28.5 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_28_5_rtm/src/ new in nss 3.28.5 no new functionality is introduced in this
release. this is a patch
release to update the list of root ca certificates. it backports the changes that were initially
released in nss version 3.30.2. notable changes in nss 3.28.5 the following ca certificates were removed: o = japanese government, ou = app...
...nss 3.28.5 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.28.5 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.28.5 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.29.2 release notes
introduction network security services (nss) 3.29.2 is a patch
release for nss 3.29. the bug fixes in nss 3.29.2 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_29_2_rtm. nss 3.29.2 requires netscape portable runtime (nspr) 4.13.1 or newer. nss 3.29.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/
releases/nss_3_29_2_rtm/src/ new in nss 3.29.2 new functionality no new functionality is introduced in this
release. bugs fixed in nss 3.29.2 nss 3.29 and 3.29.1 included a change that reduced the time that nss considered a tls session ticket to be valid. this
release restores the session ticket lifetime to the intended value. see bug 134084...
...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
introduction network security services (nss) 3.29.5 is a security patch
release for nss 3.29. the bug fixes in nss 3.29.5 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_29_5_rtm. nss 3.29.5 requires nspr 4.13.1 or newer. nss 3.29.5 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_29_5_rtm/src/ new in nss 3.29.5 no new functionality is introduced in this
release. bugs fixed in nss 3.29.5 bug 1344380 / out-of-bounds write in base64 encoding in nss (cve-2017-5461) bug 1345089 / drbg flaw in nss (cve-2017-5462) acknowledgements the nss development team would like to thank ronald crane and vladimir klebanov f...
...ments the nss development team would like to thank ronald crane and vladimir klebanov for responsibly disclosing the issues by providing advance copies of their research. compatibility nss 3.29.5 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.29.5 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.30.1 release notes
introduction network security services (nss) 3.30.1 is a security patch
release for nss 3.30. the bug fixes in nss 3.30.1 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_30_1_rtm. nss 3.30.1 requires nspr 4.14 or newer. nss 3.30.1 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_30_1_rtm/src/ new in nss 3.30.1 no new functionality is introduced in this
release. bugs fixed in nss 3.30.1 bug 1344380 / out-of-bounds write in base64 encoding in nss (cve-2017-5461) acknowledgements the nss development team would like to thank ronald crane for responsibly disclosing the issue by providing advance copies of their...
...017-5461) acknowledgements the nss development team would like to thank ronald crane for responsibly disclosing the issue by providing advance copies of their research. compatibility nss 3.30.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.30.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.30.2 release notes
introduction network security services (nss) 3.30.2 is a patch
release for nss 3.30. the bug fixes in nss 3.30.2 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_30_2_rtm. nss 3.30.2 requires nspr 4.14 or newer. nss 3.30.2 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_30_2_rtm/src/ new in nss 3.30.2 no new functionality is introduced in this
release. this is a patch
release to update the list of root ca certificates. notable changes in nss 3.30.2 the following ca certificates were removed: o = japanese government, ou = applicationca sha-256 fingerprint: 2d:47:43:7d:e1:79:51:21:5a:12:f3:c5:8...
...n 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. a program linked with older nss 3.x shared libraries will work with nss 3.30.2 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.31.1 release notes
this is a draft document. this notice will be removed when completed. introduction the network security services (nss) team has
released nss 3.31.1, which is a patch
release for nss 3.31. distribution information the hg tag is nss_3_31_1_rtm. nss 3.31.1 requires netscape portable runtime (nspr) 4.15, or newer. nss 3.31.1 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_31_1_rtm/src/ new in nss 3.31.1 no new functionality is introduced in this
release. bugs fixed in nss 3.31.1 bug 1381784 - potential deadlock when using an external pkcs#11 token. compatibility nss 3.31.1 shared libraries are backward compatible with all older nss 3.x shared librarie...
...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
introduction network security services (nss) 3.36.1 is a patch
release for nss 3.36. distribution information the hg tag is nss_3_36_1_rtm. nss 3.36.1 requires nspr 4.19 or newer. nss 3.36.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/
releases/nss_3_36_1_rtm/src/ new in nss 3.xx new functionality no new functionality is introduced in this
release. this is a patch
release to fix regression bugs. notable changes in nss 3.36.1 in nss version 3.35 the iteration count in optimized builds, which is used for password based encryption algorithm
related to encrypted pkcs#7 or pkcs#12 data, was increased to one million iterations. that change had caused an interoperability regression with op...
...he 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. a program linked with older nss 3.x shared libraries will work with nss 3.36.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.36.6 release notes
introduction network security services (nss) 3.36.6 is a patch
release for nss 3.36. the bug fixes in nss 3.36.6 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_36_6_rtm. nss 3.36.6 requires nspr 4.19 or newer. nss 3.36.6 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_36_6_rtm/src/ new in nss 3.36.6 new functionality no new functionality is introduced in this
release. this is a patch
release to fix cve-2018-12404 bugs fixed in nss 3.36.6 bug 1485864 - cache side-channel variant of the bleichenbacher attack (cve-2018-12404) bug 1389967 and bug 1448748 - fixes for mingw on x64 platforms. compatibility nss...
...ed in nss 3.36.6 bug 1485864 - cache side-channel variant of the bleichenbacher attack (cve-2018-12404) bug 1389967 and bug 1448748 - fixes for mingw on x64 platforms. compatibility nss 3.36.6 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.36.6 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.36.7 release notes
introduction network security services (nss) 3.36.7 is a patch
release for nss 3.36. the bug fixes in nss 3.36.7 are described in the "bugs fixed" section below. it was
released on 19 january 2019. distribution information the hg tag is nss_3_36_7_rtm. nss 3.36.7 requires nspr 4.19 or newer. nss 3.36.7 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_36_7_rtm/src/ other
releases are available in nss
releases. new in nss 3.36.7 new functionality no new functionality is introduced in this
release. this is a patch
release to fix bugs. bugs fixed in nss 3.36.7 bug 1507135 and bug 1507174 - add additional null checks to several cms functions to fix a rare c...
...- add additional null checks to several cms functions to fix a rare cms crash. thanks to hanno böck and damian poddebniak for the discovery and fixes. (cve-2018-18508) compatibility nss 3.36.7 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.36.7 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.36.8 release notes
introduction network security services (nss) 3.36.8 is a patch
release for nss 3.36. the bug fixes in nss 3.36.8 are described in the "bugs fixed" section below. it was
released on 21 june 2019. distribution information the hg tag is nss_3_36_8_rtm. nss 3.36.8 requires nspr 4.19 or newer. nss 3.36.8 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_36_8_rtm/src/ other
releases are available in nss
releases. new in nss 3.36.8 new functionality no new functionality is introduced in this
release. this is a patch
release to fix bugs. bugs fixed in nss 3.36.8 1554336 - optimize away unneeded loop in mpi.c 1515342 - more thorough input checking (cve-...
... 1515342 - more thorough input checking (cve-2019-11729) 1540541 - don't unnecessarily strip leading 0's from key material during pkcs11 import (cve-2019-11719) compatibility nss 3.36.8 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.36.8 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.37 release notes
introduction the nss team has
released network security services (nss) 3.37, which is a minor
release. distribution information the hg tag is nss_3_37_rtm. nss 3.37 requires nspr 4.19 or newer. nss 3.37 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_37_rtm/src/ notable changes in nss 3.37 the tls 1.3 implementation was updated to draft 28. an issue where nss erroneously accepted hrr requests was resolved. this issue was found by oss fuzz. added hacl* poly1305 32-bit the code to support the npn protocol, which had already been disabled in a previous
release, has been fully removed. nss allows servers now to register alpn handling callb...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.37 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.41.1 release notes
introduction network security services (nss) 3.41.1 is a patch
release for nss 3.41. the bug fixes in nss 3.41.1 are described in the "bugs fixed" section below. it was
released on 22 january 2019. distribution information the hg tag is nss_3_41_1_rtm. nss 3.41.1 requires nspr 4.20 or newer. nss 3.41.1 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_41_1_rtm/src/ other
releases are available in nss
releases. new in nss 3.41.1 new functionality no new functionality is introduced in this
release. this is a patch
release to fix bugs. bugs fixed in nss 3.41.1 bug 1507135 and bug 1507174 - add additional null checks to several cms functions to fix a rare cms cras...
...ns 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. a program linked with older nss 3.x shared libraries will work with nss 3.41.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.42.1 release notes
introduction the nss team has
released network security services (nss) 3.42.1 on 31 january 2019, which is a patch
release. distribution information the hg tag is nss_3_42_1_rtm. nss 3.42.1 requires nspr 4.20 or newer. nss 3.42.1 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_42_1_rtm/src/ other
releases are available in nss
releases. bugs fixed in nss 3.42.1 bug 1507135 and bug 1507174 - add additional null checks to several cms functions to fix a rare cms crash. thanks to hanno böck and damian poddebniak for the discovery and fixes. this was originally announced in nss 3.42, but was mistakenly not included in the
release. (cve-2018-18508) this bugz...
...he 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. a program linked with older nss 3.x shared libraries will work with nss 3.42.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.44.2 release notes
introduction network security services (nss) 3.44.2 is a patch
release for nss 3.44. the bug fixes in nss 3.44.2 are described in the "bugs fixed" section below. it was
released on 2 october 2019. distribution information the hg tag is nss_3_44_2_rtm. nss 3.44.2 requires nspr 4.21 or newer. nss 3.44.2 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_44_2_rtm/src/ other
releases are available in nss
releases. new in nss 3.44.2 no new functionality is introduced in this
release. 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 ...
...he 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. a program linked with older nss 3.x shared libraries will work with nss 3.44.2 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.44.3 release notes
introduction network security services (nss) 3.44.3 is a patch
release for nss 3.44. the bug fixes in nss 3.44.3 are described in the "bugs fixed" section below. it was
released on 19 november 2019. the nss team would like to recognize first-time contributors: craig disselkoen distribution information the hg tag is nss_3_44_3_rtm. nss 3.44.3 requires nspr 4.21 or newer. nss 3.44.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_44_3_rtm/src/ other
releases are available in nss
releases. new in nss 3.44.3 no new functionality is introduced in this
release. bugs fixed in nss 3.44.3 bug 1579060 - don't set the constructed bit for issueruniqueid and sub...
...ll 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. a program linked with older nss 3.x shared libraries will work with nss 3.44.3 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.44.4 release notes
introduction the nss team has
released network security services (nss) 3.44.4 on 19 may 2020. this is a security patch
release. thank you to cesar pereida garcia and the network and information security group (nisec) at tampere university for reporting this issue. distribution information the hg tag is nss_3_44_4_rtm. nss 3.44.4 requires nspr 4.21 or newer. nss 3.44.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_44_4_rtm/src/ other
releases are available in nss
releases. new in nss 3.44.4 no new functionality is introduced in this
release. bugs fixed in nss 3.44.4 cve-2020-12399 - force a fixed length for dsa exponentiation compatibility n...
...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
introduction network security services (nss) 3.46.1 is a patch
release for nss 3.46. the bug fixes in nss 3.46.1 are described in the "bugs fixed" section below. it was
released on 2 october 2019. distribution information the hg tag is nss_3_46_1_rtm. nss 3.46.1 requires nspr 4.22 or newer. nss 3.46.1 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_46_1_rtm/src/ other
releases are available in nss
releases. new in nss 3.46.1 no new functionality is introduced in this
release. 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 ...
...he 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. a program linked with older nss 3.x shared libraries will work with nss 3.46.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.47.1 release notes
introduction network security services (nss) 3.47.1 is a patch
release for nss 3.47. the bug fixes in nss 3.47.1 are described in the "bugs fixed" section below. it was
released on 19 november 2019. the nss team would like to recognize first-time contributors: craig disselkoen distribution information the hg tag is nss_3_47_1_rtm. nss 3.47.1 requires nspr 4.23 or newer. nss 3.47.1 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_47_1_rtm/src/ other
releases are available in nss
releases. new in nss 3.47.1 no new functionality is introduced in this
release. bugs fixed in nss 3.47.1 cve-2019-11745 - encryptupdate should use maxout, not block size bug ...
...ll 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. a program linked with older nss 3.x shared libraries will work with nss 3.47.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.48.1 release notes
introduction network security services (nss) 3.48.1 is a patch
release for nss 3.48. the bug fixes in nss 3.48.1 are described in the "bugs fixed" section below. it was
released on 13 january 2020. distribution information the hg tag is nss_3_48_1_rtm. nss 3.48.1 requires nspr 4.23 or newer. nss 3.48.1 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_48_1_rtm/src/ other
releases are available in nss
releases. new in nss 3.48.1 no new functionality is introduced in this
release. bugs fixed in nss 3.48.1 bug 1606992 - cache the most recent pbkdf2 password hash, to speed up repeated sdr operations, important with the increased kdf iteration counts. this bu...
...ll 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. a program linked with older nss 3.x shared libraries will work with nss 3.48.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.49.1 release notes
introduction network security services (nss) 3.49.1 is a patch
release for nss 3.49. the bug fixes in nss 3.49.1 are described in the "bugs fixed" section below. it was
released on 13 january 2020. distribution information the hg tag is nss_3_49_1_rtm. nss 3.49.1 requires nspr 4.24 or newer. nss 3.49.1 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_49_1_rtm/src/ other
releases are available in nss
releases. new in nss 3.49.1 no new functionality is introduced in this
release. bugs fixed in nss 3.49.1 bug 1606992 - cache the most recent pbkdf2 password hash, to speed up repeated sdr operations, important with the increased kdf iteration counts. this bu...
...ll 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. a program linked with older nss 3.x shared libraries will work with nss 3.49.1 shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
NSS 3.52.1 release notes
introduction the nss team has
released network security services (nss) 3.52.1 on 19 may 2020. this is a security patch
release. thank you to cesar pereida garcia and the network and information security group (nisec) at tampere university for reporting this issue. distribution information the hg tag is nss_3_52_1_rtm. nss 3.52.1 requires nspr 4.25 or newer. nss 3.52.1 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_52_1_rtm/src/ other
releases are available in nss
releases. new in nss 3.52.1 no new functionality is introduced in this
release. bugs fixed in nss 3.52.1 cve-2020-12399 - force a fixed length for dsa exponentiation compatibility nss 3.
...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
introduction the nss team has
released network security services (nss) 3.53.1 on 16 june 2020. this is a security patch
release. thank you to sohaib ul hassan, billy bob brumley, and the network and information security group (nisec) at tampere university for reporting this issue and providing a patch. distribution information the hg tag is nss_3_53_1_rtm. nss 3.53.1 requires nspr 4.25 or newer. nss 3.53.1 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_53_1_rtm/src/ other
releases are available in nss
releases. new in nss 3.53.1 no new functionality is introduced in this
release. bugs fixed in nss 3.53.1 cve-2020-12402 - use constant-time gcd and mod...
...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 release notes template
draft (remove line when document is finished) introduction the nss team has
released network security services (nss) 3.xx, which is a minor
release. or network security services (nss) 3.xx.y is a patch
release for nss 3.xx. the bug fixes in nss 3.xx.y are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_xx_rtm. nss 3.xx requires nspr 4.xx or newer. nss 3.xx 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_xx_rtm/src/ (make a link) new in nss 3.xx new functionality either: no new functionality is introduced in this
release. this is a patch
release to fix ... or: ... new functions in ___.h function - description ...
...tone=3.xx (make a link) acknowledgements the nss development team would like to thank ... for responsibly disclosing the issue by providing advance copies of their research. compatibility nss 3.xx.y shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.xx.y shared libraries without recompiling or
relinking. 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. feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...
Document.registerElement() - Web APIs
warning: document.registe
relement() is deprecated in favor of customelements.define(). the document.registe
relement() method registers a new custom element in the browser and returns a constructor for the new element. note: this is an experimental technology. the browser you use it in must support web components. see enabling web components in firefox. syntax var constructor = document.registe
relement(tag-name, options); parameters tag-name the name of the custom element. the name must contain a dash (-), for example my-tag. optionsoptional an object with properties prototype to base the custom element on, and extends, an existing tag to extend. both of these are optional. ...
...the mytag variable holds a constructor that you can use to create a my-tag element in the document as follows: document.body.appendchild(new mytag()); this inserts an empty my-tag element that will be visible if you use the browser's developer tools. ...
FetchEvent.isReload - Web APIs
the is
reload read-only property of the fetchevent interface returns true if the event was dispatched by the user attempting to
reload the page, and false otherwise. pressing the refresh button is a
reload while clicking a link and pressing the back button is not. syntax var
reloaded = fetchevent.is
reload value a boolean. ...
...property of the fetchevent interface returns true if the event was dispatched by the user attempting to
reload the page, and false otherwise. pressing the refresh button is a
reload while clicking a link and pressing the back button is not. syntax var
reloaded = fetchevent.is
reload value a boolean. ...
FocusEvent.relatedTarget - Web APIs
the focusevent.
relatedtarget read-only property is the secondary target, depending on the type of event: event name target
relatedtarget blur the eventtarget losing focus the eventtarget receiving focus (if any). focus the eventtarget receiving focus the eventtarget losing focus (if any) focusin the eventtarget receiving focus the eventtarget losing focus (if any) focusout the eventtarget losing focus the eventtarget receiving focus (if any) note that many elements can't have focus, which is a common reason for
relatedtarget to be null.
relatedtarget may also be set to null for security reasons, like when tabbing in or out of a page. mouseevent.
relatedtarget is a similar property for mouse events. syntax...
...) focusout the eventtarget losing focus the eventtarget receiving focus (if any) note that many elements can't have focus, which is a common reason for
relatedtarget to be null.
relatedtarget may also be set to null for security reasons, like when tabbing in or out of a page. mouseevent.
relatedtarget is a similar property for mouse events. syntax secondtarget = focusevent.
relatedtarget specifications specification status comment ui eventsthe definition of 'focusevent.
relatedtarget' in that specification. working draft document object model (dom) level 3 events specificationthe definition of 'focusevent.
relatedtarget' in that specification. obsolete initial definition. ...
HTMLLinkElement.rel - Web APIs
the htmllinkelement.
rel property reflects the
rel attribute. 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. the most common use of this attribute is to specify a link to an external style sheet: the property is set to stylesheet, and the href attribute is set to the url of an external style sheet to format the page. syntax var
relstr = linkelt.
rel; linkelt.
rel =
relstr; example var links = document.getelementsbytagname('link'); var length = links.length; for (var i = 0; i < length; i++) { alert(links[i]); } specifications specification status comment html living standardthe definition of '
rel' in that specification. living s...
... var length = links.length; for (var i = 0; i < length; i++) { alert(links[i]); } specifications specification status comment html living standardthe definition of '
rel' in that specification. living standard no change from document object model (dom) level 2 html specification document object model (dom) level 2 html specificationthe definition of '
rel' in that specification. obsolete no change from document object model (dom) level 1 specification document object model (dom) level 1 specificationthe definition of '
rel' in that specification. obsolete initial definition. ...
SVGMarkerElement - Web APIs
svg path segment interface the svgmarke
relement interface corresponds to the marker element. interface overview also implement none methods void setorienttoangle(in svgangle angle) void setorienttoauto() properties svganimatedlength refx svganimatedlength refy svganimatedenumeration markerunits svganimatedlength markerwidth svganimatedlength markerheight svganimatedenumeration orienttype svganimatedangle orientangle constants ...
... edge ? firefox ? ie ? opera ? ...
WritableStreamDefaultWriter.releaseLock() - Web APIs
the
releaselock() method of the writablestreamdefaultwriter interface
releases the writer's lock on the corresponding stream. after the lock is
released, the writer is no longer active. if the associated stream is errored when the lock is
released, the writer will appear errored in the same way from now on; otherwise, the writer will appear closed. syntax writablestreamdefaultwritere.
releaselock() parameters none. return value undefined. examples const writablestream = new writablestream({ write(chunk) { ... }, close() { ... }, abort(err) { ... } }, queuingstrategy); ... const writer = writablestream.getwriter(); ... ...
... appear errored in the same way from now on; otherwise, the writer will appear closed. syntax writablestreamdefaultwritere.
releaselock() parameters none. return value undefined. examples const writablestream = new writablestream({ write(chunk) { ... }, close() { ... }, abort(err) { ... } }, queuingstrategy); ... const writer = writablestream.getwriter(); ... //
release writer's lock on the stream when desired writer.
releaselock(); specifications specification status comment streamsthe definition of '
releaselock()' in that specification. living standard initial definition. ...
Forms related code snippets - Archive of obsolete content
here are some <form>
related code snippets. date picker (before implementing it in a working environment, please read the note about the const statement compatibility) <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>datepicker example - mdn</title> <script type="text/javascript"> /*\ |*| |*| datepicker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is
released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ (function () { function datepicker (otarget) { const otable = document.createelement("table"), ohrow = document.createeleme...
Gaia - MDN Web Docs Glossary: Definitions of Web-related terms
the user interface and default application suite of the firefox os platform. once firefox os starts, anything drawn to screen is a product of the gaia layer (e.g., the lock screen, home screen, standard apps). gaia is implemented enti
rely with html, css, and javascript, and its only interfaces to the underlying operating system are through open web apis, which the gecko layer implements. you can install third-party apps alongside gaia. learn more technical reference gaia platform guide gaia development/hacking guide ...
Gecko - MDN Web Docs Glossary: Definitions of Web-related terms
eveloped by the mozilla project and used in many apps/devices, including firefox and firefox os. web browsers need software called a layout engine to interpret html, css, javascript, and embedded content (like images) and draw everything to your screen. besides this, gecko makes sure associated apis work well on every operating system gecko supports, and that appropriate apis are exposed only to
relevant support targets. this means that gecko includes, among other things, a networking stack, graphics stack, layout engine, a javascript virtual machine, and porting layers. since all firefox os apps are web apps, firefox os uses gecko as its app runtime as well. learn more general knowledge gecko on wikipedia technical reference the gecko documentation on mdn ...
Google Chrome - MDN Web Docs Glossary: Definitions of Web-related terms
link. learn more general knowledge google chrome on wikipedia for chrome users use one of these links if you're an everyday user. android ios desktop for web developers if you want to try the latest chrome features, install one of the pre-stable builds. google pushes updates frequently and has designed the distributions to run side-by-side with the stable version. visit the chrome
releases blog to learn what's new. chrome dev for android chrome canary for desktop. ...
Graceful degradation - MDN Web Docs Glossary: Definitions of Web-related terms
ke styling and layout should be provided where possible, for example by using the css cascade, or html fallback behaviour. some good examples can be found in handling common html and css problems. it is a useful technique that allows web developers to focus on developing the best possible websites, given that those websites are accessed by multiple unknown user-agents. progressive enhancement is
related but different — often seen as going in the opposite direction to graceful degredation. in reality both approaches are valid and can often complement one another. ...
Grid - MDN Web Docs Glossary: Definitions of Web-related terms
a css grid is defined using the grid value of the display property; you can define columns and rows on your grid using the grid-template-rows and grid-template-columns properties. the grid that you define using these properties is described as an explicit grid. if you place content outside of this explicit grid, or if you are
relying on auto-placement and the grid algorithm needs to create additional row or column tracks to hold grid items, then extra tracks will be created in the implicit grid. the implicit grid is the grid created automatically due to content being added outside of the tracks defined. in the example below i have created an explicit grid of three columns and two rows. the third row on the grid is an implicit grid row track, formed due to their being more than the ...
HTTP header - MDN Web Docs Glossary: Definitions of Web-related terms
eaders are case-insensitive, begins at the start of a line and are immediately followed by a ':' and a value depending of the header itself. the value finish at the next crlf or at the end of the message. traditionally, headers are classed in categories, though this classification is no more part of any specification: general header: headers applying to both requests and responses but with no
relation to the data eventually transmitted in the body. request header: headers containing more information about the resource to be fetched or about the client itself. response header: headers with additional information about the response, like its location or about the server itself (name, version, …). entity header: headers containing more information about the body of the entity, like its ...
High-level programming language - MDN Web Docs Glossary: Definitions of Web-related terms
a high-level programming language has a significant abstraction from the details of computer operation. it is designed to be easily understood by humans and for this reason they must be translated by another software. unlike low-level programming languages, it may use natural language elements, or may automate (or even enti
rely hide) significant areas of computing systems, making the process of developing simpler and more understandable
relative to a lower-level language. the amount of abstraction provided defines how "high-level" a programming language is. the idea of a language automatically translatable into machine code, but nearer to human logic, was introduced in computer science in the 1950s, especially thanks to the work of john backus (ibm), to whom it owes the first high-le...
Key - MDN Web Docs Glossary: Definitions of Web-related terms
a key is a piece of information used by a cipher for encryption and/or decryption. encrypted messages should remain secure even if everything about the cryptosystem, except for the key, is public knowledge. in symmetric-key cryptography, the same key is used for both encryption and decryption. in public-key cryptography, there exists a pair of
related keys known as the public key and private key. the public key is freely available, whereas the private key is kept secret. the public key is able to encrypt messages that only the corresponding private key is able to decrypt, and vice versa. ...
Keyword - MDN Web Docs Glossary: Definitions of Web-related terms
a keyword is a word or phrase that describes content. online keywords are used as queries for search engines or as words identifying content on websites. when you use a search engine, you use keywords to specify what you are looking for, and the search engine returns
relevant webpages. for more accurate results, try more specific keywords, such as "blue mustang gto" instead of simply "mustang". webpages also use keywords in a meta tag (in the <head> section) to describe page content, so search engines can better identify and organize webpages. learn more general knowledge keyword on wikipedia ...
LGPL - MDN Web Docs Glossary: Definitions of Web-related terms
lgpl (gnu lesser general public license) is a free software license published by the free software foundation. the lgpl provides a more permissive alternative for the strictly copyleft gpl. while any derivative work using a gpl-licensed program must be
released under the same terms (free to use, share, study, and modify), the lgpl only requires the lgpl-licensed component of the derivative program to continue using the lgpl, not the whole program. lgpl is usually used to license shared components such as libraries (.dll, .so, .jar, etc.). learn more general knowledge gnu lgpl on wikipedia lgpl license text on gnu.org ...
Microsoft Internet Explorer - MDN Web Docs Glossary: Definitions of Web-related terms
ree graphical browser maintained by microsoft for legacy enterprise uses. microsoft edge is currently the default windows browser. microsoft first bundled ie with windows in 1995 as part of the package called "microsoft plus!". by around 2002, internet explorer had become the most used browser in the world, but has since lost ground to chrome, firefox, edge, and safari. ie has gone through many
releases and currently stands at version 11.0.12, with desktop, mobile, and xbox console versions available. formerly available on mac and unix, microsoft discontinued those versions in 2003 and 2001 respectively. learn more general knowledge internet explorer on wikipedia history of internet explorer on wikipedia internet explorer versions on wikipedia learning about internet explorer ht...
Modem - MDN Web Docs Glossary: Definitions of Web-related terms
a modem ("modulator-demodulator") is a device that converts digital information to analog signals and vice-versa, for sending data through networks. different kinds are used for different networks: dsl modems for telephone wires, wifi modems for short-range wi
reless radio signals, 3g modems for cellular data towers, and so on. modems are different from routers, but many companies sell modems combined with routers. learn more general knowledge modem on wikipedia ...
Mozilla Firefox - MDN Web Docs Glossary: Definitions of Web-related terms
mozilla firefox is a free open-source browser whose development is overseen by the mozilla corporation. firefox runs on windows, os x, linux, and android. first
released in november 2004, firefox is completely customizable with themes, plug-ins, and add-ons. firefox uses gecko to render webpages, and implements both current and upcoming web standards. learn more general knowledge mozilla firefox official website technical reference firefox developer documentations on mdn ...
Page prediction - MDN Web Docs Glossary: Definitions of Web-related terms
tells the browser to download resources the user is likely to visit before the user requests the content. page prediction improves performance by enabling almost instant loading of predicted content. however, page prediction may also download content a user does not seek. some web applications include a prediction feature completing search text and address bar urls based on browsing history and
related searches. for example, as the user types in the address bar, the browser might send the current text in the address bar to the search engine before the user submits the request. although browser page prediction and prediction services enable faster page loads, they consume additional bandwidth. also, pre-loaded websites and embedded content can set and read their cookies as if they were visi...
Perceived performance - MDN Web Docs Glossary: Definitions of Web-related terms
in terms of web performance, perceived performance is how fast a user interaction feels rather than how fast an interaction actually is, be that a button press or a page load. perceived performance is not how fast your site is; it's how fast your users think it is. perceived performance is not measured by when your site is done loading but when it has loaded enough for users to believe it has loaded and is interactive. ...
Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms
ity, while polyfills are often used to add missing features with javascript. special notice should be taken of accessibility. acceptable alternatives should be provided where possible. progressive enhancement is a useful technique that allows web developers to focus on developing the best possible websites while making those websites work on multiple unknown user agents. graceful degradation is
related but is not the same thing and is often seen as going in the opposite direction to progressive enhancement. in reality both approaches are valid and can often complement one another. learn more general knowledge progressive enhancement on wikipedia ...
Quality values - MDN Web Docs Glossary: Definitions of Web-related terms
hen not present, the default value is 1. 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 ir
relevant. nevertheless, with the same quality, more specific values have priority over less specific ones: text/html;q=0.8,text/*;q=0.8,*/*;q=0.8 value priority text/html 0.8 (but totally specified) text/* 0.8 (partially specified) */* 0.8 (not specified) some syntax, like the one of accept, allow additional specifiers like text/html;level=1. ...
Quaternion - MDN Web Docs Glossary: Definitions of Web-related terms
al quaternions are more involved than this, the unit quaternions (or rotational quaternions) used to represent rotation while using webgl or webxr, for example, are represented using the same syntax as a 3d point. as such, the type dompoint (or dompointreadonly) is used to store quaternions. learn more general knowledge quaternions and spatial rotation on wikipedia quaternion on wikipedia
related xrrigidtransform.orientation in the webxr device api reference ...
REST - MDN Web Docs Glossary: Definitions of Web-related terms
rest(representational state transfer) refers to a group of software architecture design constraints that bring about efficient,
reliable and scalable distributed systems. a system is called restful when it adhere to those constraints. the basic idea of rest is that a resource, e.g. a document, is transferred with its state and
relationships via well-defined, standarized operations and formats or services call themselves restful when they directly modify type of document as opposed to triggering actions somewhere. because http, the standard protocol hehind the "world wide web", "web" also transfers documents and hypertext links, simple http apis are sometimes colloguially referred to as restful apis, restful services, or simply rest services, although they don't necessarily adhere to...
RTP (Real-time Transport Protocol) and SRTP (Secure RTP) - MDN Web Docs Glossary: Definitions of Web-related terms
col which described how to transmit various media (audio, video) from one endpoint to another in a real-time fashion. rtp is suitable for video-streaming application, telephony over ip like skype and conference technologies. the secure version of rtp, srtp, is used by webrtc, and uses encryption and authentication to minimize the risk of denial-of-service attacks and security breaches. rtp is ra
rely used alone; instead, it is used in conjunction with other protocols like rtsp and sdp. learn more general knowledge introduction to the real-time transport protocol rtp on wikipedia rfc 3550 (one of the documents that specify precisely how the protocol works) ...
Request header - MDN Web Docs Glossary: Definitions of Web-related terms
request headers, like accept, accept-*, or if-* allow to perform conditional requests; others like cookie, user-agent, or referer precise the context so that the server can tailor the answer. not all headers appearing in a request are request headers. for example, the content-length appearing in a post request is actually an entity header referring to the size of the body of the request message. however, these entity headers are often called request headers in such a context. ...
Response header - MDN Web Docs Glossary: Definitions of Web-related terms
response headers, like age, location or server are used to give a more detailed context of the response. not all headers appearing in a response are response headers. for example, the content-length header is an entity header referring to the size of the body of the response message. however, these entity requests are usually called responses headers in such a context. the following shows a few response headers after a get request. ...
SMTP - MDN Web Docs Glossary: Definitions of Web-related terms
smtp (simple mail transfer protocol) is a protocol used to send a new email. like pop3 and nntp, it is a state machine-driven protocol. the protocol is
relatively straightforward. primary complications include supporting various authentication mechanisms (gssapi, cram-md5, ntlm, msn, auth login, auth plain, etc.), handling error responses, and falling back when authentication mechanisms fail (e.g., the server claims to support a mechanism, but doesn't). ...
Search engine - MDN Web Docs Glossary: Definitions of Web-related terms
y navigating hyperlinks on web pages, both within a site, and from one site to another. a web site owner can exclude areas of the site from being accessed by a search engine's web crawler (or spider), by defining "robot exclusion" information in a file named robots.txt. indexing: associating keywords and other information with specific web pages that have been crawled. this enables users to find
relevant pages as quickly as possible. searching: looking for
relevant web pages based on queries consisting of key words and other commands to the search engine. the search engine finds the urls of pages that match the query, and ranks them based on their
relevance. it then presents results to the user in order of the ranking. the most popular search engine is google. other top search engines inc...
caret - MDN Web Docs Glossary: Definitions of Web-related terms
insertion point. the word "caret" differentiates the text insertion point from the mouse cursor. on the web, a caret is used to represent the insertion point in <input> and <textarea> elements, as well as any elements whose contenteditable attribute is set, thereby allowing the contents of the element to be edited by the user. learn more general knowledge caret navigation on wikipedia css
related to the caret you can set the color of the caret for a given element's editable content by setting the element's css caret-color property to the appropriate <color> value. html elements that may present a caret these elements provide text entry fields or boxes and therefore make use of the caret. <input type="text"> <input type="password"> <input type="search"> <input type="date">, <i...
Character encoding - MDN Web Docs Glossary: Definitions of Web-related terms
ws for different textual interpretations. by specifying a particular encoding (such as utf-8), we specify how the sequence of bytes is to be interpreted. for example, in html we normally declare a character encoding of utf-8, using the following line: <meta charset="utf-8"> this ensures that you can use characters from just about any human language in your html document, and they will display
reliably. learn more general knowledge character encoding on w3c character encoding on wikipedia ...
Prerender - MDN Web Docs Glossary: Definitions of Web-related terms
with prerendering, the content is prefetched and then rendered in the background by the browser as if the content had been rendered into an invisible separate tab. when the user navigates to the prerendered content, the current content is replaced by the prerendered content instantly. <link
rel="prerender" href="https://example.com/content/to/prerender"> see also prefetch ...
Safe - MDN Web Docs Glossary: Definitions of Web-related terms
ir state: e.g. they can log or keep statistics. what is important here is that by calling a safe method, the client doesn't request any server change itself, and therefore won't create an unnecessary load or burden for the server. browsers can call safe methods without fearing to cause any harm to the server; this allows them to perform activities like pre-fetching without risk. web crawlers also
rely on calling safe methods. safe methods don't need to serve static files only; a server can generate an answer to a safe method on-the-fly, as long as the generating script guarantees safety: it should not trigger external effects, like triggering an order in an e-commerce web site. it is the responsibility of the application on the server to implement the safe semantic correctly, the webserver ...
NSPR release procedure
release checklist change the nspr version in mozilla/nsprpub/pr/include/prinit.h. change the nspr version in mozilla/nsprpub/{configure.in,configure}. change the nspr version in mozilla/nsprpub/pr/tests/vercheck.c. change the nspr version in mozilla/nsprpub/admin/repackage.sh. source tarball binary distributions right now i use the mozilla/nsprpub/admin/repackage.sh script to generate the binary distributions published on ftp.mozilla.org. as the name of the shell script implies, repackage.sh me
rely repackages binary distributions in a different format. before you run repackage.sh, you need to have built the binary distributions using the "gmake
release" makefile target. these binary distributions are jar files, which are really zip files, and they are published in the directory /...
NSPR release process
e all green. the build+test cycles of the nss tinderboxes are very long, so you usually need to wait half a day for them to cycle through. create a beta cvs tag. the naming convention is nspr_x_y_z_betan for nspr x.y.z beta n. push the beta tag to mozilla-central for testing in firefox trunk builds. ideally you should test it for a week. remove "beta" from the nspr version number for the final
release. usually you just need to update prinit.h. make a dummy change (add or remove a blank line) to mozilla/nsprpub/config/prdepend.h. create a rtm cvs tag. the naming convention is nspr_x_y_z_rtm for nspr x.y.z. upload a source tar file to https://ftp.mozilla.org/pub/mozilla....nspr/
releases/ write the
release notes. announce the
release in the mozilla nspr newsgroup. ...
NSS 3.16.1 release notes
introduction network security services (nss) 3.16.1 is a patch
release for nss 3.16. the bug fixes in nss 3.16.1 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_16_1_rtm. nss 3.16.1 requires nspr 4.10.5 or newer. nss 3.16.1 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_1_rtm/src/ new in nss 3.16.1 new functionality added the "ecc" flag for modutil to select the module used for elliptic curve cryptography (ecc) operations. new functions in pk11pub.h pk11_exportderprivatekeyinfo and pk11_exportprivkeyinfo - exports a private key in a der-encoded asn.1 privatekeyinfo type or a seckeyprivatekeyinfo structur...
NSS 3.16.3 release notes
introduction network security services (nss) 3.16.3 is a patch
release for nss 3.16. the bug fixes in nss 3.16.3 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_16_3_rtm. nss 3.16.3 requires nspr 4.10.6 or newer. 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. new functions in cert.h cert_getgeneralnametypefromstring - an utlity function to lookup a value of type certgeneralnametype given a human readable string. this function was alr...
NSS 3.16.4 release notes
introduction network security services (nss) 3.16.4 is a patch
release for nss 3.16. the bug fixes in nss 3.16.4 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_16_4_rtm. nss 3.16.4 requires nspr 4.10.6 or newer. 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. notable changes in nss 3.16.4 the following 1024-bit root ca certificate was restored to allow more time to develop a better transition strategy for affected sites. it was removed in nss 3.16.3, but disc...
BluetoothCharacteristicProperties.reliableWrite - Web APIs
the
reliablewrite read-only property of the bluetoothcharacteristicproperties interface returns a boolean that is true if
reliable writes to the characteristic is permitted. syntax var aboolean = bluetoothcharacteristicproperties.
reliablewrite; value a boolean specifications specification status comment web bluetooththe definition of '
reliablewrite' in that specification. draft initial definition. ...
HTMLAnchorElement.download - Web APIs
the htmlancho
relement.download property is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser. the value, if any, specifies the default file name for use in labeling the resource in a local file system. if the name is not a valid file name in the underlying os, the browser will adjust it. note: this value might not be used for download. this value cannot be used to determine whether the download will occur. syntax var dnload = ancho
relt.download; ancho
relt.download = dnload; specifications specification status comment html living standardthe definition of 'download' in that specification. living standard initial definition. ...
HTMLAnchorElement.referrerPolicy - Web APIs
"origin" meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port. "unsafe-url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username). this case is unsafe as it can leak path information that has been concealed to third-party by using tls. ...
HTMLAreaElement.rel - Web APIs
the htmlareaelement.
rel property reflects the
rel attribute. 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. syntax var
relstr = areaelt.
rel; areaelt.
rel =
relstr; example var areas = document.getelementsbytagname("area"); var length = areas.length; for (var i = 0; i < length; i++) { alert("
rel: " + areas[i].
rel); } specifications specification status comment html living standardthe definition of '
rel' in that specification. living standard initial definition ...
Index - Web APIs
nt of the fetch api is fired when a fetch request is aborted, i.e. using abortcontroller.abort(). ...
... 16 abstractrange api, abstract, abstract interface, abstractrange, dom, dom api, interface, range, reference the abstractrange abstract interface is the base class upon which all dom range types are defined. ...
...tetiming() api, animation, experimental, method, reference, web animations, waapi, web animations api the updatetiming() method of the animationeffect interface updates the specified timing properties for an animation effect. 86 animationevent api, experimental, interface, reference, web animations the animationevent interface represents events providing information
related to animations. 87 animationevent() api, animationevent, cssom, constructor, experimental, reference, web animations the animationevent() constructor returns a newly created animationevent, representing an event in
relation with an animation. 88 animationevent.animationname api, animationevent, cssom, experimental, property, reference, web animations t...
...And 210 more matches
Index
), it is based on a cross platform portability layer, called the netscape portable runtime (nspr), which provides cross platform application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming. nss offers lots of functionality; we'll walk through the list of modules, design principles, and important
relevant standards. in order to allow interoperability between software and devices that perform cryptographic operations, nss conforms to a standard called pkcs#11. (note that it's important to look at the number 11, as there are other pkcs standards with different numbers that define quite different topics.) a software or hardware module conforming to the pkcs#11 standard implements an interf...
...alls, which allow querying the characteristics and offered services of the module. multiple elements of nss's own modules have been implemented with this interface, and nss makes use of this interface when talking to those modules. this strategy allows nss to work with many hardware devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that secu
rely protect a secret key) and software modules (e.g., to allow to load such modules as a plugin that provides additional algorithms or stores key or trust information) that implement the pkcs#11 interface. a core element of nss is freebl, a base library providing hash functions, big number calculations, and cryptographic algorithms. softoken is an nss module that exposes most freebl functional...
...vironment that describes how to use public key encryption is called public key infrastructure (pki). the public keys that are exchanged between parties are transported using a container; the container is called a certificate, following standard x.509 version 3. a certificate contains lots of other details; for example, it contains a signature by a third party that expresses trust in the ownership
relationship for the certificate. 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. many (if not most) of the operations performed by nss involve the use of x.509 certificates (often abbreviated as “cert”, unfortunately making it easy to confuse with the term “computer emergency respons...
...And 130 more matches
Experimental features in Firefox
wser, firefox nightly, every day. these nightly builds of firefox typically include experimental or partially-implemented features, including those for proposed or cutting-edge web platform standards. this page lists features that are in nightly versions of firefox along with information on how to activate them, if necessary. ...
... applications before these features get
released and ensure everything will still work with the latest web technology capabilities. to test these experimental features, you need to download firefox nightly or firefox developer edition. which you need is described alongside each feature's description below. editor's note: when adding features to these tables, please try to include a link to the
relevant bug or bugs using the bug macro: {{bug(bug-number)}}. html element: <dialog> the html <dialog> element and its associated dom apis provide support for html-based modal dialog boxes. the current implementation is a little inelegant but is basically functional. see bug 840640 for more details. ...
...r's note: when adding features to these tables, please try to include a link to the
relevant bug or bugs using the bug macro: {{bug(bug-number)}}. html element: <dialog> the html <dialog> element and its associated dom apis provide support for html-based modal dialog boxes. the current implementation is a little inelegant but is basically functional. see bug 840640 for more details. ...
...And 70 more matches
Index - Archive of obsolete content
27 modules add-ons, extensions a module is a self-contained unit of code, which is usually stored in a file, and has a well defined interface. the use of modules greatly improves the maintainability of code, by splitting it up into independent components, and enforcing logical boundaries between them. unfortunately, javascript does not yet have native support for modules: it has to
rely on the host application to provide it with functionality such as loading subscripts, and exporting/ importing names. we will show how to do each of these things using the built-in components object provided by xulrunner application such as firefox and thunderbird. 28 private properties people have come up with several ways to emulate private properties using existing langua...
... 127 util/list building blocks for composing lists. 128 util/match-pattern test strings containing urls against simple patterns. 129 util/object functions for working with objects. 130 util/uuid generate or parse uuids. 131 window/utils functions for working with browser windows. 132
release notes add-on sdk no summary! 133 tools add-on sdk, cfx, jpm no summary! 134 cfx add-on sdk, cfx enables you to test, run, and package add-ons. cfx is is no longer supported as of firefox 44 and no longer accepted for add-on submission, jpm should now be used instead. 135 cfx to jpm cfx, jpm, sdk, add-on a guide to workin...
... code snippets 183 embedding svg code snippets no summary! 184 examples and demos from articles no summary! 185 file i/o add-ons, code snippets, extensions, files, streams, tutorial no summary! 186 finding window handles add-ons, code snippets, extensions, xpcom, js-ctypes no summary! 187 forms
related code snippets code snippets, forms no summary! 188 html in xul for rich tooltips code snippets, examples, html, xul no summary! 189 html to dom code snippets, dom, guide, html, intermediate, needsupdate although you can now natively parse html using domparser and xmlhttprequest, this is a new feature that is not yet supported by all browsers...
...And 66 more matches
Python binding for NSS
rated by underscores. constants are all upper case with words seperated by underscores, they match the nss/nspr c api. every module, class, function, and method has associated documentation and is exposed via the standard python methodology. this documentation is available via the numerous python documentation extraction tools. also see the generated html documentation provided with each
release. nss/nspr structs are exposed as python objects. nss/nspr functions which operate on a nss/nspr object (i.e. struct) become methods of that object. nss/nspr objects which are collections support the python iteration protocol. in other words they can be iterated over, indexed by position, or used as slices. nss/nspr objects whose collection elements can be referenced by name support associ...
...bjects whose collection elements can be referenced by name support associative indexing. nss/nspr objects which have "get" and "set" api function calls are exposed as python properties. all nss/nspr python objects can print their current value by evaluting the python object in a string context or by using the python str() function. support threading. the python global interpreter lock (gil) is
released prior to calling nss/nspr c functions and reaquired after the nss/nspr c function returns. this allows other python threads to execute during the time a nss/nspr function is progress in another thread. also, any "global" values which are set in python-nss are actually thread-local. examples of this are the various callbacks which can be set and their parameters. thus each thread gets it own ...
...ion formatting. deprecated elements of the python-nss api are marked with python deprecation warnings as well as being documented in the nss module documentation. as of python 2.7 deprecation warnings are no longer reported by default. it is suggested python developers using python-nss periodically run their code with deprecation warnings enabled. depercated elements will persist for a least two
releases before being removed from the api enti
rely. project history red hat utilizes both nss and python in many of it's projects, however it was not previously possible to call nss directly from python. to solve this problem red hat generously funded the initial development of python-nss as well as it's continued maintenance. red hat following it's open source philosophy has contributed the sour...
...And 46 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
the html external resource link element (<link>) specifies
relationships between the current document and an external resource. this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... screen and apps on mobile devices) among other things. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. to link an external stylesheet, you'd include a <link> element inside your <head> like this: <link href="main.css"
rel="stylesheet"> this simple example provides the path to the stylesheet inside an href attribute, and a
rel attribute with a value of stylesheet. the
rel stands for "
relationship", and is probably one of the key features of the <link> element — the value denotes how the item being linked to is
related to the containing document. as you'll see from our link types reference, there are many differe...
..."> this simple example provides the path to the stylesheet inside an href attribute, and a
rel attribute with a value of stylesheet. the
rel stands for "
relationship", and is probably one of the key features of the <link> element — the value denotes how the item being linked to is
related to the containing document. as you'll see from our link types reference, there are many different kinds of
relationship. there are a number of other common types you'll come across. ...
...And 37 more matches
Mozilla Crypto FAQ - Archive of obsolete content
note that this document is for your information only and is not intended as legal advice. if you wish to develop and distribute cryptographic software, particularly for commercial sale or distribution, then you should consult an attorney with expertise in the particular laws and regulations that apply in your jurisdiction. ...
...ular laws and regulations that apply in your jurisdiction. i've updated this version of the mozilla crypto faq to discuss the situation now that the rsa public key algorithm is in the public domain and a full open source crypto implementation is being added to the mozilla code base. information in the faq also reflects the new u.s. ...
...regulation of encryption technology. ...
...And 28 more matches
Index
nual. this faq usually just refers back directly to the appropriate answer, there. if you're looking here just to learn about nscomptrs, you'll get a better introduction in the getting started guide. 81 getting started guide xpcom an nscomptr is an owning reference. whatever it points to has been addrefed, counting the nscomptr as one of its `owners'. an nscomptr always calls
release before letting go, whether the nscomptr is letting go so that it can point to a different object, or because the nscomptr is going out of scope. any time a new value is assigned into an nscomptr, the nscomptr automatically always
releases its old referent, if any, and (unless you tell it you already have) addrefs the new. 82 reference manual xpcom this section will help y...
... compiled xpcom components are called 'binary' or 'native'. 94 xpcom thread synchronization thread_synchronization, threads, xpcom xpcom thread synchronization primitives have the same semantics as those in nspr, and each method of these synchronization objects (e.g. mutex::lock()) has a matching function in nspr (pr_lock()). this is no accident, as mozilla:: primitives are me
rely bare-minimum wrappers around nspr's. 95 xpcom category image-sniffing-services add-ons, extensions, needscontent in versions of firefox prior to firefox 3, extensions could add decoders for new image types. however, such decoders
relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed. 96 xpcom glue ...
... used). 103 component internals obsolete, xpcom let's start by examining how xpcom components are written in c++. the most common type of component is one that is written in c++ and compiled into a shared library (a dll on a windows system or a dso on unix). 104 creating the component code xpcom this chapter goes over the basic code required to handle the
relationship between your component and xpcom. having the component found and registered properly is the goal of this first chapter of the tutorial. in the subsequent chapters, we can begin to work on the example weblock component functionality itself. 105 finishing the component xpcom at this point you have created most of the infrastructure of the component. the component will ...
...And 28 more matches
HTML documentation index - HTML: Hypertext Markup Language
bal attributes, html, reference the dropzone global attribute is an enumerated attribute indicating what types of content can be dropped on an element, using the html drag and drop api. it can have the following values: 17 hidden global attributes, html, reference the hidden global attribute is a boolean attribute indicating that the element is not yet, or is no longer,
relevant. for example, it can be used to hide elements of the page that can't be used until the login process has been completed. 18 id global attributes, html, reference, web, id the id global attribute defines an identifier (id) which must be unique in the whole document. its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (w...
...rposes. 31 tabindex global attributes, html, reference the tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the tab key, hence the name). 32 title global attributes, html, reference, title the title global attribute contains text representing advisory information
related to the element it belongs to. 33 translate experimental, global attributes, html, reference the translate global attribute is an enumerated attribute that is used to specify whether an element's translateable attribute values and its text node children should be translated when the page is localized, or whether to leave them unchanged. 34 x-ms-acceleratorkey ...
... doesn't conform to the constraints set by the pattern value, the validitystate object's read-only patternmismatch property will be true. 46 html attribute: readonly attribute, attributes, constraint validation, forms, required the boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control. 47 html attribute:
rel attribute, attributes, constraint validation, link, form,
rel the
rel attribute defines the
relationship between a linked resource and the current document. valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found. 48 html attribute: required attribute, attributes, constraint validation, forms, required the...
...And 25 more matches
WebAssembly - JavaScript
unlike most other global objects, webassembly is not a constructor (it is not a function object). you can compare it to math, which is also a namespace object for mathematical constants and functions, or to intl which is the namespace object for internationalization constructors and other language-sensitive functions. description the primary uses for the webassembly object are: loading webassembly code, using the webassembly.instantiate() function. creating new memory and table instances via the webassembly.memory()/webassembly.table() constructors. ...
...x for androidopera for androidsafari on iossamsung internetnode.jswebassemblychrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerrorchrome full support 57edge ...
...And 20 more matches
WebAssembly
rticle explains the wasm text format. this is the low-level textual representation of a .wasm module shown in browser developer tools when debugging. converting webassembly text format to wasm this article provides a guide on how to convert a webassembly module written in the text format into a .wasm binary. api reference webassembly this object acts as the namespace for all webassembly
related functionality. webassembly.global() a webassembly.global object represents a global variable instance, accessible from both javascript and importable/exportable across one or more webassembly.module instances. this allows dynamic linking of multiple modules. webassembly.module() a webassembly.module object contains stateless webassembly code that has already been compiled by the browser a...
...x for androidopera for androidsafari on iossamsung internetnode.jswebassemblychrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerrorchrome full support 57edge ...
...And 20 more matches
Modularization techniques - Archive of obsolete content
of how the object was implemented. interface interrogation is performed using the queryinterface() method. the caller passes in an id and a pointer to a address to place the resulting interface. if the query is successful, queryinterface() will return ns_ok. if the object does not support the given interface, it will return ns_nointerface. ...
...r passes in an id and a pointer to a address to place the resulting interface. if the query is successful, queryinterface() will return ns_ok. if the object does not support the given interface, it will return ns_nointerface. reference counting is performed using the addref() and
release() methods. an objects reference count generally starts at zero. addref() increments that reference count, and
release() decrements it. if a call to
release() causes the reference count to hit zero, the object will generally free itself. a successful queryinterface() will call addref() on the requested interface before returning. both addref() and
release() return the resulting reference count. the convenience macros ns_addref() and ns_
release() are preferred over calling addref and
release directly. in debu...
...on windows they expand to virtual nsresult __stdcall and virtual type __stdcall for com compatibility reasons. you don't have to use them in your interfaces unless you're concerned with com compatibility. all mozilla interfaces inherit from nsisupports. ...
...And 19 more matches
Index - Learn web development
eedsactivelearning, webmechanics as with any area of knowledge, the web comes with a lot of jargon. don't worry, we won't overwhelm you with all of it (we have a glossary if you're curious). however, there are a few basic terms you need to understand at the outset, since you'll hear these expressions all the time as you read on. it's easy to confuse these terms sometimes since they refer to
related but different functionalities. in fact, you'll sometimes see these terms misused in news reports and elsewhere, so getting them mixed up is understandable! 33 what software do i need to build a website? beginner, needsactivelearning, webmechanics you can download most of the programs you need for web development for free. we'll provide a few links in this article. ...
... it's not a markup language either. css is a style sheet language. css is what you use to selectively style html elements. for example, this css selects paragraph text, setting the color to red: 38 dealing with files beginner, codingscripting, files, guide, html, l10n:priority, theory, website when you are working on a website locally on your computer, you should keep all the
related files in a single folder that mirrors the published website's file structure on the server. this folder can live anywhere you like, but you should put it somewhere where you can easily find it, maybe on your desktop, in your home folder, or at the root of your hard drive. 39 html basics beginner, codingscripting, html, learn, web, l10n:priority html is not a programming l...
...for running code asychronously after a set time period has elapsed, or at a regular interval (e.g. a set number of times per second), discusses what they are useful for, and considers their inherent issues. 52 general asynchronous programming concepts javascript, learn, promises, threads, asynchronous, blocking in this article, we'll run through a number of important concepts
relating to asynchronous programming, and how this looks in web browsers and javascript. you should understand these concepts before working through the other articles in the module. 53 graceful asynchronous programming with promises beginner, codingscripting, guide, javascript, learn, promises, async, asynchronous, catch, finally, then promises are a comparatively new feature of...
...And 18 more matches
Gecko info for Windows accessibility vendors
make powerful applications. contains more desktop-style widgets than html and follows a box layout model, rather than being text-flow based. ...
...queryservice() can be used to switch between the interfaces (iaccessible, isimpledomdocument, isimpledomnode and isimpledomtext). if there is no msaa node for a dom node, or vice-versa, queryservice() will return null. ...
...going forward, this may be the only way to efficiently find the content area, as mozilla will begin to become a windowless application, with an exception for plugins which create their own window. when you see the content window receive focus, first check the role. if it is role_pane or role_document then this should be treated as a document for the default modality of the screen r...
...And 16 more matches
Getting Started Guide
; the getting started guide is short. introduction what is nscomptr? nscomptr is a tool to help prevent leaks. nscomptr is a "smart pointer". it is a template class that acts, syntactically, just like an ordinary pointer in c or c++, i.e., you can apply * or -> to it to "get to" what it points at. nscomptr is smart in that, unlike a raw c++ pointer to an xpcom object, nscomptr manages addref,
release, and queryinterface for you. nscomptr is defined in the source files: xpcom/base/nscomptr.h xpcom/base/nscomptr.cpp ...though you probably don't want to look in there, just yet. with nscomptr, you can write code that is shorter, cleaner, clearer, and safer, than you can with raw xpcom interface pointers. xpcom basics: ownership and reference counting this is a quick refresher on some...
...t of the number of clients holding references to it. when that count goes to zero, the interface may delete itself. clients are expected to keep this reference count accurate by incrementing it when they acquire a reference to the interface, and decrementing it before they let go. to facilitate this, all interfaces inherit from an abstract base class that provides the member functions addref, and
release. a rule of xpcom is that any function that creates or returns an interface pointer will have already addrefed it. the caller can then hold onto the reference indefinitely, calling
release when it no longer needs it. when the last pointer to an interface is
released, the interface (and consequently, typically the underlying object) will delete itself. as long as there is an outstanding addref...
...n interface pointer will have already addrefed it. the caller can then hold onto the reference indefinitely, calling
release when it no longer needs it. when the last pointer to an interface is
released, the interface (and consequently, typically the underlying object) will delete itself. as long as there is an outstanding addref against the interface, it continues to exist. if you forget to call
release, the object will leak, i.e., the storage for that object will never be reclaimed. leaks are bad :-). a reference through which you will call addref and
release is called an owning reference. it holds a stake in the underlying object. that object cannot go away until the owning reference has
relinquished its claim. not all references need to be owning references. in fact, if two objects someh...
...And 16 more matches
Appendix: What you should know about open-source software licenses - Archive of obsolete content
appendix: what you should know about open-source software licenses draft this page is not complete. this document was authored by yutaka kachi and was originally published in japanese for the firefox developers conference summer 2007. any discussion of open-source software deserves an explanation of licensing-
related issues. in this chapter, i’ll explain some of the basics: what open-source software (oss) licenses are, what types of licenses exist, and when they’re appropriate. what is an oss license? what are the different kinds of oss licenses and what are their key characteristics? applying an oss license oss licensing today and in the future references what is an oss license? an open-source software license is a statement that anyone is free to use your source cod...
...ation. the different meanings of the word “use” when we talk about the ways an author uses a work, we mean printing or recording and distributing it. an author’s use of a printed piece, like a book or magazine, is printing and publishing it. reading a printed piece, while it is a use of it, is a “use” in a much weaker sense of the word. as far as the author is concerned, this is an un
related application of the work. this is what we might call the reader’s use of the work, and it requires no permission from the author. in some situations, such as education or citation, use in the strong, authorial sense is permitted to readers. any discussion of copyright eventually turns to the fact that some uses are prohibited, so it’s useful to understand what uses are unrestricted. ra...
...e the oss license is intended to foster source-code reuse and mutual development, it avoids restrictions on source-code duplication, distribution, and modification to the greatest extent possible. types of oss licenses and their characteristics the details of oss licenses vary from one license to the next. i’ll look at three representative licenses here, and explain some of their features and
relevant points. most attempts at explaining open source start with the gpl. this is the longest, most complicated, and hardest to understand. so instead, i’m going to start with the simplest, the modified bsd license. the table below shows a few well-known software titles and their licenses license representative software titles modified bsd freebsd, netbsd, openbsd ...
...And 14 more matches
Positioning - Learn web development
ng rule to the bottom of your css: .positioned { position: static; background: yellow; } if you now save and refresh, you'll see no difference at all, except for the updated background color of the 2nd paragraph. this is fine — as we said before, static positioning is the default behavior! note: you can see the example at this point live at 1_static-positioning.html (see source code). ...
...of your css: .positioned { position: static; background: yellow; } if you now save and refresh, you'll see no difference at all, except for the updated background color of the 2nd paragraph. this is fine — as we said before, static positioning is the default behavior! note: you can see the example at this point live at 1_static-positioning.html (see source code). ...
... so how do you modify the element's position? you need to use the top, bottom, left, and right properties, which we'll explain in the next section. ...
...And 14 more matches
Editor Embedding Guide - Archive of obsolete content
nsiwebbrowser using do_getinterface: nscomptr<nsicommandmanager> commandmanager; nsiwebbrowser->do_getinterface(getter_addrefs(commandmgr)); 2. 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). 3. verify if a command is enabled -- iscommandenabled: commandmanager->iscommanddisabled(acommand, retval) 4. get the current command state of a given command -- getcommandstate: commandmanager->getcommandstate(acommand,acommandparams) index of commands and parameters cmd_bold toggles bold style on selection. getcommandsta...
...ation on the state of the command. cmd_cutordelete cuts or deletes current selection. getcommandstate "state_enabled" (boolean) docommand no parameter note getcommandstate in these cases will return whether or not it is possible to call docommand. this will not really give you any concrete information on the state of the command. ...
...acts like delete key. getcommandstate "state_enabled" (boolean) docommand no parameter note getcommandstate in these cases will return whether or not it is possible to call docommand. this will not really give you any concrete information on the state of the command. ...
...And 13 more matches
tabbrowser - Archive of obsolete content
it is similar to the browser element, except that multiple documents can be displayed, each in a separate tab. note: starting in firefox 3 (xulrunner/gecko 1.9), this is only used in the main firefox window and cannot be used in other xul windows by third-party applications or extensions. ...
... autocompletepopup type: id the id of a popup element ...
... autocompletepopup type: id the id of a popup element used to ...
...And 13 more matches
Gecko Compatibility Handbook - Archive of obsolete content
, developed as part of the mozilla open source project and based on w3 standards rather than the proprietary approaches of the past. adhering to web standards simplifies cross-browser web development and enables accessibility. 4.x vs. gecko since 1997, much of the web's content has been developed for microsoft internet explorer 4 or netscape navigator 4. these browsers were developed before the
relevant w3c recommendations for html, css, and the dom existed. these earlier, non-standards based browsers differed in several ways from gecko: these browsers use proprietary (non-standard) html, css, and javascript. internet explorer 4 and netscape navigator 4 share support for a large part of the html 3.2 standard and basic javascript. while they support the css 1 standard to some degree, t...
...start using the user-agent string you've just created by clicking tools | user agent switcher |the name you have chosen. you can verify the string got changed by looking under help | about. you can find the user agent strings of many gecko-based browsers here. if possible, also download the actual clients (netscape, aol, compuserve) for testing. review your results the following scenarios all
relate to browser detection. for more solutions to common problems please continue reading this handbook. problem: site supports standards but does not look right try picking the internet explorer 6 user-agent string. if this works, set up your detection to serve ie 6 content to visitors with gecko in their user-agent strings. ie 6.x is actually more similar to gecko browsers than netscape 4.x is t...
...o, due to increased support of w3c standards. problem: site certified on netscape 6.x looks incorrect in other browsers if your site is already gecko-compatible, try switching back to a netscape 6 user-agent string. if it looks ok, you're probably detecting only netscape or netscape6. detecting gecko instead is the easy way to fix this as well as accomodate users of mozilla, compuserve 7, etc. (
related article) problem: site has problems in all gecko-based browsers if you are still seeing problems, take a look at the troubleshooting section of this handbook. also if you're using netscape 4.x and microsoft proprietary technologies, see using web standards in your web pages for a quick tutorial on what's different in gecko. aol or compuserve problems even if your site works on netscape 7.
...And 13 more matches
Reference Manual
able to use an nscomptr. an nscomptr is the exact same size and shape as a raw xpcom interface pointer. it can be used as a member variable without introducing bloat. most of the work of being an owning reference can be done in the constructor, destructor, and assignment operators of nscomptr. whenever you `point' the nscomptr at a different xpcom object (by assignment or initialization), it must
release its old value, if any, and addref the new. at its own destructor time it must
release as well. nscomptr only does exactly the work you would have done, if you always remembered to do the right thing. safety features type safeguards it is an invariant of nscomptr that it holds the xpcom-correct interface pointer for it's underlying type. for example, an nscomptr<nsifoo> will always hold the po...
...ter for it's underlying type. for example, an nscomptr<nsifoo> will always hold the pointer that would be returned by queryinterface, when querying an xpcom object for its nsifoo interface. in debug builds, if you subvert this invariant with one of the assignment forms that doesn't call queryinterface, nscomptr will assert at runtime in the bad assignment. // given two un-
related interfaces |nsifoo| and |nsibar|... nsibar* bar = ...; // ... nscomptr<nsifoo> foo = bar; // ns_assertion: "queryinterface needed" // ...even assuming you can get the line to compile // (either by casting, or because the types are
related by c ) this invariant is
relaxed for nscomptr<nsisupports>. like nsisupports* (or even void*), people generally use nscomptr<nsis...
...t initialized to |0| foo->dosomething(); // ns_precondition: "you can't dereference a null nscomptr with operator->()" a similar precondition intervenes on behalf of operator*. reference-counting safeguards all of the operations that extract the underlying raw pointer out of an nscomptr use a c trick to implement another safety feature. the pointer returned cannot be addrefed,
released, or deleted. nscomptr<nsifoo> foo = ...; foo->addref(); // error: |addref| is private delete foo.get(); // error: |operator delete| is private ns_
release(foo); // error: |
release| is private of course, the most important safety feature provided by nscomptr is that it addrefs and
releases automatically at the appropriate times. casting never us...
...And 13 more matches
Geometry and reference spaces in WebXR - Web APIs
is share much of the same design language. however, in order to provide the ability to present scenes in true 3d using xr headsets and other such equipment, webxr has additional concepts that must be understood. ...
...cts—both physical and virtual—are described in
relation to one another using spaces and, in particular, reference spaces. the article spatial tracking in webxr builds upon the information provided here to cover how the physical position and orientation of the user's head, as well as potentially other parts of their body such as the hands, are mapped into the digital world, as well as how the
relative positions of both physical and virtual objects are tracked as they move around, so that the scene can be properly rendered and composited. fundamentals of 3d geometry while we'll examine here the required math operations used to compute the positions, orientations, and movement of objects in virtual space—plus the need to integrate the human viewer of the scene into the mix—a thorough ...
...per_degree; times and durations note that for security reasons, domhighrestimestamp usually introduces a small amount of imprecision to the clock in order to prevent it from being used in fingerprinting and timing-based attacks. all times and durations in webxr are measured using the domhighrestimestamp type, which is a double-precision floating-point value specifying the time in milliseconds
relative to the starting time. since the value is a floating-point number, it may be accurate to well better than the millisecond level, depending on the platform and hardware. time is primarily used to determine the amount of time that's elapsed since the scene's previous animation frame was drawn. as such the time is typically in alignment with the refresh rate of the display, or some fraction the...
...And 13 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
(funcname, message) function getenv(name) configure autoconfig two directives ask thunderbird to use autoconfig at startup: # cat /usr/lib/thunderbird/defaults/pref/tb-autoconf.js // 20100526 - modification autoconfig jehan. // pref("general.config.obscure_value", 0); // for mcd .cfg files pref('general.config.filename', 'thunderbird.cfg'); // for mcd .cfg files it used to be in previous
releases (up until 7.0) in /usr/lib/thunderbird-x.0/default/pref/autoconf.js the first pref just tells us that we won't encode the file (no more rotary 13 or 7 cf below), the second pref is the name of the file to be read: /usr/lib/thunderbird/thunderbird.cfg. (or firefox.cfg if for firefox...) file encoding if needed, the encoding can be done with the perl script: moz-byteshift.pl available at ...
... $ thunderbird if thunderbird ask you to import your profile from netscape/mozilla/tb depending on you mail client history, don't import anything, here we want to check the autoconfig job alone! that should work, just restart the process by setting a different user variable (user=procacci, user=test etc... anyone in your ldap directory...) to check multiuser autoconfig. thunderbird (previous
release) support of autoconfig and ldap calls below is a "try and catch" we had in previous
release of thunderbird where that feature wasn't compiled in by default, it can help if needed ... unfortunately, the autoconfig option and ldap support for autoconfig (getldapattributes) was not compiled in fedora11 default thunderbird package (thunderbird-3.0-2.3.beta2.fc11.src.rpm) . so we needed to pat...
... unwanted white space reappeared unfortunately the 'blank space bug' has reappeared in thunderbird 1.0.2. see bug 229271. although it was corrected in mozilla mainstream: mozilla/extensions/pref/autoconfig/src/nsldapsyncquery.cpp 1.7.2.1 by late 2004, it is still present in thunderbird 1.0.2 at least :-(, so i applied the workaround i proposed in th...
...And 12 more matches
Introduction to CSS layout - Learn web development
prerequisites: the basics of html (study introduction to html), and an idea of how css works (study introduction to css.) objective: to give you an overview of css page layout techniques. each technique can be learned in greater detail in subsequent tutorials. css page layout techniques allow us to take elements contained in a web page and control where they are positioned
relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window. the page layout techniques we'll be covering in more detail in this module are normal flow the display property flexbox grid floats positioning table layout multiple-column layout each technique has its uses, advantages, and disadvantages, and no ...
...in the second example below we have defined the same grid, but this time with three child items. we've set the start and end line of each item using the grid-column and grid-row properties. this causes the items to span multiple tracks. grid example 2 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; backgr...
...n the lesson on legacy layout methods. positioning techniques positioning allows you to move an element from where it would be placed when in normal flow to another location. positioning isn’t a method for creating your main page layouts, it is more about managing and fine-tuning the position of specific items on the page. ...
...And 12 more matches
Creating the Component Code
having the component found and registered properly is the goal of this first chapter of the tutorial. in the subsequent chapters, we can begin to work on the example weblock component functionality itself. use the calculator (after learning long division) you have to write a fair amount of code to create a component library that gets loaded into xpcom. an xpcom component needs to implement at least three interfaces that xpcom requires, and often others as well. there is more code in this chapter than you'll eventually need, however. ...
...happens in all xpcom applications, whether they're embedded gecko clients, mozilla, netscape 7, compuserve, or any other software that uses xpcom. registration provides the information that applications need in order to use components properly. the weblock component must do a number of things to register itself. specifically, the component library has to contain implementations for the component-
related interfaces described in this chapter: nsimodule and nsifactory, which are entry points for your implementation code. once your component implements these interfaces, the rest of the registration process itself is simple. applications typically use regxpcom, described in the next section. the regxpcom program an explicit way to register a component is to run the application regxpcom. withou...
...out using these macros). the two other includes, nsicomponentmanager.h and nsicomponentregistrar.h, provide functions such as registerfactorylocation that are required to implement the module and factory classes in your code. identifiers in xpcom the series of nsiid variables initialized here are actually classes created for handing the 128-bit identifiers that xpcom uses to support contractual
relationships between the client and component interfaces. the variable kifactoryiid, for example, provides methods like equals() that can be used to facilitate comparisons in the code, as in the following example from the mozilla source: using class methods to handle identifiers if (aiid.equals(ns_get_iid(nsisupports))) { *ainstanceptr = (void*)(nsisupports*)this; ns_addref_this(); return ns...
...And 12 more matches
Add to iPhoto
note: this extension uses carbon routines, which can no longer be used in firefox add-ons now that firefox is a 64-bit application. you can download an installable version of this extension on amo. once installed, when you right-click on an image, you'll see among the options in the contextual menu an option to "add image to iphoto". ...
...ger fields called location and length. generic cftype routines all core foundation data types are based upon a core cftype data type. basic cftype routines handle memory management, dumping cftype objects to the console, comparing cftype values, and so forth. ...
...ion data types are based upon a core cftype data type. basic cftype routines handle memory management, dumping cftype objects to the console, comparing cftype values, and so forth. we'll be using a number of these methods, but for brevity's sake, since these are generally simple declarations, let's look at only the cf
release() and cfretain() declarations. ...
...And 12 more matches
position - CSS: Cascading Style Sheets
ive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax the position property is specified as a single keyword chosen from the list of values below. values static the element is positioned according to the normal flow of the document. the top, right, bottom, left, and z-index properties have no effect. this is the default value.
relative the element is positioned according to the normal flow of the document, and then offset
relative to itself based on the values of top, right, bottom, and left. the offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. this value creates a new stacking context when the value of z-index is n...
...e element in the page layout is the same as if position were static. this value creates a new stacking context when the value of z-index is not auto. its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined. absolute the element is removed from the normal document flow, and no space is created for the element in the page layout. it is positioned
relative to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. its final position is determined by the values of top, right, bottom, and left. this value creates a new stacking context when the value of z-index is not auto. the margins of absolutely positioned boxes do not collapse with other margins. fixed the element is removed from the nor...
...l containing block. its final position is determined by the values of top, right, bottom, and left. this value creates a new stacking context when the value of z-index is not auto. the margins of absolutely positioned boxes do not collapse with other margins. fixed the element is removed from the normal document flow, and no space is created for the element in the page layout. it is positioned
relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the css transforms spec), in which case that ancestor behaves as the containing block. (note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) its fina...
...And 12 more matches
Tamarin build documentation - Archive of obsolete content
utable (shell) for executing files in the abc file format. running the shell without any arguments will list the available options. note that additional command-line arguments are only available in the debug configuration. the tamarin codebase contains a cross-platform build system for mozilla developers. the cross-platform build system is used for daily automated build testing so it is the most
reliable system. the tamarin codebase has the ability to build additional code which supports debugging hooks. in the xcode project, this is the debug_debugger and
release_debugger configurations. the flash player builds tamarin with the debugging hooks off for codesize reasons, but the mozilla client will build tamarin with the debugging hooks on. cross-platform build (general instructions - non-a...
... will build tamarin with the debugging hooks on. cross-platform build (general instructions - non-android) prerequisites: you need python 2.5 or later and gnu make 3.81 or later. (gnu make 3.80 does not work. nor does any other brand of make.) with the right prerequisites, use these commands to build tamarin: $ hg clone http://hg.mozilla.org/tamarin-redux/ $ cd tamarin-redux $ mkdir objdir-
release $ cd objdir-
release $ python ../configure.py $ make ... $ shell/avmshell shell 1.0 build cyclone ... the avmplus executable is avmshell. optional flags: --enable-debugger - debugger build --enable-debug - debug build for verbose build of tamarin, you can pass cppflags to make. $ make cppflags=-davmplus_verbose additional instructions for non-android cross-platform tamarin-...
...target=x86_64-darwin if asc is not set, you will need to add asc.jar to the utils directory in tamarin-redux (bug 631641). download ftp://ftp.mozilla.org/pub/js/tamarin/builds/asc/latest/asc.jar put it in utils/ building tamarin for android 2.3.3 on mac public sdk/ndk setup to build tamarin for android you will need an sdk/ndk. the setup procedure below creates an android sdk/ndk enti
rely from publicly available sources. this sdk/ndk *must* be used if you've cloned tamarin at changeset 5844:92ad3ca84a0b or later and will be using the cross-compile build method. steps to create a public sdk/ndk tree on a mac: - create an sdk/ndk top folder under your main volume named /android-public. - download the android 2.3.3 mac sdk zip file from http://developer.android.com/sdk/index.html...
...And 11 more matches
Actions - Archive of obsolete content
content will be copied for each matching result (though see below for an exception) and inserted into the document. let's look at a simple example first. <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/
relateditem" object="?
relateditem"/> </query> <action> <button uri="?
relateditem" label="?
relateditem"/> </action> </template> </vbox> in this example, we omit the <xul:rule> element around the <xul:action> as it is optional when we want to generate content unconditionally. instead, the action element is placed directly inside the <xul:template> element after the qu...
... will be created for each result. there are three results, so three buttons will be created. here is the [example], and an image of what it looks like: the template builder iterates through the three results, processing the body of the action for each one in turn. the uri attribute on the button is used to specify the ending or member variable. ...
... action for each one in turn. the uri attribute on the button is used to specify the ending or member variable. in this example, there's only one variable to use, ?
relateditem, since ?start is the starting point and the start and end points cannot be the same. there are a number of things that will happen for each result. let's look at the results again: (?start = http://www.xulplanet.com/rdf/a, ?
relateditem = http://www.xulplanet.com/rdf/b) (?start = http://www.xulplanet.com/rdf/a, ?
relateditem = http://www.xulplanet.com/rdf/c) (?start = http://www.xulplanet.com/rdf/a, ?
relateditem = http://www.xulplanet.com/rdf/d) the builder will start with the first result. the button element will be copied and inserted into the document after the template. the id attribute of the new element will be set...
...And 11 more matches
Introduction to client-side frameworks - Learn web development
eworks power much of the impressive software on the modern web – including many of the websites you likely use every day. mdn web docs, which you are currently reading this on, uses the react/reactdom framework to power its front end. what frameworks are out there? there are many frameworks out there, but currently the "big four" are considered to be the following. ember ember was initially
released in december 2011 as a continuation of work that started in the sproutcore project. it is an older framework that has less users than more modern alternatives such as react and vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles. start learning ember angular angular is an open-source web application framework led ...
...s react and vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles. start learning ember angular angular is an open-source web application framework led by the angular team at google and by a community of individuals and corporations. it is a complete rewrite from the same team that built angularjs. ...
... officially
released on the 14th of september 2016. angular is a component-based framework which uses declarative html templates. at build time, transparently to developers, the framework's compiler translates the templates to optimized javascript instructions. angular uses typescript, a superset of javascript that we’ll look at in a little more detail in the next chapter. vue evan you first
released vue in 2014, after working on and learning from the original angularjs project. vue is the youngest of the big four, but has enjoyed a recent uptick in popularity. vue, like angularjs, extends html with some of its own code. apart from that, it mainly
relies on modern, standard javascript. start learning vue react facebook
released react in 2013. by this point, it had already been using ...
...And 11 more matches
Accessibility documentation index - Accessibility
ia, accessibility, wai-aria, annotations, comments, details, suggestions wai-aria version 1.3 sees the addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside web documents. typical use cases include edit suggestions (i.e. an addition and/or deletion in an editable document), and comments (e.g. an editorial comment
related to a part of a document under review). 6 aria guides aria accessible rich internet applications (aria) defines ways to make the web more accessible to people with disabilities. a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the widgets. 7 aria live regions aria, accessibility, arialive using java...
...h internet applications (aria) defines ways to make the web more accessible to people with disabilities. a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the widgets. 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. while these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. aria live regions fill this gap and provide a way to programmatically expose dynamic content changes i...
...ty, forms, web you have a form — a contact form, for example — that you want to put some accessible error checking into. examples of common problems include e-mail addresses which are not valid, or a name field which does not contain at least a first name or a surname. 10 basic form hints aria, accessibility, forms when implementing forms using traditional html form-
related elements, it is important to provide labels for controls, and explicitly associate a label with its control. 11 multipart labels: using aria for labels with embedded fields inside them aria, accessibility, ben millard, firefox, guide, help, html, html 4, jaws, needscontent, aria-labelledby, label, solution, trouble shoot, troubleshoot the solution is in an aria attribute ...
...And 11 more matches
d - SVG: Scalable Vector Graphics
t represent the command parameters. svg defines 6 types of path commands, for a total of 20 commands: moveto: m, m lineto: l, l, h, h, v, v cubic bézier curve: c, c, s, s quadratic bézier curve: q, q, t, t elliptical arc curve: a, a closepath: z, z note: commands are case-sensitive. an upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates
relative to the current position. it is always possible to specify a negative value as an argument to a command: negative angles will be anti-clockwise; absolute negative x and y values are interpreted as negative coordinates;
relative negative x values move to the left, and
relative negative y values move upwards. moveto path commands moveto instructions can be thought of as picking up the ...
...ordinate x,y. any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute lineto (l) command(s) (see below). formula: pn = {x, y} m (dx, dy)+ move the current point by shifting the last known position of the path by dx along the x-axis and by dy along the y-axis. any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit
relative lineto (l) command(s) (see below). formula: pn = {xo + dx, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,10 h 10 m 0,10 h 10 m 0,10 h 10 m 40,20 h 10 m 0,10 h 10 m 0,10 h 10 m 0,10 h 10 m 50,50 h 10 m-20...
...,y. any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute lineto (l) command(s). formula: po′ = pn = {x, y} l (dx, dy)+ draw a line from the current point to the end point, which is the current point shifted by dx along the x-axis and dy along the y-axis. any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit
relative lineto (l) command(s) (see below). formula: po′ = pn = {xo + dx, yo + dy} h x+ draw a horizontal line from the current point to the end point, which is specified by the x parameter and the current point's y coordinate. any subsequent value(s) are interpreted as parameter(s) for implicit absolute horizontal lineto (h) command(s). formula: po′ = pn = {x, y...
...And 11 more matches
Index - Archive of obsolete content
ary! 304 query.name xul attributes, xul reference no summary! 305 query.type xul attributes, xul reference no summary! 306 querytype xul attributes, xul reference no summary! 307 readonly xul attributes, xul reference no summary! 308 ref xul attributes, xul reference no summary! 309
rel xul attributes, xul reference no summary! 311 removeelement xul attributes, xul reference no summary! 312 reserved dom, deprecated, events no summary! 313 resizeafter xul attributes, xul reference no summary! 314 resizebefore xul attributes, xul reference no summary! 315 resizer.dir xul at...
...ummary! 540 onsearchcomplete needshelp, xul methods, xul reference no summary! 541 ontextentered needshelp, xul methods, xul reference no summary! 542 ontextreverted needshelp, xul methods, xul reference no summary! 543 open no summary! ...
... popup
relative to a specified node at a specific location. ...
...And 10 more matches
XUL controls - Archive of obsolete content
lement. button reference <button type="menu"> a button that has a drop down menu attached to it. pressing the button opens the menu. <button type="menu" label="view"> <menupopup> <menuitem label="list"/> <menuitem label="details"/> </menupopup> </button> more information about this type of menu button element. button reference
related elements: menupopup menuitem <button type="menu-button"> a button that that has a separate arrow button with a menu attached to it. unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed. <button type="menu-button" label="new"> <menupopup> <menuitem label="new document"/> <menuitem label="new image"...
...row button with a menu attached to it. unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed. <button type="menu-button" label="new"> <menupopup> <menuitem label="new document"/> <menuitem label="new image"/> </menupopup> </button> more information about this type of menu button element. button reference
related elements: menupopup menuitem <checkbox> a control that may be turned on and off, typically used to create options which may be enabled or disabled. <checkbox label="show toolbar labels" checked="true"/> more information about the checkbox element. checkbox reference <colorpicker> a control that may be used to select a ...
...ion> select a time for the event to start </description> more information about the description element. description reference <groupbox> a groupbox displays a labelled box around other user interface controls. <groupbox> <caption label="network"/> </groupbox> more information about the groupbox element. groupbox reference
related elements: caption <filefield> allows the user to select a file. <filefield/> filefield reference <image> an image specified by a url. <image src="start.png"/> more information about the image element. image reference <label> adds a text label to a nearby control. <la...
...And 10 more matches
UI pseudo-classes - Learn web development
erequisites: basic computer literacy, and a basic understanding of html and css, including general knowledge of pseudo-classes and pseudo-elements. objective: to understand what parts of forms are hard to style, and why; to learn what can be done to customize them. what pseudo-classes do we have available? the original pseudo-classes available to us (as of css 2.1) that are
relevant to forms are: :hover: selects an element only when it is being hovered over by a mouse pointer. :focus: selects an element only when it is focused (i.e. by being tabbed to via the keyboard). :active: selects an element only when it is being activated (i.e. while it is being clicked on, or when the return/enter key is being pressed down in the case of a keyboard activation). these basi...
...hen it is focused (i.e. by being tabbed to via the keyboard). :active: selects an element only when it is being activated (i.e. while it is being clicked on, or when the return/enter key is being pressed down in the case of a keyboard activation). these basic pseudo-classes should be familiar to you now. more recently, the css selector level 3 and css basic ui level 3 added more pseudo-classes
related to html forms that provide several other useful targetting conditions that you can take advantage of. we'll discuss these in more detail in the sections below, but briefly, the main ones we'll be looking at are: :required and :optional: targets required or optional form controls. :valid and :invalid, and :in-range and :out-of-range: target form controls that are valid/invalid according to...
... input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); } this is really useful — screenreaders already let their users know when a radio button or checkbox they encounter is checked/selected, so you don't want them to read out another dom element that indicates selection — that could be confusing. having a pu
rely visual indicator solves this problem. note: this also shows how you can combine a pseudo-class and pseudo-element if required. back to our required/optional example from before, this time we'll not alter the appearance of the input itself — we'll use generated content to add an indicating label (see it live here, and see the source code here). first of all, we'll add a paragraph to the to...
...And 10 more matches
NSS tools : modutil
the prefix sql: is not used, then the tool assumes that the given databases are in the old format. --dbprefix prefix specify the prefix used on the database files, such as my_ for my_cert8.db. this option is provided as a special case. changing the names of the certificate and key databases is not recommended. -installdir root-installation-directory specify the root installation directory
relative to which files will be installed by the -jar option. this directory should be one below which it is appropriate to store dynamic library files, such as a server's root directory. -libfile library-file specify a path to a library file containing the implementation of the pkcs #11 interface module that is being added to the database. -mechanisms mechanism-list specify the security mech...
...(this information can be edited by loading new specs using the -rawadd command.) modutil -rawlist -dbdir sql:/home/my/sharednssdb name="nss internal pkcs #11 module" parameters="configdir=. certprefix= keyprefix= secmod=secmod.db flags=readonly " nss="trustorder=75 cipherorder=100 slotparams={0x0000000...
...module name and file, and any optional information like supported ciphers and mechanisms. multiple platforms can be defined in a single install file. ...
...And 10 more matches
NSS tools : modutil
he given databases are in the old format. --dbprefix prefix specify the prefix used on the database files, such as my_ for my_cert8.db. this option is provided as a special case. changing the names of the certificate and key databases is not recommended. -installdir root-installation-directory specify the root installation directory
relative to which files will be installed by the -jar option. this directory should be one below which it is appropriate to store dynamic library files, such as a server's root directory. -libfile library-file specify a path to a library file containing the implementation of the pkcs #11 interface module that is being added to the database. ...
...(this information can be edited by loading new specs using the -rawadd command.) modutil -rawlist -dbdir sql:/home/my/sharednssdb name="nss internal pkcs #11 module" parameters="configdir=. certprefix= keyprefix= secmod=secmod.db flags=readonly " nss="trustorder=75 cipherorder=100 slotparams={0x...
...phers and mechanisms. multiple platforms can be defined in a single install file. ...
...And 10 more matches
SpiderMonkey 1.8.5
note that version 1.8.5 is outdated. the latest version of spidermonkey can always be found on the source download page. the mozilla javascript team is pleased to announce the
release of spidermonkey 1.8.5. you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js185-1.0.0.tar.gz (md5 checksum: a4574365938222adca0a6bd33329cb32). spidermonkey 1.8.5 is the javascript engine that shipped in firefox 4.0. it is much faster than spidermonkey 1.8, implements es-5 (ecma 262, 5th edition), and contains many new language and api features, described in detail below. please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup. or, file bugs at bugzilla.mozilla.org under product: core, component: javascript...
... programs are allowed, but each thread must operate on objects in a separate compartment, isolated from the other threads. the old build system (using makefile.ref) is no longer supported. spidermonkey 1.8.5 includes a new configure-based build system, introduced shortly after active development on the engine moved from cvs to mercurial. spidermonkey 1.8.5 is not binary-compatible with previous
releases, nor is it source-code compatible. many jsapi types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most sig...
...-scanning garbage collector. unlike the exact garbage collector, the new garbage collector will scan the c stack and registers in your embedding, looking for bits that it can treat as potential gc roots. the approach eliminates the need for the js_enterlocalrootscope api, and in many cases the need to explicitly root gc things or use the "root as you go" approach popular with earlier spidermonkey
releases. since this is a conservative collector, it will often find "garbage" addresses which can trigger warnings from certain code analysis tools. if you are running valgrind on your embedding, be sure to build spidermonkey with the --enable-valgrind option to suppress superflous error messages triggered by the garbage collector. this also means that objects will be finalized in a non-determini...
...And 10 more matches
SpiderMonkey 1.8.7
draft in progress - this is a draft, and right now it's mostly just a copy of the 1.8.5
release notes. xxx needs updating the mozilla javascript team is pleased to announce the
release of spidermonkey 1.8.5. you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js185-1.0.0.tar.gz (md5 checksum: a4574365938222adca0a6bd33329cb32). spidermonkey 1.8.5 is the javascript engine that shipped in firefox 4.0. it is much faster than spidermonkey 1.8, implements es-5 (ecma 262, 5th edition), and contains many new language and api features, described in detail below. please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup. or, file bugs at bugzilla.mozilla.org under product: core, component: javascript ...
...1.8.5. type inference largely obviates tracemonkey, so the tracemonkey jit has been removed. the jit is supported only on x86, x86_64 and arm architectures. on other platforms, the jit is simply disabled; javascript code runs in an interpreter, as in previous versions. it's the same language, just not as fast. migrating to spidermonkey 1.8.7 this covers migrating from version 1.8.5. see the 1.8.5
release notes for information on migrating from earlier versions. the following features in earlier versions of spidermonkey have been dropped. xxx is there anything here? spidermonkey 1.8.7 is not binary-compatible with previous
releases, nor is it source-code compatible. many jsapi types, functions, and callback signatures have changed, though most of them still have the same names and do the sa...
...-scanning garbage collector. unlike the exact garbage collector, the new garbage collector will scan the c stack and registers in your embedding, looking for bits that it can treat as potential gc roots. the approach eliminates the need for the js_enterlocalrootscope api, and in many cases the need to explicitly root gc things or use the "root as you go" approach popular with earlier spidermonkey
releases. since this is a conservative collector, it will often find "garbage" addresses which can trigger warnings from certain code analysis tools. if you are running valgrind on your embedding, be sure to build spidermonkey with the --enable-valgrind option to suppress superflous error messages triggered by the garbage collector. this also means that objects will be finalized in a non-determini...
...And 10 more matches
Introduction to XPCOM for the DOM
es, reference counting, and the nsisupports interface. a tutorial about how to add a new interface is also provided, and eventually, a more detailed discussion of class inheritance in c++. interfaces object-oriented programming is based on the used of inheritance between classes. furthermore, a class can be de declared to be "abstract" if it declares some methods but does not implement them enti
rely. pushing this concept to its maximum, a class can be "pu
rely virtual" if it declares methods without implementing any of them. such a class is called an interface. the goal of interfaces is to have a single ... interface to a set of methods that manipulate an object (often represented by a class), without worrying about the details of the implementation. if you know a class implements an interfa...
...sequences. that is why each time a pointer to an interface is assigned the address of an object, we have to increase the reference count of that object by one. the function that does this is called "addref" and is defined in the nsisupports interface. when the pointer no longers holds the address of that object, it has to decrease the reference count of that object by one. this is done using the "
release" function, also defined in the nsisupports interface. when the reference count of an object hits 0 (zero), the object deletes itself. this is why it is very important to keep track of the reference count of each object. in the first case, if we forget to addref the object, the object may delete itself before we are done using the pointer, which would cause a crash when dereferencing it. in th...
... the nsisupports interface. when the reference count of an object hits 0 (zero), the object deletes itself. this is why it is very important to keep track of the reference count of each object. in the first case, if we forget to addref the object, the object may delete itself before we are done using the pointer, which would cause a crash when dereferencing it. in the second case, if we forget to
release the object, it will never delete itself, which will cause "memory leaks", i.e. the memory is never returned because we keep the object around even if we don't need it. in both cases it's very bad, and we have to be extremely careful with the refcounting. fortunately, there are nscomptr's to make our life easier. nscomptr scott collins blessed us with the nscomptr, now let's use them. nscom...
...And 10 more matches
nsIHTMLEditor
insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ainputstring); void 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 aancho
relement); boolean isanonymouselement(in nsidomelement aelement); void makeorchangelist(in astring alisttype, in boolean enti
relist, in astring abullettype); boolean nodeisblock(in nsidomnode node); void pastenoformatting(in long aselectiontype); void rebuilddocumentfromsource(in astring asourcestring); void removealldefaultproperties(); ...
...ibute); void removeinsertionlistener(in nsicontentfilter infilter); void removelist(in astring alisttype); void replaceheadcontentswithhtml(in astring asourcetoinsert); void selectelement(in nsidomelement aelement); void setbackgroundcolor(in astring acolor); void setbodyattribute(in astring aattr, in astring avalue); void setcaretafte
relement(in nsidomelement aelement); void setcssinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setdocumenttitle(in astring atitle); void setinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setparagraphformat(in astring aparagraphformat); void updatebaseurl(); attributes ...
...he desired type of the element to create. aparentnode the parent node of the created anonymous element. aanonclass contents of the _moz_anonclass attribute. aiscreatedhidden a boolean specifying if the class "hidden" is to be added to the created anonymous element. return value a dom element. createelementwithdefaults() return a new element with default attribute values. this does not
rely on the selection, and is not sensitive to context. used primarily to supply new element for various insert element dialogs (image, link, table, and horizontalrule are the only returned elements as of 9/12/18); namedanchor was removed in firefox 63. nsidomelement createelementwithdefaults( in astring atagname ); parameters atagname the html tagname. special input value for links: use "h...
...And 10 more matches
nsILocalFile
hat is accessible via the local file system. 66 introduced gecko 1.0 deprecated gecko 14 inherits from: nsifile last changed in gecko 1.0 implemented by: @mozilla.org/file/local;1. ...
... file system. 66 introduced gecko 1.0 deprecated gecko 14 inherits from: nsifile last changed in gecko 1.0 implemented by: @mozilla.org/file/local;1. ...
...d gecko 14 inherits from: nsifile last changed in gecko 1.0 implemented by: @mozilla.org/file/local;1. ...
...And 10 more matches
Key Values - Web APIs
) "super" [4] the super key. gdk_key_super_l (0xffeb) gdk_key_super_r (0xffec) qt::key_super_l (0x01000053) qt::key_super_r (0x01000054) "symbol" the symbol modifier key (found on certain virtual keyboards). keycode_sym (63) [3] "symbollock" the symbol lock key. [1] in internet explorer (tested on
release 9 and 11), as well as in all versions of firefox, the windows key is reported as "os" instead of as "meta". this will be changed in firefox per bug 1232918. until that's fixed, these keys are returned as "os" by firefox: vk_lwin (0x5b) and vk_rwin (0x5c) on windows, and gdk_key_super_l (0xffeb), gdk_key_super_r (0xffec), gdk_key_hyper_l (0xffed), and gdk_key_hyper_r (0xffee) on linux. [2] in...
...in all versions of firefox, the windows key is reported as "os" instead of as "meta". this will be changed in firefox per bug 1232918. until that's fixed, these keys are returned as "os" by firefox: vk_lwin (0x5b) and vk_rwin (0x5c) on windows, and gdk_key_super_l (0xffeb), gdk_key_super_r (0xffec), gdk_key_hyper_l (0xffed), and gdk_key_hyper_r (0xffee) on linux. [2] internet explorer (tested on
release 9 and 11) reports "scroll" instead of "scrolllock" for the scroll lock key. [3] firefox did not add support for the symbol key until firefox 37. [4] firefox generates the key value "os" for the super and hyper keys, instead of "super" and "hyper". [5] chrome 67 and firefox 63 now correctly interpret the right alt key for keyboard layouts which map that key to altgr. see firefox bug bug 900...
...e2) "redo" redo the last action. appcommand_redo gdk_key_redo (0xff66) "undo" undo the last action. appcommand_undo gdk_key_undo (0xff65) [1] on keyboards without a dedicated del key, the mac generates the "delete" value when fn is pressed in tandem with delete (which is backspace on other platforms). ...
...And 10 more matches
WebGL best practices - Web APIs
general topics address and eliminate webgl errors your application should run without generating any webgl errors (as returned by geterror). ...
...lude warnings about fb completeness invalidations. and to a lesser degree, vao attachments (vertexattribpointer, disable/enablevertexattribarray) drawing from static, unchanging vaos is faster than mutating the same vao for every draw call. for unchanged vaos, browsers can cache the fetch limits, whereas when vaos change, browsers must revalidate and recalculate limits. the overhead for this is
relatively low, but re-using vaos means fewer vertexattribpointer calls too, so it's worth doing wherever it's easy. delete objects eagerly don't wait for the garbage collector/cycle collector to realize objects are orphaned and destroy them. implementations track the liveness of objects, so 'deleting' them at the api level only
releases the handle that refers to the actual object. (conceptually re...
...use this if you are finished with any contexts, such as probe contexts, or if you hit a fallback case. ...
...And 10 more matches
cfx - Archive of obsolete content
n the platform's default install path. supported options you can point cfx run at a different package.json file using the --pkgdir option, and pass arguments to your add-on using the --static-args option. you can specify a different version of the host application using the --binary option, passing in the path to the application binary to run. the path may be specified as a full path or may be
relative to the current directory. but note that the version must be 4.0b7 or later. cfx run runs the host application with a new profile. you can specify an existing profile using the --profiledir option, and this gives you access to that profile's history, bookmarks, and other add-ons. this enables you to run your add-on alongside debuggers like firebug. see "using --profiledir" for more informat...
...fy an existing profile using the --profiledir option, and this gives you access to that profile's history, bookmarks, and other add-ons. this enables you to run your add-on alongside debuggers like firebug. see "using --profiledir" for more information. -b binary, --binary=binary use the host application binary specified in binary. binary may be specified as a full path or as a path
relative to the current directory. --binary-args=cmdargs pass extra arguments to the binary being executed (for example, firefox). for example, 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 ...
...console' --extra-packages=extra_packages extra packages to include, specified as a comma-separated list of package names. -g config, --use-config=config pass a set of options by referencing a named configuration. -p profiledir, --profiledir=profiledir use an existing profile located in profiledir. profiledir may be specified as a full path or as a path
relative to the current directory. see "using --profiledir" for more information. --package-path=packagepath extra directories for package search. --pkgdir=pkgdir use an add-on located in pkgdir. pkgdir may be specified as a full path or as a path
relative to the current directory. --static-args=static_args pass arguments to your add-on, in json format. ...
...And 9 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
this isn’t a requirement for extension development, but i recommend it as a way to work more efficiently. preference description value nglayout.debug.disable_xul_cache (not present in firefox 3.5+) ordinarily, firefox will cache xul documents after they have been read in once, to speed subsequent displays. disabling this cache forces xul documents to be
reloaded any every time they are displayed. true browser.dom.window.dump.enabled (not present in firefox 3.5+) enables use of the dump method for debugging. refer to the “javascript debugging methods” sidebar. true javascript.options.showinconsole (present in firefox 3.5+) outputs javascript errors to the error console. true javascript.o...
...ge, but you can include multiple skin packages to allow the gui to change with different themes. chrome url use a file called a “chrome manifest” to register chrome packages with firefox and start using them. to register a package, you use a special uri scheme called a “chrome url” to represent the path to the file. chrome urls are structured as: chrome://%package name%/%package type%/%
relative path to source file% for example, the chrome url for the firefox browser window is as follows: chrome://browser/content/browser.xul here, the package name is “browser”, the file “browser.xul”, and the type of the package is “content”. source files represented through chrome urls run with universalxpconnect privileges; even if they haven’t been granted “use xpconnect as loc...
...chrome.manifest file as shown in listing 2. listing 2: content for chrome.manifest content helloworld content/ overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul register the content package (content instruction) line 1, beginning content, contains the code used to register the chrome’s content package. here, helloworld is a package name, and content/ is a
relative path to the folder where the source file is stored. registering the content package makes it so that the overlay.xul file in the content folder can be accessed using the chrome url, chrome://helloworld/content/overlay.xul. xul cross-package overlay (overlay instruction) line 2, beginning overlay, contains the code used to invoke the cross-package overlay, overlaying the firefox browser win...
...And 9 more matches
JXON - Archive of obsolete content
d into the keyvalue property, while nodeattributes, if they exist, are listed under the child object keyattributes. the constructor's argument can be the entire xml document, a documentfragment or simply an element node. /*\ |*| |*| jxon snippet #1 mdndeveloper network |*| |*| https://developer.mozilla.org/docs/jxon |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is
released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ function parsetext (svalue) { if (/^\s*$/.test(svalue)) { return null; } if (/^(?:true|false)$/i.test(svalue)) { return svalue.tolowercase() === "true"; } if (isfinite(svalue)) { return parsefloat(svalue); } if (isfinite(date.parse(svalue))) { return new date(svalue); }...
...(as suggested by the badgerfish convention). as above, the text content is stored into the keyvalue property. the constructor's argument can be the entire xml document, a documentfragment or simply an element node of it. /*\ |*| |*| jxon snippet #2 mdndeveloper network |*| |*| https://developer.mozilla.org/docs/jxon |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is
released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ function parsetext (svalue) { if (/^\s*$/.test(svalue)) { return null; } if (/^(?:true|false)$/i.test(svalue)) { return svalue.tolowercase() === "true"; } if (isfinite(svalue)) { return parsefloat(svalue); } if (isfinite(date.parse(svalue))) { return new date(svalue); }...
...ntire xml document, a documentfragment, or simply an element node within it. nodeattributes have the “@” prefix, as suggested by the badgerfish convention. in many cases, this is the most practical conversion method. /*\ |*| |*| jxon snippet #3 mdndeveloper network |*| |*| https://developer.mozilla.org/docs/jxon |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is
released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ function parsetext (svalue) { if (/^\s*$/.test(svalue)) { return null; } if (/^(?:true|false)$/i.test(svalue)) { return svalue.tolowercase() === "true"; } if (isfinite(svalue)) { return parsefloat(svalue); } if (isfinite(date.parse(svalue))) { return new date(svalue); }...
...And 9 more matches
Fundamental text and font styling - Learn web development
n this example we'll apply some different css properties to the same html sample, which looks like this: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. many a fat alley rat had met its demise while staring point blank down the cavernous bar
rel of this awesome prowling machine. truly a wonder of nature this urban predator — tommy the cat had many a story to tell. but it was a rare occasion such as this that he did.</p> you can find the finished example on github (see also the source code.) color the color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a c...
... this will cause the paragraphs to become red, rather than the standard browser default black, like so: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. many a fat alley rat had met its demise while staring point blank down the cavernous bar
rel of this awesome prowling machine. truly a wonder of nature this urban predator — tommy the cat had many a story to tell. 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 browser will onl...
... p { color: red; font-family: helvetica, arial, sans-serif; } this gives us the following result: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. many a fat alley rat had met its demise while staring point blank down the cavernous bar
rel of this awesome prowling machine. truly a wonder of nature this urban predator — tommy the cat had many a story to tell. but it was a rare occasion such as this that he did.</p> font size in our previous module's css values and units article, we reviewed length and size units. font size (set with the font-size property) can take values measured in most of these units (and others, such as ...
...And 9 more matches
Handling Mozilla Security Bugs
first, mozilla.org is appointing a security module owner charged with primary responsibility for coordinating the investigation and resolution of reported mozilla security vulnerabilities. the security module owner will have one or more peers to assist in this task. ...
...first, mozilla.org is appointing a security module owner charged with primary responsibility for coordinating the investigation and resolution of reported mozilla security vulnerabilities. the security module owner will have one or more peers to assist in this task. ...
...illa security vulnerabilities. the security module owner will have one or more peers to assist in this task. at the same time, mozilla.org is also creating a larger "mozilla security bug group" by which mozilla contributors and others can participate in addressing security vulnerabilities in mozilla. this document describes how the new security organizational structure will work, and how security-
related mozilla bug reports will be handled. note that the focus of this new structure is restricted solely to addressing actual security vulnerabilities arising from problems in mozilla code. this work is separate from the work of developers adding new security features (cryptographically-based or otherwise) to mozilla, although obviously many of the same people will be involved in both sets of act...
...And 9 more matches
Observer Notifications
ted parties have responded to the browser-lastwindow-close-requested notification and none of them requested that the close be aborted. after this is sent and handled, the browser window will close. browser-delayed-startup-finished sent when the browser window and all its components have been loaded and initialized. documents these topics indicate notifications you can monitor
related to dom documents. topic subject data description chrome-document-global-created nsidomwindow null sent immediately after a chrome document window has been set up, but before any script code has been executed. this lets extensions inject api into chrome windows as needed (see nsidomglobalpropertyinitializer for an alternative method of doing this, which use...
...ndow called just before a dom window is destroyed. inner-window-destroyed nsidomwindow called when an inner window is removed from the backward/forward cache. see working with bfcache for information about the bfcache, and inner and outer windows for details about how the window hierarchy works. extensions that cache information about windows may wish to observe this so they can
release information when the window is destroyed. the window id can be obtained from subject.queryinterface(components.interfaces.nsisupportspruint64).data outer-window-destroyed nsidomwindow called when an outer window is disconnected from its docshell. see inner and outer windows for details about how the window hierarchy works. extensions that cache information about windows may w...
... is destroyed. the window id can be obtained from subject.queryinterface(components.interfaces.nsisupportspruint64).data outer-window-destroyed nsidomwindow called when an outer window is disconnected from its docshell. see inner and outer windows for details about how the window hierarchy works. extensions that cache information about windows may wish to observe this so they can
release information when the window is destroyed. the window id can be obtained from subject.queryinterface(components.interfaces.nsisupportspruint64).data toplevel-window-ready nsiwindowwatcher called just after a new top level window has been opened and is ready, but has not yet loaded a document. xul-window-destroyed called just before a xul window is destroyed. ...
...And 9 more matches
nsIWindowsRegKey
vide scriptable access to the windows registry system. 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) the interface represents a single key in the registry. this interface is highly win32 specific. ...
...troduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) the interface represents a single key in the registry. this interface is highly win32 specific. ...
...path, in unsigned long mode); astring getchildname(in unsigned long index); astring getvaluename(in unsigned long index); unsigned long getvaluetype(in astring name); boolean haschanged(); boolean haschild(in astring name); boolean hasvalue(in astring name); boolean iswatching(); void open(in unsigned long rootkey, in astring
relpath, in unsigned long mode); nsiwindowsregkey openchild(in astring
relpath, in unsigned long mode); acstring readbinaryvalue(in astring name); unsigned long long readint64value(in astring name); unsigned long readintvalue(in astring name); astring readstringvalue(in astring name); void removechild(in astring
relpath); void removevalue...
...And 9 more matches
Window.open() - Web APIs
ip: note that in some browsers, users can override the windowfeatures settings and enable (or prevent the disabling of) features position and size features windowfeatures parameter can specify the position and size of the new window. note on position and dimension error correction position if only one of them is specified, the behavior is implementation-dependent, and web author should not
rely on it. left or screenx specifies the distance the new window is placed from the left side of the work area for applications of the user's operating system to the leftmost border (resizing handle) of the browser window. the new window cannot be initially positioned offscreen. top or screeny specifies the distance the new window is placed from the top side of the work area for applications ...
...offset is universally implemented by browser manufacturers (it is 29 pixels in ie6 sp2 with the default theme) and its purpose is to help users to notice new windows opening. if the most recently used window was maximized, then there is no offset: the new window will be maximized as well. size if only one of them is specified, the behavior is implementation-dependent, and web author should not
rely on it. width or innerwidth specifies the width of the content area, viewing area of the new secondary window in pixels. the width value includes the width of the vertical scrollbar if present. the width value does not include the sidebar if it is expanded. the minimum required value is 100. height or innerheight specifies the height of the content area, viewing area of the new secondary w...
...sent to be on. set them to no or 0, or in most cases just omit them, to be off. example: status=yes, status=1, and status have identical results. menubar if this feature is on, then the new secondary window renders the menubar. if windowfeatures is non-empty, menubar detaults to off. toolbar if this feature is on, then the new secondary window renders the toolbar buttons (back, forward,
reload, stop buttons). in addition to the toolbar buttons, firefox (before 76) will render the tab bar if it is visible, present in the parent window. (if this feature is set to off, all toolbars in the window will be invisible). if windowfeatures is non-empty, toolbar detaults to off. location if this feature is on, then the new secondary window renders the location bar or the address bar. ...
...And 9 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
gamma curve, although some articles for opengl reference use of rgba rather than srgb. webgl is usually in the rgba format; see an example of how it is used in "clearing with colors". where accessibility is concerned, however, standards and guidelines are currently written predominantly using the srgb color space, especially as it applies to color contrast ratios. in speaking specifically to
relative luminance, wcag's definition of
relative luminance notes: "note 2: almost all systems used today to view web content assume srgb encoding. unless it is known that another color space will be used to process and display the content, authors should evaluate using srgb colorspace. if using other color spaces, see understanding success criterion 1.4.3." css color module level 4 will likely cha...
...er. that changes with animation. "safer" animation means images with less contrast, not more. for more on color contrast in animation, see three flashes or below threshold understanding sc 2.3.1 icons also need sufficient contrast for perception. see wcag 2.1 technique g207 luminance it is the difference in the luminance of a color that enables us to see contrast. ...
...tion means images with less contrast, not more. for more on color contrast in animation, see three flashes or below threshold understanding sc 2.3.1 icons also need sufficient contrast for perception. see wcag 2.1 technique g207 luminance it is the difference in the luminance of a color that enables us to see contrast. here is the definition of
relative luminance as defined by the w3c: "the
relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white" this statement is of course accurate, but may be confusing when used in reference to the rgb color space, which is an integer between 0 and 255. white has 100%
relative luminance, black has 0%
relative luminance (in most but not all literature). interpreting for the w3c standard above, tha...
...And 9 more matches
font-size - CSS: Cascading Style Sheets
the font-size css property sets the size of the font. changing the font size also updates the sizes of the font size-
relative <length> units, such as em, ex, and so forth. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ctive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...arge; font-size: xx-large; font-size: xxx-large; /* <
relative-size> values */ font-size: smaller; font-size: larger; /* <length> values */ font-size: 12px; font-size: 0.8em; /* <percentage> values */ font-size: 80%; /* global values */ font-size: inherit; font-size: initial; font-size: unset; the font-size property is specified in one of the following ways: as one of the absolute-size or
relative-size keywords as a <length> or a <percentage>,
relative to the parent element's font size values xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large absolute-size keywords, based on the user's default font size (which is medium). larger, smaller
relative-size keywords. ...
...And 9 more matches
Link types - HTML: Hypertext Markup Language
if the type is set to application/rss+xml or application/atom+xml, the link defines a syndication feed. the first one defined on the page is the default. ...
... if the type is set to application/rss+xml or application/atom+xml, the link defines a syndication feed. the first one defined on the page is the default. ...
...he author. note: this may be a mailto: hyperlink, but this is not recommended on public pages as robot harvesters will quickly lead to a lot of spam sent to the address. in that case, it is better to lead to a page containing a contact form. although recognized, the rev attribute on <a>, <area> or<link> elements with a link type of made is incorrect and should be replaced by the
rel attribute with this link type. <a>, <area>, <link> <form> bookmark indicates that the hyperlink is a permalink for the nearest ancestor <article> element. if none, it is a permalink for the section that the element is most closely associated to. this allows for bookmarking a single article in a page containing multiple articles, such as on a monthly summary blog page, o...
...And 9 more matches
WebAssembly.Table - JavaScript
firefox for androidopera for androidsafari on iossamsung internetnode.jstablechrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0table() constructorchrome full support 57ed...
... full support 8.0.0table() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
...And 9 more matches
Space Manager Detailed Design - Archive of obsolete content
see the high level design document for an overview of the space manager, and as an introduction to the classes, structures and algorithms container in this, the detailed design document. nsspacemanager the space manager is the central class is a group of classes that manage the occupied and available space that exists in horizontal bands across a canvas. the primary goal of the space manager is to provide information about those bands of space to support the css notion of floated elements. ...
... and to the right. */ class nsspacemanager { public: nsspacemanager(nsipresshell* apresshell, nsiframe* aframe); ~nsspacemanager(); void* operator new(size_t asize); void operator delete(void* aptr, size_t asize); static void shutdown(); /* * get the frame that's associated with the space manager. this frame * created the space manager, and the world coordinate space is *
relative to this frame. * * you can use queryinterface() on this frame to get any additional * interfaces. */ nsiframe* getframe() const { return mframe; } /** * translate the current origin by the specified (dx, dy). this * creates a new local coordinate space
relative to the current * coordinate space. */ void translate(nscoord adx, nscoord ady) { mx += adx; my += ady...
...ce of the * local coordinate system. * * the local coordinate space origin, the y-offset, and the max size * describe a rectangle that's used to clip the underlying band of * available space, i.e. * {0, ayoffset, amaxsize.width, amaxsize.height} in the local * coordinate space * * @param ayoffset the y-offset of where the band begins. 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. the 'count' m...
...And 8 more matches
Anatomy of a video game - Game development
rame model is implemented in something called a main loop. if your game loops based on time then this will be its authority that your simulations will adhere to. but it might not need per-frame control. your game loop might be similar to the find the differences example and base itself on input events. it might require both input and simulated time. it might even loop based on something else enti
rely. modern javascript — as described in the next sections — thankfully makes it easy to develop an efficient, execute-once-per-frame main loop. of course, your game will only be as optimized as you make it. if something looks like it should be attached to a more infrequent event then it is often a good idea to break it out of the main loop (but not always). building a main loop in javascript ...
...riables are stored) and the example code did not leave us with a way to stop the loop unless the whole tab is closed or refreshed. for the first issue, if you want the main loop to just run and you do not need easy (direct) access to it, you could create it as an immediately-invoked function expression (iife). /* * starting with the semicolon is in case whatever line of code above this example *
relied on automatic semicolon insertion (asi). the browser could accidentally * think this whole example continues from the previous line. the leading semicolon * marks the beginning of our new line if the previous one was not empty or terminated. */ ;(function () { function main() { window.requestanimationframe( main ); // your main loop contents } main(); // start the cycle })(); ...
...ndow.cancelanimationframe(). you will need to pass cancelanimationframe() the id token given by requestanimationframe() when it was last called. let us assume that your game's functions and variables are built on a namespace that you called mygame. expanding our last example, the main loop would now look like: /* * starting with the semicolon is in case whatever line of code above this example *
relied on automatic semicolon insertion (asi). the browser could accidentally * think this whole example continues from the previous line. the leading semicolon * marks the beginning of our new line if the previous one was not empty or terminated. * * let us also assume that mygame is previously defined. */ ;(function () { function main() { mygame.stopmain = window.requestanimationframe( main ...
...And 8 more matches
Creating hyperlinks - Learn web development
ink to <a href="https://www.mozilla.org/" title="the best place to find more information about mozilla's mission and how to contribute">the mozilla homepage</a>. </p> this gives us the following result and hovering over the link displays the title as a tooltip. i'm creating a link to the mozilla homepage. note: a link title is only revealed on mouse hover, which means that people
relying on keyboard controls or touchscreens to navigate web pages will have difficulty accessing title information. if a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text. active learning: creating your own example link create an html document using your local ...
...ticular section of a website.). there are also two directories inside our root — pdfs and projects. these each have a single file inside them — a pdf (project-brief.pdf) and an index.html file, respectively. note that you can have two index.html files in one project, as long as they're in different filesystem locations. the second index.html would perhaps be the main landing page for project-
related information. same directory: if you wanted to include a hyperlink inside index.html (the top level index.html) pointing to contacts.html, you would specify the filename that you want to link to, because it's in the same directory as the current file. the url you would use is contacts.html: <p>want to contact a specific staff member? find details on our <a href="contacts.html">contact...
...for example, if an index.html page is uploaded to a directory called projects that sits inside the root of a web server, and the web site's domain is http://www.example.com, the page would be avai...
...And 8 more matches
Accessibility API cross-reference
es the two to be nearly the same. however, only about one third of the states and roles in sun's accessibility api's are the same as in msaa. to do fill out mac api column.(mac os x - carbon accessibility api and accessibility constants) finish aria column - add explanation of the term 'abstract role' fill out html column create aom column fill out xul column. ...
...aria live region. alert alert alert alert, alertdialog content changes over time, such as animated gif animation n/a no spec n/a a section that forms an independent part of a document, page, or site. article ...
... image or text link n/a link <a> <link> according to the pdf 1.7 spec, a <link> must not be a direct child of a <toci> (table of contents item). in such a case, they should be wrapped in a <reference> pragmatically however, user agents should expect to find <link> tags as direct children of <toci> abstract role - a perceivable section containing content that is
relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. such a page summary could be generated dynamically by a user agent or assistive technology. landmark n/a hypertext link that can be on image or text link n/a...
...And 8 more matches
Using the Browser API
a form to type search requests into. 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. you'll also notice that we're also firing these functions on the touchend event, which is effective as fire...
....log("it's not possible to navigate the history forward."); } } } so here we have functions to detect whether we can navigate forwards/backwards in the history at any point. these use htmliframeelement.getcangoback() and htmliframeelement.getcangoforward(), which return a boolean defining whether backward/forward navigation is possible at this point in the history. if true is returned, the
relevant button is disabled, and if false is returned, the
relevant button is enabled. note that promise versions of browser api dom request methods also exist, so you can use async promise style syntax if you so wish. for example: function canmovebwd() { browser.getcangoback().then(function(result) { if (result) { back.disabled = false; console.log("it's possible to navigate the ...
...h note that we haven't implemented anything sophisticated in this app, like autofilling the http://, etc.). when you press the keyboard's return button, the 'submit' event is fired, which we handle like this: urlform.addeventlistener('submit',function(e) { e.preventdefault(); browser.src = urlbar.value; urlbar.blur(); }); we first call preventdefault() to stop the form just submitting and
reloading the page — which is really not what we want. we then set the browser iframe's src attribute to equal the value of the url bar, which causes the new url to be loaded in the iframe. finally, we call blur() on the url bar to stop focusing it, so the keyboard moves off the screen, allowing us to get our full screen view back. there's another event listener added later on in the code that lis...
...And 8 more matches
Uplifting a localization from Central to Aurora
you should be good doing it the day after. ...
...you should be good doing it the day after. ...
...row away attempts that didn't work. so, here are the mercurial steps to reproduce. prerequisites: merge tool. you really want a merge tool for this. i use kdiff3; you may choose your own based on what you read at http://mercurial.selenic.com/wiki/mergeprogram a clone of your central repo. let's pretend it's at l10n-central/ab-cd. a clone of your aurora repo. let's pretend it's at
releases/l10n-mozilla-aurora/ab-cd here's how we do it: # set up a new local clone of your central repo hg clone l10n-central/ab-cd workrepo cd workrepo # pull in the changesets you have on aurora hg pull -r default ../
releases/l10n/mozilla-aurora/ab-cd now, there are two routes forward: 1) things are pretty silent. good luck, you're basically done. all you need to do is to ...
...And 8 more matches
NSS API Guidelines
nderstand existing nss code. it should also help you understand how to write new code, and where to place it. some of the guidelines in this document, are more forward-looking than documentary. these rules are here to help us all immediately achieve more consistent and usable code, but some existing code won't follow all these rules. nss api structure this section explains the structure and
relationships of the nss libraries. the layering section explains how the nss code is layered, and how higher-level functions wrap low-level functions. the libraries section descibes the nss libraries, the functionality each provides, and the layer in which the library (mostly) operates. layering each separate component of the api should live in its own layer. the functions in these apis should ne...
...tely opaque to higher level layers. that is, access to these functions should only be provided by the api directly above them. the nss apis are layered, as shown in this diagram: the boxes in the gray section, towards the center, are exported only through pkcs #11. pkcs #11 is only exported through the wrappers. the areas which need the most work (both here and throughout the code) is: the
relationship of the certificate library with just about every other component (most noticeably pkcs #12, pkcs #7, and pkcs #11) splitting low key and high key components more clearly the crypto wrappers (pkcs #11 wrappers) and high key pkcs #12 and pkcs #5 libraries nss compiles into the libraries described below. the layer indicates the main layer, seen in the previous diagram, in which th...
...tdb provides all certificate handling functions and types. the certdb library manipulates the certificate database (add, create, delete certificates and crls). it also provides general certificate-handling routines (create a certificate, verify, add/check certificate extensions). low cert lib/certdb cdbhdl.h, certdb.h, cert.h, certt.h certhi provides high-level certificate-
related functions, that do not access the certificate database, nor individual certificate data directly. currently, ocsp checking settings are exported through certhi. high cert lib/certhigh ocsp.h, ocspt.h crmf provides functions, and data types, to handle certificate management message format (cmmf) and certificate request message format (crmf, see rfc 2511) data. cmmf no lon...
...And 8 more matches
sslfnc.html
description the cipherprefsetdefault function enables or disables individual cipher suites globally. you typically call this in response to changes in user-controlled settings. you must call this function once for each cipher you want to enable or disable. to enable or disable cipher suites for an individual socket, use ssl_cipherprefset. the set of available ssl cipher suites may grow from
release to
release of nss. applications will find it desirable to determine, at run time, what ssl2 cipher kinds and ssl3 cipher suites are actually implememted in a particular
release. applications may disable any cipher suites that they don't know about (for example, that they cannot present to the user via a gui). to that end, nss provides a table that can be examined at run time. all aspects of t...
...table is contained in an external 16-bit integer named ssl_numimplementedciphers. the macro ssl_is_ssl2_cipher can be used to determine whether a particular value is an ssl2 or an ssl3 cipher. warning: using the external array ssl_implementedciphers[] directly is deprecated. it causes dynamic linking issues at run-time after an update of nss because the actual size of the array changes between
releases. the recommended way of accessing the array is through the ssl_getimplementedciphers() and ssl_getnumimplementedciphers() accessors. by default, all ssl2 and 12 ssl3/tls cipher suites are enabled. however, this does not necessarily mean that they are all permitted. the ssl_cipherprefsetdefault function cannot override cipher suite policy settings that are not permitted; see ssl export pol...
...uite numbers for the ssl_rsa_fips_with_3des_ede_cbc_sha and ssl_rsa_fips_with_des_cbc_sha cipher suites have been changed so that they are no longer "experimental" values. if an application attempts to set or set the policy or preference for one of the old fips cipher suite numbers, the library recognizes the old number and sets or gets the value for the new cipher suite number instead. in this
release, the three ssl_fortezza_ cipher suites cannot be enabled unless there is a pkcs #11 module available with a fortezza-enabled token. the ssl_fortezza_ cipher suites will be removed in nss 3.11. ssl_cipherprefgetdefault gets the current default preference setting for a specified ssl2 or ssl3 cipher suite. syntax #include "ssl.h" secstatus ssl_cipherprefsetdefault(print32 cipher, ...
...And 8 more matches
NSS Tools modutil
odule claims to be a particular mechanism's default provider, that mechanism's default provider is undefined. the following mechanisms are currently available: rsa, dsa, rc2, rc4, rc5, des, dh, fortezza, sha1, md5, md2, random (for random number generation), and friendly (meaning certificates are publicly readable). -installdir root-installation-directory specify the root installation directory
relative to which files will be installed by the -jar jar-file option. this directory should be one below which it is appropriate to store dynamic library files (for example, a server's root directory or the netscape communicator root directory). -tempdir temporary-directory the temporary directory is the location where temporary files will be created in the course of installation by the -jar jar-f...
... such as this: + pkcs11_install_script: pk11install the sample script file could contain the following: forwardcompatible { irix:6.2:mips sunos:5.5.1:sparc }platforms { winnt::x86 { modulename { "fortezza module" } modulefile { win32/fort32.dll } defaultmechanismflags{0x0001} defaultcipherflags{0x0001} files { win32/setup.exe { executable
relativepath { %temp%/setup.exe } } win32/setup.hlp {
relativepath { %temp%/setup.hlp } } win32/setup.cab {
relativepath { %temp%/setup.cab } } } } win95::x86 { equivalentplatform {winnt::x86} } sunos:5.5.1:sparc { modulename { "fortezza unix module" } modulefile { unix/fort.so } defaultmechanismflags{0x000...
...ativepath { %temp%/setup.hlp } } win32/setup.cab {
relativepath { %temp%/setup.cab } } } } win95::x86 { equivalentplatform {winnt::x86} } sunos:5.5.1:sparc { modulename { "fortezza unix module" } modulefile { unix/fort.so } defaultmechanismflags{0x0001} cipherenableflags{0x0001} files { unix/fort.so {
relativepath{%root%/lib/fort.so} absolutepath{/usr/local/netscape/lib/fort.so} filepermissions{555} } xplat/instr.html {
relativepath{%root%/docs/inst.html} absolutepath{/usr/local/netscape/docs/inst.html} filepermissions{555} } } } irix:6.2:mips { equivalentplatform { sunos:5.5.1:sparc } }} script gramm...
...And 8 more matches
Index
2 creating javascript tests automated testing, build documentation, guide, qa, spidermonkey in which test suite does your new test belong? 3 creating javascript jstest reftests ecmascript, guide, javascript, test in the js/src/tests directory, there are a few important subdirectories. ...
...h a focus on how they will affect gecko code that uses jsapi. at a high level, there are three issues to be aware of: 8 getting spidermonkey source code guide, spidermonkey you can get the spidermonkey source code in gzipped form or directly from the mercurial repository. 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. it is separated in 2 parts, one section
related to debugging and another section
related to drafting optimizations. many of these tips only apply to debug builds of the js shell; they will not function in a
release build. 10 how to embed the ja...
...e spidermonkey javascript shell, see the spidermonkey build documentation or download a compiled binary for your platform from the nightly builds. 13 jit optimization outcomes beginner, firefox, intro, needscontent, spidermonkey spidermonkey's optimizing jit, ionmonkey, uses different optimization strategies to speed up various operations. the most typical operations that are
relevant for fast program execution are property accesses and function calls. 14 jit optimization strategies junk, spidermonkey spidermonkey's optimizing jit, ionmonkey, uses various strategies to optimize operations. the most commonplace operations that are
relevant for fast program execution are property accesses and function calls. 15 jsapi cookbook spidermonkey...
...And 8 more matches
An Overview of XPCOM
opers embedding gecko as well. gecko is used in many internet applications, mostly browsers and most notably mozilla firefox. components xpcom allows you to break up large software projects into smaller pieces known as components. they are usually contained in reusable binary libraries (a dll on windows, for example, or a dso on unix), which can include one or more components. when two or more
related components are grouped together in a binary library, the library is referred to as a module. modular, component-based programming makes software easier to develop and maintain and has some well-known advantages: benefit description reuse modular code can be reused in other applications and other contexts. updates you can update components without having t...
...your application in a modular way can make it easier for you to find and maintain the parts of the application that you are interested in. mozilla has over four million lines of code, and no single individual understands the entire codebase. the best way to tackle a project of this size is to divide it into smaller, more manageable pieces, use a component programming model, and to organize
related sets of components into modules. the network library, for example, consists of components for each of the protocols, http, ftp, and others, which are bundled together and linked into a single library. this library is the networking module, also known as "necko." but it's not always a good idea to divide things up. there are some things in the world that just go together, and others that shou...
...mponents. the "stuff" that's internal to the component stays internal, and isn't exposed to xpcom. in the haste of early mozilla development, components were created where they were inappropriate, but there's been an ongoing effort to remove xpcom from places like this. interfaces how do you decide when to break apart your code? the basic idea is to identify the pieces of functionality that are
related and understand how they communicate with each other. the communication channels between different component form boundaries between those components, and when those boundaries are formalized they are known as interfaces. interfaces aren't a new idea in programming. we've all used interfaces since our first "helloworld" program, where the interface was between the code we actually wrote -- th...
...And 8 more matches
IAccessible2
[propget] hresult localizedextendedrole([out] bstr localizedextendedrole ); [propget] hresult localizedextendedstates([in] long maxlocalizedextendedstates, [out, size_is(,maxlocalizedextendedstates), length_is(, nlocalizedextendedstates)] bstr localizedextendedstates, [out] long nlocalizedextendedstates ); [propget] hresult nextendedstates([out] long nextendedstates ); [propget] hresult n
relations([out] long n
relations ); [propget] hresult
relation([in] long
relationindex, [out] iaccessible
relation
relation ); [propget] hresult
relations([in] long max
relations, [out, size_is(max
relations), length_is( n
relations)] iaccessible
relation
relations, [out] long n
relations ); hresult role([out] long role ); hresult scrollto([in] enum ia2scrolltype scrolltype ); hresult scrolltopoin...
... it with cotaskmemfree. nlocalizedextendedstates the number of localized extended states returned; the size of the returned array. return value s_false if there are no states, [out] values are null and 0 respectively. s_ok. nextendedstates() returns the number of extended states. [propget] hresult nextendedstates( [out] long nextendedstates ); parameters nextendedstates return value s_ok. ...
...tes the number of localized extended states returned; the size of the returned array. return value s_false if there are no states, [out] values are null and 0 respectively. s_ok. nextendedstates() returns the number of extended states. [propget] hresult nextendedstates( [out] long nextendedstates ); parameters nextendedstates return value s_ok. n
relations() returns the number of accessible
relations for this object. [propget] hresult n
relations( [out] long n
relations ); parameters n
relations return value s_ok.
relation() returns one accessible
relation for this object. [propget] hresult
relation( [in] long
relationindex, [out] iaccessible
relation
relation ); parameters
relationindex 0 based.
relation return value e_invalidarg if bad [in] passed, [out] value is null. s_ok.
...And 8 more matches
Document Object Model (DOM) - Web APIs
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. in particular, the element interface is enhanced to become htmlelement and various subclasses, each representing one of (or a family of closely
related) elements. the html dom api provides access to various browser features such as tabs and windows, css styles and stylesheets, browser history, and so forth. these interfaces are discussed further in the html dom api documentation. svg interfaces svg element interfaces svgaelement svgaltglyphelement svgaltglyphdefelement svgaltglyphitemelement svganimationelement svganimateel...
...html dom api provides access to various browser features such as tabs and windows, css styles and stylesheets, browser history, and so forth. these interfaces are discussed further in the html dom api documentation. ...
...urther in the html dom api documentation. ...
...And 8 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
(wave); osc.frequency.value = 440; osc.connect(audioctx.destination); osc.start(); osc.stop(audioctx.currenttime + 1); } controlling amplitude this is great, but wouldn't it be nice if we had an amplitude envelope to go with it? let's create a simple one so we get used to the methods we need to create an envelope with the web audio api. ...
...tude envelope to go with it? let's create a simple one so we get used to the methods we need to create an envelope with the web audio api. let's say our envelope has attack and
release. ...
...lope to go with it? let's create a simple one so we get used to the methods we need to create an envelope with the web audio api. let's say our envelope has attack and
release. ...
...And 8 more matches
Color picker tool - CSS: Cascading Style Sheets
"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position:
relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgb...
...00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); } .ui-color-picker .alpha-mask { width: 100%; height: 100%; background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; border: 1px solid #777; background-color: #fff; position:
relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input in...
...a-topic="hexa"] > input { width: 90px; height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); float: left; position:
relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .preview-color { width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); position: absolute; z-index: 1; } .ui-color-picker .switch_mode { width: 10px; height: 20px; position:
relative; border-radiu...
...And 8 more matches
Event reference
een cut and copied to the clipboard copy the selection has been copied to the clipboard paste the item from the clipboard has been pasted keyboard events event name fired when keydown any key is pressed keypress any key (except shift, fn, or capslock) is in a pressed position (fired continuously). keyup any key is
released mouse events event name fired when auxclick a pointing device button (any non-primary button) has been pressed and
released on an element. click a pointing device button (any button; soon to be primary button only) has been pressed and
released on an element. contextmenu the right button of the mouse is clicked (before the conte...
... mousemove a pointing device is moved over an element (fired continuously as the mouse moves). mouseover a pointing device is moved onto the element that has the listener attached or onto one of its children. mouseout a pointing device is moved off the element that has the listener attached or off one of its children. mouseup a pointing device button is
released over an element. pointerlockchange the pointer was locked or
released. pointerlockerror it was impossible to lock the pointer for technical reasons or because the permission was denied. select some text is being selected. wheel a wheel button of a pointing device is rotated in any direction. drag & drop events event name ...
... reasons or because the permission was denied. select some text is being selected. wheel a wheel button of a pointing device is rotated in any direction. drag & drop events event name fired when drag an element or text selection is being dragged (fired continuously every 350ms). dragend a drag operation is being ended (by
releasing a mouse button or hitting the escape key). dragenter a dragged element or text selection enters a valid drop target. dragstart the user starts dragging an element or text selection. dragleave a dragged element or text selection leaves a valid drop target. dragover an element or text selection is being dragged over a valid drop target (fired co...
...And 8 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
ate"/> html5 datetime-local a control for entering a date and time, with no time zone. opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. <input type="datetime-local" name="datetime-local"/> html5 email a field for editing an email address. looks like a text input, but has validation parameters and
relevant keyboard in supporting browsers and devices with dynamic keyboards. <input type="email" name="email"/> html5 file a control that lets the user select a file. use the accept attribute to define the types of files that the control can select. <input type="file" accept="image/*, text/*" name="file"/> hidden a control that is not displayed b...
... text the default value. a single-line text field. line-breaks are automatically removed from the input value. <input type="text" name="text"/> time a control for entering a time value with no time zone. <input type="time" name="time"/> html5 url a field for entering a url. looks like a text input, but has validation parameters and
relevant keyboard in supporting browsers and devices with dynamic keyboards. <input type="url" name="url"/> html5 week a control for entering a date consisting of a week-year number and a week number with no time zone. <input type="week" name="week"/> html5 obsolete values datetime a control for entering a date and time (hour, minute,...
...ey are associated with.those that are common to most or all input types are defined in greater detail below. attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages. this element includes the global attributes. those with extra importance as it
relates to <input> are highlighted. attributes for the <input> element include global html attributes and: attribute type or types description accept file hint for expected file type in file upload controls alt image alt attribute for the image type. required for accessibility autocomplete all hint for form autofill feature au...
...And 8 more matches
SVG documentation index - SVG: Scalable Vector Graphics
e target attribute on the svg <a> element doesn't work in mozilla firefox 1.5. when svg documents are embedded within a parent html document using the tag: 6 namespaces crash course svg, xml as an xml dialect, svg is namespaced. it is important to understand the concept of namespaces and how they are used if you plan to author svg content. versions of svg viewers prior to the
release of firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based browsers which must be very strict. take some time to understand namespaces now and it will save you all sorts of headaches in the future. 7 example svg, xml in this example, we use xhtml, svg, javascript, and the dom to a...
..., svg attribute the baseprofile attribute describes the minimum svg language profile that the author believes is necessary to correctly render the content. the attribute does not specify any processing restrictions; it can be considered metadata. 32 baseline-shift needsexample, svg, svg attribute the baseline-shift attribute allows repositioning of the dominant-baseline
relative to the dominant-baseline of the parent text content element. the shifted object might be a sub- or superscript. 33 bbox deprecated, svg, svg attribute the bbox attribute defines the maximal bounding box of a font. 34 begin needscompattable, svg, svg attribute the begin attribute defines when an animation should begin or when an element should be disc...
...te the bias attribute shifts the range of the filter. after applying the kernelmatrix of the <feconvolvematrix> element to the input image to yield a number and applied the divisor attribute, the bias attribute is added to each component. this allows representation of values that would otherwise be clamped to 0 or 1. 36 by svg, svg attribute the by attribute specifies a
relative offset value for an attribute that will be modified during an animation. 37 calcmode needscompattable, needsexample, svg, svg attribute the calcmode attribute specifies the interpolation mode for the animation. 38 cap-height deprecated, svg, svg attribute the cap-height attribute defines the height of uppercase glyphs of the font within the font coor...
...And 8 more matches
The Implementation of the Application Object Model - Archive of obsolete content
this page might be interesting from historic perspective. purpose - the purpose of this document is two-fold. the first section of the document describes the motivation and reasoning behind using rdf as the foundation of xul. this section makes a technical argument both for having xul in the first place and for using rdf as the underlying implementation of xul's content model. ...
...ement, nsidomnode, nsixmlcontent, and nsicontent. what is rdf? rdf (pronounced r-d-f) has never been a ravening demon intent upon taking over the earth, although that does depend on who you ask. rdf stands for resource description framework, a rather intimidating name that doesn't do much to help the layman understand exactly what it does. rdf provides a very general mechanism for representing
relationships between different disparate types of data. the
relationships between data are represented as a directed labeled graph structure. the data itself can be fed in from any number of different sources (e.g., from a local file system, from your bookmarks file, or from some remote downloadable rdf file), and can then be combined into a single graph. ok, so after that paragraph many of you prob...
...d by the file. the resulting structure is what the user actually ends up viewing. forget xul! let's just use serialized rdf! well, that's just plain cool! i say forget xul! let's just use serialized rdf to represent the ui! that would be an unwise decision for a variety of reasons. rdf is a graph structure, and windows and dialogs are actually content trees. because rdf can express arbitrary
relationships between nodes, the serialized form of rdf in xml has to contain extra syntax. in other words, the traditional
relationship of "containment" is not the only kind of
relationship expressible in rdf. in html or xul, when you put one tag inside another tag, a
relationship of containment can safely be assumed. not so with rdf. for rdf, an extra tag has to be inserted between two other tags t...
...And 7 more matches
browser - Archive of obsolete content
other urls will need to use the document and history objects to change the displayed document. ...
...hich is expected to contain a view of a web document. it is similar to an iframe except that it holds a page history and contains additional methods to manipulate the currently displayed page. are you here looking for information about the firefox web browser, or because you'd like to download the latest version of firefox? get firefox most of the properties and methods of the browser will ra
rely be used and can only be called from chrome urls. other urls will need to use the document and history objects to change the displayed document. attributes autocompleteenabled, autocompletepopup, autoscroll, disablehistory, disableglobalhistory, disablesecurity, droppedlinkhandler, homepage, showcaret, src, type properties accessibletype, cangoback, cangoforward, contentdocument, content...
... autocompletepopup ...
...And 7 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
. netscape navigator and microsoft internet explorer. these strategies of classifying browsers by vendor/version, assuming that the only browsers being used where either netscape navigator 4 or internet explorer 4 failed when alternative browsers such as those based upon gecko were introduced. many of the problems reported in the press regarding gecko's inability to display content were directly
related to inadequate, inappropriate browser detection strategies. a final note on vendor/version strategies. a web developer who fully utilizes the browser detection and distinctions in the ultimate browser sniffer will produce code which uses code forks for many browsers and versions. imagine attempting to maintain a web site which uses many of the browser variables available from the ultimate bro...
... problems caused by inappropriate browser detection excluding unknown browsers if you only provide tests for specific browsers in your detection logic, your site wil...
...strongly advise everyone to avoid this trap. problems caused by inappropriate browser detection excluding unknown browsers if you only provide tests for specific browsers in your detection logic, your site will not be usable if a visitor uses a different browser. consider the following example: // wrong approach - do not use! if (document.all) { // internet explorer 4+ document.write('<link
rel="stylesheet" type="text/css" src="style-ie.css">'); } else if (document.layers) { // navigator 4 document.write('<link
rel="stylesheet" type="text/css" src="style-nn.css">'); } note how the above example only provided stylesheets for internet explorer and navigator 4 and even then only if the visitor has javascript support turned on in their browser. users of netscape 6, netscape 7, compuserve ...
...And 7 more matches
Styling web forms - Learn web development
ive us more features to use. prerequisites: basic computer literacy, and a basic understanding of html and css. objective: to understand the issues behind styling forms, and learn some of the basic styling techniques that will be useful to you. why is styling form widgets challenging? form controls were added to html in the html 2 specification in 1995; css wasn't
released until late 1996, and wasn't supported very well by browsers for a few years after that. browsers
relied on the underlying operating system to manage and render form controls. and even with css available to style html, browser vendors have historically been
reluctant to make form controls stylable because users were so accustomed to the visual appearance of their respective platforms. but th...
... <button>s) <label> <output> the bad some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> we describe how to handle these more specific features in the article advanced form styling. the ugly some elements can't be styled thoroughly using css. 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>. <progress> and <meter> again, we'll describe what can be done in terms of styling these elements in advanced form styling. the real problem with all these controls is that they have a very comple...
...reate your own using html, css, and javascript. this is beyond the scope of the core form articles, but we do look at this in an advanced article how to build custom form controls. note: there are some proprietary css pseudo-elements available that allow you to style internal components of these form controls, such as ::-moz-range-track, but these are not consistent across browsers, so can't be
relied upon. we will mention these later as well. the good to style form controls that are easy to style with css, you shouldn't face much if any difficulties, since they mostly behave like any other html element. we already looked at some simple form styling in your first form, and the css building blocks module contains some useful form styling essentials too. as well as the basic css tools cov...
...And 7 more matches
HTML text fundamentals - Learn web development
are separated with linebreaks (enter/return pressed to go onto the next line). however, when you open the document in your browser, you'll see that the text appears as a big chunk! this is because there are no elements to give the content structure, so the browser does not know what is a heading and what is a paragraph. furthermore: users looking at a web page tend to scan quickly to find
relevant content, often just reading the headings to begin with. (we usually spend a very short time on a web page.) if they can't see anything useful within a few seconds, they'll likely get frustrated and go somewhere else. search engines indexing your page consider the contents of headings as important keywords for influencing the page's search rankings. without headings, your page will perform p...
...ith. (we usually spend a very short time on a web page.) if they can't see anything useful within a few seconds, they'll likely get frustrated and go somewhere else. search engines indexing your page consider the contents of headings as important keywords for influencing the page's search rankings. without headings, your page will perform poorly in terms of seo (search engine optimization). seve
rely visually impaired people often don't read web pages; they listen to them instead. this is done with software called a screen reader. this software provides ways to get fast access to given text content. among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. if headings are not availab...
...en text content. among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. if headings are not available, they will be forced to listen to the whole document read out loud. to style content with css, or make it do interesting things with javascript, you need to have elements wrapping the
relevant content, so css/javascript can effectively target it. we therefore need to give our content structural markup. active learning: giving our content structure let's jump straight in with a live example. in the example below, add elements to the raw text in the input field so that it appears as a heading and two paragraphs in the output field. if you make a mistake, you can always reset it...
...And 7 more matches
Handling common accessibility problems - Learn web development
essibility in the context of web technology, most people immediately think of making sure websites/apps are usable by people with disabilities, for example: visually impaired people using screen readers or magnification/zoom to access text people with motor function impairments using the keyboard (or other non-mouse features) to activate website functionality. people with hearing impairments
relying on captions/subtitles or other text alternatives for audio/video content. however, it is wrong to say that accessibility is just about disabilities. really, the aim of accessibility is to make your websites/apps usable by as many people in as many contexts as possible, not just those users using high-powered desktop computers. some examples might include: users on mobile devices. users ...
...ve a few options here: create custom controls using <button> elements (which we can tab to by default!) and javascript to wire up their functionality. see creating a cross-browser video player for some good examples of this. create keyboard shortcuts via javascript, so functionality is activated when you press certain keys on the keyboard. see desktop mouse and keyboard controls for some game-
related examples that can be adapted for any purpose. use some interesting tactics to fake button behaviour. take for example our fake-div-buttons.html example (see source code). here we've given our fake <div> buttons the ability to be focused (including via tab) by giving each one the attribute tabindex="0" (see webaim's tabindex article for more really useful details). this allows us to tab to th...
...tter to just use the right element for the right job in the first place. text alternatives text alternatives are very important for accessibility — if a person has a visual or hearing impairment that stops them being able to see or hear some content, then this is a problem. the simplest text alternative available is the humble alt attribute, which we should include on all images that contain
relevant content. this should contain a description of the image that successfully conveys its meaning and content on the page, to be picked up by a screenreader and read out to the user. note: for more information, read text alternatives. missing alt text can be tested for in a number of ways, for example using accessibility auditing tools. alt text is slightly more complex for video and audio ...
...And 7 more matches
mach
his will use # the mozconfig from the object directory. $ cd objdir-firefox $ mach build adding mach to your shell's search path if you add mach to your path (by modifying the path environment variable to include your source directory, or by copying mach to a directory in the default path like /usr/local/bin) then you can type mach anywhere in your source directory or your objdir. mach expands
relative paths starting from the current working directory, so you can run commands like mach build . to rebuild just the files in the current directory. for example: $ cd devtools/client $ mach build webconsole # rebuild only the files in the devtools/client/webconsole directory $ mach mochitest webconsole/test # run mochitests in devtools/client/webconsole/test enable tab completion to enable ...
...on will not work when running mach in a source directory older than firefox 24. for zsh, you can call the built-in bashcompinit function before sourcing: autoload bashcompinit bashcompinit source /path/to/mozilla-central/python/mach/bash-completion.sh frequently asked questions why should i not use mach? a real faq for a change! mach is not the best software ever. say, if you run a rolling
release arch linux distro or derivate thereof ("manjaro"), you have something less tedious: octopi! just install thunderbird from sources out of the aur repo! many pkgbuild options to choose from and most work like a charm - while "mach" may not necessarily work like a charm for everyone. why even bother with a competing build system in arch when octopi does what you want and even has a gui? those ma...
...ging) getting productive tools in the hands of others (mach "advertises" tools to people through mach help (unless it actually just gives you a cryptic error message) - in the former case, people don't need to discover your tool from a blog post, wiki page, or word of mouth). so this 3rd point does not make much sense, does it? are there any known issues? yes, of course several! mach is still
relatively young ("born" in 2012) and there are a number of bugs and numerous areas for improvement. some larger known issues include: mintty (alternative terminal emulator on windows) doesn't work. text encoding issues (especially on windows where latin-1 is not the default system encoding). failed commands spew lots of extra error output, e.g. you will see a big mach error message when all tha...
...And 7 more matches
Mozilla DOM Hacking Guide
seriously hacking on it requires excellent knowledge of c++ and xpcom, mozilla's own component model. ...
...on. this is one of the jobs of xpconnect. xpconnect will "wrap" the argument in a wrapper that will be of the type expected by our c++ function. similarly, then return type of the c++ function will be wrapped by xpconnect so that javascript can use it safely. when, in javascript, a client tries to access a dom object or a dom method on a dom object, the js engine asks xpconnect to search for the
relevant c++ method to call. for example, when we ask for |document.getelementbyid("myid");|, xpconnect will find that |document| is a property of the window object, so it will look on the interface nsidomwindow, and it will find the getdocument() method. the return value of getdocument() is a nsidomdocument. so xpconnect will then try to find a method named getelementbyid() on the nsidomdocument int...
... interface, implemented by the nsdomclassinfo class (see section) defines several flags, one of which is the want_getproperty flag. when set, it allows us to define a getproperty() function on nshistorysh (the helper class for the history object), which will handle the array behavior. indeed, it will forward the call history[1] to history.item(1), which is defined in the idl and easily coded. the
relevant code is at nsdomclassinfo.cpp, around line 4520. these two examples demonstrate the power of the dom combined with xpconnect and the javascript engine. the possibilities are endless. "what do you want to code today?" ;-) all the dom classes are listed in an enum defined in nsidomclassinfo.h, nsdomclassinfoid. there are classes for the dom0, core dom, html, xml, xul, xbl, range, css, events...
...And 7 more matches
Refcount tracing and balancing
refcount tracing and balancing are advanced techniques for tracking down leak of refcounted objects found with bloatview. the first step is to run firefox with refcount tracing enabled, which produces one or more log files. refcount tracing logs calls to addref and
release, preferably for a particular set of classes, including call-stacks in symbolic form (on platforms that support this). refcount balancing is a follow-up step that analyzes the resulting log to help a developer figure out where refcounting went wrong. how to build for refcount tracing build with --enable-debug or --enable-logrefcnt. how to run with refcount tracing on there are several environment variables that can be used. first, you select one of three environment variables to choose what kind of logging you w...
...and expensive to capture, so you probably don't want to do that. warning: you should never use this without xpcom_mem_log_classes and/or xpcom_mem_log_objects, because without some filtering the logging will be completely useless due to how slow the browser will run and how large the logs it produces will be. ...
...e completely useless due to how slow the browser will run and how large the logs it produces will be. xpcom_mem_comptr_log this environment variable enables logging of additions and
releases of objects into nscomptrs. this requires c++ dynamic casts, so it is not supported on all platforms. however, having an nscomptr log and using it in the creation of the balance tree allows addref and
release calls that we know are matched to be eliminated from the tree, so it makes it much easier to debug reference count leaks of objects that have a large amount of reference counting traffic. ...
...And 7 more matches
Gecko object attributes
this is in contrast to text attributes, which apply only to substrings in a text object. 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. common attributes class the class name for an element from html, xul, svg, etc. ...
...fix is cut. common attributes class the class name for an element from html, xul, svg, etc. this is useful for retrieving microformat semantics for an element. display similar with display css style. applied to: any visible accessible id any value, defined by ui/content developers. used to indicate a persistent identifier for any object; useful for scripting. applied to: any role which
related dom node has id attribute tag the actual markup tag used to create this element (also used in xul). applied to: any role xml-roles if a dynamic content accessibility role string is used, it is exposed here. this may provide more information than the mapped role, which is best-fit. the role string may be a space-delimited list of roles. applied to: any role group attributes level f...
...d. possible values are "off" which is the same as not being set -- this means the region is not live. other possible values are "polite", "assertive", and "rude", which is a suggestion for the policy when interrupting the user for changes to this region. please see the aria states and properties module for more information. ...
...And 7 more matches
WebIDL bindings
that the other interface corresponds to. if you do need to hook up cycle collection, it will look like this in the common case of also inheriting from nsisupports: // add strong pointers your class holds here. if you do, change to using // ns_impl_cycle_collection_wrappercache. ...
...c++ object. the return type and argument types are determined as described below. in addition to those, all methods that are allowed to throw will get an errorresult& argument appended to their argument list. non-static methods that use certain webidl types like any or object will get a jscontext* argument prepended to the argument list. static methods will be passed a const globalobject& for the
relevant global and can get a jscontext* by calling context() on it. the name of the c++ method is simply the name of the webidl operation with the first letter converted to uppercase. webidl overloads are turned into c++ overloads: they simply call c++ methods with the same name and different signatures. for example, this webidl: interface myinterface { void dosomething(long number); double ...
...irst letter converted to uppercase. the method signature looks just like an operation with a void return value and a single argument whose type is the attribute's type. c++ reflections of webidl constructors a webidl constructor is turned into a static class method named constructor. the arguments of this method will be the arguments of the webidl constructor, with a const globalobject& for the
relevant global prepended. for the non-worker case, the global is typically the inner window for the dom window the constructor function is attached to. if a jscontext* is also needed due to some of the argument types, it will come after the global. the return value of the constructor for myinterface is exactly the same as that of a method returning an instance of myinterface. constructors are always...
...And 7 more matches
Migrating from Firebug - Firefox Developer Tools
also has some other functions and misses others. console api to log things to the console from within the web page firebug makes a console api available within the page. the developer tools share the same api, so your console.* statements will continue to work. persist logs in firebug you can click the persist button within the toolbar to keep the logged messages between page navigations and
reloads. in the devtools this option is called enable persistent logs and is available within the toolbox options panel. server logs firebug extensions like firephp allow to log server-side messages to the firebug console. this functionality is already integrated into the devtools using the chromelogger protocol and doesn't require any extensions to be installed. command history the command histo...
...e console is expanded in firebug. the web console displays a preview within the response tab. it is currently missing the preview for html, xml and svg, though, which is tracked in bug 1247392 and bug 1262796, but when you click on the url of the request you switch to the network monitor, which has a preview tab. inspector firebug has an html panel, which allows to edit html/xml/svg and the css
related to it. within the devtools this functionality is served by the page inspector. edit html within the page inspector the tag attributes and the contents can be edited inline just like in firebug. beyond that it allows to edit the tag names inline. you can also edit the html directly. in firebug you do this by right-clicking a node and clicking edit html... in the context menu. in the devtool...
...it allows to edit the tag names inline. you can also edit the html directly. in firebug you do this by right-clicking a node and clicking edit html... in the context menu. in the devtools this option is also available via the context menu. there the option is called edit as html. only the live preview of changes is currently missing, which is tracked in bug 1067318 and bug 815464. copy html and
related information firebug's html panel allows to copy the inner and outer html of an element as well as the css and xpath to it via the context menu of an element. the page inspector provides the same functionality except copying xpaths. this is covered by bug 987877. edit css both tools allow to view and edit the css rules
related to the element selected within the node view in a similar way. f...
...And 7 more matches
about:debugging - Firefox Developer Tools
n 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. starting in firefox 78, the url bar is editable, so that you can change the url used by the browser on the remote device, by typing in firefox for desktop. you can also
reload the page by clicking the
reload button next to the url bar, and (starting 79), navigate backward or forward in the browsing history with the back and forward buttons. connecting over the network you can connect to a firefox debug server on your network, or on your debugging machine using the network location settings of the about:debugging page. enter the location and port on which the de...
...alling an add-on from an xpi, are: you don't have to rebuild an xpi and reinstall when you change the add-on's code; you can load an add-on without signing it and without needing to disable signing. once you have loaded a temporary extension, you can see information about it and perform operations on it. you can use the following buttons: inspect loads the extension in the debugger.
reload
reloads the temporary extension. this is handy when you have made changes to the extension. remove unloads the temporary extension. other information about the extension is displayed: location the location of the extension's source code on your local system. extension id the temporary id assigned to the extension. internal uuid the internal uuid assigned to the extension. manifes...
...tension is loaded in a new tab. updating a temporary extension if you install an extension in this way, what happens when you update the extension? if you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown. for other changes, click the
reload button. this does what it says:
reloads any persistent scripts, such as background scripts parses the manifest.json file again, so changes to permissions, content_scripts, browser_action or any other keys take effect installed extensions the permanently installed extensions are listed in the next section, extensions. for each one, you see something like the following: the i...
...And 7 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
e which is found all over the web, however, and though we assume these are under a permissive license due to their frequent reuse, ownership is not certain. we hope that it's freely usable; if not, and you're the owner, please let us know and we'll find or produce new diagrams. or, if you're happy to let us continue to use the images, please let us know so we can credit you properly! cameras and
relative movement when a classic live-action movie is filmed, the actors are on a set and move about the set as they perform, with one or more cameras watching their moves. the cameras may be fixed in place, but they may also be set up to move around as well, tracking the movement of the performers, dollying in and out to achieve emotional impact, and so forth. virtual cameras in webgl (and by ext...
...t of the performers, dollying in and out to achieve emotional impact, and so forth. virtual cameras in webgl (and by extension, in webxr), there is no camera object we can move and rotate, so we have to find a way to fake these movements. since there is no camera, we have to find a way to fake it. fortunately, physicists like galileo, newton, lorentz, and einstein have given us the principle of
relativity, which states that the laws of physics have the same form in every frame of reference. that is, no matter where you're standing, the laws of physics work in the same way. by extension, if you and another person are standing in an empty field of solid stone with nothing else visible as far as the eye can see, if you move three meters toward the other person, the result looks the same as if...
...ewing direction of a hypothetical viewer of the scene, whether there's an actual object present in 3d space or not. points of view since the camera is a virtual object which, rather than necessarily representing a physical object in the virtual world, represents a viewer's position and viewing direction, it's useful to think about the kinds of situation that call for the use of a camera. 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. generalized cameras in general, virtual cameras may or may not be incorporated into physical objects within the scene. indeed, outside the scope of 3d gaming, the odds are far more likely that the camera will not correspond with an obje...
...And 7 more matches
Inputs and input sources - Web APIs
some way—most likely by the viewer tapping the screen or dragging the target ray around with their fingers. target ray space the xrspace used to describe the position and orientation of the target ray is found in the targetrayspace property. this space's native origin is located at the point from which the target ray is emitted (such as the front tip of the controller, or the end of a gun bar
rel if the controller is being rendered as a gun, for example), and the space's orientation vector extends outward along the path of the target ray. you can easily obtain the target ray corresponding to the targetrayspace from within the drawing handler for a given frame using xrframe's getpose() method. the returned xrpose's transform is the transform corresponding to the target ray. thus, for an i...
...ng purposes. mapping the grip space to the world coordinate system. the distances x, y, and z together make up the world coordinates (x, y, z) corresponding to the origin of the grip space g. in the diagram above, we see the grip space, whose origin is located at g, at the midpoint of the user's grip on the controller, which is pointing directly away from the user, parallel to the z axis.
relative to the origin of the world space, w, the grip space's origin is located x units to the right, y units above, and z units farther away. given the directionality of the axes, the coordinates of the grip space can be expressed in world coordinates as (x, y, -z); z is negative since the grip space is farther away along the z axis, and is thus in the negative direction. if the controller were in...
...urce. when the user points a device along a target ray in your 3d space and then triggers a select action, the following events are sent to the active xrsession: a selectstart event, indicating that the user has performed the activity that begins the primary action. this may be a gesture, depressing a button, or the like. if the primary action ends successfully (for example, due to the user
releasing the button or trigger), rather than because of an error, the select event is sent. after the select event is sent or if the controller on which the action is being performed is disconnected or otherwise becomes unavailable, the selectend event is sent. generally speaking, the selectstart and selectend events tell you when you might want to display something to the user indicating that th...
...And 7 more matches
Cognitive accessibility - Accessibility
accessibility covers accessibility considerations for people with cognition and learning disabilities. this document introduces cognitive accessibility and improving accessibility of the web for people with cognitive and learning differences. cognitive impairment refers to a broad range of disabilities, from people with intellectual disabilities who may have the most-limited capabilities, to age-
related issues with thinking and remembering. the range includes people with mental illnesses, such as depression and schizophrenia. it also includes people with learning disabilities, such as dyslexia and attention deficit hyperactivity disorder (adhd). though there is a lot of diversity within clinical definitions of cognitive impairments, people with them experience a common set of functional pro...
...y initiative (wai) of the world wide web consortium (w3c), the main international standards organization for the internet. this group is also responsible for the accessible rich internet application (aria) guidelines. wcag are guided by four principles: websites must be perceivable, operable, understandable, and robust. to this end, they define 17 specific guidelines, of which six are especially
relevant for cognitive accessibility. all of the following guidelines help more than just people with cognitive disabilities. for example, being able to extend the expiration time on an application requiring an authentication code sent to a mobile device via text message helps with the following scenarios: people with attention or anxiety disorders. people who have a poor short-term memory, or w...
...le with cognitive disabilities. for example, being able to extend the expiration time on an application requiring an authentication code sent to a mobile device via text message helps with the following scenarios: people with attention or anxiety disorders. people who have a poor short-term memory, or who are multitasking. people who are less technologically literate. ...
...And 7 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
w in the user interface currently being interacted with and custom interface extensions via interfaces via queryinterface and queryservice. this can provide assistive technology with contextual information specific to your object model. for example, gecko support isimpledomnode to provide information about the dom node for an accessible object. a set of system messages that confer accessibility-
related events such as focus changes, changes to document content and state changes in ui objects like checkboxes. to really learn about msaa, you need to download the entire msaa sdk. without downloading the sdk, you won't get the extremely useful tools, which help a great deal in the learning process. the accessible event watcher shows what accessible events are being generated by a given piece ...
...ay that msaa is not worth using, for a number of reasons. myths for not using msaa myth: msaa doesn't really work reality: msaa works really well for dialogs and ui. true, it's not great for documents, but it's the only existing widely-used standard for exposing accessibility. myth: msaa is too slow reality: assistive technology vendors have found ways around most of the performance problems
related to out-of-process com method calls. just make sure to have decent performance on your end. myth: "msaa sucks" reality: this statement may come from another engineer or even an employee of an at vendor. and what are they recommending for an alternative, a proprietary solution? msaa is by no means perfect, but it is the only thing that will make your custom ui elements work with most assistiv...
...ent may come from another engineer or even an employee of an at vendor. and what are they recommending for an alternative, a proprietary solution? msaa is by no means perfect, but it is the only thing that will make your custom ui elements work with most assistive technologies. try to be careful that at vendors do not lock you into a prioprietary solution that will work with only their products. ...
...And 7 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
v> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position:
relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/picker_mask.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-lin...
....66%, #f0f 83.33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("images/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; margin: 0 0 0 -2px; border: 1px solid #777; background-color: #fff; position:
relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input in...
...e; } .ui-color-picker .input[data-topic="hexa"] > input { width: 90px; height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("images/alpha.png"); float: left; position:
relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .preview-color { width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); position: absolute; z-index: 1; } .ui-color-picker .switch_mode { width: 10px; height: 20px; position:
relative; border-radiu...
...And 7 more matches
WebAssembly.Module - JavaScript
irefox for androidopera for androidsafari on iossamsung internetnode.jsmodulechrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0module() constructorchrome full support 57e...
... full support 8.0.0module() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
...And 7 more matches
Web video codec guide - Web media technologies
side of a road, and so forth. this is a temporal (time-based) aliasing issue; the speed of the rotation interferes with the frequency of the sampling performed during compression or encoding. color edging color edging is a type of visual artifact that presents as spurious colors introduced along the edges of colored objects within the scene. these colors have no intentional color
relationship to the contents of the frame. loss of sharpness the act of removing data in the process of encoding video requires that some details be lost. if enough compression is applied, parts or potentially all of the image could lose sharpness, resulting in a slightly fuzzy or hazy appearance. lost sharpness can make text in the image difficult to read, as text—especially small text—is ve...
...r a discrete cosine transform (dct) algorithm is used; this includes, for example, jpeg still images. motion compensation block boundary artifacts compression of video generally works by comparing two frames and recording the differences between them, one frame after another, until the end of the video. this technique works well when the camera is fixed in place, or the objects in the frame are
relatively stationary, but if there is a great deal of motion in the frame, the number of differences between frames can be so great that compression doesn't do any good. motion compensation is a technique that looks for motion (either of the camera or of objects in the frame of view) and determines how many pixels the moving object has moved in each direction. then that shift is stored, along with ...
...esult. if a 1080p video is reduced to 720p prior to encoding, the resulting video can be much smaller while having much higher visual quality; even after scaling back up during playback, the result may be better than encoding the original video at full size and accepting the quality hit needed to meet your size requirements. reduced frame rate similarly, you can remove frames from the video enti
rely and decrease the frame rate to compensate. this has two benefits: it makes the overall video smaller, and that smaller size allows motion compensation to accomplish even more for you. for exmaple, instead of computing motion differences for two frames that are two pixels apart due to inter-frame motion, skipping every other frame could lead to computing a difference that comes out to four pixels...
...And 7 more matches
tabs - Archive of obsolete content
by setting the url property you can load a new page in the tab: var tabs = require("sdk/tabs"); tabs.on('activate', function(tab) { tab.url = "http://www.example.com"; }); run scripts in a tab you can attach a content script to the page hosted in a tab, and use that to access a...
...all its activate method. example // get the active tab's title. var tabs = require("sdk/tabs"); console.log("title of active tab is " + tabs.activetab.title); length the number of open tabs across all windows. events open this event is emitted when a new tab is opened. this does not mean that the content has loaded, only that the browser tab itself is fully visible to the user. properties
relating to the tab's content (for example: title, favicon, and url) will not be correct at this point. if you need to access these properties, listen for the ready event: var tabs = require("sdk/tabs"); tabs.on('open', function(tab){ tab.on('ready', function(tab){ console.log(tab.url); }); }); arguments tab : listeners are passed the tab object that just opened. close this event is emit...
...r each of the open tabs in that window. arguments tab : listeners are passed the tab object that has closed. ready this event is emitted when the dom for a tab's content is ready. it is equivalent to the domcontentloaded event for the given content page. a single tab will emit this event every time the dom is loaded: so it will be emitted again if the tab's location changes or the content is
reloaded. after this event has been emitted, all properties
relating to the tab's content can be used. arguments tab : listeners are passed the tab object that has loaded. activate this event is emitted when an inactive tab is made active. arguments tab : listeners are passed the tab object that has become active. deactivate this event is emitted when the active tab is made inactive. argume...
...And 6 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
hrome mapped path instead of the old resource one, and remove your "resource" line from your chrome.manifest file. it's probably a good idea to do this even if you aren't going fully restartless / extractionless due to the previously mentioned exposure to content of resource mappings. also, drop support for firefox 4 through 9 while you're at it. prior to firefox 10, the chrome.manifest file you
rely on wasn't loaded automatically for restartless add-ons. hacks were required, and probably a bad idea. step 2b: audit any remaining resource:// uri usage internal to your extension if you don't need resource:// uris for anything else, then you may be able to skip the next step. if not, see if you still can't do things any other way. as with jsms, a chrome:// uri may be more appropriate. if you ...
...n an endian-safe way, is to use dataview. the other typed array stuff is viable in firefox 4+. this wasn't added until firefox 15. if you were using nsibinaryinputstream or anything similar, figuring out dataview will be fairly straightforward. just read the docs and it's pretty simple. it will probably be notably faster than whatever you were doing before. reportedly xmlhttprequest doesn't work
reliably when used in jsm under versions of firefox less than 16, however as previously mentioned, this guide should be taken as requiring firefox 17+. step 4: manually handle default preferences normal extensions load default preferences from a standardized file automatically. restartless extensions don't (for no good reason). this part is fairly easy to implement yourself, at least. here are some...
...doing anuncompressed internal jar (aka, another zip) acts like a poor-man's solid archive and significantly boosts the overall compression ratio of the xpi, resulting in smaller installers and updates. so, it's pretty much internal jaror extractionless xpi. well, you can't use an internal jar anymore. firefox aggressively caches add-on data a bit too much. your restartless add-on won't actually
reload some types of files if they are in a jar and the add-on is updated without a restart. the big culprits are jsm files and locale files (namely property files), though in some situations this is true for dynamically loaded image files too. you're still going to have to manually clear the chrome cache on add-on shutdown to work around this, but that doesn't seem to be enough with an internal jar.
...And 6 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
eper/there.is.only.xul if the character encoding is utf-8, both the encoding specifier and the xml declaration can be omitted. but for the samples in this chapter, please include them. because a xul document is also an xml document, it can contain xhtml, svg, mathml, and other elements; if you use external entity references, the xml document's contents are modularized; combined with other xml-
related technologies, such as dom, xlink, or xslt, you can use it for a number of different applications. <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://global/skin/"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- contents go here. --> </window> listing 2: general structure of a xul document even with the internationalization of fir...
...the source code (laid out left to right or top to bottom). use the ordinal attribute to alter their order. the ordinal attribute takes positive integer values, which are used to order the box’s layout—in the example in listing 5, the buttons would be laid out in the order button3, button2, button1 (figure 4). if multiple elements have the same ordinal value, they will be laid out in the same
relative order they appear in the source code. the default value for ordinal is 1. <vbox> <button label="button1" ordinal="3"/> <button label="button2" ordinal="2"/> <button label="button3" ordinal="1"/> </vbox> listing 5: changing order with ordinal figure 4: output of listing 5 box size you can set the size of xul elements explicitly using the width and height attributes, as shown in ...
...un correctly. menus hierarchically structured dropdown menus are the part of the user interface used for frequently accessed functions in an application or web service. in the past, a combination of html and javascript was used to produce this sort of complex ui structure, but in xul, it can be handled easily just by writing tags. creating the menu listing 9 shows how the menu element and its
related elements are combined. this produces the output seen in figure 6. <menubar> <menu label="menu 1"> <menupopup> <menuitem label="item 1"/> <menuitem label="item 2"/> <menuseparator/> <menuitem label="item 3"/> <menu label="submenu"> <menupopup> <menuitem label="item 4"/> <menuitem label="item 5"/> </menupopup> </menu...
...And 6 more matches
Index of archived content - Archive of obsolete content
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 tutorials add a context menu item add a menu item to firefox adding a butto...
... bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding window handles forms
related code snippets html in xul for rich tooltips html to dom isdefaultnamespace js xpcom javascript debugger service javascript timers javascript daemons management label and description lookupnamespaceuri lookupprefix ...
... 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 xml:base support in old browsers xpath getattributens common pitfalls communication between html and your extension creating custom firefox extensions with the mozilla build system custom about: urls default preferences ...
...And 6 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
owser the user is using. browser sniffing is usually done through the useragent, such as: mozilla/5.0 (x11; u; linux i686; en-us; rv:1.5) gecko/20031016 while using the useragent to sniff the browser provides detailed information on the browser in use, code that handles useragents often can make mistakes when new browser versions arrive, thus requiring code changes. it is much better and more
reliable to sniff by browser capability or object feature support. you can usually do this by testing the required functionality in javascript. for example, rather than: if (ismozilla || isie5) you would use: if (document.getelementbyid) this would allow other browsers that support that w3c standard method, such as opera or safari, to work without any changes. useragent sniffing makes sense in...
...ver, does not comply with the w3c web standards and simply returns a regular document. javascript differences most differences between mozilla and internet explorer are usually blamed on javascript. however, the issues usually lie in the apis that a browser exposes to javascript, such as the dom hooks. the two browsers possess few core javascript differences; issues encountered are often timing
related. javascript date differences the only date difference is the getyear method. as per the ecmascript specification (which is the specification javascript follows), running new date().getyear() in 2004 will return "104". per the ecmascript specification, getyear returns the year minus 1900, originally meant to return "98" for 1998. getyear was deprecated in ecmascript version 3 and replaced wi...
...cument.getelementbyid("foo").innerhtml = "done."; </script> however, this is not guaranteed. to be sure that all elements exist, you should use the onload event handler on the <body> tag: <body onload="dofinish();"> <div id="foo">loading...</div> <script> function dofinish() { var element = document.getelementbyid("foo"); element.innerhtml = "done."; } </script> ... such timing-
related issues are also hardware-
related -- slower systems can reveal bugs that faster systems hide. one concrete example is window.open, which opens a new window: <script> function doopenwindow(){ var mywindow = window.open("about:blank"); mywindow.location.href = "http://www.ibm.com"; } </script> the problem with the code is that window.open is asynchronous -- it does not block the j...
...And 6 more matches
Gecko FAQ - Gecko Redirect 1
omplementary set of browser components. however, gecko does not package all of these components alongside other interface modules in a coherent, user-friendly application (including menus, toolbars, etc.), such as firefox. mozilla.org assembles the necessary components into its applications, such as firefox, thunderbird, seamonkey, which are available for free download from mozilla.org. netscape
released its own version of the browser branded as netscape navigator. other companies
release their own software and hardware products that use gecko. see xulrunner hall of fame for a partial list of application that use gecko via xulrunner. third parties such as isvs and hardware vendors will pick and choose the components they want to use in their applications or hardware devices. certain browser...
...parties such as isvs and hardware vendors will pick and choose the components they want to use in their applications or hardware devices. certain browser components are not provided as part of gecko, such as bookmarks, history, address book, etc. however, the source for all those components is available for free download from mozilla.org. why was gecko built? the original mozilla browser, first
released as navigator 1.0, was developed rapidly by a small team that was passionate about creating the next killer app, and they succeeded. now that the web has evolved, a new generation layout engine was needed upon which future products could be built. gecko enables a pioneering new class of dynamic content that is more interactive and offers greater presentation control to web developers, using o...
...row, scope-col, scope-rowgroup, scope-colgroup, charoff, datasrc, datafld, dataformat, datapagesize, summary, event, dir, align on table columns, label attribute of option, alternate text of area elements, longdesc various metadata attributes: cite, datetime, lang, hreflang bidirectional text layout, which is only used in hebrew and arabic (ibm has begun work to add bidi support in a future
release) style sheets css 1 - full support, except for: the application of styles to html column elements the ability to turn off author styles the names of certain mozilla extension pseudo-classes lack the moz- prefix css 2 - partial support is expected and has already been built into gecko, including support for css2 positioning, but no commitment has bee...
...And 6 more matches
Mobile accessibility - Learn web development
reen, you can move between them by swiping two fingers left and right. for a more complete list of talkback gestures, see use talkback gestures. unlocking the phone when talkback is turned on, unlocking the phone is a bit different. you can do a two-finger swipe up from the bottom of the lock screen. ...
... to get to these menus: access the global menu by quickly swiping down, and then right. access the local menu by quickly swiping up, and then right. ...
... to get to these menus: access the global menu by quickly swiping down, and then right. access the local menu by quickly swiping up, and then right. swipe left and right to cycle between the different options. once you've selected the option you want, double-click to choose that option. ...
...And 6 more matches
Document and website structure - Learn web development
watch, or the main story you're reading, or the map you want to view, or the news headlines, etc. this is the one part of the website that definitely will vary from page to page! sidebar: some peripheral info, links, quotes, ads, etc. usually, this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author's bio, or links to
related articles) but there are also cases where you'll find some recurring elements like a secondary navigation system. footer: a strip across the bottom of the page that generally contains fine print, copyright notices, or contact info. it's a place to put common information (like the header) but usually, that information is not critical or secondary to the website itself. the footer is also some...
... css, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job. this is because visuals don't tell the whole story. we use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and
related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful? note: colorblind people represent around 4% of the world population or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. blind and visually impaired people represent roughly 4-5% of the world population (in 2012 ther...
...y the following code (you can also find the example in our github repository). 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. ...
...And 6 more matches
What’s in the head? Metadata in HTML - Learn web development
ites and applications."> specifying an author is beneficial in many ways: it is useful to be able to understand who wrote the page, if you have any questions about the content and you would like to contact them. some content management systems have facilities to automatically extract page author information and make it available for such purposes. specifying a description that includes keywords
relating to the content of your page is useful as it has the potential to make your page appear higher in
relevant searches performed in search engines (such activities are termed search engine optimization, or seo.) active learning: the description's use in search engines the description is also used on search engine result pages. let's go through an exercise to explore this go to the front pag...
... note: many <meta> features just aren't used any more. for example, the keyword <meta> element (<meta name="keywords" content="fill, in, your, keywords, here">) — whic...
... — 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. note: many <meta> features just aren't used any more. 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. other types of metadata as you travel around the web, you'll find other types of metadata, too. a lot of the features you'll see on websites are proprietary creations, designed to provide certain sites (such as social ne...
...And 6 more matches
Handling common JavaScript problems - Learn web development
script language. note: buggy javascript code: the 10 most common mistakes javascript developers make has some nice discussions of these common mistakes and more. linters as with html and css, you can ensure better quality, less error-prone javascript code using a linter, which points out errors and can also flag up warnings about bad practices, etc., and be customized to be stricter or more
relaxed in their error/warning reporting. the javascript/ecmascript linters we'd recommend are jshint and eslint; these can be used in a variety of ways, some of which we'll detail below. online the jshint homepage provides an online linter, which allows you to enter your javascript code on the left and provides an output on the right, including metrics, warnings, and errors. code editor plugins...
... install atom (if you haven't got an up-to-date version already installed) — download it from the atom page linked above. go to atom's preferences... dialog (e.g. by choosing atom > preferences... on mac, or file > preferences... on windows/linux) and choose the install option in the left-hand menu. in the search packages text field, type "jslint" and press enter/return to search for linting-
related packages. you should see a package called lint at the top of the list. install this first (using the install button), as other linters
rely on it to work. after that, install the linter-jshint plugin. after the packages have finished installing, try loading up a javascript file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers...
...ful features for helping to debug javascript. for a start, the javascript console will report errors in your code. make a local copy of our broken-ajax.html example (see the source code also). if you look at the console, you'll see the error message "uncaught typeerror: can't access property "length", heroes is undefined", and the referenced line number is 49. if we look at the source code, the
relevant code section is this: function showheroes(jsonobj) { let heroes = jsonobj['members']; for(i = 0; i < heroes.length; i++) { ... so the code falls over as soon as we try to access a property of jsonobj (which as you might expect, is supposed to be a json object). this is supposed to be fetched from an external .json file using the following xmlhttprequest call: let requesturl = 'http...
...And 6 more matches
Client-side tooling overview - Learn web development
and how to find help with individual tools. prerequisites: familiarity with the core html, css, and javascript languages. objective: to understand what types of client-side tooling there are, and how to find tools and get help with them. overview of modern tooling writing software for the web has become more sophisticated through the ages. although it is still enti
rely reasonable to write html, css, and javascript "by hand" there is now a wealth of tools that developers can use to speed up the process of building a web site, or app. there are some extremely well-established tools that have become common "household names" amongst the development community, and new tools are being written and
released every day to solve specific problems. you might even find yo...
... code you write a little better. this part of the tooling should be specific to your own development environment, though it’s not uncommon for companies to have some kind of policy or pre-baked configuration available to install so that all their developers are all using the same processes. this includes anything that makes your development process easier with respect to generating stable and
reliable code. safety net tooling should also help you either prevent mistakes or correct mistakes automatically without having to build your code from scratch each time. a few very common safety net tool types you will find being used by developers are as follows. linters linters are tools that check through your code and tell you about any errors that are present, what error types they are, and ...
.... it is primarily accessed via the command line but can be accessed via friendly user interfaces. with your code in a git repository, you can push it to your own server instance, or use a hosted source control website such as github, gitlab, or bitbucket. we'll be using github in this module. you can find more information about it at git and github. code formatters code formatters are somewhat
related to linters, except that rather than point out errors in your code, they usually tend to make sure your code is formatted correctly, according to your style rules, ideally automatically fixing errors that they find. prettier is a very popular example of a code formatter, which we’ll make use of later on in the module. bundlers/packagers these are tools that get your code ready for product...
...And 6 more matches
Package management basics - Learn web development
was probably written by someone else and ideally solves a single problem for you. a web project can have any number of dependencies, ranging from none to many, and your dependencies might include sub-dependencies that you didn't explicitly install — your dependencies may have their own dependencies. a simple example of a useful dependency that your project might need is some code to calculate
relative dates as human-readable text. you could certainly code this yourself, but there's a strong chance that someone else has already solved this problem — why waste time reinventing the wheel? moreover, a
reliable third-party dependency will likely have been tested in a lot of different situations, making it more robust and cross-browser compatible than your own solution. a project dependency ...
...an-readable date library, or it can be a command line tool such as prettier or eslint, which we talked about in previous articles. without modern build tools, dependencies like this might be included in your project using a simple <script> element, but this might not work right out of the box and you will likely need some modern tooling to bundle your code and dependencies together when they are
released on the web. a bundle is the term that’s generally used to refer to a single file on your web server that contains all the javascript for your software — typically compressed as much as possible to help reduce the time it takes to get your software downloaded and displayed in your visitors’ browser. in addition, what happens if you find a better tool that you want to use instead of the...
...ally used to refer to a single file on your web server that contains all the javascript for your software — typically compressed as much as possible to help reduce the time it takes to get your software downloaded and displayed in your visitors’ browser. in addition, what happens if you find a better tool that you want to use instead of the current one, or a new version of your dependency is
released that you want to update to? this is not too painful for a couple of dependencies, but in larger projects with many dependencies this kind of thing can become really challenging to keep track of. it makes more sense to use a package manager such as npm, as this will guarantee that the code is added and removed cleanly, as well as a host of other advantages. what exactly is a package manager?
...And 6 more matches
Eclipse CDT Manual Setup
hugely cluttered with mostly redundant information, make setting up eclipse look much more complicated than it is nowadays. setup time some points in the rest of this document below are old and taken care of by the mach commands described above (although some of the project configuration is not done automatically yet). some of it like the section on building the index and usage tips are still
relevant, and other parts still may provide useful background information to understand it in more detail on how eclipse works. you can expect it to take an hour or so to work through these instructions if you're doing so for the first time. (this assumes that you already have a copy of the mozilla source, and that you have also built the source so that you have a pre-existing object directory. if...
...led during an actual build. this process is sometimes called "build option discovery" or "compiler option discovery". the way that eclipse cdt does build option discovery is to scan the console output from a real build looking for lines where a compiler was invoked. for each line that invoked a compiler, it tries to figure out which source file was being built and what its include paths were. if
relative paths are used to specify the source file or any of its include paths (common in mozilla), and if you fail to take steps to make sure the build output specifies which directory the compiler is invoked from, this will not be possible. if eclipse can successfully identify which source file was being compiled, then it can associate with that file the resolvable include paths, preprocessor defin...
...he build must be explicitly instructed to output information that allows the directory, where the compiler is being invoked from to be identified (i.e., 'make' must be instructed to output "entering directory..."/"leaving directory..." lines). finally, the build must not be parallelized, since that would result in the interleaving of build output from different directories (breaking resolution of
relative paths by interleaving the "entering directory..."/"leaving directory..." lines), and the build must not be silenced/quietened. conversely, note this very carefully: if you configure eclipse to invoke a build process that is parallelized, silenced, or that fails to identify the directory that the compiler is being run from, then it will mess up the compiler options that eclipse associates wi...
...And 6 more matches
Power profiling overview
being executed. the other states have higher numbers and reflect increasing deeper idle states. the deeper an idle state is, the less power it uses, but the longer it takes to wake up from. note: the acpi standard specifies four states, c0, c1, c2 and c3. intel maps these to processor-specific states such as c0, c1, c2, c6 and c7. and many tools report c-states using the latter names. the exact
relationship is confusing, and chapter 13 of the intel optimization manual has more details. the important thing is that c0 is always the active state, and for the idle states a higher number always means less power consumption. the other thing to note about c-states is that they apply both to cores and the entire package — i.e. if all cores are idle then the entire package can also become idle, ...
...pport multiple p-states. p0 is the state where the processor is operating at maximum frequency and voltage, and higher-numbered p-states operate at a lower frequency and voltage to reduce power consumption. processors can have dozens of p-states, but the transitions are controlled by the hardware and os and so p-states are of less interest to application developers than c-states. power and power-
related measurements there are several kinds of power and power-
related measurements. some are global (whole-system) and some are per-process. the following sections list them from best to worst. power measurements the best measurements are measured in joules and/or watts, and are taken by measuring the actual hardware in some fashion. these are global (whole-system) measurements that are affected...
...apl (running average power limit) interface that provides msrs containing energy consumption estimates for up to four power planes or domains of a machine, as seen in the diagram above. pkg: the entire package. pp0: the cores. pp1: an uncore device, usually the gpu (not available on all processor models.) dram: main memory (not available on all processor models.) the following
relationship holds: pp0 + pp1 <= pkg. dram is independent of the other three domains. these values are computed using a power model that uses processor-internal counts as inputs, and they have been verified as being fairly accurate. they are also updated frequently, at approximately 1,000 hz, though the variability in their update latency means that they are probably only accurate at lower frequenci...
...And 6 more matches
Performance
ce a guide for add-on developers on how to set up a performance testing environment. xul school: add-on performance tips for add-on developers to help them avoid impairing application performance. gpu performance tips for profiling and improving performance when using a gpu. scroll-linked effects information on scroll-linked effects, their effect on performance,
related tools, and possible mitigation techniques. automated performance testing and sheriffing information on automated performance testing and sheriffing at mozilla. best practices for front-end engineers tips for reducing impacts on browser performance in front-end code. memory profiling and leak detection tools the developer tools "memory" panel the m...
... the developer tools "memory" panel the memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks. about:memory about:memory is the easiest-to-use tool for measuring memory usage in mozilla code, and is the best place to start. it also lets you do other memory-
related operations like trigger gc and cc, dump gc & cc logs, and dump dmd reports. about:memory is built on top of firefox's memory reporting infrastructure. dmd dmd is a tool that identifies shortcomings in about:memory's measurements, and can also do multiple kinds of general heap profiling. are we slim yet areweslimyet.com (a.k.a. awsy) is a memory usage and regression tracker...
...n leaks caused by incorrect uses of reference counting. they are slow and not particular easy to use, and thus most suitable for use by expert developers. gc and cc logs gc and cc logs can be generated and analyzed to in various ways. in particular, they can help you understand why a particular object is being kept alive. valgrind valgrind is a tool that detects various memory-
related problems at runtime, including leaks. valgrind is used as part of mozilla's continuous integration testing, though the coverage is limited because valgrind is slow. leaksanitizer leaksanitizer (a.k.a. lsan) is similar to valgrind, but it runs faster because it uses static source code instrumentation. lsan is part of mozilla's continuous integration testing, with most tests running t...
...And 6 more matches
Download Rhino
rhino is available for download both in source and compiled form. ...
... rhino is available for download both in source and compiled form. ...
... rhino is available for download both in source and compiled form. ...
...And 6 more matches
nsIFile
var fileutils = cu.import("resource://gre/modules/fileutils.jsm").fileutils var nsifile = new fileutils.file( filename ) note: nsilocalfile was merged with this interface in gecko 14. much of the documentation has not been updated to reflect this change. ...
...urce://gre/modules/fileutils.jsm").fileutils var nsifile = new fileutils.file( filename ) note: nsilocalfile was merged with this interface in gecko 14. much of the documentation has not been updated to reflect this change. ...
...utils var nsifile = new fileutils.file( filename ) note: nsilocalfile was merged with this interface in gecko 14. much of the documentation has not been updated to reflect this change. ...
...And 6 more matches
Background Tasks API - Web APIs
e dom is running in the main thread, since it's common for user interface changes to only be available to the main thread. because event handling and screen updates are two of the most obvious ways users notice performance issues, it's important for your code to be a good citizen of the web and help to prevent stalls in the execution of the event loop. in the past, there's been no way to do this
reliably other than by writing code that's as efficient as possible and by offloading as much work as possible to workers. window.requestidlecallback() makes it possible to become actively engaged in helping to ensure that the browser's event loop runs smoothly, by allowing the browser to tell your code how much time it can safely use without causing the system to lag. if you stay within the limit gi...
...mber of tasks that have been added to the queue; it will only go up, never down. we use this to do the math to present progress as a precentage of total work to do. currenttasknumber is used to track how many tasks have been processed so far. taskhandle is a reference to the task currently being processed. let totaltaskcountelem = document.getelementbyid("totaltaskcount"); let currenttasknumbe
relem = document.getelementbyid("currenttasknumber"); let progressba
relem = document.getelementbyid("progress"); let startbuttonelem = document.getelementbyid("startbutton"); let logelem = document.getelementbyid("log"); next we have variables which reference the dom elements we need to interact with. these elements are: totaltaskcountelem is the <span> we use to insert the total number of tasks...
...= document.getelementbyid("progress"); let startbuttonelem = document.getelementbyid("startbutton"); let logelem = document.getelementbyid("log"); next we have variables which reference the dom elements we need to interact with. these elements are: totaltaskcountelem is the <span> we use to insert the total number of tasks created into the status display in the progress box. currenttasknumbe
relem is the element used to display the number of tasks processed so far. progressba
relem is the <progress> element showing the percentage of the tasks processed so far. startbuttonelem is the start button. logelem is the <div> we'll insert logged text messages into. let logfragment = null; let statusrefreshscheduled = false; finally, we set up a couple of variables for other items: logfra...
...And 6 more matches
Coordinate systems - CSS: Cascading Style Sheets
this fixed point is called the origin. the position is specified as the number of pixels offset from the origin along each dimension of the context. this guide describes the standard coordinate systems used by the css object model. these are generally only different in terms of where their origin is located. ...
...ssom coordinate systems there are four standard coordinate systems used by the css object model, as described below. offset coordinates specified using the "offset" model use the top-left corner of the element being examined, or on which an event has occurred. for example, when a mouse event occurs, the position of the mouse as specified in the event's offsetx and offsety properties are given
relative to the top-left corner of the node to which the event has been delivered. the origin is inset by the distances specified by padding-left and padding-top. client the "client" coordinate system uses as its origin the top-left corner of the viewport or browsing context in which the event occurred. this is the entire viewing area in which the document is presented. scrolling is not a factor. ...
...the "client" coordinate system uses as its origin the top-left corner of the viewport or browsing context in which the event occurred. this is the entire viewing area in which the document is presented. scrolling is not a factor. ...
...And 6 more matches
Box-shadow generator - CSS: Cascading Style Sheets
</div> <div id="output" class="category"> <div id="menu" class="menu"></div> <div class="title"> css code </div> <div class="group" style="border-top-left-radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height background-color position=[
relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[""] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> <div class="output" data-topic="after" ...
... width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 13px; height: 13px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position:
relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; text-align: center; } .ui-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } .ui-slider-input > input { margin: 0 10px; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: borde...
...-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; } #container { width: 100%; padding: 2px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* container with shadows stacks */ #stack_container { height: 400px; overflow: hidden; position:
relative; border: 1px solid #ccc; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_container .container { height: 100%; width: 100%; position: absolute; left: 100%; transition-property: left; transition-duration: 0.5s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_contai...
...And 6 more matches
HTML elements reference - HTML: Hypertext Markup Language
contains information about the page. this includes information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page. metadata for styles and scripts may be defined in the page or link to another file that has the information. element description <base> the html <base> element specifies the base url to use for all
relative urls in a document. <head> the html <head> element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets. <link> the html external resource link element (<link>) specifies
relationships between the current document and an external resource. this element is most commonly used to link to stylesheets, but is al...
... <style> the html <style> element contains style information for a document, or part of a document. <title> the html title element (<title>) defines the document's title that is shown in a browser's title bar or a page's tab. ...
...ct information for a person or people, or for an organization. <article> the html <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). <aside> the html <aside> element represents a portion of a document whose content is only indirectly
related to the document's main content. <footer> the html <footer> element represents a footer for its nearest sectioning content or sectioning root element. a footer typically contains information about the author of the section, copyright data or links to
related documents. <header> the html <header> element represents introductory content, typically a group of introduct...
...And 6 more matches
HTTP Index - HTTP
ication between web browsers and web servers, but it can also be used for other purposes. http follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response. http is a stateless protocol, meaning that the server does not keep any data (state) between two requests. though often based on a tcp/ip layer, it can be used on any
reliable transport layer, that is, a protocol that doesn't lose messages silently like udp does. rudp — the
reliable update of udp — is a suitable alternative. 2 a typical http session http in client-server protocols, like http, sessions consist of three phases: 3 an overview of http html, http, overview, webmechanics, l10n:priority http isthe foundation ...
... of any data exchange on the web and it is a client-server protocol, which means requests are initiated by the recipient, usually the web browser. a complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more 4 basics of http guide, http, overview http is a pretty extensible protocol. it
relies on a few basic concepts like the notion of resources and uris, a simple structure of messages, and a client-server structure for the communication flow. on top of these basic concepts, numerous extensions have appeared over the years, adding new functionality and new semantics by creating new http methods or headers. 5 choosing between www and non-www urls guide, http, url ...
...oss-origin resource sharing (cors) is a mechanism that uses additional http headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. 21 cors errors cors, errors, http, https, messages, same-origin, security, console, troubleshooting cross-origin resource sharing (cors) is a standard that allows a server to
relax the same-origin policy. this is used to explicitly allow some cross-origin requests while rejecting others. 22 reason: cors disabled authentication, authentication article, cors, cross-origin, disabled, errors, http, https, messages, resource, same origin, same-origin, security, sharing, validation, secure, troubleshooting a request that needs to use cors was attempted, but...
...And 6 more matches
Media container formats (file types) - Web media technologies
3gp codec browser support chrome edge firefox safari avc (h.264) yes1,2 h.263 yes1 mpeg-4 part 2 (mp4v-es) yes1 vp8 yes1 [1] firefox only supports 3gp on openmax-based devices, which currently means the boot to gecko (b2g) platform. [2] firefox support for h.264
relies upon the operating system's media infrastructure, so it is available as long as the os supports it. audio codecs supported by 3gp codec browser support chrome edge firefox safari amr-nb yes1 amr-wb yes1 amr-wb+ yes1 aac-lc yes1,2 he-aac v1 yes1...
...mr-nb yes1 amr-wb yes1 amr-wb+ yes1 aac-lc yes1,2 he-aac v1 yes1,2 he-aac v2 yes1,2 mp3 yes1 [1] firefox only supports 3gp on openmax-based devices, which currently means the boot to gecko (b2g) platform. [2] firefox support for aac
relies upon the operating system's media infrastructure, so it is available as long as the os supports it. adts audio data transport stream (adts) is a container format specified by mpeg-4 part 3 for audio data, intended to be used for streamed audio, such as for internet radio. it is, essentially, an almost bare stream of aac audio data, comprised of adts frames with a minimal header. adts medi...
...within. if adts frames are used, the audio/aac mime type should be used. if the audio frames are in mpeg-1/mpeg-2 audio layer i, ii, or iii format, the mime type should be audio/mpeg. audio codecs supported by adts codec browser support chrome edge firefox safari aac yes1 mp3 yes [1] firefox support for aac
relies upon the operating system's media infrastructure, so it is available as long as the os supports it. flac the free lossless audio codec (flac) is a lossless audio codec; there is also an associated simple container format, also called flac, that can contain this audio. the format is not encumbered by any patents, so its use is safe from interference. flac files can only contain flac audio dat...
...And 6 more matches
Populating the page: how browsers work - Web Performance
smitted between the browser and the web server cannot be decrypted by a third party. after the 8 round trips, the browser is finally able to make the request. response once we have an established connection to a web server, the browser sends an initial http get request on behalf of the user, which for websites is most often an html file. ...
...uest. response once we have an established connection to a web server, the browser sends an initial http get request on behalf of the user, which for websites is most often an html file. once the server receives the request, it will reply with
relevant response headers and the contents of the html. ...
...e construction. html tokens include start and end tags, as well as attribute names and values. if the document is well-formed, parsing it is straightforward and faster. the parser parses tokenized input into the document, building up the document tree. the dom tree describes the content of the document. the <html> element is the first tag and root node of the document tree. the tree reflects the
relationships and hierarchies between different tags. tags nested within other tags are child nodes. the greater the number of dom nodes, the longer it takes to construct the dom tree. when the parser finds non-blocking resources, such as an image, the browser will request those resources and continue parsing. parsing can continue when a css file is encountered, but <script> tags—particularly th...
...And 6 more matches
JavaScript Daemons Management - Archive of obsolete content
ssentially a clone of it. /*\ |*| |*| ******************************* |*| * daemon.js * |*| ******************************* |*| |*| ver. 1.0 rev. 2 |*| |*| daemon.js - a javascript highly scalable daemons manager. |*| |*| https://developer.mozilla.org/docs/javascript/timers/daemons |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is
released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0.html |*| \*/ "use strict"; /**************************** * the daemon system * ****************************/ /* the global "daemon" constructor */ function daemon (oowner, ftask, nrate, nlen, finit, fonstart) { if (!(this && this instanceof daemon)) { return; } if (argume...
...nvocation of setinterval. /*\ |*| |*| ******************************* |*| * daemon-safe.js * |*| ******************************* |*| |*| ver. 1.0 rev. 2 |*| |*| daemon.js - a javascript highly scalable daemons manager |*| |*| https://developer.mozilla.org/docs/javascript/timers/daemons |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is
released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0.html |*| \*/ "use strict"; /************************************** * the safe-daemon sub-system * **************************************/ /* the "daemon.safe" constructor */ daemon.safe = function () { daemon.apply(this, arguments); }; /* create the daemon.safe.blank() cons...
...eady! * *****************************************/ 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). this module requires daemon.js to work. you can safely remove all or some of these methods, depending on your needs (modularity). when a method requires the presence of another method (it is
relatively rare), there is a comment which explains why. if there are not comments to that method it depends only on the base system. /*\ |*| |*| ******************************* |*| * daemon-methods.js * |*| ******************************* |*| |*| ver. 1.0 rev. 2 |*| |*| daemon.js - a javascript highly scalable daemons manager |*| |*| https://developer.mozilla.org/docs/...
...And 5 more matches
Multiple Rules - Archive of obsolete content
the query generates a list of the photos and assigns the title of each photo to the va...
...where element, so it matches results unconditionally, or any result that wasn't matched by a previous rule. in this example, the where element in the first rule defines a condition which matches results that have a title of 'canal'. three attributes are used for this purpose. the subject is the variable from the result that want to compare. in this case, '?title' is used to compare the title. the
rel specifies a
relation operator to compare with. here 'equals' is the operator used so an exact match is needed. the value attribute is the value to compare to, which here is 'canal'. as the datasource has three photos, one of which has a title of 'canal', this photo will match the first rule and the content's of that rule's action body will be generated. the remaining two photos do not match the f...
...as appeared differently that the others. in fact, the content for this photo is that of the first rule with the button, whereas the content for the other photos is that of the second rule with the normal images. here is another example for an xml source: <radiogroup datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <rule> <where subject="?gender"
rel="equals" value="male"/> <action> <radio uri="?" label="?name is male"/> </action> </rule> <rule> <action> <radio uri="?" label="?name is female" disabled="true"/> </action> </rule> </template> </radiogroup> in this example, all male people are matched with the first rule, and a radio button is generated for each one. we assume that anyone tha...
...And 5 more matches
RDF Query Syntax - Archive of obsolete content
reviousnext » let's look at a simple query with two statements. each statement is placed as a direct child of the <query> element within the template. <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/
relateditem" object="?
relateditem"/> </query> <rule> ... </rule> </template> </vbox> this query has two statements, each specified with a different tag. the template won't generate anything yet since we still need to fill in the content to be generated which goes in the missing part inside the rule. however, the template builder will be able to compile the rules and...
...plates more understandable. for this discussion, assume that so far we have a single potential result as above. the content tag doesn't do anything else at this point, meaning it doesn't add anything else to the network of potential results, so processing continues on to the next statement, the triple, which looks like this: <triple subject="?start" predicate="http://www.xulplanet.com/rdf/
relateditem" object="?
relateditem"/> the triple statement is used to follow arcs or arrows in the rdf graph. the predicate attribute specifies the labels of the arrows to follow. in the triple used here, the predicate is 'http://www.xulplanet.com/rdf/
relateditem', so we know that the builder will look for arrows with that label. the builder can either follow the arrows in a forward or backwa...
...is not known yet. recall the data in the potential results set: (?start = http://www.xulplanet.com/rdf/a) this was the seed data created by the content statement. ...
...And 5 more matches
XUL accessibility guidelines - Archive of obsolete content
l for microsoft accessibility. accessibility - mdc. accessibility hub on the mozilla developer center. mozilla.support.accessibility. mozilla accessibility newsgroup. #accessibility. accessibility channel on mozilla's irc server. guidelines keyboard access keyboard access is important to users who can't use a mouse. many screen reader users and those with physical disabilities
rely on the keyboard as their primary input tool. these users require easy, predictable, and well-documented keyboard control. tab order provide a logical tab order and ensure that users can navigate all content using a keyboard. by default, the tab order is determined by the order of the elements in the underlying code. it can also be set programmatically with the tabindex attribute if needed, but...
...dditional markup to understand meanings and associations that may be intuitive to visual users. this additional markup is what is known as assistive information. providing the additional information is easy, but is often forgotten because it yields little or no visual change. alternative text provide alternative text for meaningful images. alternative text is not needed when an image serves a pu
rely decorative function. use the "alt" attribute to describe html images and use the "tooltiptext" attribute on xul elements that use images (i.e. image elements, buttons with images). for toolbar buttons with images it is recommended to use both a text label in the label attribute and image alt text in the tooltiptext attribute. view the code examples below. <image src="stop.png" tooltiptext="stop...
...y, and that they essentially label each other. to solve this problem, we use the aria-labelledby attribute on both controls (note the double l—aria uses uk-style spelling) to specify that the checkbox and the textbox are both labeled by the the entire group of components. put into xul, this looking something like the following. ...
...And 5 more matches
menupopup - Archive of obsolete content
when a menupopup is open, it floats above the window and may extend outside the window border. 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. it may be attached to any element using the popup attribute. when the element is clicked with the left mouse button, the menupopup will be displayed. it may be attached to any element using the context attribute. ...
...sed to dynamically set the contents when the user requests to display it. returning false from this event handler prevents the popup from appearing. onpopupshown type: script code this event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened. position type: string the position attribute determines where the popup appears
relative to the element the user clicked to invoke the popup. this allows you to place the popup on one side of a button. note that a context menu will never respect this attribute, always appearing
relative to the mouse cursor. this value can be specified either as a single word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should b...
...moveto( x, y ) return type: no return value moves the popup to a new location defined by screen coordinates (and not client coordinates). if both x and y have the value -1 the call will realign the popup with its anchor node. openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, triggerevent ) return type: no return value opens the popup
relative to a specified node at a specific location. anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same document as the popup. unanchored popups may be created by supplying...
...And 5 more matches
tooltip - Archive of obsolete content
for text-only tooltips, this element doesn't need to be used; instead you may just add a tooltiptext attribute to an element. more information is available in the xul tutorial. ...
...ttribute to true will result in the tooltip being filled automatically as appropriate for a browser content area tooltip, i.e. the tooltip text is set according to the dom element in the browser that the user hovered over. example <tooltip id="pagetooltip" page="true"/> <browser tooltip="pagetooltip"/> position type: string the position attribute determines where the popup appears
relative to the element the user clicked to invoke the popup. this allows you to place the popup on one side of a button. note that a context menu will never respect this attribute, always appearing
relative to the mouse cursor. this value can be specified either as a single word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should b...
... moveto( x, y ) return type: no return value moves the popup to a new location defined by screen coordinates (and not client coordinates). if both x and y have the value -1 the call will realign the popup with its anchor node. openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, triggerevent ) return type: no return value opens the popup
relative to a specified node at a specific location. anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same document as the popup. unanchored popups may be created by supplying...
...And 5 more matches
Archived Mozilla and build documentation - Archive of obsolete content
cle describes how to create a registered sidebar for firefox 2 or greater. see the references section for information on creating extension in earlier browsers. creating a hybrid cd creating a microsummary a microsummary generator is a set of instructions for creating a microsummary from the content of a page. web pages can reference generators via <link
rel="microsummary"> elements in their <head> elements. generators can also be independently downloaded and installed by users if they include a list of pages to which they apply. creating a mozilla extension a mozilla extension is an installable enhancement to the mozilla browser that provides additional functionality (for example linky, which adds an item ...
...ava code to interact with xpcom objects. as you will see in this article, working with xpcom objects in java is not that much different than doing so in c++. error console the error console is a tool available in most mozilla-based applications that is used for reporting errors in the application chrome and in web pages user opens. it reports javascript-
related errors and warnings, css errors and arbitrary messages from chrome code. in firefox, the error console can be opened from the tools menu or by ctrl-shift-j. exception logging in javascript technical review completed. existing content this is a list of existing mozilla.org documentation. it needs to be checked, prioritized, and migrat...
...s is quick set of answers to the most common issues with extension development. they are currently written with mostly firefox in mind, but most if not all should easily translate to seamonkey, thunderbird or any of the other applications. for thunderbird, you may also find the extension howto or faq pages helpful. firefox sync sync refers to a family of
related components and services which provide synchronization of data between mozilla application instances. these components and services include: force rtl (this is a temporary placeholder/stub for the force rtl page) gecko coding help wanted take a look through lxr, and you'll realize that mozilla's source code is a big place. gre hacking wi...
...And 5 more matches
CSS and JavaScript accessibility best practices - Learn web development
ml text fundamentals and styling text for more information. emphasised text inline markup that confers specific emphasis to the text that it wraps: <p>the water is <em>very hot</em>.</p> <p>water droplets collecting on surfaces is called <strong>condensation</strong>.</p> you might want to add some simple coloring to your emphasised text: strong, em { color: #a60000; } you will however ra
rely need to style emphasis elements in any significant way. the standard conventions of bold and italic text are very recognisable, and changing the style can cause confusion. for more on emphasis, see emphasis and importance. abbreviations an element that allows an abbreviation, acronym, or initialization to be associated with its expansion: <p>web content is marked up using <abbr title="hyperte...
...s, and getting them looking neat and tidy. you shouldn't however deviate too much from the expected visual feedback form elements receive when they are focused, which is basically the same as links (see above). you could style form focus/hover states to make this behaviour more consistent across browsers or fit in better with your page design, but don't get rid of it altogether — again, people
rely on these clues to help them know what is going on. tables tables for presenting tabular data. you can see a good, simple example of table html and css in our table-css.html example (see it live also). table css generally serves to make the table fit better into your design and look less ugly. it is a good idea to make sure the table headers stand out (normally using bold), and use zebra stri...
...nd background colors into, to check them. for example webaim's color contrast checker is simple to use, and provides an explanation of what you need to conform to the wcag criteria around color contrast. note: a high contrast ratio will also allow anyone using a smartphone or tablet with a glossy screen to better read pages when in a bright environment, such as sunlight. another tip is to not
rely on color alone for signposts/information, as this will be no good for those who can't see the color. instead of marking required form fields in red, for example, mark them with an asterisk and in red. hiding things there are many instances where a visual design will require that not all content is shown at once. for example, in our tabbed info box example (see source code) we have three panels...
...And 5 more matches
CSS values and units - Learn web development
ata type description <integer> an <integer> is a whole number such as 1024 or -55. <number> a <number> represents a decimal number — it may or may not have a decimal point with a fractional component, for example 0.255, 128, or -1.2. <dimension> a <dimension> is a <number> with a unit attached to it, for example 45deg, 5s, or 10px. <dimension> is an umb
rella category that includes the <length>, <angle>, <time>, and <resolution> types. <percentage> a <percentage> represents a fraction of some other value, for example 50%. percentage values are always
relative to another quantity, for example an element's length is
relative to its parent element's length. lengths the numeric type you will come across most frequently is <length>, f...
... <percentage> a <percentage> represents a fraction of some other value, for example 50%. percentage values are always
relative to another quantity, for example an element's length is
relative to its parent element's length. lengths the numeric type you will come across most frequently is <length>, for example 10px (pixels) or 30em. there are two types of lengths used in css —
relative and absolute. it's important to know the difference in order to understand how big things will become. absolute length units the following are all absolute length units — they are not
relative to anything else and are generally considered to always be the same size. unit name equivalent to cm centimeters 1cm = 96px/2.54 mm millimeters 1mm...
... of 1cm in inches 1in = 2.54cm = 96px pc picas 1pc = 1/6th of 1in pt points 1pt = 1/72th of 1in px pixels 1px = 1/96th of 1in most of these values are more useful when used for print, rather than screen output. for example we don't typically use cm (centimeters) on screen. the only value that you will commonly use is px (pixels).
relative length units
relative length units are
relative to something else, perhaps the size of the parent element's font, or the size of the viewport. the benefit of using
relative units is that with some careful planning you can make it so the size of text or other elements scale
relative to everything else on the page. some of the most useful units for web development are listed in the table belo...
...And 5 more matches
How can we design for all types of users? - Learn web development
color contrast to keep your text readable, use a text color that contrasts well with the background color. make it extra easy to read the text, to help visually-impaired people and people using their phones on the street. the w3c defines a good color mix with an algorithm that calculates luminosity ratio between foreground and background. the calculation may seem pretty complicated, but we can
rely on tools to do the job for us. let's download and install the paciello group's colour contrast analyser. note: alternatively you can find a number of contrast checkers online, such as webaim's color contrast checker. we suggest a local checker because it comes packaged with an on-screen color picker to find out a color value. for instance, let's test the colors on this page and see how we f...
...-screen color picker to find out a color value. for instance, let's test the colors on this page and see how we fare in the colour contrast analyser: the luminosity contrast ratio between text and background is 8.30:1, which exceeds the minimum standard (4.5:1) and should enable many visually-impaired people to read this page. font size you can specify font size on a website either through
relative units or absolute units. absolute units absolute units are not proportionally calculated but refer to a size set in stone, so to speak, and are expressed most of the time in pixels (px). for instance, if in your css you declare this: body { font-size:16px; } … you are telling the browser that whatever happens, the font size must be 16 pixels. modern browsers get around this rule by pre...
... that whatever happens, the font size must be 16 pixels. modern browsers get around this rule by pretending that you're asking for "16 pixels when the user sets a zoom factor of 100%". yet, for many years internet explorer adamantly displayed 16 pixels as 16 pixels. in this case, zooming did nothing, even as late as internet explorer 8, which we still have to cater to because it's still around. ...
...And 5 more matches
Client-side storage - Learn web development
to personalize user experience on websites. they're the earliest form of client-side storage commonly used on the web. these days, there are easier mechanisms available for storing client-side data, therefore we won't be teaching you how to use cookies in this article. however, this does not mean cookies are completely useless on the modern-day web — they are still used commonly to store data
related to user personalization and state, e.g. session ids and access tokens. for more information on cookies see our using http cookies article. new school: web storage and indexeddb the "easier" features we mentioned above are as follows: the web storage api provides a very simple syntax for storing and retrieving smaller, data items consisting of a name and a corresponding value. this is use...
...an imagine the security issues that would arise if websites could see each other's data! a more involved example let's apply this new-found knowledge by writing a simple working example to give you an idea of how web storage can be used. our example will allow you enter a name, after which the page will update to give you a personalized greeting. this state will also persist across page/browser
reloads, because the name is stored in web storage. you can find the example html at personal-greeting.html — this contains a simple website with a header, content, and footer, and a form for entering your name. let's build up the example, so you can understand how it works. first, make a local copy of our personal-greeting.html file in a new directory on your computer. next, note h...
...to our website. we hope you have fun while you are here.'; // hide the 'forget' part of the form and show the 'remember' part forgetdiv.style.display = 'none'; rememberdiv.style.display = 'block'; } } last but not least, we need to run the namedisplaycheck() function every time the page is loaded. if we don't do this, then the personalized greeting will not persist across page
reloads. add the following to the bottom of your code: document.body.onload = namedisplaycheck; your example is finished — well done! all that remains now is to save your code and test your html page in a browser. you can see our finished version running live here. note: there is another, slightly more complex example to explore at using the web storage api. note: in the line <script sr...
...And 5 more matches
Drawing graphics - Learn web development
height="240"></canvas> this will create a canvas on the page with a size of 320 by 240 pixels. inside the canvas tags, you can put some fallback content, which is shown if the user's browser doesn't support canvas. <canvas width="320" height="240"> <p>your browser doesn't support canvas. boo hoo!</p> </canvas> of course, the above message is really unhelpful! in a real example you'd want to
relate the fallback content to the canvas content. for example, if you were rendering a constantly updating graph of stock prices, the fallback content could be a static image of the latest stock graph, with alt text saying what the prices are in text. creating and sizing our canvas let's start by creating our own canvas that we draw future experiments on to. first make a local copy of our 0_...
...o display only a part of the image, or to resize it? we can do both with the more complex version of drawimage(). update your ctx.drawimage() line like so: ctx.drawimage(image, 20, 20, 185, 175, 50, 50, 185, 175); the first parameter is the image reference, as before. ...
... parameters 8 and 9 define the width and height to draw the cut-out area of the image. in this case, we have specified the same dimensions as the original slice, but you could resize it by specifying different values. ...
...And 5 more matches
Eclipse CDT
building the eclipse project should only take a few seconds. in the case of the build-backend command, instructions on how to open the project will be displayed after the command completes. manual setup, and more more information can be found on the eclipse cdt manual setup page. much of that page is redundant (taken care of by the mach setup), but there is still some information there that is
relevant that should make its way back here at some point. keeping the index up-to-date as the source changes from day-to-day, you'll want to update the index to keep the code assistance working well. since the compiler options used to build the source change
relatively infrequently, the "build" step above doesn't need to be rerun all that often. rerun it (and then rebuild the index) once a week o...
...hen in the "c/c++ build" section of the project properties, set "build command" to "make -f client.mk" and set "build directory" to just "${projdirpath}" (this is the top of the source tree). select the behavior tab and remove the "all" from the "build (incremental build)" field. select "c/c++ build > build variables", and add a variable "mozconfig", and set it to the path of your .mozconfig file
relative to the top source directory. set any other environment variables you want to set for the build, then close the project properties window. now when you hit the build button (the little hammer icon), you should see the source build in the console tab at the bottom of the window. the benefit of building from inside eclipse is that build errors will appear in the problems tab at the bottom of ...
...d button (the little hammer icon), you should see the source build in the console tab at the bottom of the window. the benefit of building from inside eclipse is that build errors will appear in the problems tab at the bottom of the window, and from there you can double click on the build error and it will take you straight to the source file and line where the problem occurred. for this to work
reliably though, you still need to build using slow -j1 -w builds, so that make outputs non-interleaved "entering"/"leaving" lines. it also used to be necessary to add the following two lines to your mozconfig to make the compiler output errors all on a single line, but that may not be needed anymore: export cflags="-fmessage-length=0" export cppflags="-fmessage-length=0" debugging to create a de...
...And 5 more matches
Localization content best practices
ate localizable code, and describes how to avoid some localizability (l12y) common mistakes. note: if you're a localizer and you want to contribute to the localization of mozilla products, you might want to read our localization quick start guide for information on localizing mozilla code. note on localizers mozilla localizers are volunteers with very diverse technical skills: some of them
rely exclusively on translation tools, others prefer to work directly with text editors and don't have problems working with vcs systems. it's important to consider this when adding strings, and especially localization comments for strings that contain references, or obscure technical details. localization files choose good key ids the ids (names) chosen for your keys, regardless of the file form...
...o change a key id, adding a progressive number to the existing key should always be used as a last resort. for example, suppose this string needs to be changed from "event" to "add new event": new-event-header = event add-new-event-header is definitely a better choice for the new string than new-event-header1. if a string is tied to an accesskey or a tooltip, use string ids that highlight this
relation: neweventbtn.label = add event neweventbtn.accesskey = a neweventbtn.tooltip = add a new event don't duplicate ids if you're adding new strings, check that you're not duplicating an existing id. depending on the parser logic, one of these two translations will be ignored. add localization notes localizers usually work on the localizable files without the context of the source files inc...
... for mobile, where different context often means different font and available space for the string. for example, if you're adding a new menu item in settings on android, don't use the same string for the menu item and the following screen header. another example, some locales use nouns for titles, and verbs for actions (for example button labels). sometimes they coincide with english, but they ra
rely do in other languages. take bookmark: it can be both a noun and a verb in english. a developer could be tempted to reuse the same string "bookmark" in the button to add a bookmark, and in the header for the next dialog. this won't work in some languages. avoid unnecessary complexity in strings consider this string: privacy-link = <p>by proceeding you accept the <a href="https://www.mozilla.or...
...And 5 more matches
Localization sign-off reviews
tion receives all of your hard work in a functional product. each qa review helps us in these ways: ensures that your l10n work is visible and functional within the mozilla application. allows us to understand how each l10n team is performing their localization work. allows us to discover potential bugs within l10n tools. overview you've done some localization work and are ready for it to be
released. the merge date for migrating from one product
release channel to the next is rapidly approaching. you need to make sure that your work can effectively be compiled into a build for the next
release channel. here is a detailed overview of what a sign-off review is and who it's meant for: a sign-off review: is performed as a qa measure for maintaining a localization from
release-to-
release. ...
...is rapidly approaching. you need to make sure that your work can effectively be compiled into a build for the next
release channel. here is a detailed overview of what a sign-off review is and who it's meant for: a sign-off review: is performed as a qa measure for maintaining a localization from
release-to-
release. only evaluates new l10n work. this is done by generating a diff between the new
release revision being considered and the previously approved
release revision. focuses on technical accuracy and completion of l10n work, not translation quality. evaluates new
release revisions, not entire l10n repos. does not need to be approved before revision merge between
release channels, although it is recommended. sign-off review criteria since the scope of each qa review process varies,...
...hence, unless a localizer makes a change within the new revision that nullifies the approved work in the previous revision, the sign-off criteria will be significantly less comprehensive than a technical review. ...
...And 5 more matches
An overview of NSS Internals
), it is based on a cross platform portability layer, called the netscape portable runtime (nspr), which provides cross platform application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming. nss offers lots of functionality; we'll walk through the list of modules, design principles, and important
relevant standards. in order to allow interoperability between software and devices that perform cryptographic operations, nss conforms to a standard called pkcs#11. (note that it's important to look at the number 11, as there are other pkcs standards with different numbers that define quite different topics.) a software or hardware module conforming to the pkcs#11 standard implements an interf...
...alls, which allow querying the characteristics and offered services of the module. multiple elements of nss's own modules have been implemented with this interface, and nss makes use of this interface when talking to those modules. this strategy allows nss to work with many hardware devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that secu
rely protect a secret key) and software modules (e.g., to allow to load such modules as a plugin that provides additional algorithms or stores key or trust information) that implement the pkcs#11 interface. a core element of nss is freebl, a base library providing hash functions, big number calculations, and cryptographic algorithms. softoken is an nss module that exposes most freebl functional...
...vironment that describes how to use public key encryption is called public key infrastructure (pki). the public keys that are exchanged between parties are transported using a container; the container is called a certificate, following standard x.509 version 3. a certificate contains lots of other details; for example, it contains a signature by a third party that expresses trust in the ownership
relationship for the certificate. 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. many (if not most) of the operations performed by nss involve the use of x.509 certificates (often abbreviated as “cert”, unfortunately making it easy to confuse with the term “computer emergency respons...
...And 5 more matches
SpiderMonkey 1.8
or, file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. ...
... can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js-1.8.0-rc1.tar.gz (md5 checksum: eaad8815dcc66a717ddb87e9724d964e). spidermonkey 1.8 is the javascript engine that shipped in firefox 3.0. it is much faster than spidermonkey 1.7 and contains a few new language features and api features, described in detail below. please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup. or, file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. —9 march 2009 known issues spidermonkey 1.8 has one known significant regression from 1.7. in js_threadsafe builds, some objects are not safe to be shared among threads. this includes iterators and generators (bug 349263) and arrays (bug 417...
...ime should not use spidermonkey 1.8. there is a minor known bug in the new javascript 1.8 functionality. when javascript 1.8 support is enabled, the parser accepts some incorrect programs by inserting a semicolon where it should instead throw a syntaxerror (bug 384758). this bug will be fixed in 1.8.1. migrating to spidermonkey 1.8 spidermonkey 1.8 is not binary-compatible with previous
releases. it is source-compatible with spidermonkey 1.7 though, which means you can probably just recompile and
relink your application. a handful of changes are not backwards-compatible: the result of assigning to a property with a setter has changed (bug 312354). in javascript 1.7 and earlier, x = [].length = "7"; would store the number 7 in x. now this statement stores the string "7" in x. the ...
...And 5 more matches
Web Replay
ding or replaying. there are a few ways to start recording a tab: record current tab open the developer tools and click the button indicated below. this will refresh the tab and start recording. the button will be colored blue when the tab is being recorded. it can be clicked again to stop recording. open a new tab in recording mode click the 'tools -> web developer -> web replay ->
reload and record tab' menu item. this has the same effect as above but can be used when the developer tools are not open. open a saved recording in a new tab click the 'tools -> web developer -> web replay -> open new recording tab' menu item to open a new blank tab that is recorded. live rewinding at any time while recording, the tab can be rewound to replay earlier behavior, all the way back...
...re allows a replaying process to restore a previous state, while still maintaining communication with the chrome process. debugger integration allows the js debugger to read the information it needs from a replaying process and control the process's execution (resume/rewind). the debugger is not allowed to change the replaying process's observable state. record/replay infrastructure broadly,
reliable record/replay is achieved by controlling for non-determinism in the browser. this non-determinism originates from two sources: intra-thread and inter-thread. intra-thread non-deterministic behaviors are non-deterministic even in the absence of actions by other threads, and inter-thread non-deterministic behaviors are those affected by interleaving execution with other threads, and which al...
...replayed for each thread. these behaviors mainly originate from system calls (i/o and such). inter-thread non-determinism is handled by first assuming the program is data race free: shared memory accesses which would otherwise race are either protected by locks or use apis that perform atomic operations. if we record and later replay the order in which threads acquire locks (and, by extension,
release locks and use condvars) then accesses on lock-protected memory will occur in the same order. atomic variables can be handled by treating reads and writes as if they were wrapped by a lock acquire/
release during recording. it is not enough, however, to just record all these non-deterministic sources and reproduce those behaviors exactly in the replaying process. the ipc and debugger integra...
...And 5 more matches
Timing element visibility with the Intersection Observer API - Web APIs
in the container has an 8px bottom margin to space things apart. ads finally, the ads have the following initial styling. individual ads may customize the style somewhat, as we'll see later. .ad { height: 96px; padding: 6px; border-color: #555; border-style: solid; border-width: 1px; } .ad:not(:last-child) { margin-bottom: 8px; } .ad h2 { margin-top: 0; } .ad div { position:
relative; float: right; padding: 0 4px; height: 20px; width: 120px; font-size: 14px; bottom: 30px; border: 1px solid black; background-color: rgba(255, 255, 255, 0.5); } there's nothing magic in here. it's fairly basic css. tying it together with javascript that brings us to the javascript code which makes everything work. let's start with the global variables: let contentbox; le...
... tabs in their browser. the intersection observer api doesn't take this into account when detecting intersection, since intersection isn't affected by page visibility. therefore, we need to pause our timers while the page is tabbed out; hence this event listener. next we set up the options for the intersectionobserver which will monitor target elements (ads, in our case) for intersection changes
relative to the document. the options are configured to watch for intersections with the document's viewport (by setting root to null). we have no margins to extend or contract the intersection root's rectangle; we want to match the boundaries of the document's viewport exactly for intersection purposes. and the threshold is set to an array containing the values 0.0 and 0.75; this will cause our call...
...es let's take a look at the handler for the visibilitychange event. our script receives this event when the document itself becomes visible or invisible. the most important scenario here is when the user switches tabs. since intersection observer only cares about the intersection between the targeted elements and the intersection root, and not the tab's visibility (which is a different issue enti
rely), we need to use the page visibility api to detect these tab switches and disable our timers for the duration. function handlevisibilitychange() { if (document.hidden) { if (!previouslyvisibleads) { previouslyvisibleads = visibleads; visibleads = []; previouslyvisibleads.foreach(function(adbox) { updateadtimer(adbox); adbox.dataset.lastviewstarted = 0; ...
...And 5 more matches
SVGPathSeg - Web APIs
methods none properties unsigned short pathsegtype domstring pathsegtypeasletter constants pathseg_unknown = 0 pathseg_closepath = 1 pathseg_moveto_abs = 2 pathseg_moveto_
rel = 3 pathseg_lineto_abs = 4 pathseg_lineto_
rel = 5 pathseg_curveto_cubic_abs = 6 pathseg_curveto_cubic_
rel = 7 pathseg_curveto_quadratic_abs = 8 pathseg_curveto_quadratic_
rel = 9 pathseg_arc_abs = 10 pathseg_arc_
rel = 11 pathseg_lineto_horizontal_abs = 12 pathseg_lineto_horizonta...
... 3 pathseg_lineto_abs = 4 pathseg_lineto_
rel = 5 pathseg_curveto_cubic_abs = 6 pathseg_curveto_cubic_
rel = 7 pathseg_curveto_quadratic_abs = 8 pathseg_curveto_quadratic_
rel = 9 pathseg_arc_abs = 10 pathseg_arc_
rel = 11 pathseg_lineto_horizontal_abs = 12 pathseg_lineto_horizontal_
rel = 13 pathseg_lineto_vertical_abs = 14 pathseg_lineto_vertical_
rel = 15 pathseg_curveto_cubic_smooth_abs = 16 pathseg_curveto_cubic_smooth_
rel = 17 pathseg_curveto_quadratic_smooth_abs = 18 pathseg_curveto_quadratic_smooth_
rel = 19 normative document svg 1.1 (2nd e...
... to attempt to define a new value of this type or to attempt to switch an existing value to this type. pathseg_closepath 1 corresponds to a "closepath" (z) path data command. pathseg_moveto_abs 2 corresponds to an "absolute moveto" (m) path data command. pathseg_moveto_
rel 3 corresponds to a "
relative moveto" (m) path data command. pathseg_lineto_abs 4 corresponds to an "absolute lineto" (l) path data command. pathseg_lineto_
rel 5 corresponds to a "
relative lineto" (l) path data command. pathseg_curveto_cubic_abs ...
...And 5 more matches
WebGL model view projection - Web APIs
, 1] // red }); next, draw a green box up top and behind the red box. box.draw({ top : 0.9, // x bottom : 0, // x left : -0.9, // y right : 0.9, // y depth : 0.5, // z color : [0.4, 1, 0.4, 1] // green }); finally, for demonstration that clipping is actually going on, this box doesn't get drawn because it's enti
rely outside of clip space. the depth is outside of the -1.0 to 1.0 range. box.draw({ top : 1, // x bottom : -1, // x left : -1, // y right : 1, // y depth : -1.5, // z color : [0.4, 0.4, 1, 1] // blue }); the results view on jsfiddle exercise a helpful exercise at this point is to move the boxes around the ...
...int on a plane which is perpendicular to the viewing direction. anything closer to the lens than the near clipping plane or farther from it than the far clipping plane is removed. this results in the viewing frustum, which looks like this: the set of objects to be rendered for each frame is essentially created by starting with the set of all objects in the scene. then any objects which are enti
rely outside the viewing frustum are removed from the set. next, objects which partially extrude outside the viewing frustum are clipped by dropping any polygons which are enti
rely outside the frustum, and by clipping the polygons which cross outside the frustrum so that they no longer exit it. once that's been done, we have the largest set of polygons which are enti
rely within the viewing frustum. ...
... perspective projection matrix up to this point, we've built up our own 3d rendering setup, step by step. however the current code as we've built it has some issues. for one, it gets skewed whenever we resize our window. ...
...And 5 more matches
Rendering and the WebXR frame animation callback - Web APIs
in this context, "repaint" simply means the process of ensuring that the screen's displayed content matches what the dom and the elements within are trying to present at the moment. hardare vertical refresh rate when the browser is ready to refresh the <canvas> within which your webxr content is displayed, it calls your frame rendering callback, which uses the specified timestamp and any other
relevant data, such as models and textures, as well as application state, to render the scene—as it should appear at the specified time—into the webgl backbuffer. when your callback returns, the browser transfers that backbuffer to the display or xr device, along with anything else that's changed since the last time the screen was refreshed. historically, displays have refreshed 60 times per sec...
... when in doubt, you can assume that the display is refreshing at 60 hz. as long as your code is written properly, everything will be fine. renderer performance concerns clearly, you have very little time to render your scene each frame. not only that, but if your renderer itself runs longer than that amount of time, you can cause not just the frame to get dropped, but that time to be wasted enti
rely, blocking other code from getting to run at all for that frame. not only that, but if your rendering crosses the vertical refresh boundary, you can wind up with a tearing effect. tearing occurs when the the display hardware starts the next refresh cycle while the previous frame is still being drawn to the screen. as a result, you wind up with the visual effect of the top part of the screen show...
...e, unified, 3d image of the world in the viewer's brain, and that image is what is seen. and because of those differences between what is seen by the left eye versus the right eye, the brain is able to infer a great deal of information about how deep the object is, its size, and more. ...
...And 5 more matches
Example and tutorial: Simple synth keyboard - Web APIs
idden; width: 660px; height: 110px; white-space: nowrap; margin: 10px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position:
relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; ...
... 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0 6px 0 0; } .settingsbar { padding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position:
relative; vertical-align: middle; width: 100%; height: 30px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } .right { width: 50%; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { ve...
...then we add data-* attributes which contain the key's octave ...
...And 5 more matches
ARIA Test Cases - Accessibility
i-aria in. where a failure occurs we will test the browser for api incorrectness, using tools such as msaa inspect. this must be done in order to determine where to file a bug (browser or at). there are several purposes for providing this information: help browser vendors provide correct implementations help at vendors provide correct implementations inform authors as to what actually works
reliably in general we're testing with the latest public
releases. however, where things don't work we may test with nightly builds if they are available, in order to show what is already fixed in upcoming
releases. we can add more screen readers if people are willing to step up and provide test results for them. tested ua/at combinations: dragon 10 with firefox 3 and ie 8 beta 2 jaws 9 & 10 ...
... mapping in ie8 to msaa roles can be directly checked. also, as a clever feature for at testing, the firing of events (like event_object_statechange) can be invoked from the examples. finally, a list of currently non-mapped aria roles is given. documenting and filing bugs review the information on how to file a bug on an aria implementation. when documenting an issue, please also list it in the
relevant compatibility table below. when possible provide a link to the bug in the database so that its status can be reviewed. widget test cases alert simple alert complex alert real alert example with aria-required and aria-invalid -- type in a email address without an at sign to test the alert expected at behavior: a screen reader or screen magnifier must speak an alert when it becomes...
... markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 pass fail - -...
...And 5 more matches
Adding captions and subtitles to HTML5 video - Developer guides
y're usually in the subrip text (srt) format. these can be easily converted to webvtt using an online converter such as srt2vtt. modifications to the html and css this section summarises the modifications made to the previous article's code in order to facilitate the addition of subtitles to the video. if you are not interested in this, and just want to get straight into the javascript and more
relevant css, skip to the subtitle implementation section. in this example we are using a different video, sintel, as it actually has some speech in it and therefore is better for illustrating how subtitles work! html markup as mentioned above, we need to make use of the new html5 <track> element to add our subtitle files to the html5 video. we actually have our subtitles in three different lang...
... using a different video, sintel, as it actually has some speech in it and therefore is better for illustrating how subtitles work! html markup as mentioned above, we need to make use of the new html5 <track> element to add our subtitle files to the html5 video. ...
...ng how subtitles work! html markup as mentioned above, we need to make use of the new html5 <track> element to add our subtitle files to the html5 video. ...
...And 5 more matches
An overview of HTTP - HTTP
ndividual messages (as opposed to a stream of data). the messages sent by the client, usually a web browser, are called requests and the messages sent by the server as an answer are called responses. designed in the early 1990s, http is an extensible protocol which has evolved over time. it is an application layer protocol that is sent over tcp, or over a tls-encrypted tcp connection, though any
reliable transport protocol could theoretically be used. due to its extensibility, it is used to not only fetch hypertext documents, but also images and videos or to post content to servers, like with html form results. http can also be used to fetch parts of documents to update web pages on demand. components of http-based systems http is a client-server protocol: requests are sent by one entity, ...
...ns and act as gateways or caches, for example. in reality, there are more computers between a browser and the server handling the request: there are routers, modems, and more. thanks to the layered design of the web, these are hidden in the network and transport layers. http is on top, at the application layer. although important to diagnose network problems, the underlying layers are mostly ir
relevant to the description of http. client: the user-agent the user-agent is any tool that acts on the behalf of the user. this role is primarily performed by the web browser; other possibilities are programs used by engineers and web developers to debug their applications. the browser is always the entity initiating the request. it is never the server (though some mechanisms have been added over...
...other computers (like cache, a db server, or e-commerce servers), totally or partially generating the document on demand. a server is not necessarily a single machine, but several server software instances can be hosted on the same machine. with http/1.1 and the host header, they may even share the same ip address. proxies between the web browser and the server, numerous computers and machines
relay the http messages. due to the layered structure of the web stack, most of these operate at the transport, network or physical levels, becoming transparent at the http layer and potentially making a significant impact on performance. those operating at the application layers are generally called proxies. these can be transparent, forwarding on the requests they receive without altering them in a...
...And 5 more matches
Intl.DateTimeFormat.prototype.formatToParts() - JavaScript
le "bc" or "ad". fractionalsecond the string used for the fractional seconds, for example "0" or "00" or "000". hour the string used for the hour, for example "3" or "03". literal the string used for separating date and time values, for example "/", ",", "o'clock", "de", etc. minute the string used for the minute, for example "00". month the string used for the month, for example "12".
relatedyear the string used for the
related 4-digit gregorian year, in the event that the calendar's representation would be a yearname instead of a year, for example "2019". second the string used for the second, for example "07" or "42". timezonename the string used for the name of the time zone, for example "utc". weekday the string used for the weekday, for example "m", "monday", or "mont...
...uld be a yearname instead of a year, for example "2019". second the string used for the second, for example "07" or "42". timezonename the string used for the name of the time zone, for example "utc". weekday the string used for the weekday, for example "m", "monday", or "montag". year the string used for the year, for example "2012" or "96". yearname the string used for the yearname in
relevant contexts, for example "geng-zi" polyfill a polyfill for this feature is available in the proposal repository. examples datetimeformat outputs localized, opaque strings that cannot be manipulated directly: var date = date.utc(2012, 11, 17, 3, 0, 42); var formatter = new intl.datetimeformat('en-us', { weekday: 'long', year: 'numeric', month: 'numeric', day: 'numeric', hour: ...
...d bold, when using the formattoparts() method. console.log(formatter.format(date)); // "monday, 12/17/2012, 3:00:42.000 am" console.log(datestring); // "monday, 12/17/2012, 3:00:42.000 <b>am</b>" named years and mixed calendars in some cases, calendars use named years. chinese and tibetan calendars, for example, use a 60-year sexagenary cycle of named years. ...
...And 5 more matches
WebAssembly.Memory - JavaScript
irefox for androidopera for androidsafari on iossamsung internetnode.jsmemorychrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0memory() constructorchrome full support 57e...
... full support 8.0.0memory() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
...And 5 more matches
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
ozilla interfaces that are not exposed via xpcom (e.g. nspr). note: with the modern jit javascript engine in gecko and js-ctypes more extension code can be written only in javascript than ever before. please consider all of your options carefully before deciding to use native code (c++) in your extension. in addition, binary components need to be recompiled for every major firefox
release, which can be frustrating. this article describes how to set up the development environment for a large, complex firefox extension with any or all of the above-mentioned requirements. i should also stress that you do not have to build mozilla or use the mozilla build system if you want to create c++ components for mozilla. if you are just looking to create an xpcom component or two, th...
... or identical to the templates, but the extra flexibility gained from having the makefiles generated dynamically is one of the things that makes the build system so powerful. anatomy of a simple c++ extension we assume that you are using c++ to write xpcom components that can be used either from other c++ components or from javascript. the process of creating a component is actually
relatively straightforward when the mozilla build system is used. in the simplest case, a component will consist of a single main directory with two subdirectories, public/ and src/. the main directory and each subdirectory must contain a makefile.in (from now on i'll just refer to this file as a makefile although we know that it is actually used to generate the real makefile). this makefile s...
... this will generate the proper makefile for your extension. whether you build the whole mozilla tree or take this shortcut, you can build from now on by going to /mozilla/$(moz_objdir)/extensions/myextension/ and typing "make" on the command line. it should build your component without bothering with the rest of moz...
...And 4 more matches
Microsummary topics - Archive of obsolete content
ri attribute to urn:source:sourceurl, where sourceurl is the url from which the generator was downloaded. in the future, firefox may access source urls to download updated versions of generators, so unless you are installing generators which are available from urls, you should not use this form for your programmatically-installed generators. differentiating between user-initiated and microsummary-
related requests when firefox updates a microsummary generated by a microsummary generator add-on, it automatically downloads the html content of the page being summarized. it does not generally download
related content like embedded images and javascript scripts referenced by the page. however, because of a technical limitation (bug 340746), it does download css stylesheets referenced by the page. f...
...s the value of the header to the string microsummary. thus, to differentiate requests initiated manually by users for the purpose of viewing a web page from those initiated automatically by firefox for the purpose of summarizing that page, check for the presence and value of the x-moz request header. ...
...fox for the purpose of summarizing that page, check for the presence and value of the x-moz request header. if the x-moz header is present, and its value is microsummary, then the request is a microsummary-
related request. otherwise, it is a user-initiated request. controlling the frequency of microsummary requests when firefox downloads content in order to update a microsummary, it honors cache-
related http response headers. ...
...And 4 more matches
XUL Events - Archive of obsolete content
change this event is sent when the value of the textbox is changed. the event is not sent until the focus is moved to another element. attribute: onchange click this event is sent when a mouse button is pressed and
released. you can determine which mouse button was clicked by retrieving the button property of the event object. this event is also sent when the user double-clicks with the mouse. the detail property specifies how many clicks occurred. you can also check for triple-clicks in a similar manner. you should not use this event in xul to respond to user actions; the command event should be used instead. ...
...licking on another element, by pressing tab to switch to the next element in the tab order sequence, or by pressing 'back tab' to switch focus to the previous element in the tab order. attribute: onfocus keydown the keydown event is sent to an element that has the focus while a key is pressed but not
released. attribute: onkeydown keypress the keypress event is sent to an element that has the focus when a key is pressed and
released. when the user presses a key, the keydown event is sent first, followed by the keypress event and then the keyup event. in a textbox, a user can normally hold down a key ...
...ent and then the keyup event. in a textbox, a user can normally hold down a key to repeat a character in this case, multiple sets of key events are sent (as if the user pressed the same key repeatedly). attribute: onkeypress keyup the keyup event is sent to an element that has the focus when a key is
released. attribute: onkeyup load this event is sent to the window after it has been fully loaded. you should place this event handler on the window element. this event may also be used on the image element, or an element that accepts an image attribute, and will be fired when the image has finished load...
...And 4 more matches
Recursive Generation - Archive of obsolete content
this extra arrow which neither b or d have causes an extra set of buttons to be created. ...
...ute, in this example a <vbox>. for nested results, the insertion point is the generated element. ...
...ested results, the insertion point is the generated element. ...
...And 4 more matches
XULRunner Hall of Fame - Archive of obsolete content
now available with xulrunner 30 with i18n support. mathml support is significant. ...
... a communtiy fork of the songbird media player, bringing back linux support and much more. build instructions kirix strata a new specialty browser for accessing and manipulating data from the web telekast an open source teleprompter and script editor. source tomtom home 2 pc application to manage tomtom gps devices understanding faith (desktop version) a multimedia
religious education resource for catholic secondary schools in australia. vivipos integrated point-of-sales software-hardware solution with customized xul application as the device front-end. english site. inactive projects these projects appear to be less actively developed, with no updates since 2010. they are all based on xulrunner 1.8 or earlier. abstract an accounting package w...
...ary schools in australia. vivipos integrated point-of-sales software-hardware solution with customized xul application as the device front-end. english site. inactive projects these projects appear to be less actively developed, with no updates since 2010. they are all based on xulrunner 1.8 or earlier. abstract an accounting package with breakthrough level of automation. latest
release: 0.0.2 november 2010 - source clines a clone of color lines (game). latest
release: 1.2 november 2008 - source cocoapsyc.app a psyc im/chat client for mac os x (also available as a firefox extension). latest
release 0.5 febuary 2010 - source daim (fr) / daim (english) superb tool for image analysis build on top of a professional imagelib. echofon for windows a...
...And 4 more matches
2006-10-27 - Archive of obsolete content
to view the errorthat he receives when trying to update-packaging. error building firefox-2.0rc3 october 27: chotu atwork is trying to build firefox-2.0rc3 on uclinux running on a mips processor. during his build he receives an error which he has tried to find a solution by using google, but has not been successful. announcements there are no announcements this week. discussions final ff
release already announced october 23rd: axel hecht posted an answer to cédric corazza posting. cédric's posting was about a french site which had already announced the availablity of ff 2.0 final
release and provided download links, even though the
release was on october 24. the owner of the site probably browsed on the
releases/2.0 dir on the ftp and got the
releases, which is kind of unpolite. ...
... axel responded by stating that cédric should send them a nice note to correct that. ...
...razza posting. cédric's posting was about a french site which had already announced the availablity of ff 2.0 final
release and provided download links, even though the
release was on october 24. the owner of the site probably browsed on the
releases/2.0 dir on the ftp and got the
releases, which is kind of unpolite. cédric wanted to know if the
release directory should be closed before a major
release to avoid this kind of thing to happen. axel responded by stating that cédric should send them a nice note to correct that. on the same day cédric replied to axel's posting stating that he was going to forward a note to tristan separately. ...
...And 4 more matches
Theme changes in Firefox 2 - Archive of obsolete content
t/mozapps/preferences/fontscaling.xul - removed from firefox 2. 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. file description of change browser/bookmarks/addbookmark.css updated to include microsummary-
related css changes. browser/bookmarks/bookmarksproperties.css new file; includes microsummary-
related css. browser/browser.css needs to be updated to include new css for microsummaries, search fields, iconic bookmark menu items, and more. browser/dropmark-nav-small.png new file; used as the drop-down menu arrow on the navigation buttons, when using small icons. ...
...installs. mozapps/pref this entire directory is no longer used in firefox 2 and should be removed. changes in browser bookmarks/addbookmark.css the addbookmarks.css file should have the following lines added to the top: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); some microsummary-
related css also needs to be added, to provide formatting for the microsummary picker. these are used to make the picker look like a regular text box instead of like an editable menu list when there are no microsummaries available. menulist#name[droppable="false"] menulist#name[droppable="false"] > .menulist-editable-box menulist#name[droppable="false"] > .menulist-editable-box > html|*.textbox-...
...button:active #cut-button:active #downloads-button:active #forward-button[buttondown="true"] #history-button:active #home-button:active #mail-button #mail-button:active #mail-button[disabled="true"] #mail-button[open="true"] #new-tab-button:active #new-tab-button[checked="true"] #new-window-button:active #new-window-button[checked="true"] #paste-button:active #print-button:active #
reload-button:active #stop-button:active .messagebutton .messageimage .messagetext browsermessage toolbar[iconsize="small"] #bookmarks-button:active toolbar[iconsize="small"] #copy-button:active toolbar[iconsize="small"] #cut-button:active toolbar[iconsize="small"] #downloads-button:active toolbar[iconsize="small"] #history-button:active toolbar[iconsize="small"] #home-button:active toolb...
...And 4 more matches
Windows Media in Netscape - Archive of obsolete content
s creates a fully usable reference to the windows media player 7 or 9 control, with all the methods and properties exposed to javascript. furthermore, you know for certain that you are working with the windows media 7 or 9 control -- there is no comparable instantiation for the windows media player 6 control. ...
...a player 7 or above, the snippet of code below should produce a windows media control and play a song. this is the example: needs to be embedded in wiki page (can it just be put here?) <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full"> <param name="autostart" value="true"> <param name="url" value="media/p
reludesteel.wma"> your browser does not support the activex windows media player </object> the same markup (used above and shown below) will work in both ie and netscape 7.1. <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full" /> <param name="autostart" value="true" /> <param name="url" value="pr...
...vers more on how to detect if the windows media player has not been successfully created. scripting the windows media player control the number of methods and properties that are exposed by the windows media player, including the events that the player throws for handling by scripts in the web page containing the control, are covered in detail by the windows media player sdk. this section covers
relevant issues concerning the invocation of methods and properties from within web pages that are embedding the windows media control. detecting successful creation of the control often, usage of activex controls in ie involve the use of the object element along with a codebase attribute that initiates a download of the component if it is missing from the machine running the web page. the windows me...
...And 4 more matches
Audio for Web games - Game development
nge its capabilities. in the case of autoplay on ios, this appears to be the case currently. if possible, you should try your code on several devices and platforms to see how it works. volume programmatic volume control may be disabled in mobile browsers. the reason often given is that the user should be in control of the volume at the os level and this shouldn't be overridden. buffering and p
reloading likely as an attempt to mitigate runaway mobile network data use, we also often find that buffering is disabled before playback has been initiated. buffering is the process of the browser downloading the media in advance, which we often need to do to ensure smooth playback. the htmlmediaelement interface comes with lots of properties to help determine whether a track is in a state to be p...
...h playback. the htmlmediaelement interface comes with lots of properties to help determine whether a track is in a state to be playable. note: in many ways the concept of buffering is an outdated one. as long as byte-range requests are accepted (which is the default behavior), we should be able to jump to a specific point in the audio without having to download the preceding content. however, p
reloading is still useful — without it, there would always need to be some client-server communication required before playing can commence. concurrent audio playback a requirement of many games is the need to play more than one piece of audio at the same time; for example, there might be background music playing along with sound effects for various things happening in the game. although the sit...
...ported method — using the vanilla <audio> element — leads to patchy results on mobile devices. element — results in patchy results on mobile devices. testing and support here's a table that shows what mobile platforms support the features talked about above. ...
...And 4 more matches
What is accessibility? - Learn web development
dults have significant difficulties in functioning." people with visual impairments people with visual impairments include people with blindness, low-level vision, and color blindness. many people with visual impairments use screen magnifiers that are either physical magnifiers or software zoom capabilities. most browsers and operating systems these days have zoom capabilities. some users will
rely on screen readers, which is software that reads digital text aloud. some screen reader examples include: some are paid commercial products, like jaws (windows) and dolphin screen reader (windows). some are free products, like nvda (windows), chromevox (chrome, windows and mac os x), and orca (linux). some are built into the operating system, like voiceover (macos, ipados, ios), narrator (mi...
...tions) that can be displayed along with video. an article, later on, will discuss these. hearing-impaired people also represent a significant userbase — "466 million people worldwide have disabling hearing loss", says the world health organization's deafness and hearing loss fact sheet. people with mobility impairments these people have disabilities concerning movement, which might involve pu
rely physical issues (such as loss of limb or paralysis), or neurological/genetic disorders that lead to weakness or loss of control in limbs. some people might have difficulty making the exact hand movements required to use a mouse, while others might be more seve
rely affected, perhaps being significantly paralyzed to the point where they need to use a head pointer to interact with computers. this ...
......
...And 4 more matches
What is a URL? - Learn web development
wadays, it is mostly an abstraction handled by web servers without any physical reality. ?key1=value1&key2=value2 are extra parameters provided to the web server. those parameters are a list of key/value pairs separated with the & symbol. the web server can use those parameters to do extra stuff before returning the resource. each web server has its own rules regarding parameters, and the only
reliable way to know if a specific web server is handling parameters is by asking the web server owner. #somewhereinthedocument is an anchor to another part of the resource itself. an anchor represents a sort of "bookmark" inside the resource, giving the browser the directions to show the content located at that "bookmarked" spot. on an html document, for example, the browser will scroll to the po...
...ocument, for example, the browser will scroll to the point where the anchor is defined; on a video or audio document, the browser will try to go to the time the anchor represents. it is worth noting that the part after the #, also known as the fragment identifier, is never sent to the server with the request. note: there are some extra parts and some extra rules regarding urls, but they are not
relevant for regular users or web developers. don't worry about this, you don't need to know them to build and use fully functional urls. you might think of a url like a regular postal mail address: the protocol represents the postal service you want to use, the domain name is the city or town, and the port is like the zip code; the path represents the building where your mail should be delivered; t...
...hor represents the actual person to whom you've addressed your mail. how to use urls any url can be typed right inside the browser's address bar to get to the resource behind it. but this is only the tip of the iceberg! the html language — which will be discussed later on — makes extensive use of urls: to create links to other documents with the <a> element; to link a document with its
related resources through various elements such as <link> or <script>; to display media such as images (with the <img> element), videos (with the <video> element), sounds and music (with the <audio> element), etc.; to display other html documents with the <iframe> element. note: when specifying urls to load resources as part of a page (such as when using the <script>, <audio>, <img>, <video>, an...
...And 4 more matches
Advanced form styling - Learn web development
s article, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> the ugly: some elements can't be styled thoroughly using css. these include: elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>. <input type="color"> date-
related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> <progress> and <meter> let's first talk about the appearance property, which is pretty useful for making all of the above more stylable. appearance: controlling os-level styling in the previous article we said that historically, styling of web form controls was largely taken from the underlying oper...
...rawberry </label> </p> </fieldset> </form> now, let's style these with a custom checkbox design. ...
...rid of some system-level styling. ...
...And 4 more matches
CSS property compatibility table for form controls - Learn web development
s there's reasonably consistent support for the property across browsers. you may still face strange side effects in certain edge cases. partial while the property works, you may frequently face strange side effects or inconsistencies. you should probably avoid these properties unless you master those side effects first. no the property simply doesn't work or is so inconsistent that it's not
reliable. n.a. the property has no meaning for this type of widget. rendering for each property there are two possible renderings: n (normal) indicates that the property is applied as it is t (tweaked) indicates that the property is applied with the extra rule below: * { /* turn off the native look and feel */ -webkit-appearance: none; appearance: none; /* for internet explorer */...
... text-align yes yes text-decoration partial partial text-indent yes yes text-overflow no no text-shadow partial partial text-transform n.a. n.a. border and background background no no supported but there is too much inconsistency between browsers to be
reliable. border-radius no no box-shadow no no check boxes and radio buttons see the checkbox and radio input types. property n t note css box model width no[1] no[1] some browsers add extra margins and others stretch the widget. height no[1] no[1] some browsers...
... letter-spacing partial[1] partial[1] many browsers apply this property to the select button. text-align no no text-decoration no no text-indent partial[1] partial[1] it acts more or less like an extra left margin outside the widget. text-overflow no no ...
...And 4 more matches
Introducing a complete toolchain - Learn web development
his 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! it looks like this: you can see a live version of the site at near-misses.netlify.com. tools used in our toolchain in this article we're going to use the following tools and features: jsx, a react-
related set of syntax extensions that allow you to do things like defining component structures inside javascript. you won't need to know react to follow this tutorial, but we've included this to give you an idea of how a non-native web language could be integrated into a toolchain. the latest built-in javascript features (at time of writing), such as import. useful development tools such as pretti...
... toolchain, we mentioned two web services in the above list of tools. let's take this opportunity to make sure we are set up with them before we continue. you will need to create accounts with each of github and netlify if you wish to complete the tutorial. as mentioned previously, github is a source code repository service that adds community features such as issue tracking, following project
releases and much more. in the next chapter we will push to a github code repository, which will cause a cascade effect that (should) deploy all the software to a home on the web. netlify is a hosting service for static websites (that is, websites that enti
rely consist of files that do not change in real time), which lets us deploy multiple times a day and freely hosts static sites of all kinds. net...
... next chapter. three stages of tools as we talked about in chapter 1, the toolchain will be structured into the following phases: safety net: making the software development experience stable and more efficient. we might also refer to this as our development environment. transformation: tooling that allows us to use the latest features of a language (e.g. javascript) or another language enti
rely (e.g. jsx or typescript) in our development process, and then transforms our code so that the production version still runs on a wide variety of browsers, modern and older. post development: tooling that comes into play after you are done with the body of development to ensure that your software makes it to the web and continues to run. in this case study we'll look at adding tests to your code...
...And 4 more matches
Firefox UI considerations for web developers
o high-resolution icon is found, a screenshot is taken of the site; this screenshot is then scaled and cropped to fit in the space allotted to the icon. if the site also has a favicon, it may be overlaid in the corner of the image. the selected image is then presented within the top sites list. rich icons the high resolution icons—also known as rich icons—are specified by setting the
rel attribute to one of: apple-touch-icon apple-touch-icon-precomposed fluid-icon the size of each icon is taken from the size attribute specified on the <link>, if it's provided. apple-touch-icon and apple-touch-icon-precomposed icons with no size attribute are assumed to be the standard classic iphone size of 57x57 pixels. the icon closest in size to 96 pixels is selected. firefox does its ...
...te are assumed to be the standard classic iphone size of 57x57 pixels. the icon closest in size to 96 pixels is selected. firefox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, especially at smaller sizes. ...
...st in size to 96 pixels is selected. firefox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, especially at smaller sizes. providing a top sites ready icon the simple rule is to provide an icon which is at least 96x96 pixels in size, using a <link> element whose
rel attribute is a reference to a file containing an icon of a supported type. <link
rel="apple-touch-icon" sizes="128x128" href="touch-icon-128x128.png"> <link
rel="apple-touch-icon" sizes="46x46" href="touch-icon-46x46.png"> <link
rel="apple-touch-icon" sizes="256x256" href="touch-icon-256x256.png"> <link
rel="icon" href="favicon.ico"> in this code, the 128x128 pixel icon will be used by firefox, as it's the smallest icon which is larger than the 96-pixel size it requires. note...
...And 4 more matches
Overview of Mozilla embedding APIs
repository for accessing instances of the various xpcom services. each service is represented by a singleton object which is instantiated the first time it is requested and remains alive until the service manager is shut down, or the service is explicitly unloaded. through the service manager, individual services can be loaded, unloaded and accessed. implemented interfaces: nsiservicemanager
related interfaces: nsishutdownlistener nsmemory the nsmemory service provides the global memory manager implementation for xpcom. in addition to memory allocation and
release, this service provides low memory notifications, called a memory pressure observers, which are notified when memory is low - thus allowing cached resources to be freed. all heap access should be done via the nsmemory servic...
...ory pressure observers, which are notified when memory is low - thus allowing cached resources to be freed. all heap access should be done via the nsmemory service. to facilitate this, a set of global functions are available to access the nsmemory methods without requiring an instance of the nsmemory service (see nsmemory.h). contract-id: ns_memory_contractid implemented interfaces: nsimemory
related interfaces: nsiobserver nscomponentmanager the nscomponentmanager service is responsible for creating new instances of xpcom components. the component manager is also responsible for registering and managing the class factories used for component creation... contract-id: ns_componentmanager_contractid implemented interfaces: nsicomponentmanager nsiinterfacerequestor requestor interf...
...ver nscomponentmanager the nscomponentmanager service is responsible for creating new instances of xpcom components. the component manager is also responsible for registering and managing the class factories used for component creation... ...
...And 4 more matches
HTML parser threading
html parser threading the html parser parses data received from the network off the main thread. (there's currently one parser thread serving all parser instances.) data received from document.write() is parsed on the main thread. main objects nshtml5parser contains the code for dealing with data from document.write(). (for historical reasons, it also contains un
related fragment parsing code that should be refactored into a separate class in due course.) nshtml5streamparser contains the code for dealing with data from the network. nshtml5parser owns nshtml5streamparser. script-created parsers (i.e. parsers created using document.open()) don't have an nshtml5streamparser instance. nshtml5parser has one tokenizer/tree builder pair for parsing data from document.write(). it also has anot...
...ed later) are the entry points from the parser thread event loop into nshtml5streamparser. the runnables hold mtokenizermutex for the entire duration of the dodataavailable or dostoprequest call. mtokenizermutex protects most data structures on nshtml5streamparser from concurrent access. the runnables need to keep the nshtml5streamparser instance alive, so they have to addref it. ...
... protects most data structures on nshtml5streamparser from concurrent access. the runnables need to keep the nshtml5streamparser instance alive, so they have to addref it. however, if they
released on the parser thread, nshtml5streamparser could be deleted from the parser thread, which would lead to all sorts of badness, because nshtml5streamparser has fields that hold objects that aren't safe to
release except from the main thread. the runnables use nshtml5refptr<nshtml5streamparser>. nshtml5refptr sends runnables back to the main thread to call
release on nshtml5streamparser on the main thread. normal (non-speculative) parsing initially, dodataavailable performs character encoding sniffing on the data if an encoding wasn't declared on the enclosing protocol (http) level. once a unicode deco...
...And 4 more matches
IME handling guide
context is same as the widget' which dispatches the widget event. if there is no proper textcomposition instance, it creates the instance. and it sends the event to the textcomposition instance. note that all instances of textcomposition are managed by imestatemanager. when an instance is created, it's registered to the list. when composition completely ends, it's unregistered from the list (and
released automatically). mozilla::textcomposition textcomposition manages a composition and dispatches dom compositionupdate events. when this receives an ecompositionchange, ecompositioncommit or ecompositioncommitasis event, it dispatches the event to the stored node which was the event target of ecompositionstart event. therefore, this class guarantees that all composition events for a composit...
...r textcomposition instance and stores it. when texteditor receives an ecompositionchange (dom "text") event, it creates or modifies a text node which includes the composition string and mozilla::compositiontransaction (it was called imetexttxn) sets ime selections for representing the clauses of the composition string. when editorbase receives an ecompositionend (dom "compositionend") event, it
releases the stored textcomposition instance. nstextframe nstextframe paints ime selections. mozilla::imecontentobserver imecontentobserver observes various changes of a focused editor. when an editor or a windowless plugin gets focus, an instance is created, starts to observe and notifies widget of ime getting focus. when the editor or windowless plugin loses focus, it notifies widget of ime los...
...stextframe nstextframe paints ime selections. mozilla::imecontentobserver imecontentobserver observes various changes of a focused editor. when an editor or a windowless plugin gets focus, an instance is created, starts to observe and notifies widget of ime getting focus. when the editor or windowless plugin loses focus, it notifies widget of ime losing focus, stops observing everything and is
released. this class observes selection changes (caret position changes), text changes of a focused editor and layout changes (by reflow or scroll) of everything in the document. it depends on the result of nsiwidget::getimeupdatepreference() what is observed. when this notifies something of widget and/or ime, it needs to be safe to run script because notifying something may cause dispatching one o...
...And 4 more matches
source-editor.jsm
properties attribute type description dirty boolean set this value to false whenever you save the text; the editor will update it to true when the content is changed. you can then use this value to detect when the contents of the text are different from your most recent save. in addition, when this value changes, the "dirtychanged" event is sent. edito
relement element the element containing the editor. when using the default orion editor, this is a xul <xul:iframe> element. read only. lastfind object an object describing the result of the last find operation performed using the find(), findnext(), or findprevious() method. read only. this object has the following properties: property ...
...s whether or not there are changes that can be redone. boolean canredo(); parameters none. return value true if there are changes that can be redone, otherwise false. canundo() determines whether or not there are changes that can be undone. boolean canundo(); parameters none. return value true if there are changes that can be undone, otherwise false. destroy() destroys the editor,
releasing resource it's allocated and removing event handlers it's installed. you should call this method when you're done using the editor object. void destroy(); parameters none. dropselection() deselects the currently selected text. void dropselection(); parameters none. endcompoundchange() ends a compound change that was previously started by calling startcompoundchange(). all changes...
...isted in event name constants. this section provides details on each of those events and their properties. contextmenu the "contextmenu" event is sent when the editor's context menu is invoked, and has the following properties. property type description x number the x-coordinate at which the mouse cursor was located when the context menu was invoked. this value is
relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position. y number the y-coordinate at which the mouse cursor was located when the context menu was invoked. this value is
relative to the document being edited; that is, 0 is the left edge of the document, regardless of horizontal scroll position. ...
...And 4 more matches
Localization technical reviews
al product. each qa review helps us in these ways: ensures that your l10n work is visible and functional within the mozilla application. allows us to understand how each l10n team is performing their localization work. allows us to discover potential bugs within l10n tools. overview you've completed most, if not all, of your localization work. the merge date for migrating from one product
release channel to the next (e.g., aurora to beta, or beta to
release) is rapidly approaching. you need to make sure that your work can effectively be compiled into a build for the next
release channel. here is a detailed overview of what a technical review is and who it's meant for: a technical review: is performed as a qa measure on a revision pushed to a new locale's l10n aurora repo in mercur...
...ailed overview of what a technical review is and who it's meant for: a technical review: is performed as a qa measure on a revision pushed to a new locale's l10n aurora repo in mercurial. is very comprehensive and covers the entire product. focusses on technical accuracy and completion of l10n work, not translation quality. ...
...performed on the first revision a new locale wants to have
released to the public. must be approved prior to migrating your revision from aurora to beta. technical review evaluation criteria in principal, a technical review's criteria looks for localization issues common to localizing software but within the mozilla context. since it is performed on the first revision a l10n team proposes for
release, this first revision requires a very detailed and comprehensive form of review. that being the case, there are some criteria in a technical review that will only ever be considered once, as all reviews after this only evaluate the changes you're adding on top of this revision from
release to
release. here is some of the criteria we use to perform technical reviews: revision attachment c...
...And 4 more matches
Using JSS
gather components setup your runtime environment initialize jss in your application gather components you need the jss classes and the nspr, nss, and jss shared libraries. nspr and nss shared libraries jss uses the nspr and nss libraries for i/o and crypto. jss version 3.0 linked statically with nss, so it only required nspr. jss versions 3.1 and later link dynamically with nss, so they also require the nss shared libraries. ...
...raries. the exact library names vary according to the convention for each platform. for example, the nspr library is called nspr4.dll or libnspr4.dll on windows and libnspr4.so on solaris. the following table gives the core names of the libraries, omitting the platform-specific prefix and suffix. ...
...s called nspr4.dll or libnspr4.dll on windows and libnspr4.so on solaris. the following table gives the core names of the libraries, omitting the platform-specific prefix and suffix. ...
...And 4 more matches
JSS
the jss project has been
relocated! as of april 6, 2018, jss has been migrated from mercurial on mozilla to git on github. jss source should now be checked out from the github: git clone git@github.com:dogtagpki/jss.git -- or -- git clone https://github.com/dogtagpki/jss.git all future upstream enquiries to jss should now use the pagure issue tracker system: https://pagure.io/jss/issues documentation regarding the jss project should now be viewed at: http://www.dogtagpki.org/wiki/jss note: as much of the jss documentation is so
rely out-of-date, updated information will be a work in progress, and many portions of any legacy documentation will be re-written over the course of time. stay tuned! legacy jss information can still be found at: source: https://hg.m...
...gies it uses. you might want to read these documents: introduction to public-key cryptography. explains the basic concepts of public-key cryptography that underlie nss and jss. introduction to ssl. introduces the ssl protocol, including information about cryptographic ciphers supported by ssl and the steps involved in the ssl handshake. ...
...-key cryptography that underlie nss and jss. introduction to ssl. introduces the ssl protocol, including information about cryptographic ciphers supported by ssl and the steps involved in the ssl handshake. for information on downloading nss
releases, see nss sources building testing. read using jss to get you started with development after you've built and downloaded it. ...
...And 4 more matches
Hacking Tips
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. note that some functions have been moved under an 'os' object, and help(os) will give brief help on just the members of that "namespace". ...
... 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. note that some functions have been moved under an 'os' object, and help(os) will give brief help on just the members of that "namespace". ...
... 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. note that some functions have been moved under an 'os' object, and help(os) will give brief help on just the members of that "namespace". ...
...And 4 more matches
XPCOM array guide
he array. for most concrete c++ classes like nstarray<t> and nscomarray<t>, indexing should be faster than the callback-style enumeration, because accessing an indexed member of such an array is usually very fast, while enumeration has slight function call overhead. in the case of scriptable arrays like nsiarray however, the enumeration mechanism is often preferred because it avoids the addref /
release overhead that comes from accessing each object. the only functional drawback to in-place enumeration is that you cannot manipulate the array itself during the enumeration. for example, you should not delete elements of an array during the enumeration as this will often confuse the loop which is enumerating the array. enumerators most arrays provide access to an object which is used to enum...
...ion. for example, you should not delete elements of an array during the enumeration as this will often confuse the loop which is enumerating the array. enumerators most arrays provide access to an object which is used to enumerate members of the array. these enumerators maintain state about the current position in the array. enumerators are used to access the elements in an ordered way, without
relying on the underlying array type. these enumerators include: nsisimpleenumerator - an enumerator for com objects. nsistringenumerator / nsiutf8stringenumerator - enumerators for strings obsolete arrays / enumerators there are some deprecated classes which should not be used by new code. nsisupportsarray - obsoleted by nsiarray and nsimutablearray, use those instead. nsienumerator - obs...
...ontainer { public: void addnode(nsinode* node); private: nscomarray<nsinode> mnodes; }; // typesafety of mnodes ensures that we only append an nsinode* void nodecontainer::addnode(nsinode* node) { mnodes.appendobject(node); } nscomarray<t> can also be declared on the stack to collect a temporary list of objects and manipulate them. when the object goes out of scope, all its members are
released. void processvisibleitems() { // temporary stack-based nscomarray nscomarray<nsifoo> fooitems; getcompletelist(fooitems); // now filter out non visible objects // doing this backwards pruint32 i = fooitems.count(); while (i > 0) { --i; prbool isvisible; fooitems[i]->getisvisible(&isvisible); if (!isvisible) { fooitems.removeobjectat(i); } } // n...
...And 4 more matches
Starting WebLock
unregistering an nsiobserver object. these two methods are used to dynamically add or remove an observer to a notification topic. but weblock needs to be instantiated and added to the observer service automatically, which also implies some sort of persistent data (after all, we want to have the component start up every time the application does). this is where a new service that manages sets of
related data comes in handy. this service, the nsicategoryservice, is what xpcom and gecko embedding applications use to persist lists of nsiobserver components that want to have startup notification. the nsicategoryservice maintains sets of name-value pairs like the one below. the category manager every category is identified by a string that represents the name of the category. each category c...
...e name-value part is expected to be the contract id of the component. since every category can define the name-value pairs, the application "app-startup" category can support not only services but component instances as well. for the app-startup notification, you must explicitly pass the string "service," prior to the component's contract id. if you do not, the component will be created and then
released after the notification, which may cause the component to be deleted. in short, to register the weblock component as an xpcom-startup observer, do the following: char* previous = nsnull; rv = catman->addcategoryentry("xpcom-startup", "weblock", weblock_contractid, pr_true, // persist category ...
...atform, for example, files are represented as a triplet - two numbers and one string - so using a string on the macintosh does not adequately identify files on that operating system. nsifile, the file interface in xpcom, provides most of the functionally that file handling requires. that interface includes members representing the file name, file attributes, permissions, existence, and others. a
related interface called nsilocalfile provides access to operations specific to local files, but the nsifile functionality is adequate for the weblock component. file interface hierarchy remote files and nsifile it is not inconceivable for remote files to be represented by the nsifile interface. someone could write an nsifile implementation that represented ftp files on some server. the existin...
...And 4 more matches
Using XPCOM Utilities to Make Things Easier
plementation macros every xpcom object implements nsisupports, but writing this implementation over and over is tedious. unless you have very special requirements for managing reference counting or handling interface discovery, theimplementation macros that xpcom provides can be used. instead of implementing the nsisupports yourself, ns_impl_isupports1 can expand to the implementation of addref,
release, and queryinterface for any object. ns_impl_isupports1(classname, interface1) also, if you implement more than one interface, you can simply change the 1 in the macro to the number of interfaces you support and list the interfaces, separated by commas. for example: ns_impl_isupports2(classname, interface1, interface2) ns_impl_isupportsn(classname, interface1, ..., interfacen) these macr...
... shared nsiid object\ static const nsiid iid1 = ns_get_iid(nsisupports); // constructs a new nsiid object static const nsiid iid2 = ns_isupports_iid; in order to use ns_impl_isupportsn, you must be sure that a member variable of type nsrefcnt is defined and named mrefcnt in your class. but why even bother when you can use another macro? declaration macros ns_decl_nsisupports declares addref,
release, and queryinterface for you, and it also defines the mrefcnt required by ns_impl_isupports. furthermore, ns_decl_ appended with any interface name in all caps will declare all of the methods of that interface for you. for example, ns_decl_nsifoo will declare all of the methods of nsifoo provided that it exists and that nsifoo.h was generated by the xpidl compiler. consider the following real ...
...he double byte version, nsembedstring, has the same functionality but the constructor takes nsastring and the .get() method returns the type prunichar*. note that prunichar is a two byte value. in the coming chapters, you'll see examples that use this version in the weblock component. smart pointers all of the interfaces that you've seen so far are reference counted. ...
...And 4 more matches
nsIAccessibleRetrieval
e since gecko 2.0 nsiaccessible getapplicationaccessible(); nsiaccessible getattachedaccessiblefor(in nsidomnode anode); nsiaccessible getcachedaccessible(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsiaccessnode getcachedaccessnode(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsidomnode get
relevantcontentnodefor(in nsidomnode anode); astring getstringeventtype(in unsigned long aeventtype); astring getstring
relationtype(in unsigned long a
relationtype); astring getstringrole(in unsigned long arole); nsidomdomstringlist getstringstates(in unsigned long astates, in unsigned long aextrastates); methods getaccessiblefor() return an nsiaccessible...
...only returns cached access nodes. nsiaccessnode getcachedaccessnode( in nsidomnode anode, in nsiweakreference ashell ); parameters anode the dom node to get an access node for. ashell the presentation shell which contains layout info for the dom node. return value the nsiaccessnode for the given dom node or null if an access node does not already exist for this dom node. ...
...achedaccessnode( in nsidomnode anode, in nsiweakreference ashell ); parameters anode the dom node to get an access node for. ashell the presentation shell which contains layout info for the dom node. return value the nsiaccessnode for the given dom node or null if an access node does not already exist for this dom node. get
relevantcontentnodefor() return an dom node that is
relevant to attached accesible check. ...
...And 4 more matches
nsIFaviconService
apageuri); obsolete since gecko 22.0 nsiuri getfaviconimageforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconlinkforicon(in nsiuri afaviconuri); boolean isfailedfavicon(in nsiuri afaviconuri); void removefailedfavicon(in nsiuri afaviconuri); void setandloadfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforce
reload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacallback acallback); obsolete since gecko 22.0 void setfavicondata(in nsiuri afaviconuri, [const,array,size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, in prtime aexpiration); obsolete since gecko 22.0 void setfavicondatafromdataurl(in nsiuri afaviconuri, in astring adataurl...
... set the data by loading the favicon uri. an async request will be created for this uri and if the data is available, it will asynchronously get saved in the database without any further work from the caller. if the icon data already exists, we won't normally try to re-load the icon from the net (or more likely the cache). if the icon is in the failed favicon cache we won't do anything. use aforce
reload to force a
reload of the data. this will remove the favicon from the failed cache. if it then fails again, it will be re-added to the failed cache. setfaviconurlforpage() and setfavicondata() will take any url you provide and save it. this function is intended for automatic usage, and will only save favicons for "good" urls, as defined by what gets added to history. for "bad" urls, this functi...
.../warning-16.png). icons that fail to load will automatically be added to the failed favicon cache. this function will not save favicons for non-bookmarked urls when history is disabled (expiration time is 0 days). the rest of the functions here will always store favicons even when history is disabled. void setandloadfaviconforpage( in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforce
reload, in unsigned long afaviconloadtype, in nsifavicondatacallback acallback optional from gecko 2.0 ); parameters apageuri uri of the page whose favicon is being set. afaviconuri uri of the favicon to associate with the page. aforce
reload unset is normal behavior, we will only try to
reload the favicon if we don't have it or if it has expired from the cache. if set, ...
...And 4 more matches
Using COM from js-ctypes
(ole) and later by the component object model (com), automation objects, activex controls, and the .net framework. com is c++ and it cannot be written directly with js-ctypes. this documentaion explains how to convert the com c++ code into js-ctypes code. basis and reference for this article bugzilla :: bug 738501 - implement ability to create windows shortcuts from javascript - comment 4
relavent topic bugzilla :: bug 505907 - support c++ calling from jsctypes converting com code to c code to convert com code to js-ctypes, we need to write c++ vtable pointers in c. after that, we can pass a pointer . speech synthesis example let's start with following c++ code, which invokes microsoft speech api and says "hello, firefox!" with system default voice, then wait until the speaking d...
...the speaking done. #include <sapi.h> int main(void) { if (succeeded(coinitialize(null))) { ispvoice* pvoice = null; hresult hr = cocreateinstance(clsid_spvoice, null, clsctx_all, iid_ispvoice, (void**)&pvoice); if (succeeded(hr)) { pvoice->speak(l"hello, firefox!", spf_default, null); pvoice->
release(); } } // msdn documentation says that even if coinitalize fails, counitialize // must be called couninitialize(); return 0; } to run the code, save it as test.cpp, and run following command in the directory (needs visual studio). $ cl ole32.lib test.cpp vtable needs vtable description here. the order of the vtable is very critical. when used from c or js...
... $ cl ole32.lib test.c c code with pseudo struct needs pseudo struct description here. #include <sapi.h> struct myispvoicevtbl; struct myispvoi...
...And 4 more matches
Accessibility Inspector - Firefox Developer Tools
as of firefox 62 (bug 1467381). childcount — the number of child items the current item has in the accessibility tree hierarchy. indexinparent — an index value indicating what number child the item is, inside its parent. if the item is the first item inside its parent, it has a value of 0. if it is the second, it has a value of 1. and so on. ...
...he item is the first item inside its parent, it has a value of 0. if it is the second, it has a value of 1. and so on. states — a list of the different accessibility-
relevant states that can apply to the current item. for example, one of the links in one demo has states of focusable, linked, selectable text, opaque, enabled, and sensitive. for a full list of internal states, see gecko states.
relations — a list of the accessiblity-
relevant
relationships between this item and other items. ...
...lity-
relevant states that can apply to the current item. for example, one of the links in one demo has states of focusable, linked, selectable text, opaque, enabled, and sensitive. for a full list of internal states, see gecko states.
relations — a list of the accessiblity-
relevant
relationships between this item and other items. for example, in a form, an entry item could have a "labelled by"
relation with a label item, which in turn has a "label for"
relation to the entry item. attributes — a list of all the accessibility-
relevant attributes that are applied to the item. ...
...And 4 more matches
Element - Web APIs
or example, the htmlelement interface is the base interface for html elements, while the svgelement interface is the basis for all svg elements. most functionality is specified further down the class hierarchy. languages outside the realm of the web platform, like xul through the xulelement interface, also implement element. ...
... the named attribute from the current node and returns it as an object. element.getattributenames() returns an array of attribute names from the current element. element.getattributens() retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an object. element.getboundingclientrect() returns the size of an element and its position
relative to the viewport. element.getclientrects() returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client. element.getelementsbyclassname() returns a live htmlcollection that contains all descendants of the current element that possess the list of classes given in the parameter. element.getelementsbytagname() returns a live htmlcollection cont...
...ied attribute, in the specified namespace, or not. element.hasattributes() returns a boolean indicating if the element has one or more html attributes present. element.haspointercapture() indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer id. element.insertadjacentelement() inserts a given element node at a given position
relative to the element it is invoked upon. element.insertadjacenthtml() parses the text as html or xml and inserts the resulting nodes into the tree in the position given. element.insertadjacenttext() inserts a given text node at a given position
relative to the element it is invoked upon. element.matches() returns a boolean indicating whether or not the element would be selected by the spec...
...And 4 more matches
Comparison of Event Targets - Web APIs
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. as the event capturing and bubbling occurs, this value changes. event.
relatedtarget dom mouseevent interface identifies a secondary target for the event. event.explicitoriginaltarget event.webidl if the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. for example, mouse events are retargeted to their parent node when they happen over text nodes (bug 18588...
... } </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 targets)</td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.originaltarget</small> contains the target before...
...s the target before retargetting (never contains anonymous targets)</td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.originaltarget</small> contains the target before retargetting (may contain anonymous targets)</td> </tr> </thead> <tr> <td id="target"></td> <td id="currenttarget"></td> <td id="
relatedtarget"></td> <td id="explicitoriginaltarget"></td> <td id="originaltarget"></td> </tr> </table> <p>clicking on the text will show the difference between explicitoriginaltarget, originaltarget, and target</p> <script> function handleclicks(e) { document.getelementbyid('target').innerhtml = e.target; document.getelementbyid('currenttarget').innerhtml = e.
...And 4 more matches
The HTML DOM API - Web APIs
the functional areas included in the html dom api include: access to and control of html elements via the dom. access to and manipulation of form data. interacting with the contents of 2d images and the context of an html <canvas>, for example to draw on top of them. management of media connected to the html media elements (<audio> and <video>). dragging and dropping of content on webpages. ...
...tmlcanvaselement augments the htmlelement type by adding properties such as height and methods like getcontext() to provide canvas-specific features. the overall inheritance for html element classes looks like this: as such, an element inherits the properties and methods of all of its ancestors. for example, consider a <a> element, which is represented in the dom by an object of type htmlancho
relement. the element, then, includes the anchor-specific properties and methods described in that class's documentation, but also those defined by htmlelement and element, as well as from node and, finally, eventtarget. each level defines a key aspect of the utility of the element. from node, the element inherits concepts surrounding the ability for the element to be contained by another element, a...
...l dom. html dom api interfaces the majority of the interfaces that comprise the html dom api map almost one-to-one to individual html elements, or to a small group of elements with similar functionality. in addition, the html dom api includes a few interfaces and types to support the html element interfaces. ...
...And 4 more matches
RTCStatsReport - Web APIs
ion lets you specify whether you wish to obtain statistics for outbound, inbound, or all streams on the connection. the rtcrtpreceiver and rtcrtpsender versions of getstats() specifically only return statistics available to the incoming or outgoing stream on which you call them. the statistics objects for each category of statistic information, there is a dictionary whose properties provide the
relevant information. properties common to all statistic categories all webrtc statistics objects are fundamentally based on the rtcstats dictionary, which provides the most fundamental information: the timestamp, the statistic type string, and an id uniquely identifying the source of the data: id a domstring which uniquely identifies the object which was inspected to produce this object based ...
... statistics the object contains, taken from the enum type rtcstatstype. the statistic categories the type gives the name of the statistic category represented by the object, and is how you locate the specific type of data you need. the statistic category names are members of the enumerated type rtcstatstype, as follows: candidate-pair an rtcicecandidatepairstats object providing statistics
related to an rtcicetransport. candidate pairs other than the currently active pair for the transport are deleted when the rtcpeerconnection changes its rtcpeerconnection.icegatheringstate to new during an ice restart. the active candidate pair is deleted after the transport switches to another candidate pair; this change cannot be detected otherwise. certificate an rtccertificatestats object provi...
...etransport. candidate pairs other than the currently active pair for the transport are deleted when the rtcpeerconnection changes its rtcpeerconnection.icegatheringstate to new during an ice restart. the active candidate pair is deleted after the transport switches to another candidate pair; this change cannot be detected otherwise. certificate an rtccertificatestats object providing statistics
related to a certificate being used by an rtcicetransport. codec an rtccodecstats object containing statistics about a codec currently being used by rtp streams to send or receive data for the rtcpeerconnection. csrc an rtccontributingsourcestats object which contains statistics
related to a contributing source (csrc) that contributed to an inbound rtp stream. data-channel an rtcdatachannelstat...
...And 4 more matches
SVGPathElement - Web APIs
the svgpathelement interface corresponds to the <path> element. ...
...tlength() returns an unsigned long representing the index within the pathseglist utilizing the user agent's distance-along-a-path algorithm. svgpathelement.createsvgpathsegclosepath() returns a stand-alone, parentless svgpathsegclosepath object. svgpathelement.createsvgpathsegmovetoabs() returns a stand-alone, parentless svgpathsegmovetoabs object. svgpathelement.createsvgpathsegmoveto
rel() returns a stand-alone, parentless svgpathsegmoveto
rel object. svgpathelement.createsvgpathseglinetoabs() returns a stand-alone, parentless svgpathseglinetoabs object. svgpathelement.createsvgpathseglineto
rel() returns a stand-alone, parentless svgpathseglineto
rel object. svgpathelement.createsvgpathsegcurvetocubicabs() returns a stand-alone, parentless svgpathsegcurvetocubicabs o...
...oveto
rel object. svgpathelement.createsvgpathseglinetoabs() returns a stand-alone, parentless svgpathseglinetoabs object. svgpathelement.createsvgpathseglineto
rel() returns a stand-alone, parentless svgpathseglineto
rel object. svgpathelement.createsvgpathsegcurvetocubicabs() returns a stand-alone, parentless svgpathsegcurvetocubicabs object. svgpathelement.createsvgpathsegcurvetocubic
rel() returns a stand-alone, parentless svgpathsegcurvetocubic
rel object. svgpathelement.createsvgpathsegcurvetoquadraticabs() returns a stand-alone, parentless svgpathsegcurvetoquadraticabs object. svgpathelement.createsvgpathsegcurvetoquadratic
rel() returns a stand-alone, parentless svgpathsegcurvetoquadratic
rel object. svgpathelement.createsvgpathsegarcabs() returns a stand-alone, p...
...And 4 more matches
Screen Wake Lock API - Web APIs
creen awake). you acquire a wakelocksentinel object by calling the navigator.wakelock.request() promise based method that resolves if the platform allows it. a request may be rejected for a number of reasons, including system settings (such as power save mode or low battery level) or if the document is not active or visible. the sentinel is attached to the underlying system wake lock. it can be
released by the system, again if the battery power is too low or the document is not active or visible. it can also be
released manually via the wakelocksentinel.
release() method. it is good practice to store a reference to the sentinel object to control
release later and also to reacquire the lock if need be. the screen wake lock api should be used to keep the screen on to benefit usability. it's a...
... good idea to show some feedback on the interface to show if wake lock is active and a way for the user to disable it if they wish. screen wake lock api interfaces wakelock the wakelock interface prevents device screens from dimming or locking when an application needs to keep running. wakelocksentinel provides a handle to the underlying platform wake lock and if referenced can be manually
released and reacquired. get an instance of the object by calling wakelock.request. navigator.wakelock returns a wakelock object instance, from which all other functionality can be accessed. examples feature detection this code checks for wake lock support and updates the ui accordingly. if ('wakelock' in navigator) { issupported = true; statuselem.textcontent = 'screen wake lock api suppo...
... 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'); // change up our interface to reflect wake lock active statuselem.textcontent = 'wake lock is active!'; } catch (err) { // if wake lock request fails - usually system
related, such as battery statuselem.textcontent = `${err.name}, ${err.message}`; } }
releasing wake lock the following example shows how to
release the previously acquired wake lock. 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 ac...
...And 4 more matches
Using Touch Events - Web APIs
the touch interface represents a single contact point on a touch-sensitive device. the contact point is typically referred to as a touch point or just a touch. a touch is usually generated by a finger or stylus on a touchscreen, pen or trackpad. a touch point's properties include a unique identifier, the touch point's target element as well as the x and y coordinates of the touch point's position
relative to the viewport, page, and screen. 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. the touchevent interface represents an event sent when the sta...
...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. the touchevent interface represents an event sent when the state of contacts with a touch-sensitive surface changes. the state changes are starting contact with a touch surface, moving a touch point while maintaining contact with the surface,
releasing a touch point and canceling a touch event. this interface's attributes include the state of several modifier keys (for example the shift key) and the following touch lists: touches - a list of all of the touch points currently on the screen. targettouches - a list of the touch points on the target dom element. changedtouches - a list of the touch points whose items depends on the assoc...
... 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). together, these interfaces define a
relatively low-level set of features, yet they support many kinds of touch-based interaction, including the familiar multi-touch gestures such as multi-finger swipe, rotation, pinch and zoom. from interfaces to gestures an application may consider different factors when defining the semantics of a gesture. for instance, the distance a touch point traveled from its starting location to its location ...
...And 4 more matches
WakeLockSentinel - Web APIs
the wakelocksentinel interface of the screen wake lock api provides a handle to the underlying platform wake lock and can be manually
released and reacquired. an object representing the wake lock is returned via the navigator.wakelock.request() method. an acquired wakelocksentinel can be
released manually via the
release() method, or automatically via the platform wake lock. this can happen if the document becomes inactive or looses visibility, if the device is low on power or the user turns on a power save mode.
releasing all wakelocksentinel instances of a given wake lock type will cause the underlying platform wake lock to be
released. properties this interface provides the following properties. type read only returns a string representation of the currently acquired wa...
...tinel instances of a given wake lock type will cause the underlying platform wake lock to be
released. properties this interface provides the following properties. type read only returns a string representation of the currently acquired wakelocksentinel type. return values are: 'screen': a screen wake lock. prevents devices from dimming or locking the screen. event handlers on
release fired when the
release() method is called or the wake lock is
released by the user agent. methods
release()
releases the wakelocksentinel, returning a promise that is resolved once the sentinel has been successfully
released. ...
... event handlers on
release fired when the
release() method is called or the wake lock is
released by the user agent. methods
release()
releases the wakelocksentinel, returning a promise that is resolved once the sentinel has been successfully
released. examples in this example we create an asynchronous function which requests a wakelocksentinel. once acquired we listen for the on
release event which can be used to give appropriate ui feedback. the sentinel can be acquired or
released via appropriate interactions. ...
...And 4 more matches
Web Authentication API - Web APIs
, enabling passwordless authentication and/or secure second-factor authentication without sms texts. web authentication concepts and usage the web authentication api (also referred to as webauthn) uses asymmetric (public-key) cryptography instead of passwords or sms texts for registering, authenticating, and second-factor authentication with websites. this resolves significant security problems
related to phishing, data breaches, and attacks against sms texts or other second-factor authentication methods while at the same time significantly increasing ease of use (since users don't have to manage dozens of increasingly complicated passwords). many websites already have pages that allow users to register new accounts or sign in to an existing account, and the web authentication api acts as ...
...private key required for authentication without revealing any secrets over the network. in order to understand how the create() and get() methods fit into the bigger picture, it is important to understand that they sit between two components that are outside the browser: server - the web authentication api is intended to register new credentials on a server (also referred to as a service or a
relying party) and later use those same credentials on that same server to authenticate a user. authenticator - the credentials are created and stored in a device called an authenticator. this is a new concept in authentication: when authenticating using passwords, the password is stored in a user's brain and no other device is needed; when authenticating using web authentication, the password is re...
...gure 1 - a diagram showing the sequence of actions for a web authentication registration and the essential data associated with each action. the registration steps are: application requests registration - the application makes the initial registration request. the protocol and format of this request is outside of the scope of the web authentication api. server sends challenge, user info, and
relying party info - the server sends a challenge, user information, and
relying party information to the javascript program. the protocol for communicating with the server is not specified and is outside of the scope of the web authentication api. typically, server communications would be rest over https (probably using xmlhttprequest or fetch), but they could also be soap, rfc 2549 or nearly any ot...
...And 4 more matches
Window - Web APIs
ing within a given tab always represents the tab in which the code is running. that said, even in a tabbed browser, some properties and methods still apply to the overall window that contains the tab, such as resizeto() and innerheight. generally, anything that can't reasonably pertain to a tab pertains to the window instead. ...
...he browser window. window.pagexoffset read only an alias for window.scrollx. window.pageyoffset read only an alias for window.scrolly window.parent read only returns a reference to the parent of the current window or subframe. window.performance read only returns a performance object, which includes the timing and navigation attributes, each of which is an object providing performance-
related data. see also using navigation timing for additional information and examples. window.personalbar read only returns the personalbar object, whose visibility can be toggled in the window. window.screen read only returns a reference to the screen object associated with the window. window.screenx and window.screenleft read only both properties return the horizontal distance from the le...
...the time in milliseconds since epoch at which the current animation cycle began. use animation.starttime instead. window.mozpaintcount returns the number of times the current document has been rendered to the screen in this window. this can be used to compute rendering performance. window.orientation read only returns the orientation in degrees (in 90 degree increments) of the viewport
relative to the device's natural orientation. window.pkcs11 formerly provided access to install and remove pkcs11 modules. window.returnvalue the return value to be returned to the function that called window.showmodaldialog() to display the window as a modal dialog. methods this interface inherits methods from the eventtarget interface and implements methods from windoworworkerglobalscope...
...And 4 more matches
Web APIs
filesystemfileentry filesystemflags filesystemsync focusevent fontface fontfaceset fontfacesetloadevent formdata formdataentryvalue formdataevent fullscreenoptions g gainnode gamepad gamepadbutton gamepadevent gamepadhapticactuator geolocation geolocationcoordinates geolocationposition geolocationpositionerror geometryutils gestureevent globaleventhandlers gyroscope h htmlancho
relement htmlareaelement htmlaudioelement htmlb
relement htmlbaseelement htmlbasefontelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmlcollection htmlcontentelement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldivelement htmldocument htmlelement htmlembedelement htmlfieldsetelement htmlfontelement htmlformcontrolscollection htmlfor...
...nt htmlb
relement htmlbaseelement htmlbasefontelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmlcollection htmlcontentelement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldivelement htmldocument htmlelement htmlembedelement htmlfieldsetelement htmlfontelement htmlformcontrolscollection htmlformelement htmlframesetelement htmlh
relement htmlheadelement htmlheadingelement htmlhtmlelement htmlhyperlinkelementutils htmliframeelement htmlimageelement htmlinputelement htmlisindexelement htmlkeygenelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmarqueeelement htmlmediaelement htmlmenuelement htmlmenuitemelement htmlmetaelement htmlmete
relement htmlmodelement htmlolistelement h...
...trackevent mediatrackconstraints mediatracksettings mediatracksupportedconstraints merchantvalidationevent messagechannel messageevent messageport metadata mimetype mimetypearray mouseevent mousescrollevent mousewheelevent mutationevent mutationobserver mutationobserverinit mutationrecord n ndefmessage ndefreader ndefreadingevent ndefrecord ndefwriter namelist namednodemap navigationp
reloadmanager navigator navigatorconcurrenthardware navigatorid navigatorlanguage navigatoronline navigatorplugins navigatorstorage networkinformation node nodefilter nodeiterator nodelist nondocumenttypechildnode notation notification notificationaction notificationevent notifyaudioavailableevent o oes_element_index_uint oes_fbo_render_mipmap oes_standard_derivatives oes_texture_float o...
...And 4 more matches
Perceivable - Accessibility
escription for guideline 1.2: time-based media: provide alternatives for time-based media. guideline 1.3 — create content that can be presented in different ways this guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs. success criteria how to conform to the criteria practical resource 1.3.1 info and
relationships (a) any content structure—or visual
relationship made between content—can also be determined programmatically, or be inferred from text description. the main situations in which this is
relevant are: text labels and the form elements they describe. these are associated unambiguously using the <label> element, which can be picked up by screenreaders, etc. imag...
...s visually presented in an unusual way. the order should be made obvious by use of correct semantic elements (e.g., headings, paragraphs), with css being used to create any unusual layout styles, irrespective of the markup. again, refer to html: a good basis for accessibility. 1.3.3 sensory characteristics (a) instructions for operating controls or understanding content do not
rely on a single sense. this may prove inaccessible to people with a disability
related to that sense, or a device that does not support that sense. so, for example: "click the round button to continue" the button should be clearly labelled so that it is obvious that it is the button you need to press. if there are multiple buttons, make sure they are all clearly labelled to distingu...
... if required. "swipe from the right hand side of the screen to reveal the menu" some users might not be able to swipe the screen, either due to disability or because their device does not support touch. an alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means. note: conveying instructions solely by color is
related, but covered in a different guideline — 1.4.1. 1.3.4 orientation (aa) added in 2.1 content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. understanding orientation 1.3.5 identify input purpose (aa) added in 2.1 follow the list o...
...And 4 more matches
Stacking without the z-index property - CSS: Cascading Style Sheets
he html" within flex containers, it similarly affects the order for stacking context. in the example below, elements #1 through #4 are positioned elements. element #5 is static, and so is drawn below the other four elements, even though it comes later in the html markup. ...
...in flex containers, it similarly affects the order for stacking context. in the example below, elements #1 through #4 are positioned elements. element #5 is static, and so is drawn below the other four elements, even though it comes later in the html markup. ...
...he order for stacking context. in the example below, elements #1 through #4 are positioned elements. element #5 is static, and so is drawn below the other four elements, even though it comes later in the html markup. ...
...And 4 more matches
<length> - CSS: Cascading Style Sheets
pt <length> values, they are not themselves <length> values. see <length-percentage>. syntax the <length> data type consists of a <number> followed by one of the units listed below. as with all css dimensions, there is no space between the unit literal and the number. the length unit is optional after the number 0. note: some properties allow negative <length>s, while others do not. ...
...y are not themselves <length> values. see <length-percentage>. syntax the <length> data type consists of a <number> followed by one of the units listed below. as with all css dimensions, there is no space between the unit literal and the number. the length unit is optional after the number 0. note: some properties allow negative <length>s, while others do not. units
relative length units
relative lengths represent a measurement in terms of some other distance. depending on the unit, this can be the size of a specific character, the line height, or the size of the viewport. font-
relative lengths font-
relative lengths define the <length> value in terms of the size of a particular character or font attribute in the font currently in effect in an element or its parent. note: these un...
...ult is 16px, but user-defined preferences may modify this). rlh equal to the computed value of the line-height property on the root element (typically <html>), converted to an absolute length. when used on the font-size or line-height properties of the root element, it refers to the properties' initial value. viewport-percentage lengths viewport-percentage lengths define the <length> value
relative to the size of the viewport, i.e., the visible portion of the document. viewport lengths are invalid in @page declaration blocks. vh equal to 1% of the height of the viewport's initial containing block. vw equal to 1% of the width of the viewport's initial containing block. vi equal to 1% of the size of the initial containing block, in the direction of the root element’s inline a...
...And 4 more matches
Cross-browser audio basics - Developer guides
<audio> element with multiple sources — we do this as not all browsers support the same audio formats. to ensure reasonable coverage, we should specify at least two different formats. the two formats that will give maximum coverage are mp3 and ogg vorbis. we do this using the <source> element, which takes the attributes src and type. src contains the path to the audio file to be loaded (
relative or absolute). type is used to inform the browser of the file type. if omitted, most browsers will attempt to guess this from the file extension. if the <audio> element is not supported then <audio> and <source> will be ignored. however any supported text or elements that you define within <audio> will be displayed or acted upon. so the ideal place to create a fallback or inform of ...
...utoplay will cause the audio to start playing as soon as possible and without any user interaction — in short, the audio will autoplay. <audio autoplay> ... </audio> note: this value is often ignored on mobile platforms, and its use is not recommended unless really necessary. auto-playing audio (and video) is usually really annoying. plus browsers have policies that will block autoplay enti
rely in many situations. see the autoplay guide for media and web audio apis for details. loop the loop attribute will ensure that upon getting to the end of the audio clip, the audio clip will loop back to the beginning and start playing again. <audio loop> ... </audio> muted if you want the audio to start muted (no volume), add the muted attribute. <audio muted> ... </audio> note: this...
... media and web audio apis for details. loop the loop attribute will ensure that upon getting to the end of the audio clip, the audio clip will loop back to the beginning and start playing again. <audio loop> ... </audio> muted if you want the audio to start muted (no volume), add the muted attribute. <audio muted> ... </audio> note: this value is often ignored on mobile platforms. p
reload the p
reload attribute allows you to specify a preference for how the browser p
reloads the audio, in other words, which part of the file it downloads when the <audio> element is initialized, and before the play button is pressed. p
reload can take 3 different values: none: don't download anything before the play button is pressed. metadata: download the audio metadata; this is usually the ...
...And 4 more matches
Video player styling basics - Developer guides
in the previous cross browser video player article we described how to build a cross-browser html5 video player using the media and fullscreen apis. this follow-up article looks at how to style this custom player, including making it responsive. the example in action you can find the code for the updated, styled example on github, and view it live. p
reliminary modifications from the original example this section summarises the modifications that were made to the original video player example to make the styling task easier, before the bulk of the work was started. html markup there are a few changes that were made to the html markup shown in the previous article. the custom video controls and <progress> element are now contained within <div> elements, rather than residing in...
...this has now been changed to use a data-state attribute, which this code already uses to handle its fullscreen implementation. this "data-state" idea is also used for setting the current state of buttons within the video control set, which allows specific state stylin...
... using javascript. specific implementations will be mentioned at appropriate places below. styling the resultant video player style used here is rather basic — this is intentional, as the purpose is to show how such a video player could be styled and be made responsive. note: in some cases some basic css is omitted from the code examples here as its use is either obvious or not specifically
relevant to styling the video player. basic styling the html video and its controls are all contained within a <figure> element, which is given a maximum width and height (based on the dimensions of the video used) and centered within the page: figure { max-width:64rem; width:100%; max-height:30.875rem; height:100%; margin:1.25rem auto; padding:1.051%; background-color:#666; ...
...And 4 more matches
Audio and Video Delivery - Developer guides
(usually a choice of two, as stated above). if the browser doesn't support playback of any of the provided formats natively, either present a still image or use a fallback technology to present the video. identify how you want to play/instantiate the media (e.g. a <video> element, or document.createelement('video') perhaps?) deliver the media file to the player. html audio <audio controls p
reload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> <!-- fallback for browsers that don't support mp3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to p
reload as much audio as possible for smooth playback. ...
... <source src="audiofile.mp3" type="audio/mpeg"> <!-- fallback for browsers that don't support mp3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to p
reload as much audio as possible for smooth playback. note: the p
reload attribute may be ignored by some mobile browsers. for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fallback for browsers that don't support mp4 --> <source src="videofile.webm" type="video/webm"> <!-- specifying su...
...in mind. mse defines byte streams according to isobmff and m2ts (both supported in dash, the latter supported in hls). generally speaking, if you are interested in standards, are looking for flexibility, or wish to support most modern browsers, you are probably better off with dash. note: currently safari does not support dash although dash.js will work on newer versions of safari scheduled for
release with osx yosemite. dash also provides a number of profiles including simple ondemand profiles that no preprocessing and splitting up of media files. there are also a number of cloud based services that will convert your media to both hls and dash. for further information see live streaming web audio and video. customising your media player you may decide that you want your audio or ...
...And 4 more matches
<input type="text"> - HTML: Hypertext Markup Language
ote: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. size the size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be
relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use). this does not set a limit on how many characters the user can enter into the field. it only specifies approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribut...
...w many characters the user can enter into the field. it only specifies approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribute. spellcheck spellcheck is a global attribute which is used to indicate whether or not to enable spell checking for an element. it can be used on any editable content, but here we consider specifics
related to the use of spellcheck on <input> elements. the permitted values for spellcheck are: false disable spell checking for this element. true enable spell checking for this element. "" (empty string) or no value follow the element's default behavior for spell checking. this may be based upon a parent's spellcheck setting or other factors. an input field can have spell checking enabled ...
...ext input needs to be capable of accepting any arbitrary string), but there are some client-side validation options available, which we'll discuss below. note: html form validation is not a substitute for server-scripts that ensure the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely. it's also possible for someone to simply bypass your html enti
rely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database. a note on styling there are useful pseudo-classes available for styl...
...And 4 more matches
itemprop - HTML: Hypertext Markup Language
an item with one property, "birthday", whose value is a date <div itemscope> i was born on <time itemprop="birthday" datetime="2009-05-10">may 10th 2009</time>. </div> properties can also be groups of name-value pairs, by putting the itemscope attribute on the element that declares the property. each value is either a st...
...emon sorbet" and "apricot sorbet". an element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value. an item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange" <div itemscope> <span itemprop="favorite-color favorite-fruit">orange</span> </div> note: there is no
relationship between the microdata and the content of the document where the microdata is marked up. same structured data marked up in two different ways there is no semantic difference between the following two examples <figure> <img src="castle.jpeg"> <figcaption><span itemscope><span itemprop="name">the castle</span></span> (1986)</figcaption> </figure> <span itemscope><meta it...
...the only difference is that if the user drags the figcaption out of the document, the item will be included in the drag-and-drop data. the image associated with the item won't be included. names and values a property is an unordered set of unique tokens that are case-sensitive and represent t...
...And 4 more matches
Strict-Transport-Security - HTTP
ponse header (often abbreviated as hsts) lets a web site tell browsers that it should only be accessed using https, instead of using http. header type response header forbidden header name no syntax strict-transport-security: max-age=<expire-time> strict-transport-security: max-age=<expire-time>; includesubdomains strict-transport-security: max-age=<expire-time>; p
reload directives max-age=<expire-time> the time, in seconds, that the browser should remember that a site is only to be accessed using https. includesubdomains optional if this optional parameter is specified, this rule applies to all of the site's subdomains as well. p
reload optional see p
reloading strict transport security for details. not part of the specification. description if a w...
...ever the strict-transport-security header is delivered to the browser, it will update the expiration time for that site, so sites can refresh this information and prevent the timeout from expiring. should it be necessary to disable strict transport security, setting the max-age to 0 (over a https connection) will immediately expire the strict-transport-security header, allowing access via http. p
reloading strict transport security google maintains an hsts p
reload service. by following the guidelines and successfully submitting your domain, browsers will never connect to your domain using an insecure connection. while the service is hosted by google, all browsers have stated an intent to use (or actually started using) the p
reload list. however, it is not part of the hsts specification and s...
...rvice. by following the guidelines and successfully submitting your domain, browsers will never connect to your domain using an insecure connection. while the service is hosted by google, all browsers have stated an intent to use (or actually started using) the p
reload list. however, it is not part of the hsts specification and should not be treated as official. information regarding the hsts p
reload list in chrome : https://www.chromium.org/hsts consultation of the firefox hsts p
reload list : nsstsp
reloadlist.inc examples all present and future subdomains will be https for a max-age of 1 year. this blocks access to pages or sub domains that can only be served over http. strict-transport-security: max-age=31536000; includesubdomains in the following example, max-age is set to 2 years...
...And 4 more matches
FinalizationRegistry.prototype.unregister() - JavaScript
. only call unregister if you haven't received a cleanup callback and no longer need to receive one. examples using unregister this example shows registering a target object using that same object as the unregister token, then later unregistering it via unregister: class thingy { #cleanup = label => { // ^^^^^−−−−− held value console.error( `the \`
release\` method was never called for the object with the label "${label}"` ); }; #registry = new finalizationregistry(this.#cleanup); /** * constructs a `thingy` instance. be sure to call `
release` when you're done with it. * * @param label a label for the `thingy`. */ constructor(label) { // vvvvv−−−−−...
...thingy` instance. be sure to call `
release` when you're done with it. * * @param label a label for the `thingy`. */ constructor(label) { // vvvvv−−−−− held value this.#registry.register(this, label, this); // target −−−−−^^^^ ^^^^−−−−− unregister token } /** *
releases resources held by this `thingy` instance. ...
...th it. * * @param label a label for the `thingy`. */ constructor(label) { // vvvvv−−−−− held value this.#registry.register(this, label, this); // target −−−−−^^^^ ^^^^−−−−− unregister token } /** *
releases resources held by this `thingy` instance. ...
...And 4 more matches
Web Components
guide that looks at shadow dom fundamentals, showing how to attach a shadow dom to an element, add to the shadow dom tree, style it, and more. using templates and slots a guide showing how to define a reusable html structure using <template> and <slot> elements, and then use that structure inside your web components. reference custom elements customelementregistry contains functionality
related to custom elements, most notably the customelementregistry.define() method used to register new custom elements so they can then be used in your document. window.customelements returns a reference to the customelementregistry object. life cycle callbacks special callback functions defined inside the custom element's class definition, which affect its behavior: connectedcallback: invok...
...r creating custom built-in elements the is global html attribute: allows you to specify that a standard html element should behave like a registered custom built-in element. the "is" option of the document.createelement() method: allows you to create an instance of a standard html element that behaves like a given registered custom built-in element. css pseudo-classes pseudo-classes
relating specifically to custom elements: :defined: matches any element that is defined, including built in elements and custom elements defined with customelementregistry.define()). :host: selects the shadow host of the shadow dom containing the css it is used inside. :host(): selects the shadow host of the shadow dom containing the css it is used inside (so you can select a custom element f...
...on's parameter matches the shadow host. :host-context(): selects the shadow host of the shadow dom containing the css it is used inside (so you can select a custom element from inside its shadow dom) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the dom hierarchy. ...
...And 4 more matches
Modules - Archive of obsolete content
a module is a self-contained unit of code, which is usually stored in a file, and has a well defined interface. the use of modules greatly improves the maintainability of code, by splitting it up into independent components, and enforcing logical boundaries between them. unfortunately, javascript does not yet have native support for modules: it has to
rely on the host application to provide it with functionality such as loading subscripts, and exporting/ importing names. we will show how to do each of these things using the built-in components object provided by xulrunner application such as firefox and thunderbird. to improve encapsulation, each module should be defined in the scope of its own global object. this is made possible by the use of sandboxes. each sandbox lives in its own compa...
...rtment is a separate memory space. each compartment has a set of privileges that determines what scripts running in that compartment can and cannot do. we will show how sandboxes and compartments can be used to improve security in our module system. the module system used by the sdk is based on the commonjs specification: it is implemented using a loader object, which handles all the bookkeeping
related to module loading, such as resolving and caching urls. we show how to create your own custom loaders, using the loader constructor provided by the sdk. the sdk uses its own internal loader, known as cuddlefish. all modules within the sdk are loaded using cuddlefish by default. like any other custom loader, cuddlefish is created using the loader constructor. in the final section, we will take ...
...ing the loader constructor. in the final section, we will take a look at some of the options passed by the sdk to the loader constructor to create the cuddlefish loader. loading subscripts when a javascript project reaches a certain size, it becomes necessary to split it up into multiple files. unfortunately, javascript does not provide any means to load scripts from other locations: we have to
rely on the host application to provide us with this functionality. applications such as firefox and thunderbird are based on xulrunner. xulrunner adds a built-in object, known as components, to the global scope. this object forms the central access point for all functionality provided by the host application. a complete explanation of how to use components is out of scope for this document. however,...
...And 3 more matches
XUL Migration Guide - Archive of obsolete content
for migration. if your add-on needs a lot of help from third party packages, low-level apis, or xpcom, then the cost of migrating is high, and may not be worth it at this point. if your add-on only needs a little help from those techniques, and can accomplish most of what it needs using the supported apis, then it might still be worth migrating: we'll add more supported apis in future
releases to meet important use cases. user interface components xul-based add-ons typically implement a user interface using a combination of two techniques: xul overlays and xul windows. xul overlays xul overlays are used to modify existing windows such as the main browser window. in this way an extension can integrate its user interface into the browser: for example, adding menu items, butto...
...r a chrome: uri, with a skin and locale, and this means you can include xul windows in an sdk-based add-on. you can keep the "chrome.manifest" file in your add-on's root directory and create a directory there called "chrome". in that directory you can keep your "content", "locale", and "skin" subdirectories: this allows you to refer to objects in these directories from "chrome.manifest" using a
relative path, like "chrome/content". this is provided only as a migration aid, and it's still a good idea to port xul windows to html. content scripts in a xul-based add-on, code that uses xpcom objects, code that manipulates the browser chrome, and code that interacts with web pages all runs in the same context. but the sdk makes a distinction between: add-on scripts, which can use the sdk...
...at a malicious web page will be able to access privileged apis. there's much more information on content scripts in the working with content scripts guide. using the supported apis the sdk provides a set of high level apis providing some basic user interface components and functionality commonly required by add-ons. because we expect to keep these apis compatible as new versions of firefox are
released, we call them the "supported" apis. see the tutorials and the high-level api reference. if the supported apis do what you need, they're the best option: you get the benefits of compatibility across firefox
releases and of the sdk's security model. apis like ui and panel are very generic and with the right content can be used to replace many specific xul elements. but there are some notable...
...And 3 more matches
/loader - Archive of obsolete content
you may still end ...
.../commonjs/toolkit/foo.js // toolkit/foo/bar -> resource://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolve all other non-
relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', } }) all
relative url require() statements (those that start with ".") are first resolved
relative to the requirer module id and the result of it is then resolved using the paths option. ...
...le requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', } }) all
relative url require() statements (those that start with ".") are first resolved
relative to the requirer module id and the result of it is then resolved using the paths option. you may still end up with a
relative module id if the entry point module id is itself
relative. ...
...And 3 more matches
ui/frame - Archive of obsolete content
ng frames the frame constructor takes one mandatory option, which is a url pointing to an html document supplied under your add-ons "data" directory. ...
...e width of the browser window and is 18 pixels high on a normal-resolution display or 36 pixels high on a high-resolution (hidpi) display. this toolbar might look something like: scripting frames to add scripts to frames, include them directly from the frame's html content, as with a normal web page: <script type="text/javascript" src="frame.js"></script> as usual, the path to the script is
relative to the html file's location. messages logged from a frame script using the console will not appear in the terminal when you run the add-on using jpm run. however, they will appear in the browser console. this issue is being tracked as bug 982385. communicating with frames you can exchange messages between the main add-on code and scripts loaded into the frame using an api modeled on win...
...ns: name type url url, string a url pointing to the html file specifying the frame's content. the file must be bundled with the add-on under its "data" directory. ...
...And 3 more matches
File I/O - Archive of obsolete content
lute path (nsifile) to store an arbitrary path in user preferences, use this code: // |file| is nsilocalfile. uses services.jsm. // 1. write path to prefs var prefs = services.prefs.getbranch("extensions.myext."); prefs.setcomplexvalue("filename", components.interfaces.nsifile, file); // 2. ...
...) to store an arbitrary path in user preferences, use this code: // |file| is nsilocalfile. uses services.jsm. // 1. write path to prefs var prefs = services.prefs.getbranch("extensions.myext."); prefs.setcomplexvalue("filename", components.interfaces.nsifile, file); // 2. ...
...ser preferences, use this code: // |file| is nsilocalfile. uses services.jsm. // 1. write path to prefs var prefs = services.prefs.getbranch("extensions.myext."); prefs.setcomplexvalue("filename", components.interfaces.nsifile, file); // 2. ...
...And 3 more matches
Preferences - Archive of obsolete content
reference pages listed in resources section for the complete list of methods. the interfaces dealing with preferences are fairly well documented, so using the methods not mentioned here should be straightforward. xpcom interfaces for preferences system mozilla exposes its preferences system through a few xpcom interfaces. look in the resources section below for the link to a list of preferences-
related interfaces. two used interfaces are nsiprefservice and nsiprefbranch. the preferences service is instantiated in the same way you instantiate any xpcom service. to get an nsiprefbranch, either queryinterface() the pref service (that will give you the root branch) or call nsiprefservice.getbranch() to get a sub-branch. here are two examples: // get the root branch var prefs = components.cl...
... which is undefined). nsisupportsstring used to handle unicode strings in preferences. use this when the preference value may contain non-ascii characters (for example, a user's name). nsipreflocalizedstring almost the same as nsisupportsstring, but it is handled differently in getcomplexvalue() when there's no user value for the given preference; see below for details. nsilocalfile and nsi
relativefilepref store paths in preferences. nsilocalfile is used to store absolute paths, while nsi
relativefilepref is used to store paths
relative to a "special" directory, such as the profile folder. nsisupportsstring as noted above, this is used to handle unicode strings in preferences. example: // prefs is an nsiprefbranch // example 1: getting unicode value var value = prefs.getcomplexval...
... default preferences fixme: someone should reword this section each preference may have up to two values — the current value and the default value. that means there are two "pref trees:" current and default, and each of them may or may not have a value for the preference in question. you can see ...
...And 3 more matches
addDirectory - Archive of obsolete content
adddirectory unpacks an entire directory into a temporary location. ...
...y unpacks an entire directory into a temporary location. ...
...int adddirectory ( string registryname, string xpisourcepath, object localdirspec, string
relativelocalpath); public int adddirectory ( string registryname, string version, string xpisourcepath, object localdirspec, string
relativelocalpath); public int adddirectory ( string registryname, string version, string xpisourcepath, object localdirspec, string
relativelocalpath, boolean forceupdate); public int adddirectory ( string registryname, installversion version, string xpisourcepath, object localdirspec, string
relativelocalpath, boolean forceupdate); parameters the adddirectory method has the following parameters: registryname the pathname in the client version registry for the root directory of the files that...
...And 3 more matches
addFile - Archive of obsolete content
addfile unpacks a single subcomponent into a temporary location. queues the subcomponent for addition to the client version registry and installation to its final destination. ...
...e client version registry and installation to its final destination. ...
... object localdirspec, string
relativelocalpath, boolean forceupdate); public int addfile ( string registryname, string version, string xpisourcepath, object localdirspec, string
relativelocalpath, boolean forceupdate); public int addfile ( string xpisourcepath); public int addfile ( string registryname, string xpisourcepath, object localdirspec, string
relativelocalpath); public int addfile ( string registryname, string version, string xpisourcepath, object localdirspec, string
relativelocalpath); parameters the addfile method has the following parameters: registryname the pathname in the client version registry about the file. this parameter can be an absolute pathname, such as /royalairways/royalsw/executable or a ...
...And 3 more matches
More Event Handlers - Archive of obsolete content
opagation or the default action has been prevented, neither may be re-enabled again for that event. the following sections list some of the events that may be used. a full list is provided in the xulplanet event reference. mouse events there are several events which can be used to handle mouse specific actions, which are described briefly below: click called when the mouse is pressed and
released on an element. dblclick called when the a mouse button is double clicked. mousedown called when a mouse button is pressed down on an element. the event handler will be called as soon as a mouse button is pressed, even if it hasn't been
released yet. mouseup called when a mouse button is
released on an element. mouseover called when the mouse pointer is moved o...
...elp text on a status bar. mousemove called when the mouse pointer is moved while over an element. the event may be called many times as the user moves the mouse so you should avoid performing lengthy tasks from this handler. mouseout called when the mouse pointer is moved off of an element. you might then unhighlight the element or remove status text. there are also a set of drag
related events, which occur when the user holds down a mouse button and drags the mouse around. those events are described in drag and drop. mouse button event properties when a mouse button event occurs, a number of additional properties are available to determine which mouse buttons were pressed and the location of the mouse pointer. the event's button property can be used to determine which button...
...ws you to check for single, double or triple clicks. of course, if you just want to check for double clicks, you can also use the dblclick event instead. the click event will be fired once for the first click, again for the second click, and again for the third click, but the dblclick event will only be fired once for a double click. ...
...And 3 more matches
Using the Editor from XUL - Archive of obsolete content
iframe>, and, when document loading is complete, it instantiates an editor on the loaded document. the <iframe> contents are then editable. note that the <editor> element is really just an <iframe> which takes over some of the task of creating the editor from javascript. editor creation so let's trace through the process of editor creation when bringing up the composer window. you can find the
relevant xul parts in editor.xul, the javascript parts in editor.js, and the xbl binding for the editor element in editor.xml. something, somewhere, tells mozilla to open the composer window. editor.xul is loaded. in editor.xul, the <window> tag has an onload handler: onload="editoronload()". that causes the editoronload() javascript function to get executed when the xul is done loading. the...
...ress, and end of the document load. note: these callbacks also fire for every subdocument that loads as a result of the parent document load, for example with frameset documents, or html documents with their own embedded <iframe>s. in this case, we need to be careful to instantiate the editor on the correct document. we are currently only able to have one editor per composer window; in future,
relaxing this restriction would allow us to edit all the subdocuments in a frameset at the same time. we detect that the document we want to edit has loaded successfully in nseditorshell::onenddocumentload(). after checking that we can actually edit this document, we go ahead and instantiate an editor on it (in nseditorshell::preparedocumentforediting()). as well as making the editor (which hap...
...ication, causing all windows to be closed. before each window is closed, javascript code in globaloverlay.js tries to call a trytoclose method on each window. in editor.js, we set this to call editorcanclose(). if the user chooses to save the document, or throw away their changes, then the window is closed. when the last reference to the nseditorshell goes away (as a result of nseditorboxobject
releasing its reference) it
releases the owning reference on the editor. editor event handling editing operations happen in response to user events: mouse, key, drag and drop, and ime (international text input) events. in order to receive these events, the editor registers several event listeners on the document being edited. in addition, editor actions in the user interface are propagated via the ...
...And 3 more matches
panel - Archive of obsolete content
it does not have any window decorations. when open, it floats above the window and may extend outside the border of the main window. typically, it will be attached to a button using the button's type attribute so that when the button is pressed, the panel will be displayed. a panel may also be opened via a script using the openpopup method. the panel is closed when the user clicks outside the panel, presses escape or when the panel's hidepopup method is called. ...
...e set, otherwise ime or on-screen keyboard popups will appear incorrectly. for these reasons, you should avoid setting the level if not needed. top the panel is shown in front of all other normal windows, including those of other applications. parent the panel is shown just above the window the panel is in, but behind other windows above it. if anchored, the child window maintains its
relative position to its parent window. floating the panel floats above the window the panel is in. on mac, the panel is only visible when the application is active. noautofocus type: boolean if false, the default value, the currently focused element will be unfocused whenever the popup is opened or closed. if true, the focus is not adjusted. noautohide type: boolean if fals...
...sed to dynamically set the contents when the user requests to display it. returning false from this event handler prevents the popup from appearing. onpopupshown type: script code this event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened. position type: string the position attribute determines where the popup appears
relative to the element the user clicked to invoke the popup. this allows you to place the popup on one side of a button. note that a context menu will never respect this attribute, always appearing
relative to the mouse cursor. this value can be specified either as a single word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should b...
...And 3 more matches
window - Archive of obsolete content
it is the root node of a xul document. it is by default a horizontally oriented box. as it is a box, all box attributes can be used. by default, the window will have a platform-specific frame around it. to set an icon for the window, create a platform-specific icon file <windowid>.ico and/or <windowid>.xpm and place or install these files into the <mozilla-directory>/chrome/icons/default/ directory. the <windowid> is the value of the id attribute on the window. this allows you to have a different icon for each window. ...
...y also be used. windowtype type: string set to a string which can be used to identify the type of window. this might be used, for example, to distinguish between a browser window and an editor window. some of mozilla's window handling functions use this attribute to group windows of the same type together. ...
...tattributens(), 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. a filename following the system keyword in a doctype declaration may silently fail to load and the only error message will be an undefined entity error on the next xul element.
related elements prefwindow, dialog, dialogheader
related topics user notes to change the icon to a window's title bar check this page on window icons. to add a favicon to the address bar and browser tab (ie dialog is not a popup) then use the following code snippet to use the html namespace and link. <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:htm...
...And 3 more matches
What is RSS - Archive of obsolete content
. this tutorial teaches rss 2.0, but makes an effort to point out issues with other versions of rss. rss is almost never written by hand; it is almost always created by server-side software (usually written in a language like php, java, c#, or python) on the web server. however, so that we can learn rss, we will be creating rss scripts by hand. a short history of rss in march of 1999 netscape
released rss 0.90. it was much much different than today's rss. it wasn't really a format for syndication, but was a format for providing a summary of a website. in fact, back then, rss did not stand for really simple syndication but stood for rich site summary. in july of 1999 netscape's rss 0.91 was
released. like rss 0.90, netscape's rss 0.91 was also a format for providing a summary of a website...
... today). netscape's rss 0.91 was created to simplify things. rss 0.90 was rdf-based, which many found to be overly complex. netscape's rss 0.91 was only xml-based and added a dtd to allow several entities (commonly found in html). so at this point netscape deprecated the rdf-based rss 0.90 and told everyone to use netscape's rss 0.91, which was xml-based. in june of 2000 userland's rss 0.91 was
released. (and yes, that means that there are 2 different version of rss 0.91.) the difference between the two different versions of rss 0.91 -- netscape's rss 0.91 and userland's rss 0.91 -- is that userland's rss 0.91 does not have the dtd that netscape's rss 0.91 has; and thus doesn't have the extra entities that netscape's rss 0.91 has (commonly found in html). other than that, they are the same.
... of rss 0.91 -- netscape's rss 0.91 and userland's rss 0.91 -- is that userland's rss 0.91 does not have the dtd that netscape's rss 0.91 has; and thus doesn't have the extra entities that netscape's rss 0.91 has (commonly found in html). other than that, they are the same. technically speaking, userland's rss 0.91 is a subset of netscape's rss 0.91. in december of 2000 the rss-dev working group
released rss 1.0. this version of rss was no longer pu
rely xml-based, but was rdf-based (like the original and now deprecated rss 0.90). the rss-dev working group changed what rss stood for, and made it stand for rdf site summary (at least, this is what it stood for in their version of rss). so at this point we had netscape's rss 0.91, userland's rss 0.91, and the rss-dev working group's rss 1.0. l...
...And 3 more matches
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
hey may require that each project be comprised of marketing requirements documents, product requirements documents, functional requirements documents, quality assurance test plans, and certification documents. as organizations mature, they discover that they need more processes to give them greater control, which allows them to more easily plan and predict. with processes, organizations can make
release schedules, implement marketing plans, analyze resource allocations, and make adjustments when needed. adherence to standards and processes can actually provide a level of flexibility because development does become predictable. in addition to predictability, standard processes improve understanding and streamline costs. common development process as an organization matures, managers and eng...
...ser experience, interoperability, code reuse, shared resources, and goodwill while reducing costs. i will discuss each of these items in the following paragraphs. interoperability the key to interoperability is settling on a standard that has a potential for long-term use. an organization must have the assurance that the standard they choose to incorporate into their development process will be
relevant in the future. in other words, there must be long-term potential. a fundamental mistake that many organizations make is to use proprietary methods, software, code, or standards. following a proprietary path has led many organizations down disastrous paths. case in point: xerox corporation. xerox was clearly ahead of their time in the early 1980’s when they designed and developed the star ...
...costly if all parties involved follow the standards from the outset. consistent standards significantly reduce development re-work, and ensure consistent and predictable behavior from one application to the next. user experience & goodwill customer retention and market expansion is critical. when customers choose to use a particular product, they must have a positive experience with consistent,
reliable, and predictable behavior. as users become more sophisticated, and as additional devices become more affordable, they will be accessing the same information across a variety of devices – and expect them to look and act the same – regardless of whether they are accessing a web site from their desktop, phone, or handheld. consequently, if an organization offers a suite of products they mus...
...And 3 more matches
RDF in Mozilla FAQ - Archive of obsolete content
url of an rdf/xml file, or a "special" uri starting with rdf: that refers to a built-in datasource. datasources may be loaded via the rdf service using the getdatasource() method. if the uri argument refers to an rdf/xml file's url, then the rdf service will create an rdf/xml datasource and asynchronously parse it. the datasource will remain "cached" until the last reference to the datasource is
released. if the uri argument refers to a built-in datasource, the rdf service will use the xpcom component manager to load a component whose contractid is constructed using the "special" uri and the well-known prefix@mozilla.org/rdf/datasource;1?name=</code>. for example, rdf:foo would load: @mozilla.org/rdf/datasource;1?name=foo as with rdf/xml datasources, a datasource that is retrieved th...
...sly. by setting // ablocking to true, we could force it to be synchronous, but this // is generally a bad idea, because your ui will completely lock up! remote.refresh(false); // note that ds will load asynchronously, so assertions will not // be immediately available you may decide that you need to "manually" create an rdf/xml datasource if you want to force it to load synchronously. how do i
reload an rdf/xml datasource? you can force an rdf/xml datasource (or any datasource that supports nsirdfremotedatasource) to
reload using the refresh() method of nsirdfremotedatasource. refresh() takes a single parameter that indicates whether you'd like it to perform its operation synchronously ("blocking") or asynchrounously ("non-blocking"). you should never do a synchronous load unless you real...
.... xul templates xul templates are created by specifying a datasources attribute on an element in a xul document. there are two "forms" that xul templates may be written in. the "simple" form, which is currently the most common form in the mozilla codebase, and the "extended" form, which allows for sophisticated pattern matching against the rdf graph. see the xul:template guide. (these are bizar
rely arranged because the eventual intent is to introduce templates using the extended form -- which in many ways is conceptually simpler, even if more verbose -- and then treat the "simple" form as a shorthand for the extended form.) what can i build with a xul template? you can build any kind of content using a xul template. you may use any kind of tag (including html, or arbitrary xml) in the <a...
...And 3 more matches
Mouse controls - Game development
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. ...
...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. ...
..."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. ...
...And 3 more matches
WAI-ARIA basics - Learn web development
started to feature complex controls like date pickers for choosing dates, sliders for choosing values, etc. html5 provides special input types to render such controls: <input type="date"> <input type="range"> these are not well-supported across browsers, and it is also difficult to style them, making them not very useful for integrating with website designs. as a result, developers quite often
rely on javascript libraries that generate such controls as a series of nested <div>s or table elements with classnames, which are then styled using css and controlled using javascript. the problem here is that visually they work, but screenreaders can't make any sense of what they are at all, and their users just get told that they can see a jumble of elements with no semantics to describe what the...
... accessed using a screenreader, from textual content to alternative text attached to images. traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments. the problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page
reloading via a mechanism like xmlhttprequest, fetch, or dom apis. these are sometimes referred to as live regions. let's look at a quick example — see aria-no-live.html (also see it running live). in this example we have a simple random quote box: <section> <h1>random quote</h1> <blockquote> <p></p> </blockquote> </section> our javascript loads a json file via xmlhttprequest containin...
...s, we can add the aria-atomic property to the section. update your <section> tag again, like so: <section aria-live="assertive" aria-atomic="true"> the aria-atomic="true" attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated. note: you can see the finished example at aria-live.html (see it running live). note: the aria-
relevant property is also quite useful for controlling what gets read out when a live region is updated. you can for example only get content additions or removals read out. enhancing keyboard accessibility as discussed in a few other places in the module, one of the key strengths of html with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form control...
...And 3 more matches
The box model - Learn web development
previous overview: building blocks next everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align items with other items. in this lesson, we will take a proper look at the css box model so that you can build more complex layout tasks with an understanding of how it works and the terminology that
relates to it. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the css box model, what makes up the box model and how to switch to the alternate model. block and inline boxes in css we broadly have two typ...
... (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the css box model, what makes up the box model and how to switch to the alternate model. block and inline boxes in css we broadly have two types of boxes — block boxes and inline boxes. these characteristics refer to how the box behaves in terms of page flow, and in
relation to other boxes on the page: if a box is defined as a block, it will behave in the following ways: the box will break onto a new line. the box will extend in the inline direction to fill the space available in its container. in most cases this means that the box will become as wide as its container, filling up 100% of the space available. the width and height properties are respected. ...
...cause other inline boxes to move away from the box. horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box. the <a> element, used for links, <span>, <em> and <strong> are all examples of elements that will display inline by default. the type of box applied to an element is defined by display property values such as block and inline, and
relates to the outer value of display. aside: inner and outer display types at this point, we'd better also explain inner and outer display types. as mentioned above, boxes in css have an outer display type, which details whether the box is block or inline. boxes also have an inner display type, however, which dictates how elements inside that box are laid out. by default, the elements inside a bo...
...And 3 more matches
How much does it cost to do something on the Web? - Learn web development
microsoft visual studio, can cost hundreds, or thousands of dollars; though visual studio express is free for individual developers or open source projects. often, for-pay editors will have a trial version. to start, we suggest trying out several editors, to get a sense of which works best for you. if you're only writing simple html, css, and javascript, go with a simple editor. ...
... editors can be free (gimp, paint.net), moderately expensive (paintshop pro, less than $100), or several hundred dollars (adobe photoshop). you can use any of them, as they will have similar functionality, though some are so comprehensive you'll never use every feature. ...
...c, or git/github. each operating system includes an (s)ftp client, as part of its file manager. windows explorer, nautilus (a common linux file manager), and the mac finder all include this functionality. however, people often choose dedicated (s)ftp clients to display local or remote directories side-by-side and store server passwords. if you want to install an (s)ftp client, there are several
reliable and free options: for example, filezilla for all platforms, winscp for windows, cyberduck for mac or windows, and more. because ftp is inherently insecure, you should make sure to use sftp — the secure, encrypted version of ftp that most hosting sites you'll deal with these days will offer by default — or another secure solution like rsync over ssh. browsers you either already have a ...
...And 3 more matches
How to build custom form controls - Learn web development
this is important to make sure that we don't bind our css and javascript to a strong html structure, so that we can make implementation changes later without breaking code that uses the control. for example, what if you wish to implement the equivalent of the <optgroup> element later on? class names, however, provide no semantic v...
...like a <select> element, and the second part will consist of the fancy styles used to make it look the way we want. required styles the required styles are those necessary to handle the three states of our control. .select { /* this will create a positioning context for the list of options; adding this to .select:focus-within will be a better option when fully supported */ position:
relative; /* this will make our control become part of the text flow and sizable at the same time */ display : inline-block; } we need an extra class active to define the look and feel of our control when it is in its active state. because our control is focusable, we double this custom style with the :focus pseudo-class in order to be sure they will behave the same. .select .active, .select:f...
... write the javascript code to make the control actually work. warning: the following is educational code, not production code, and should not be used as-is. it is neither future-proof nor will not work on legacy browsers. it also has redundant parts that should be optimized in production code. why isn't it working? before starting, it's important to remember javascript in the browser is an un
reliable technology. custom controls
rely on javascript to tie everything together. however, there are cases in which javascript isn't able to run in the browser: the user has turned off javascript: this is unusual; very few people turn off javascript nowadays. the script did not load: this is one of the most common cases, especially in the mobile world where the network is not very
reliable. th...
...And 3 more matches
Third-party APIs - Learn web development
re located on third party servers. to access them from javascript you first need to connect to the api functionality and make it available on your page. this typically involves first linking to a javascript library available on the server via a <script> element, as seen in our mapquest example: <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> <link type="text/css"
rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/> you can then start using the objects available in that library. for example: let map = l.mapquest.map('map', { center: [53.480759, -2.242631], layers: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the mapquest.map() met...
...lication — the developer of the application must apply to get a key, and then include it in their code to be allowed access to the api's functionality. in our example we've just provided a placeholder. note: when creating your own examples, you'll use your own api key in place of any placeholder. other apis may require that you include the key in a slightly different way, but the pattern is
relatively similar for most of them. requiring a key enables the api provider to hold users of the api accountable for their actions. when the developer has registered for a key, they are then known to the api provider, and action can be taken if they start to do anything malicious with the api (such as tracking people's location or trying to spam the api with loads of requests to stop it working, f...
...osition: 'bottomright' })); there are other types of control available, for example mapquest.searchcontrol() and mapquest.satellitecontrol(), and some are quite complex and powerful. have a play around and see what you can come up with. adding a custom marker adding a marker (icon) at a certain point on the map is easy — you just use the l.marker() method (which seems to be documented in the
related leaflet.js docs). add the following code to your example, again inside window.onload: l.marker([53.480759, -2.242631], { icon: l.mapquest.icons.marker({ primarycolor: '#22407f', secondarycolor: '#3b5998', shadow: true, size: 'md', symbol: 'a' }) }) .bindpopup('this is manchester!') .addto(map); as you can see, this at its simplest takes two parameters, an array conta...
...And 3 more matches
HTML performance features - Learn web development
basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the impact of html elements and attributes on web performance optimization. ...
...racy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the impact of html elements and attributes on web performance optimization. elements & attributes impacting performance the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images p
reloading content with
rel="p
reload" - (https://w3c.github.io/p
reload/ ) async / defer attributes <iframe> <object> <script>
rel attribute conclusion previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia: images multimedia: video javascript performance best practices. html perfor...
...e? how do users perceive performance? ...
...And 3 more matches
Getting started with React - Learn web development
p — learning a bit about how react works in the process. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. react uses an html-in-javascript syntax called jsx (javascript and xml). familiarity with both html and javascript will help you to learn jsx, and better identify whether bugs in your application are
related to javascript or to the more specific domain of react. objective: to set up a local react development environment, create a start app, and understand the basics of how it works hello react as its official tagline states, react is a library for building user interfaces. react is not a framework – it's not even exclusive to the web. it's used with other libraries to re...
...l also be published when you build and deploy a production version of your app. we won’t cover deployment in this tutorial, but you should be able to use a similar solution to that described in our deploying our app tutorial. the package.json file contains information about our project that node.js/npm uses to keep it organized. this file is not unique to react applications; create-react-app me
rely populates it. you don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read what is the file `package.json`? on nodejs.org; we also talk about it in our package management basics tutorial. exploring our first react component — <app/> in react, a component is a reusable module that renders a part of our app. these parts ca...
...r is prompting us to edit it. ...
...And 3 more matches
Working with Svelte stores - Learn web development
ponent that shows notifications on screen, which can receive messages from any component. in this case, the alert component is independent from the rest — it is not a parent or child of any other — so the messages don't fit into the component hierarchy. we will also see how to develop our own custom store to persist the todo information to web storage, allowing our todos to persist over page
reloads. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/06-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm run dev to start your app in developmen...
...a binding, and events. in all these cases we were dealing with communication between parent and child components. but not all application state belongs inside your application's component hierarchy. for example, information about the logged in user, or whether the dark theme is selected or not. sometimes, your app state will need to be accessed by multiple components that are not hierarchically
related, or by a regular javascript module. moreover, when your app becomes complicated and your component hierarchy gets complex, it might become too difficult for components to
relay data between each other. in that case, moving to a global data store might be a good option. if you’ve already worked with redux or vuex, then you'll be familiar with how this kind of store works. svelte stores offe...
...od alert.subscribe(), passing it a callback function as a parameter. whenever the value of the store changes, the callback function will be called with the new value as its parameter. in the callback function we just assign the value we receive to the local variable, which will trigger the update of the component's dom. the subscribe() method also returns a clean-up function, which takes care of
releasing the subscription. so we subscribe when the component is being initialized, and use ondestroy to unsubscribe when the component is unmounted. finally we use the alertcontent variable in our markup, and if the user clicks on the alert we clean it. at the end we include a few css lines to style our alert component. this setup allows us to work with stores in a reactive way. when the value ...
...And 3 more matches
Handling common HTML and CSS problems - Learn web development
the properties they are used on, you are not missing any curly braces, and so on. the w3c has a css validator available too, for this purpose. linters another good option to choose is a so-called linter application, which not only points out errors, but can also flag up warnings about bad practices in your css, and other points besides. linters can generally be customized to be stricter or more
relaxed in their error/warning reporting. there are many online linter applications, the best of which are probably dirty markup (html, css, javascript), and css lint (css only). these allows you to paste your code into a window, and it will flag up any errors with crosses, which can then be hovered to get an error message informing you what the problem is. dirty markup also allows you to make fixes...
... install atom (if you haven't got an up-to-date version already installed) — download it from the atom page linked above. go to atom's preferences... dialog (e.g. by choosing atom > preferences... on mac, or file > preferences... on windows/linux) and choose the install option in the left hand menu. in the search packages text field, type "lint" and press enter/return to search for linting-
related packages. you should see a package called lint at the top of the list. install this first (using the install button), as other linters
rely on it to work. after that, install the linter-csslint plugin for linting css, and the linter-tidy plugin for linting html. after the packages have finished installing, try loading up an html file and a css file: you'll see any issues highlighted with gr...
...t styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as flexbox, or html5 video/audio, or even more nascent, css grids or -webkit-background-clip: text. 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. see finding help below. html fallback behaviour some problems can be solved by just taking advantage of the natural way in which html/css work. unrecognised html elements are treated by the browser as anonymous inline elements (effectively inline elements with no semantic value, similar to <span> elements). you can still refer to them by their names, and style them w...
...And 3 more matches
Introduction to cross browser testing - Learn web development
don't use a mouse (some people use only the keyboard). remember that you are not your users — just because your site works on your macbook pro or high-end galaxy nexus, doesn't mean it will work for all your users — there's a whole lot of testing to be done! note: make the web work for everyone provides more useful perspective on the different browsers people use, their market share, and
related cross browser compatibility issues. we should explain a few bits of terminology here. to start with, when we talk about sites "working cross browser", we are really saying that they should provide an acceptable user experience across different browsers. it is potentially ok for a site to not deliver the exact same experience on all browsers, as long as the core functionality is accessible i...
...ther web sites they own, or from previous versions of the web site you are now working on. if not, you will be able to get a good idea by looking at other sources, such as usage stats for competitors, or countries the site will be serving. you can also use a bit of intuition. so for example, you might be building an e-commerce site that serves customers in north america. the site should work enti
rely in the last few versions of the most popular desktop and mobile (ios, android, windows phone) browsers — this should include chrome (and opera as it is based on the same rendering engine as chrome), firefox, ie/edge, and safari. it should also provide an acceptable experience on ie 8 and 9, and be accessible with wcag aa compliance. now you know your target testing platforms, you should go ba...
...wser stack, endtest, lambdatest, testingbot, and crossbrowsertesting that do this kind of thing for you, without you having to worry about the setup, if you wish to invest some money in your testing. it is also possible to set up an environment that automatically runs tests for you, and then only lets you check in your changes to the central code repository if the tests still pass. ...
...And 3 more matches
How Mozilla's build system works
script, it generates a python script. python 2 is prevalent in a mozilla build system. if we need to write code for the build system, we do it in python 2 instead of editing a makefile. config.status contains 2 parts: data structures representing the output of configure and a command-line interface for preparing, configuring, or generating an appropriate build backend. a build backend is me
rely a tool used to build the tree — like gnu make or tup. these data structures describe the current state of the system and what the existing build configuration looks like. for example, a data structure defines which compiler to use, how to invoke it, which application features are enabled, and so on. you are encouraged to open config.status to have a look! after we have emitted a config.stat...
... the automatically produced config.status python script is executed as soon as configure has generated it. config.status is charged with the task of telling a tool how to build the tree. to do this, config.status must first scan the build system definition. the build system definition consists of various moz.build files in the tree. there is roughly one moz.build file per directory or per set of
related directories. each moz.build file defines how its part of the build configuration works. for example, it says i want these c++ files compiled or look for additional information in these directories. config.status starts with the main moz.build file and then recurses into all referenced files and directories. as the moz.build files are read, data structures describing the overall build system d...
...nd-true backend used to build the tree. it's what's been used since the dawn of mozilla. essentially, there are makefiles in each directory. make starts processing the makefile in the root directory and then recursively descends into child directories until it's done. but there's more to the process than that. the recursive make backend divides the source tree into tiers. a tier is a grouping of
related directories containing makefiles of their own. for example, there is a tier for the netscape portable runtime (nspr), one for the javascript engine, one for the core gecko platform, one for the xul app being built, and so on. the main moz.build file defines the tiers and directories in the tiers. in reality, the main moz.build files include other moz.build files, such as /toolkit/toolkit.moz...
...And 3 more matches
Simple SeaMonkey build
insert "mac os x install disc 2", the...
...s later in the building stage. to avoid that, create a directory without spaces in its path (e.g. mkdir /c/mozilla-src) and switch to it before building (cd /c/mozilla-src). problems? see windows build prerequisites. building seamonkey building seamonkey requires at least 2 gb of disk space and 256 mb of available ram. ...
...s path (e.g. mkdir /c/mozilla-src) and switch to it before building (cd /c/mozilla-src). problems? see windows build prerequisites. building seamonkey building seamonkey requires at least 2 gb of disk space and 256 mb of available ram. # get the source # for aurora, use https://hg.mozilla.org/
releases/comm-aurora/ and comm-aurora instead # for beta, use https://hg.mozilla.org/
releases/comm-beta/ and comm-beta instead # for
release, use https://hg.mozilla.org/
releases/comm-
release/ and comm-
release instead hg clone https://hg.mozilla.org/comm-central/ cd comm-central python client.py checkout # set up a basic .mozconfig file echo 'ac_add_options --enable-application=suite' > .mozconfig # let's build seamonkey... echo 'mk_add_options moz_objdir=/path/to/comm...
...And 3 more matches
Using JavaScript code modules
extension>/content/<yourmodule>.jsm. if your extension or application needs to support mozilla 1.9.x (firefox 3.x), you should register a new resource url. details on doing this are in the "extending resource: urls" section below. sharing objects using code modules an extremely important behavior of components.utils.import() is that modules are cached when loaded and subsequent imports do not
reload a new version of the module, but instead use the previously cached version. this means that a given module will be shared when imported multiple times. any modifications to data, objects, or functions will be available in any scope that has imported the module. for example, if the simple module were imported into two different javascript scopes, changes in one scope can be observed in the othe...
...ut variables in a wrapper class and export the wrapper (such as bar in the above example). unloading code modules requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) components.utils.unload() allows you to unload a previously imported code module. ...
...odule will continue to work but any subsequent import of the module will
reload it and give a new reference. examples a template to download and edit is seen here on github - gists - _template-bootstrapjsm.xpi extending resource: urls prior to gecko 2.0, the most common way to load code modules was using resource: urls. the basic syntax of a resource url is as follows: resource://<alias>/<
relative-path>/<file.js|jsm> the <alias> is an alias to a location, usually a physical location
relative to the application or xul runtime. ...
...And 3 more matches
Localizing with Koala
choose "firefox" as the application. version: 3.6. appname: browser. included locale: en-us (this is the original locale you're translating from). leave location empty for now. check the "mercurial" checkbox. note that you don't have to edit the location field, it automatically fills in when you check the "mercurial" checkbox: "c:\mozilla\l10n\application\firefox\3.6". url: http://hg.mozilla.org/
releases/mozilla-1.9.2. branch: default. revision: leave empty. click "ok". koala will now try to clone the en-us source repository from http://hg.mozilla.org/
releases/mozilla-1.9.2. it's almost 1 gb worth of download, so it may take a while. click "ok". on windows, if koala doesn't clone the repositories, you'll need to do it manually. the easy way involves opening the console and issuing the fol...
... almost 1 gb worth of download, so it may take a while. click "ok". on windows, if koala doesn't clone the repositories, you'll need to do it manually. ...
...s or leave empty for now check "mercurial" if you wish to use mercurial to keep the revision history of your files (very recommended) existing localizations: url: if you're editing an existing localization or you already have a repository set up (either on hg.mozilla.org or bitbucket), type the url of the remote repository, e.g. http://bitbucket.org/mozillal10n/x-testing or http://hg.mozilla.org/
releases/l10n-....9.2/x-testing. new localizations: url: if you already have a repository set up by l10n-drivers (on bitbucket), type the url of the remote repository, e.g. http://bitbucket.org/mozillal10n/x-testing. if you're starting a new localization, you may not have a remote repository set up yet. it is still recommended to use mercurial locally to version your local files. just type a singl...
...And 3 more matches
QA phase
experience with code, you might even be concerned that you've broken something (oops!). now we'll walk you through performing some quality assurance testing on your work to make sure you're on the right track. if you're localizing mozilla websites, your work will display soon after you've committed it without needing a language pack. since such is the case, this part of the guide may not be enti
rely applicable to you. feel free to skip ahead to the next section by clicking on the next link at the bottom of the page. in order to see your work on firefox (or another mozilla application), you'll need to have a built language pack to install on your local instance. manual & automated builds with the click of a button, some l10n tools (like narro and koala) automatically create language pack ...
...f you're using one of these tools, feel free to skip ahead to the seeing your work section. if you're not using one of these tools, let's walk you through building your own language pack manually. note: remember all of those pre-requisite tools we asked you to install in the initial setup? here's where you'll need almost all of them. if you haven't installed them yet, now is the time to do it. ...
...ally. note: remember all of those pre-requisite tools we asked you to install in the initial setup? here's where you'll need almost all of them. if you haven't installed them yet, now is the time to do it. ...
...And 3 more matches
Investigating leaks using DMD heap scan mode
es that your patch creates before trying this. the particular steps given below are intended for the case where the leaked object is alive all the way through shutdown. you could modify these steps for leaks that go away in shutdown by collecting a cc and dmd log prior to shutdown. however, in that case it may be easier to use refcount logging, or rr with a conditional breakpoint set on calls to
release() for the leaking object, to see what object actually does the
release that causes the leaked object to go away. prerequisites a debug dmd build of firefox. this page describes how to do that. this should probably be an optimized build. non-optimized dmd builds will generate better stack traces, but they can be so slow as to be useless. the build is going to be very slow, so you may need...
...come in handy during the manual analysis phase later, to get evidence to support your hunches. for instance, if you think that an nsfoo object might be holding your leaking object alive, you can use this to easily see if we leaked an nsfoo object. moz_cc_log_shutdown=1: this generates a cycle collector log during shutdown. creating this log during shutdown is nice because there are less things un
related to the leak in the log, and various cycle collector optimizations are disabled. a garbage collector log will also be created, which you may not need. moz_disable_content_sandbox=t: this disables the content process sandbox, which is needed because the dmd and cc log files are created directly by the child processes. moz_cc_log_directory=$logdir: this selects the location for cycle collector...
...the window, using the find_roots.py script from the heapgraph repository. the command to invoke this looks like this: python $heapgraph/find_roots.py $cclog $winaddr this may take a few seconds. it will eventually produce some output. you'll want to save a copy of this output for later. the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmento
relement (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). kn...
...And 3 more matches
NSS tools : certutil
ment. for information on the security module database management, see the modutil manpage. options and arguments running certutil always requires one and only one command option to specify the type of certificate operation. each option may take arguments, anywhere from none to multiple arguments. the command option -h will list all the command options available and their
relevant arguments. command options -a add an existing certificate to a certificate database. the certificate database should already exist; if one is not present, this command option will initialize one by default. -b run a series of commands from the specified batch file. this requires the -i argument. -c crea...
... certificate requests, ascii output defaults to standard output unless redirected. -b validity-time specify a time at which a certificate is required to be valid. use when checking certificate validity with the -v option. the format of the validity-time argument is yymmddhhmmss[+hhmm|-hhmm|z], which allows offsets to be set
relative to the validity end time. specifying seconds (ss) is optional. when specifying an explicit time, use a z at the end of the term, yymmddhhmmssz, to close it. when specifying an offset time, use yymmddhhmmss+hhmm or yymmddhhmmss-hhmm for adding or subtracting time, respectively. if this option is not used, the validity check d...
...d examples most of the command options in the examples listed here have more arguments available. the arguments included in these examples are the most common ones or are used to illustrate a specific scenario. use the -h option to show the complete list of arguments for each command option. creating new security databases certificates, keys, and security modules
related to managing certificates are stored in three
related databases: * cert8.db or cert9.db * key3.db or key4.db * secmod.db or pkcs11.txt these databases must be created before certificates or keys can be generated. certutil -n -d [sql:]directory creating a certificate request a certificate request contains most or all of the information that is us...
...And 3 more matches
sslerr.html
s nss error codes are retrieved using the nspr function pr_geterror. in addition to the error codes defined by nspr, pr_geterror retrieves the error codes described in this chapter. ssl error codes sec error codes ssl error codes table 8.1 error codes defined in sslerr.h constant value description ssl_error_export_only_server -12288 "unable to communicate secu
rely. peer does not support high-grade encryption." the local system was configured to support the cipher suites permitted for domestic use. the remote system was configured to support only the cipher suites permitted for export use. ssl_error_us_only_server -12287 "unable to communicate secu
rely. peer requires high-grade encryption which is not supported." the...
...this can be due to a misconfiguration at either end. it can be due to a server being misconfigured to use a non-rsa certificate with the rsa key exchange algorithm. ...
...or key necessary for authentication." this error has many potential causes; for example: certificate or key not found in database. certificate not marked trusted in database and certificate's issuer not marked trusted in database. wrong password for key database. missing database. ssl_error_bad_certificate -12284 "unable to communicate secu
rely with peer: peers's certificate was rejected." a certificate was received from the remote system and was passed to the certificate authentication callback function provided by the local application. that callback function returned secfailure, and the bad certificate callback function either was not configured or did not choose to override the error code returned by the certificate auth...
...And 3 more matches
Network Security Services
ed client and server applications. applications built with nss can support ssl v3, tls, pkcs #5, pkcs #7, pkcs #11, pkcs #12, s/mime, x.509 v3 certificates, and other security standards. for detailed information on standards supported, see overview of nss. for a list of frequently asked questions, see the faq. nss is available under the mozilla public license. for information on downloading nss
releases as tar files, see download pki source. if you're a developer and would like to contribute to nss, you might want to read the documents highlevel overview of internal details of nss and getting started with nss. documentation background information overview of nss provides a brief summary of nss and its capabilities. nss faq answers basic questio...
...abilities. nss faq answers basic questions about nss. introduction to public-key cryptography explains the basic concepts of public-key cryptography that underlie nss. introduction to ssl introduces the ssl protocol, including information about cryptographic ciphers supported by ssl and the steps involved in the ssl handshake. getting started nss
releases this page contains information about the current and past
releases of nss. get the source code and build it instructions on how to build nss on the different supported platforms. nss apis introduction to network security services provides an overview of the nss libraries and what you need to know to use them. nss ssl public functions summari...
...loping code (naming conventions, error handling, thread safety, etc.) nss technical notes links to nss technical notes, which provide latest information about new nss features and supplementary documentation for advanced topics in programming with nss. tools, testing, and other technical details build instructions for nss describe how to check out and build nss
releases. nss developer tutorial how to make changes in nss. coding style, maintaining abi compatibility. nss tools tools for developing, debugging, and managing applications that use nss. sample code demonstrates how nss can be used for cryptographic operations, certificate handling, ssl, etc. third-party code a list of third-party code i...
...And 3 more matches
SpiderMonkey Build Documentation
e it is also possible that baldrdash may fail to compile with /usr/local/cellar/llvm/7.0.1/lib/clang/7.0.1/include/inttypes.h:30:15: fatal error: 'inttypes.h' file not found /usr/local/cellar/llvm/7.0.1/lib/clang/7.0.1/include/inttypes.h:30:15: fatal error: 'inttypes.h' file not found, err: true this is because, starting from mohave, headers are no longer installed in /usr/include. ...
...th /usr/local/cellar/llvm/7.0.1/lib/clang/7.0.1/include/inttypes.h:30:15: fatal error: 'inttypes.h' file not found /usr/local/cellar/llvm/7.0.1/lib/clang/7.0.1/include/inttypes.h:30:15: fatal error: 'inttypes.h' file not found, err: true this is because, starting from mohave, headers are no longer installed in /usr/include. refer the
release notes under command line tools -> new features the
release notes also states that this compatibility package will no longer be provided in the near future, so the build system on macos will have to be adapted to look for headers in the sdk until then, the following should help, open /library/developer/commandlinetools/packages/macos_sdk_headers_for_macos_10.14.pk this builds an executable named js in the directory build-
release/dist/bin. you c...
...ke the version control system ignore it. mkdir build_dbg.obj cd build_dbg.obj /bin/sh ../configure.in --enable-debug --disable-optimize # use "mozmake" on windows make you can also build debug builds of spidermonkey with the js_gc_zeal option, which adds a new built-in function to spidermonkey that lets you configure zealous garbage collection. this can help debug memory leaks and other memory-
related problems. see js_setgczeal() for details. 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 th...
...And 3 more matches
SpiderMonkey 24
these
release notes are an incomplete draft and were initially seeded from the spidermonkey 17
release notes, so they're not necessarily complete or fully accurate. the mozilla javascript team is pleased to announce the
release of spidermonkey 24. you can download full source code here: https://ftp.mozilla.org/pub/mozilla.org/js/mozjs-24.2.0.tar.bz2 (sha1: ce779081cc11bd0c871c6f303fc4a0091cf4fe66) spidermonkey 24 is the javascript engine that shipped in firefox 24. it continues to improve performance over previous spidermonkey
releases, with a significantly improved garbage collector, a new jit compilation mode, and other features. it also contains new language and api features described in detail below. ...
...11bd0c871c6f303fc4a0091cf4fe66) spidermonkey 24 is the javascript engine that shipped in firefox 24. it continues to improve performance over previous spidermonkey
releases, with a significantly improved garbage collector, a new jit compilation mode, and other features. it also contains new language and api features described in detail below. please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. ...
...w jit compilation mode, and other features. it also contains new language and api features described in detail below. please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. — dec 16, 2013 the download url still available, but spidermonkey not
release alone! get it here mozilla-esr24 if the download url is outdate you will find it in "firefox extended support
release 24" package on hg
release platform support spidermonkey 24 is supported on all the platforms where firefox 24 runs. compiling it requires a c++ compiler, and the jsapi can only be used from c++ code. (this change was motivated by garbage collector improvements, which lea...
...And 3 more matches
SpiderMonkey 38
spidermonkey 38 is outdated and contains known security vulnerabilities. these
release notes are incomplete. the mozilla javascript team is pleased to announce the
release of spidermonkey 38. spidermonkey 38 is the javascript engine that shipped in firefox 38. it continues to improve performance over previous spidermonkey
releases, with xxx blah blah blah. it also contains new language and api features described in detail below. please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. ...
... compiling it requires a c++ compiler, and the jsapi can only be used from c++ code. ...
... compiling it requires a c++ compiler, and the jsapi can only be used from c++ code. ...
...And 3 more matches
nsIXULWindow
vel chrome window. when the window is destroyed, it will fire a "xul-window-destroyed" notification through the global observer service. this signals the application in case it needs to quit. ...
...et have a document in its docshell could cause problems. void applychromeflags(); parameters none. assumechromeflagsarefrozen() begin assuming chromeflags do not change hereafter, and assert if they do change. the state change is one-way and idempotent. void assumechromeflagsarefrozen(); parameters none. center() move the window to a centered position. ...
...meflags(); parameters none. assumechromeflagsarefrozen() begin assuming chromeflags do not change hereafter, and assert if they do change. the state change is one-way and idempotent. void assumechromeflagsarefrozen(); parameters none. center() move the window to a centered position. void center( in nsixulwindow a
relative, in boolean ascreen, in boolean aalert ); parameters a
relative if not null, the window
relative to which the window is moved. see ascreen parameter for details. ascreen true to center the window
relative to the screen containing a
relative if a
relative is not null. if a
relative is null then
relative to the screen of the opener window if it was initialized by passing it to nswebshellwindow::initialize. failing that
relative to the main screen. false to...
...And 3 more matches
Index
ives the user the chance to search for and order a vanity email account from a list of partner providers. if the user already has an email account, the user can switch to the original account setup wizard. 3 account examples extensions, thunderbird this article provides examples on accessing and manipulating thunderbird accounts. account interfaces provides an overview of the
related interfaces. see an overview of thunderbird components for a general description of the thunderbird user interface and
related programmatic interfaces. 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. see account...
...ook or writing extensions. the complete list of interfaces for the address book can be found here. address book examples show how to perform various tasks and provide code snippets. 8 address book examples mailnews, seamonkey, thunderbird this article provides examples on accessing and manipulating thunderbird address books. address book interfaces provides an overview of the
related interfaces. see an overview of thunderbird components for a general description of the thunderbird user interface and
related programmatic interfaces. 9 address book sync client design by richard h. pizzarro <rhp@netscape.com> 10 autoconfiguration in thunderbird administration, enterprise author: ben bucksch please do not change this document withou...
...js, or other files are that are here, what they do, and where they overlay at different points within the client. things appear confusing for several reasons: 45 message interfaces interfaces, interfaces:scriptable, needscontent, xpcom api reference, thunderbird nsimsghdr - this interface describes headers for all mail messages. it can be used to retrieve address, subject and
related header information for a mail message. 46 message examples thunderbird no summary! 47 message list examples thunderbird no summary! 48 message list interfaces thunderbird no summary! 50 spam filtering seth spitzer the mozilla implement is based on paul graham's a plan for spam. training data is global a...
...And 3 more matches
Thunderbird Binaries
described below are three types of generally available thunderbird packages -
releases, early preview
releases, and nightly builds (including trunk development builds) - and their downloaded locations. additionally, ad-hoc packages called try builds are made available on an as-needed basis to allow for testing of certain patches, and are typically announced in
related bug reports.
releases thunderbird
releases have been extensively tested and are made available for anyone to download and use it. ...
...uilds (including trunk development builds) - and their downloaded locations. additionally, ad-hoc packages called try builds are made available on an as-needed basis to allow for testing of certain patches, and are typically announced in
related bug reports.
releases thunderbird
releases have been extensively tested and are made available for anyone to download and use it. thunderbird current
release can be downloaded from https://www.mozilla.org/thunderbird/ past thunderbird
releases can be downloaded from https://
releases.mozilla.org/pub/thunderbird/
releases/ early preview
releases whilst writing new versions of thunderbird, developers
release preview versions, known as betas. these builds are made to get feedback from testers and extension developers. note: while beta builds have h...
...eleases.mozilla.org/pub/thunderbird/
releases/ early preview
releases whilst writing new versions of thunderbird, developers
release preview versions, known as betas. these builds are made to get feedback from testers and extension developers. note: while beta builds have had some testing, they should be considered preview only and should not be used in a production environment. please read the
release notes before downloading. preview
releases are available from http://www.mozilla.org/thunderbird/channel/ nightly builds nightly builds are cutting-edge builds. they are built every 24 hours by the tinderboxes from the very latest source code. there are various sorts of nightly builds available for download. ...
...And 3 more matches
Using the Multiple Accounts API
ucture 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. it is also responsible for the creation of any new account-
related objects. the account manager maintains the main list of accounts. accounts (nsimsgaccount): an account consists of a single incoming server, and one or more identities. an account is me
rely a container to bind incoming servers and identities together. incoming servers (nsimsgincomingserver): an incoming server represents a remote message store such as a pop, imap, or nntp server. it holds a...
...r dialog, search, filters, etc. the view shows a flat, unified view of all the servers. the above example would look like this: alecf on imap.mywork.com +- inbox +- trash +- (etc) alecf on pop.myisp.com +- inbox +- trash +- (etc) news.myisp.com +- comp.os.linux.announce +- etc.. 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. identities identities are used in the compose window. if identities are shared between accounts, you will only see that identity once in the list. in the above example, the list of identities would be as follows: alec flett <alecf@mywork.com>) alec flett <alecf@my...
...imsgaccountmanager.allservers: a list of all servers held by all accounts. identities identities are used in the compose window. if identities are shared between accounts, you will only see that identity once in the list. in the above example, the list of identities would be as follows: alec flett <alecf@mywork.com>) alec flett <alecf@myisp.com>) alec flett <alecfnospam@myisp.com>)
relevant api calls: nsimsgaccount.identities nsimsgaccountmanager.allservers: a list of all servers across all accounts storage the accounts are stored in the preferences. the accounts, identities, and servers are all linked via keys. keys are simply internal strings that uniquely identify each account, identity and server. the keys are also used to decide the name of each of the preferences...
...And 3 more matches
Using Objective-C from js-ctypes
hello, firefox!". it uses the default system voice and waits until the speaking is done. #import <appkit/appkit.h> int main(void) { nsspeechsynthesizer* synth = [[nsspeechsynthesizer alloc] initwithvoice: nil]; [synth startspeakingstring: @"hello, firefox!"]; // wait until start speaking. while (![synth isspeaking]) {} // wait while speaking. while ([synth isspeaking]) {} [synth
release]; return 0; } save this file as test.m, and run with the following command, inside the same directory as the saved file (needs xcode). $ clang -framework appkit test.m && ./a.out class, message, and selector our task at hand is to convert objective-c syntax to c syntax. let's look at the following codelet: [nsspeechsynthesizer alloc] it passes an alloc message to the nsspeechsynth...
...he method which returns structs on the stack. objc_msgsend_fpret / objc_msgsend_fp2ret for the method which returns floating-point values on the stack. objc_msgsend for the method which returns the value in a register, or returns nothing. for example, [nsspeechsynthesizer isspeaking] returns bool. in this case, bool can be passed through a register, and we can use objc_msgsend. as [nsobject
release] returns nothing, we can also use objc_msgsend. nsstring literals another objective-c syntax used is the @"..." literal, which creates nsstring instance. this could be converted by the following objective-c code (may not be exactly the same). nsstring* text = [nsstring initwithcstring: "hello, firefox!" encoding: nsutf8stringencoding]; this will be conve...
...to the following c code. nsutf8stringencoding is defined as 4. id nsstring = (id)objc_getclass("nsstring"); sel initwithcstring_encoding = sel_registername("initwithcstring:encoding:"); int nsutf8stringencoding = 4; id tmp = objc_msgsend(nsstring, alloc); id text = objc_msgsend(tmp, initwithcstring_encoding, "hello, firefox!", nsutf8stringencoding); note that you need to
release this allocated nsstring instance. converted c code now we can translate our whole code into c syntax. #include <objc/objc.h> #include <objc/runtime.h> #include <objc/message.h> int main(void) { // nsspeechsynthesizer* synth = [[nsspeechsynthesizer alloc] initwithvoice: nil]; id nsspeechsynthesizer = (id)objc_getclass("nsspeechsynthesizer"); sel alloc = sel_registername("alloc"); s...
...And 3 more matches
Mozilla
eturns an nsiapplicationcache object representing the most recent cache version from the most recent cache group containing the entry under the url or a matching namespace. benchmarking debug builds (--enable-debug) and non-optimized builds (--disable-optimize) are much slower. any performance metrics gathered by such builds are largely un
related to what would be found in a
release browser. browser chrome tests the browser chrome test suite is an automated testing framework designed to allow testing of application chrome windows using javascript. it currently allows you to run javascript code in the same scope as the main firefox browser window and report results using the sam...
... command line options command line options are used to specify various startup options for mozilla applications.this page describes the commonly used options and how to use them. you can open the command line interface by pressing shift + f2. continuous integration when you push a commit to mozilla-central or a
related repository, it initiates a large chain of builds and tests across multiple types of infrastructure. this document will help you understand all the pieces that comprise mozilla's continuous integration systems. cookies in mozilla suggestions as to needed documentation can be directed to mike connor. cookies preferences in mozilla ...
...can learn about how to contribute to the firefox project and you will also find links to information about the construction of firefox add-ons, using the developer tools in firefox, and other topics. firefox operational information database: sqlite a large amount of operational information about websites visited and browser configuration is stored in
relational databases in sqlite used by firefox. the sqlite manager add-on allows convenient browsing of this information. (install the sqlite mangager add-on, click tools -> sqlite manager. 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 conte...
...And 3 more matches
Document - Web APIs
esents any web page loaded in the browser and serves as an entry point into the web page's content, which is the dom tree. the dom tree includes elements such as <body> and <table>, among many others. it provides functionality globally to the document, like how to obtain the page's url and create new elements in the document. ...
...bject. document.createrange() creates a range object. document.createtextnode() creates a text node. document.createtouch() creates a touch object. document.createtouchlist() creates a touchlist object. document.createtreewalker() creates a treewalker object. document.enablestylesheetsforset() enables the style sheets for the specified style sheet set. document.exitpointerlock()
release the pointer lock. document.getanimations() returns an array of all animation objects currently in effect, whose target elements are descendants of the document. document.getelementsbyclassname() returns a list of elements with the given class name. document.getelementsbytagname() returns a list of elements with the given tag name. document.getelementsbytagnamens() returns a list of ...
...tagnamens() returns a list of elements with the given tag name and namespace. document.hasstorageaccess() returns a promise that resolves with a boolean value indicating whether the document has access to its first-party storage. document.importnode() returns a clone of a node from an external document. document.normalizedocument() replaces entities, normalizes text nodes, etc. document.
releasecapture()
releases the current mouse capture if it's on an element in this document. document.
releaseevents() see window.
releaseevents(). document.requeststorageaccess() returns a promise that resolves if the access to first-party storage was granted, and rejects if access was denied. document.routeevent() obsolete since gecko 24 see window.routeevent(). document.mozsetimageel...
...And 3 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
lem, and are maybe thinking you've got some extra margin in there or something! there are a few ways of getting around this problem: use flexbox to create the horizontal list of items instead of trying an inline-block solution. this handles everything for you, and is definitely the preferred solution: ul { list-style-type: none; margin: 0; padding: 0; display: flex; } if you need to
rely on inline-block, you could set the font-size of the list to 0. this only works if your blocks are not sized with ems (based on the font-size, so the block size would also end up being 0). rems would be a good choice here: ul { font-size: 0; ... } li { display: inline-block; width: 2rem; height: 2rem; ... } or you could set negative margin on the list items: li { display: inlin...
...veral functions that make it easier to deal with whitespace in the dom: /** * throughout, whitespace is defined as one of the characters * "\t" tab \u0009 * "\n" lf \u000a * "\r" cr \u000d * " " spc \u0020 * * this does not use javascript's "\s" because that includes non-breaking * spaces (and also some other characters). */ /** * determine whether a node's text content is enti
rely whitespace. * * @param nod a node implementing the |characterdata| interface (i.e., * a |text|, |comment|, or |cdatasection| node * @return true if all of the text content of |nod| is whitespace, * otherwise false. */ function is_all_ws( nod ) { // use ecma-262 edition 3 string and regexp features return !(/[^\t\n\r ]/.test(nod.textcontent)); } /** * det...
... * @return true if the node is: * 1) a |text| node that is all whitespace * 2) a |comment| node * and otherwise false. */ function is_ignorable( nod ) { return ( nod.nodetype == 8) || // a comment node ( (nod.nodetype == 3) && is_all_ws(nod) ); // a text node, all ws } /** * version of |previoussibling| that skips nodes that are enti
rely * whitespace or comments. (normally |previoussibling| is a property * of all dom nodes that gives the sibling node, the node that is * a child of the same parent, that occurs immediately before the * reference node.) * * @param sib the reference node. * @return either: * 1) the closest previous sibling to |sib| that is not * ignorable according to |i...
...And 3 more matches
HTMLLinkElement - Web APIs
the htmllinkelement interface represents reference information for external resources and the
relationship of those resources to a document and vice-versa (corresponds to <link> element; not to be confused with <a>, which is represented by htmlancho
relement). this object inherits all of the properties and methods of the htmlelement interface. ...
...nt interface represents reference information for external resources and the
relationship of those resources to a document and vice-versa (corresponds to <link> element; not to be confused with <a>, which is represented by htmlancho
relement). this object inherits all of the properties and methods of the htmlelement interface. ...
... the uri for the target resource. htmllinkelement.hreflang is a domstring representing the language code for the linked resource. htmllinkelement.media is a domstring representing a list of one or more media formats to which the resource applies. htmllinkelement.referrerpolicy is a domstring that reflects the referrerpolicy html attribute indicating which referrer to use. htmllinkelement.
rel is a domstring representing the forward
relationship of the linked resource from the document to the resource. 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. linkstyle.sheet read only returns the stylesheet...
...And 3 more matches
HTMLMediaElement - Web APIs
the htmlmediaelement interface adds to htmlelement the properties and methods needed to support basic media-
related capabilities that are common to audio and video. the htmlvideoelement and htmlaudioelement elements both inherit this interface. ...
... the htmlmediaelement interface adds to htmlelement the properties and methods needed to support basic media-
related capabilities that are common to audio and video. the htmlvideoelement and htmlaudioelement elements both inherit this interface. ...
...currentsrc read only returns a domstring with the absolute url of the chosen media resource. htmlmediaelement.currenttime a double-precision floating-point value indicating the current playback time in seconds; if the media has not started to play and has not been seeked, this value is the media's initial playback time. setting this value seeks the media to the new time. the time is specified
relative to the media's timeline. htmlmediaelement.defaultmuted a boolean that reflects the muted html attribute, which indicates whether the media element's audio output should be muted by default. htmlmediaelement.defaultplaybackrate a double indicating the default playback rate for the media. htmlmediaelement.disableremoteplayback a boolean that sets or returns the remote playback state, ind...
...And 3 more matches
Drag Operations - Web APIs
ry. the first is a reference to an image. this reference will typically be to an <img> element, but it can also be to a <canvas> or any other element. the feedback image will be generated from whatever the image looks like on screen, although for images, they will be drawn at their original size. the second and third arguments to the setdragimage() method are offsets where the image should appear
relative to the mouse pointer. it is also possible to use images and canvases that are not in a document. this technique is useful when drawing custom drag images using the canvas element, as in the following example: function dragwithcustomimage(event) { const canvas = document.createelement("canvas"); canvas.width = canvas.height = 50; const ctx = canvas.getcontext("2d"); ctx.linewidth =...
...image appears centered on the mouse pointer. drag effects when dragging, there are several operations that may be performed. the copy operation is used to indicate that the data being dragged will be copied from its present location to the drop location. the move operation is used to indicate that the data being dragged will be moved, and the link operation is used to indicate that some form of
relationship or connection will be created between the source and drop locations. you can specify which of the three operations are allowed for a drag source by setting the effectallowed property within a dragstart event listener. event.datatransfer.effectallowed = "copy"; in this example, only a copy is allowed. you can combine the values in various ways: none no operation is permitted cop...
...prevents the user from performing a link operation. if you don't change the effectallowed property, then any operation is allowed, just like with the 'all' value. so you don't need to adjust this property unless you want to exclude specific types. during a drag operation, a listener for the dragenter or dragover events can check the effectallowed property to see which operations are permitted. a
related property, dropeffect, should be set within one of these events to specify which single operation should be performed. valid values for dropeffect are none, copy, move, or link. the combination values are not used for this property. with the dragenter and dragover event, the dropeffect property is initialized to the effect that the user is requesting. the user can modify the desired effect by...
...And 3 more matches
Using IndexedDB - Web APIs
enames (the scope, defined as an array of object stores that you want to access) and the mode (readonly or readwrite) for the transaction. the method returns a transaction object containing the idbindex.objectstore method, which you can use to access your object store. by default, where no mode is specified, transactions open in readonly mode. note: as of firefox 40, indexeddb transactions have
relaxed durability guarantees to increase performance (see bug 1112702.) previously in a readwrite transaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk. in firefox 40+ the complete event is fired after the os has been told to write the data but potentially before that data has actually been flushed to disk. the complete event may thus be deliv...
...eed to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. when you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database (an onblocked event is fired until they are closed or
reloaded). here's how it works: var openreq = mozindexeddb.open("mytestdatabase", 2); openreq.onblocked = function(event) { // if some other tab is loaded with the database, then it needs to be closed // before we can proceed. console.log("please close all other tabs with this site open!"); }; openreq.onupgradeneeded = function(event) { // all other databases have been closed. set everythi...
...n usedatabase(db) { // make sure to add a handler to be notified if another page requests a version // change. we must close the database. this allows the other page to upgrade the database. // if you don't do this then the upgrade won't happen until the user closes the tab. db.onversionchange = function(event) { db.close(); console.log("a new version of this page is ready. please
reload or close this tab!"); }; // do stuff with the database. } you should also listen for versionerror errors to handle the situation where already opened apps may initiate code leading to a new attempt to open the database, but using an outdated version. security indexeddb uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typical...
...And 3 more matches
compareVersion - Web APIs
e a plugin as an extension. compareversion compares the version of a file or package with the version of an existing file or package. method of installtrigger object syntax int compareversion ( string registryname, installversion version); int compareversion ( string registryname, string version); int compareversion ( string registryname, int major, int minor, int
release, int build); parameters the compareversion method has the following parameters: registryname the pathname in the client version registry for the component whose version is to be compared. this parameter can be an absolute pathname, such as /royalairways/royalsw or a
relative pathname, such as plugsin/royalairway/royalsw. note that the registry pathname is not the location of the sof...
... returns if the versions are the same or if software installation is not enabled, this method returns 0. if the version of registryname is smaller (earlier) than version, this method returns a negative number. ...
... returns if the versions are the same or if software installation is not enabled, this method returns 0. if the version of registryname is smaller (earlier) than version, this method returns a negative number. otherwise, this method returns a positive number. ...
...And 3 more matches
Intersection Observer API - Web APIs
as the web has matured, the need for this kind of information has grown. ...
...as the web has matured, the need for this kind of information has grown. ...
...as the web has matured, the need for this kind of information has grown. ...
...And 3 more matches
KeyboardEvent.key - Web APIs
haracter key that would result in a character being inserted into possibly an <input>, <textarea> or an element with htmlelement.contenteditable set to true, the beforeinput and input event types are fired in that order. note that some other implementations may fire keypress event if supported. the events will be fired repeatedly while the key is held down. a keyup event is fired once the key is
released. this completes the process. in sequence 1 & 3, the keyboardevent.key attribute is defined and is set appropriately to a value according to the rules defined ealier. keyboardevent sequence example consider the event sequence generated when we interact with the shift and the 2 key using a u.s keyboard layout as compared to when we do so using a uk keyboard layout. try experimenting using...
...ribute is defined and is set appropriately to a value according to the rules defined ealier. keyboardevent sequence example consider the event sequence generated when we interact with the shift and the 2 key using a u.s keyboard layout as compared to when we do so using a uk keyboard layout. try experimenting using the following two test cases: press and hold the shift key, then press 2 and
release it. next,
release the shift key. press and hold the shift key, then press and hold 2.
release the shift key. finally,
release 2. html <div class="fx"> <div> <textarea rows="5" name="test-target" id="test-target"></textarea> <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button> </div> <div class="flex"> <pre id="console-log"></pre> ...
... [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]`); }); textarea.addeventlistener('keyup', (e) => { logmessage(`key "${e.key}"
released [event: keyup]`); }); btnclearconsole.addeventlistener('click', (e) => { let child = consolelog.firstchild; while (child) { consolelog.removechild(child); child = consolelog.firstchild; } }); result note: on browsers that don't fully implement the inputevent interface which is used for the beforeinput and input events, you may get incorrect output on those lines of the log...
...And 3 more matches
KeyboardEvent - Web APIs
n the user had with a key on the keyboard at a low level, providing no contextual meaning to that interaction. when you need to handle text input, use the input event instead. keyboard events may not be fired if the user is using an alternate means of entering text, such as a handwriting system on a tablet or graphics tablet. ...
...ailable. events the following events are based on the keyboardevent type. they can be delivered to any object which implements globaleventhandlers, including element, document, and window. 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. keydown a key has been pressed. keyup a key has been
released. obsolete events keypress a key that normally produces a character value has been pressed. this event was highly device-dependent and is obsolete. you should not use it. usage notes there are three types of keyboard events: keydown, keypress, and keyup. for most keys, gecko dispatches a sequence of key events like this: when the key is first pressed, the keydown event is sent. ...
...er value has been pressed. this event was highly device-dependent and is obsolete. you should not use it. usage notes there are three types of keyboard events: keydown, keypress, and keyup. for most keys, gecko dispatches a sequence of key events like this: when the key is first pressed, the keydown event is sent. if the key is not a modifier key, the keypress event is sent. when the user
releases the key, the keyup event is sent. special cases some keys toggle the state of an indicator light; these include keys such as caps lock, num lock, and scroll lock. on windows and linux, these keys dispatch only the keydown and keyup events. on linux, firefox 12 and earlier also dispatched the keypress event for these keys. however, a limitation of the macos event model causes caps lock...
...And 3 more matches
Pointer events - Web APIs
the pointer. height the height (magnitude on the y axis), in css pixels, of the contact geometry of the pointer. pressure the normalized pressure of the pointer input in the range of 0 to 1, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively. tangentialpressure the normalized tangential pressure of the pointer input (also known as bar
rel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control. tiltx the plane angle (in degrees, in the range of -90 to 90) between the y–z plane and the plane containing both the pointer (e.g. pen stylus) axis and the y axis. tilty the plane angle (in degrees, in the range of -90 to 90) between the x–z plane and the plane containing both the pointer (...
...ointermove fired when a pointer changes coordinates. this event is also used if the change in pointer state can not be reported by other events. pointerup onpointerup fired when a pointer is no longer active buttons state. pointercancel onpointercancel a browser fires this event if it concludes the pointer will no longer be able to generate events (for example the
related device is deactived). pointerout onpointerout fired for several reasons including: pointer is moved out of the hit test boundaries of an element; firing the pointerup event for a device that does not support hover (see pointerup); after firing the pointercancel event (see pointercancel); when a pen stylus leaves the hover range detectable by the digitizer. pointerleave...
...interleave onpointerleave fired when a pointer is moved out of the hit test boundaries of an element. for pen devices, this event is fired when the stylus leaves the hover range detectable by the digitizer. gotpointercapture ongotpointercapture fired when an element receives pointer capture. lostpointercapture onlostpointercapture fired after pointer capture is
released for a pointer. element extensions there are three extensions to the element interface: setpointercapture() designates a specific element as the capture target of future pointer events.
releasepointercapture() this method
releases (stops) pointer capture that was previously set for a specific pointer event. navigator extension the navigator.maxtouchpoints property is used to ...
...And 3 more matches
RTCStatsType - Web APIs
the rtcstatstype enumerated type (enum) is a set of strings which define the type of statistics reported in a record found in the rtcstatsreport object. this type determines which of the rtcstats-based dictionaries the record is based upon. values candidate-pair an rtcicecandidatepairstats object providing statistics
related to an rtcicetransport. candidate pairs other than the currently active pair for the transport are deleted when the rtcpeerconnection changes its rtcpeerconnection.icegatheringstate to new during an ice restart. the active candidate pair is deleted after the transport switches to another candidate pair; this change cannot be detected otherwise. certificate an rtccertificatestats object providing statistics
related to a certificate being used by an rtcicetransport. ...
...te pair; this change cannot be detected otherwise. certificate an rtccertificatestats object providing statistics
related to a certificate being used by an rtcicetransport. codec an rtccodecstats object containing statistics about a codec currently being used by rtp streams to send or receive data for the rtcpeerconnection. csrc an rtccontributingsourcestats object which contains statistics
related to a contributing source (csrc) that contributed to an inbound rtp stream. data-channel an rtcdatachannelstats object which contains statistics about each rtcdatachannel on the connection. ...
...this report isn't available if there are no connected peers. ...
...And 3 more matches
Sensor APIs - Web APIs
ice' }); accelerometer.addeventlistener('error', event => { // handle runtime errors. if (event.error.name === 'notallowederror') { // branch to code for requesting permission. } 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. if (error.name === 'securityerror') { // see the note above about feature policy. console.log('sensor construction was blocked by a feature policy.'); } else if (error.name === 'referenceerror') { console.log('sensor is not supported by the user agent.'); ...
...tive. sensor permissions sensor permission/feature policy name absoluteorientationsensor 'accelerometer', 'gyroscope', and 'magnetometer' accelerometer 'accelerometer' ambientlightsensor 'ambient-light-sensor' gyroscope 'gyroscope' linearaccelerationsensor 'accelerometer' magnetometer 'magnetometer'
relativeorientationsensor 'accelerometer', and 'gyroscope' readings sensor readings are received through the sensor.onreading callback which is inherited by all sensor types. reading frequency is decided by you, accomplished with an option passed to a sensor's constructor. the option is a number that specifies the number of readings per second. a whole number or decimal may be used, the la...
... accelerometersecure context provides the acceleration applied to the device along all three axes. ambientlightsensorsecure context returns the current light level or illuminance of the ambient light around the hosting device. gyroscopesecure context provides the angular velocity of the device along all three axes. linearaccelerationsensorsec...
...And 3 more matches
Signaling and video calling - Web APIs
the sdp candidate string, describing the proposed connection method. you typically don't need to look at the contents of this string. all your code needs to do is route it through to the remote peer using the signaling server. each ice message suggests a communication protocol (tcp or udp), ip address, port number, connection type (for example, whether the specified ip is the peer itself or a
relay server), along with other information needed to link the two computers together. this includes nat or other networking complexity. note: the important thing to note is this: the only thing your code is responsible for during ice negotiation is accepting outgoing candidates from the ice layer and sending them across the signaling connection to the other peer when your onicecandidate handler is...
...pting outgoing candidates from the ice layer and sending them across the signaling connection to the other peer when your onicecandidate handler is executed, and receiving ice candidate messages from the signaling server (when the "new-ice-candidate" message is received) and delivering them to your ice layer by calling rtcpeerconnection.addicecandidate(). that's it. the contents of the sdp are ir
relevant to you in essentially all cases. avoid the temptation to try to make it more complicated than that until you really know what you're doing. that way lies madness. all your signaling server now needs to do is send the messages it's asked to. your workflow may also demand login/authentication functionality, but such details will vary. note: the onicecandidate event and createanswer() promi...
...cam. note: we could restrict the set of permitted media inputs to a specific device or set of devices by calling navigator.mediadevices.enumeratedevices() to get a list of devices, filtering the resulting list based on our desired criteria, then using the selected devices' deviceid values in the deviceid field of the the mediaconstraints object passed into getusermedia(). in practice, this is ra
rely if ever necessary, since most of that work is done for you by getusermedia(). we attach the incoming stream to the local preview <video> element by setting the element's srcobject property. since the element is configured to automatically play incoming video, the stream begins playing in our local preview box. we then iterate over the tracks in the stream, calling addtrack() to add each track...
...And 3 more matches
WebRTC API - Web APIs
tions and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary. the set of standards that comprise webrtc makes it possible to share data and perform teleconferencing peer-to-peer, without requiring that the user installs plug-ins or any other third-party software. webrtc consists of several inter
related apis and protocols which work together to achieve this. the documentation you'll find here will help you understand the fundamentals of webrtc, how to set up and use both data and media connections, and more. interoperability because implementations of webrtc are still evolving, and because each browser has different levels of support for codecs and webrtc features, you should strongly cons...
... be used to send and receive both live media or stored media information (such as a streamed movie). you can also use the connection between two peers to exchange arbitrary binary data using the rtcdatachannel interface. this can be used for back-channel information, metadata exchange, game status packets, file transfers, or even as a primary channel for data transfer. more details and links to
relevant guides and tutorials needed webrtc reference because webrtc provides interfaces that work together to accomplish a variety of tasks, we have divided up the reference by category. please see the sidebar for an alphabetical list. connection setup and management these interfaces, dictionaries, and types are used to set up, open, and manage webrtc connections. included are interfaces represe...
...e report can be obtained by calling rtcpeerconnection.getstats(). details about using webrtc statistics can be found in webrtc statistics api. rtcicecandidate represents a candidate interactive connectivity establishment (ice) server for establishing an rtcpeerconnection. rtcicetransport represents information about an ice transport. rtcpeerconnectioniceevent represents events that occur in
relation to ice candidates with the target, usually an rtcpeerconnection. only one event is of this type: icecandidate. rtcrtpsender manages the encoding and transmission of data for a mediastreamtrack on an rtcpeerconnection. rtcrtpreceiver manages the reception and decoding of data for a mediastreamtrack on an rtcpeerconnection. rtctrackevent the interface used to represent a track event, whi...
...And 3 more matches
WebRTC Statistics API - Web APIs
ut; }); } when the promise returned by getstats() is fulfilled, the resolution handler receives as input an rtcstatsreport object containing the statistics information. this object contains a map of named dictionaries based on rtcstats and its affiliated types. this example specifically looks for the report whose type is inbound-rtp and whose kind is video. this way, we look only at the video-
related statistics for the local rtcrtpreceiver responsible for receiving the streamed media. commonly used statistics reference the rtcstatsreport object contains a map of named objects based one of the rtcstats dictionary's subclasses. upon looking up a statistic category by name, you get an object containing the corresponding data. the table below shows the statistic categories and the correspo...
... codec statistics about a specific codec being used by streams being sent or received by this connection. rtccodecstats rtcstats csrc statistics for a single contributing source (csrc) that contributed to one of the connection's inbound rtp streams. rtcrtpcontributingsourcestats rtcstats data-channel statistics
related to one rtcdatachannel on the connection. rtcdatachannelstats rtcstats ice-server statistics about the connection to an ice server (stun or turn. rtciceserverstats rtcstats inbound-rtp statistics describing the state of one of the connection's inbound data streams. ...
... rtcoutboundrtpstreamstats rtcsentrtpstreamstats rtcrtpstreamstats rtcstats peer-connection statistics describing the state of the rtcpeerconnection. rtcpeerconnectionstats rtcstats receiver statistics
related to a specific rtcrtpreceiver and the media associated with that receiver. the specific type of object representing the statistics depends on the media kind. rtcaudioreceiverstats or rtcvideoreceiverstats rtcaudiohandlerstats or rtcvideohandlerstats rtcmediahandlerstats rtcstats ...
...And 3 more matches
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
umes that you are familiar with the concepts introduced in geometry and reference spaces in webxr: that is, the basics of 3d coordinate systems, as well as webxr spaces, reference spaces, and how reference spaces are used to create local coordinate systems for individual objects or movable components within a scene. representing a position using a reference space as covered in defining spatial
relationships with reference spaces in geometry and reference spaces in webxr, reference spaces establish a local coordinate system which is offset from another coordinate system that is itself defined by some other space. thus, a reference space can be used to define the position and orientation of a point and by extension the entire object for which that point is the origin. while this is a little ...
... the controller at which the ray is emitted, and is oriented so that -z extends in the direction of the target it's pointing at. because each of these is defined using a reference space as its foundation, the webxr device api can easily be used to convert among the coordinate systems, perform operations affecting these spaces and their corresponding objects, and so forth. describing a position
relative to a space there are two scenarios in which you may need to describe a position and/or orientation
relative to a space. the first is described above: applying a reference space to an offset (or vice-versa, since the result is the same) to determine the transform matrix that represents the resulting location in the space's coordinate system. poses once your reference space or spaces are e...
...o a space. the first is described above: applying a reference space to an offset (or vice-versa, since the result is the same) to determine the transform matrix that represents the resulting location in the space's coordinate system. poses once your reference space or spaces are established for the various key objects in the scene, you will have times when you need to describe another position
relative to the origin of a particular reference space. this is done using poses. a pose, simply put, describes a position and orientation
relative to the origin of the reference space from which it was created. in webxr, a pose is represented by an xrpose object, whose transform property is an xrrigidtransform defining the transform matrix that, applied to any coordinate, vector, or matrix in the o...
...And 3 more matches
Starting up and shutting down a WebXR session - Web APIs
port for the webxr apis. if the browser supports the older webvr api, that is used. otherwise, the polyfill falls back to an implementation which uses google's cardboard vr api. the polyfill is maintained alongside the specification, and is kept up to date with the specification. additionally, it is updated to maintain compatibility with browsers as their support for webxr and other technologies
related to it and to the implementation of the polyfill change over time. be sure to read the readme carefully; the polyfill comes in several versions depending on what degree of compatibility with newer javascript features your target browsers include. webxr api emulator extension the mozilla webxr team has created a webxr api emulator browser extension, compatible with both firefox and chrome, w...
...ou perform some basic testing before taking your code to a real device. be aware, however, that the emulator does not yet completely emulate all of the webxr api, so you may run into problems you're not expecting. again, carefully read the readme file and make sure you're aware of the limitations before you begin. important: you should always test your code on actual ar and/or vr hardware before
releasing or shipping a product! emulated, simulated, or polyfilled environments are not an adequate substitute for actual testing on physical devices. getting the extension download the webxr api emulator for your supported browser below: google chrome mozilla firefox the source code for the extension is also available on github. emulator issues and notes while this isn't the place for a f...
...) through the webxr ar module, which has is approaching a stable state. documentation for ar is forthcoming shortly here on mdn. other improvements include updating the emulator to rename the xr interface to xrsystem, introduce support for squeeze (grip) input sources, and add support for the xrinputsource property profiles. context requirements a webxr compatible environment starts with a secu
rely-loaded document. your document needs to either have been loaded from the local drive (such as by using an url such as http://localhost/...), or using https when loading the page. the javascript code must, likewise, have been loaded secu
rely. if the document wasn't loaded secu
rely, you won't get very far. the navigator.xr property doesn't even exist if the document wasn't loaded secu
rely. this m...
...And 3 more matches
WebXR Device API - Web APIs
ardware. once an xrsession is obtained from navigator.xr.requestsession(), the session can be used to check the position and orientation of the viewer, query the device for environment information, and present the virtual or augmented world to the user. xrspace xrspace is an opaque base class on which all virtual coordinate system interfaces are based. positions in webxr are always expressed in
relation to a particular xrspace at the time at which a particular xframe takes place. the space's coordinate system has its origin at the a given physical position. xrreferencespace a subclass of xrspace which is used to identify a spatial
relationship in
relation to the user's physical environment. the xrreferencespace coordinate system is expected to remain unchanged through the lifespan of the ...
...ly presumed to be located at or near the center of the room or surface. xrview represents a single view into the xr scene for a particular frame. each xrview corresponds to the video display surface used to present the scene to the user. for example, a given xr device might have two views: one for the left eye and one for the right. each view has an offset used to shift the position of the view
relative to the camera, in order to allow for creating stereographic effects. xrviewport describes a viewport. a viewport is a rectangular portion of a graphic surface. in webxr, a viewport represents the area of a drawing surface corresponding to a particular xrview, such as the portion of the webgl framebuffer used to render one of the two eyes' perspectives on the scene. xrrigidtransform a tra...
...bxr, a viewport represents the area of a drawing surface corresponding to a particular xrview, such as the portion of the webgl framebuffer used to render one of the two eyes' perspectives on the scene. xrrigidtransform a transform defined using a position and orientation in the virtual space's coordinate system as described by the xrspace. xrpose describes a position and orientation in space
relative to an xrspace. xrviewerpose based on xrpose, xrviewerpose specifies the state of a viewer of the webxr scene as indicated by the xr device. included is an array of xrview objects, each representing one perspective on the scene. for example, it takes two views to create the stereoscopic view as perceived by human vision—one for the left eye and a second for the right eye. one view is offs...
...And 3 more matches
Web audio spatialization basics - Web APIs
), and in this demo, we can move and rotate it with the provided controls. when we move the boombox, the sound it produces changes accordingly, panning as it moves to the left or right of the room, or becoming quieter as it is moved away from the user or is rotated so the speakers are facing away from them, etc. this is done by setting the different properties of the pannernode object instance in
relation to that movement, to emulate spacialization. note: the experience is much better if you use headphones, or have some kind of surround sound system to plug your computer into. creating an audio listener so let's begin! the baseaudiocontext (the interface the audiocontext is extended from) has a listener property that returns an audiolistener object. this represents the listener of the sc...
... into. creating an audio listener so let's begin! the baseaudiocontext (the interface the audiocontext is extended from) has a listener property that returns an audiolistener object. this represents the listener of the scene, usually your user. you can define where they are in space and in which direction they are facing. they remain static. the pannernode can then calculate its sound position
relative to the position of the listener. let's create our context and listener and set the listener's position to emulate a person looking into our room: const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); const listener = audioctx.listener; const posx = window.innerwidth/2; const posy = window.innerheight/2; const posz = 300; listener.posi...
...ection. creating a panner node let's create our pannernode. this has a whole bunch of properties associated with it. let's take a look at each of them: to start we can set the panningmodel. this is the spacialization algorithm that's used to position the audio in 3d space. we can set this to: equalpower — the default and the general way panning is figured out hrtf — this stands for 'head-
related transfer function' and looks to take into account the human head when figuring out where the sound is. pretty clever stuff. let's use the hrtf model! const pannermodel = 'hrtf'; the coneinnerangle and coneouterangle properties specify where the volume emanates from. by default, both are 360 degrees. our boombox speakers will have smaller cones, which we can define. the inner cone is where...
...And 3 more matches
Web Locks API - Web APIs
while held, no other script executing in the same origin can acquire the same lock, which allows a web app running in multiple tabs or workers to coordinate work and the use of resources. web locks concepts and usage a lock is an abstract concept representing some potentially shared resource, identified by a name chosen by the web app. ...
...p. for example, if a web app running in multiple tabs wants to ensure that only one tab is syncing data between the network and indexed db, each tab could try to acquire a "my_net_db_sync" lock, but only one tab will succeed (the leader election pattern.) the api is used as follows: the lock is requested. work is done while holding the lock in an asynchronous task. the lock is automatically
released when the task completes. navigator.locks.request('my_resource', async lock => { // the lock has been acquired. await do_something(); await do_something_else(); // now the lock will be
released. }); while a lock is held, requests for the same lock from this execution context, or from other tabs/workers, will be queued. the first queued request will be granted only when the lock is...
...ased when the task completes. navigator.locks.request('my_resource', async lock => { // the lock has been acquired. await do_something(); await do_something_else(); // now the lock will be
released. }); while a lock is held, requests for the same lock from this execution context, or from other tabs/workers, will be queued. the first queued request will be granted only when the lock is
released. the api provides optional functionality that may be used as needed, including: returning values from the asynchronous task shared and exclusive lock modes conditional acquisition diagnostics to query the state of locks in an origin an escape hatch to protect against deadlocks locks are scoped to origins; the locks acquired by a tab from https://example.com have no effect on the lo...
...And 3 more matches
ARIA live regions - Accessibility
while these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. aria live regions fill this gap and provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies. note: assistive technologies will announce dynamic changes in the content of a live region. ...
...ill announce dynamic changes in the content of a live region. including an aria-live attribute or a specialized live region role (such as role="alert") on the element you want to announce changes to works as long as you add the attribute before the changes occur — either in the original markup, or dynamically using javascript. simple live regions dynamic content which updates without a page
reload is generally either a region or a widget. simple content changes which are not interactive should be marked as live regions. below is a list of each
related aria live region property with a description. aria-live: the aria-live=politeness_setting is used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off, polite or assertive. t...
... for microsoft internet explorer and mozilla firefox". nvda added some basic support for live regions for mozilla firefox back in 2008 and was improved in 2010 and 2014. in 2015, basic support was also added for internet explorer (mshtml). the paciello group has some information about the state of the support of live regions (2014). paul j. adam has researched the support of aria-atomic and aria-
relevant in particular. aria-atomic: the aria-atomic=boolean is used to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes. the possible settings are: false or true. the default setting is false. aria-
relevant: the aria-
relevant=[list_of_changes] is used to set what types of changes are
relevant to a live region. the pos...
...And 3 more matches
:has() - CSS: Cascading Style Sheets
the :has() css pseudo-class represents an element if any of the selectors passed as parameters (
relative to the :scope of the given element) match at least one element. ...
... the :has() css pseudo-class represents an element if any of the selectors passed as parameters (
relative to the :scope of the given element) match at least one element. ...
...:has() css pseudo-class represents an element if any of the selectors passed as parameters (
relative to the :scope of the given element) match at least one element. ...
...And 3 more matches
Alternative style sheets - CSS: Cascading Style Sheets
le submenu. internet explorer also supports this feature (beginning with ie 8), also accessed from view > page style. chrome requires an extension to use the feature (as of version 48). the web page can also provide its own user interface to let the user switch styles. ...
...d from view > page style. chrome requires an extension to use the feature (as of version 48). the web page can also provide its own user interface to let the user switch styles. an example: specifying the alternative stylesheets the alternate stylesheets are commonly specified using a <link> element with
rel="alternate stylesheet" and title="..." attributes. ...
...e the feature (as of version 48). the web page can also provide its own user interface to let the user switch styles. an example: specifying the alternative stylesheets the alternate stylesheets are commonly specified using a <link> element with
rel="alternate stylesheet" and title="..." attributes. 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. when the user selects a different style,...
...And 3 more matches
Border-image generator - CSS: Cascading Style Sheets
*********************************************/ /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-size: 12px; background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); background-position: right center; background-repeat: no-repeat; background-color: #359740; 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 { height: inherit; padding: 0 0.75em; color: #fff; line-height: 2em; } /* drop...
...repeat; background-position: center center; } #remote-url { width: 200px; height: 23px; margin: 10px; padding: 0 5px; border: 1px solid #379b4a; border-radius: 2px; float: left; transition: width 0.5s; } #remote-url:focus { box-shadow: 0px 0px 3px -1px #379b4a; /*#68ace8; */ border-color: rgba(55, 155, 74, 0.5); width: 450px; } /* * visible area */ #preview_section { position:
relative; min-height: 400px; } /* image control */ #subject { width: 300px; height: 300px; background-repeat: no-repeat; background-size: 100%; background-color: #fff; border: 1px solid #ccc; position: absolute; z-index: 10; top: 15%; left: 10%; box-shadow: 0 0 3px 0 #bababa; transition-property: width, height; transition-duration: 0.1s; } #subject .guideline { background-color: r...
...ound-color: #f00; } #subject .guideline[data-active] { background-color: #f00; z-index: 10; } #subject .guideline[data-axis='x'] { width: 1px; height: 100%; top: -1px; } #subject .guideline[data-axis='y'] { width: 100%; height: 1px; left: -1px; } #subject .guideline[data-axis='x']:hover { cursor: w-resize; } #subject .guideline[data-axis='y']:hover { cursor: s-resize; } #subject .
relative { position:
relative; font-size: 12px; } #subject .tooltip, #subject .tooltip2 { width: 40px; height: 20px; line-height: 20px; font-size: 12px; text-align: center; position: absolute; opacity: 0.5; transition: opacity 0.25s; } #subject .tooltip { background: #eee; border-radius: 2px; border: 1px solid #ccc; } #subject .tooltip2{ color: #555; } #subject [data-active] > * { ...
...And 3 more matches
background-position - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...t 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* global values */ background-position: inherit; background-position: initial; background-position: unset; the background-position property is specified as one or more <position> values, separated by commas. values <position> a <position>. a position defines an x/y coordinate, to place an item
relative to the edges of an element's box. it can be defined using one to four values. if two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. if only one value is specified, the second value is assumed to be center. if three or four values are used, the length-percentage values are offsets for the preceding keyword value...
...for the preceding keyword value(s). 1-value syntax: the value may be: the keyword value center, which centers the image. one of the keyword values top, left, bottom, right. this specifies an edge against which to place the item. the other dimension is then set to 50%, so the item is placed in the middle of the edge specified. a <length> or <percentage>. this specifies the x coordinate
relative to the left edge, with the y coordinate set to 50%. 2-value syntax: one value defines x and the other defines y. each value may be: one of the keyword values top, left, bottom, right. if left or right are given here, then this defines x and the other given value defines y. if top or bottom are given, then this defines y and the other value defines x. a <length> or <percentage>. if...
...And 3 more matches
left - CSS: Cascading Style Sheets
syntax /* <length> values */ left: 3px; left: 2.4em; /* <percentage>s of the width of the containing block */ left: 10%; /* keyword value */ left: auto; /* global values */ left: inherit; left: initial; left: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the left edge of the containing block. for
relatively positioned elements, the distance that the element is moved to the right of its normal position. <percentage> a <percentage> of the containing block's width. auto specifies that: for absolutely positioned elements, the position of the element is based on the right property, while width: auto is treated as a width based on the content; or if right is also auto, the element is po...
... normal position. <percentage> a <percentage> of the containing block's width. auto specifies that: for absolutely positioned elements, the position of the element is based on the right property, while width: auto is treated as a width based on the content; or if right is also auto, the element is positioned where it should horizontally be positioned if it were a static element. for
relatively positioned elements, the distance of the element from its normal position is based on the right property; or if right is also auto, the element is not moved horizontally at all. inherit specifies that the value is the same as the computed value from its parent element (which might not be its containing block). this computed value is then handled as if it were a <length>, <percentage>...
... it were a <length>, <percentage>, or the auto keyword. description the effect of left depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the left property specifies the distance between the element's left edge and the left edge of its containing block. (the containing block is the ancestor to which the element is
relatively positioned.) when position is set to
relative, the left property specifies the distance the element's left edge is moved to the right from its normal position. when position is set to sticky, the left property is used to compute the sticky-constraint rectangle. when position is set to static, the left property has no effect. when both left and right are defined, and width constraints ...
...And 3 more matches
right - CSS: Cascading Style Sheets
/* <length> values */ right: 3px; right: 2.4em; /* <percentage>s of the width of the containing block */ right: 10%; /* keyword value */ right: auto; /* global values */ right: inherit; right: initial; right: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the right edge of the containing block. for
relatively positioned elements, the distance that the element is moved to the left of its normal position. <percentage> a <percentage> of the containing block's width. auto specifies that: for absolutely positioned elements, the position of the element is based on the left property, while width: auto is treated as a width based on the content; or if left is also auto, the element is posit...
...ts normal position. <percentage> a <percentage> of the containing block's width. auto specifies that: for absolutely positioned elements, the position of the element is based on the left property, while width: auto is treated as a width based on the content; or if left is also auto, the element is positioned where it should horizontally be positioned if it were a static element. for
relatively positioned elements, the distance of the element from its normal position is based on the left property; or if left is also auto, the element is not moved horizontally at all. inherit specifies that the value is the same as the computed value from its parent element (which might not be its containing block). this computed value is then handled as if it were a <length>, <percentage>, ...
...mputed value is then handled as if it were a <length>, <percentage>, or the auto keyword. description the effect of right depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the right property specifies the distance between the element's right edge and the right edge of its containing block. when position is set to
relative, the right property specifies the distance the element's right edge is moved to the left from its normal position. when position is set to sticky, the right property is used to compute the sticky-constraint rectangle. when position is set to static, the right property has no effect. when both left and right are defined, if not prevented from doing so by other properties, the element will...
...And 3 more matches
Using HTML sections and outlines - Developer guides
gned to communicate structural meaning to browsers and other technologies interpreting the document on behalf of users, such as screen readers and voice assistants. semantic sectioning elements clarify the larger-scale structures within a document. they are intended to enhance the limited semantics of earlier versions of html, which included only the <div> tag as a generic mechanism for grouping
related content. for example, <div class="navigation"> does not suggest any meaning about its content to a browser; only a human reading the html source can divine the meaning of a class like navigation. by contrast, the <nav> sectioning element more clearly describes to browsers and other devices the content contained: links or other navigational structures to help users move through and understand ...
...tructures to help users move through and understand where they are in a site's or page's content. new semantic elements were added to html5 to improve and clarify the sectioning of websites into meaningful areas of content. it is important for developers to use these semantic elements in line with their intended purposes. many accessibility tools as well as reader views provided by some browsers
rely on semantic sectioning elements. so don't simply swap out an existing tangle of <div> elements for a bunch of <section> elements. section elements in html5 html navigational element (<nav>) defines a section that contains navigation links that appear often on a site. you can have primary and secondary menus, but you cannot nest a <nav> element inside another <nav> element. html article elem...
...ns navigation links that appear often on a site. you can have primary and secondary menus, but you cannot nest a <nav> element inside another <nav> element. html article element (<article>) defines a piece of self-contained content. it does not refer to the main content alone and can be used for comments and widgets. html section element (<section>) defines a section of a document to indicate a
related grouping of semantic meaning. it makes sense to use the section element to provide extra context for the parent element. html aside element (<aside>) defines a section that, though
related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. the aside element has its own outline, but doesn't belong to the main one. other semantic html elements ...
...And 3 more matches
Writing forward-compatible websites - Developer guides
this is especially important for intranets and other non-public websites; if we can't see your code, we can't see that it broke. it's not always possible to follow all of these, but following as many of them as possible will help future-proof your website. ...
...ve in ecmascript, when used on the file level, applies to everything in the file. so appending a script that depends on non-strict-mode behavior to a strict-mode script will cause things to break. ask the authors of any javascript libraries you use to also follow these guidelines suggest to the developers of your favorite libraries that they follow these guidelines too. if they don't, you can't
rely on that library not breaking in the future. unfortunately, libraries are common transgressors of these guidelines. sniffing sniff for specific features if you plan to use some feature, use object-detection to sniff for that exact feature, if possible. as a simple example, don't assume that any browser in which "filter" in body.style tests true must be microsoft internet explorer and therefor...
...ain features your default code path uses, it's ok to add hacks that are targeted to old versions of particular browsers by sniffing for those old browser versions. for the purpose of this piece of advice, "current" means the most recent version of a browser you have tested. for example, if you have tested that your default code path runs properly in firefox aurora but firefox beta and the latest
release have a bug that make your default code path fail, it is ok to treat the firefox version number that is in aurora at the moment of testing as "current", and consider the beta version as a "past" version even though it hasn't been
released to the general public yet. don't unnecessarily create separate codepaths for different browsers don't go out of your way to run different code based on eit...
...And 3 more matches
HTML attribute reference - HTML: Hypertext Markup Language
page load. cite <blockquote>, <del>, <ins>, <q> contains a uri which points to the source of the quote or change. class global attribute often used with css to style elements with common properties. code <applet> specifies the url of the applet's class file to be loaded and executed. codebase <applet> this attribute gives the absolute or
relative url of the directory where applets' .class files referenced by the code attribute are stored. color <basefont>, <font>, <hr> this attribute sets the text color using either a named color or a color specified in the hexadecimal #rrggbb format. note: this is a legacy attribute. please use the css color property instead. cols <textarea> defi...
...ink> specifies the language of the linked resource. http-equiv <meta> defines a pragma directive. icon <command> specifies a picture which represents the command. id global attribute often used with css to style a specific element. the value of this attribute must be unique. importance <iframe>, <img>, <link>, <script> indicates the
relative fetch priority for the resource. integrity <link>, <script> specifies a subresource integrity value that allows browsers to verify what they fetch. intrinsicsize <img> this attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. inputmode <textarea>, contenteditab...
... list of pre-defined options to suggest to the user. loop <audio>, <bgsound>, <marquee>, <video> indicates whether the media should start playing from the start when it's finished. low <meter> indicates the upper bound of the lower range. manifest <html> specifies the url of the document's cache manifest. note: this attribute is obsolete, use <link
rel="manifest"> instead. max <input>, <meter>, <progress> indicates the maximum value allowed. maxlength <input>, <textarea> defines the maximum number of characters allowed in the element. minlength <input>, <textarea> defines the minimum number of characters allowed in the element. media <a>, <area>, <link>, <source>, <style> specifies...
...And 3 more matches
<input type="tel"> - HTML: Hypertext Markup Language
ote: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. size the size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be
relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use). this does not set a limit on how many characters the user can enter into the field. it only specifies approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribut...
...-all client-side validation solution for phone numbers. so what can we do? let's consider some options. important: html form validation is not a substitute for server-side scripts that ensure the entered data is in the proper format before it is allowed into the database. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely. it's also possible for someone to simply bypass your html enti
rely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database. making telephone numbers required you can make it so that an empty i...
...tml: <form> <div> <label for="telno">enter a telephone number (required): </label> <input id="telno" name="telno" type="tel" required> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> and let's include the following css to highlight valid entries with a checkmark and invalid entries with a cross: div { margin-bottom: 10px; position:
relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } the output looks like this: pattern validation if you want to further restrict entered nu...
...And 3 more matches
<input type="time"> - HTML: Hypertext Markup Language
the same number of characters long. you'll have to resort to css for sizing needs. using the step attribute you can use the step attribute to vary the amount of time jumped whenever the time is incremented or decremented (for example, so the time moves by 10 minutes at a time when clicking the little arrow widgets). this property has some strange effects across browsers, so is not completely
reliable. it takes an integer value that equates to the number of seconds you want to increment by; the default value is 60 seconds, or one minute. if you specify a value of less than 60 seconds (1 minute), the time input will show a seconds input area alongside the hours and minutes: <form> <label for="appt-time">choose an appointment time: </label> <input id="appt-time" type="time" name="app...
...n edge. using step seems to cause validation to not work properly (as seen in the next section). validation by default, <input type="time"> does not apply any validation to entered values, other than the user agent's interface generally not allowing you to enter anything other than a time value. this is helpful (assuming the time input is fully supported by the user agent), but you can't enti
rely
rely on the value to be a proper time string, since it might be an empty string (""), which is allowed. it's also possible for the value to look roughly like a valid time but not be correct, such as 25:05. setting maximum and minimum times you can use the min and max attributes to restrict the valid times that can be chosen by the user. in the following example we are setting a minimum time of...
...css used in the above example. here we make use of the :valid and :invalid css properties to style the input based on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. ...
...And 3 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
o show on the media element whenever the browser shows its own set of controls (e.g. when the controls attribute is specified). the allowed values are nodownload, nofullscreen and noremoteplayback. use the disablepictureinpicture attribute if you want to disable the picture-in-picture mode (and the control). crossorigin this enumerated attribute indicates whether to use cors to fetch the
related image. cors-enabled resources can be reused in the <canvas> element without being tainted. the allowed values are: anonymous sends a cross-origin request without a credential. in other words, it sends the origin: http header without a cookie, x.509 certificate, or performing http basic authentication. if the server does not give credentials to the origin site (by not setting the access-...
...d to determine the beginning point of the media timeline's reference frame. disablepictureinpicture prevents the browser from suggesting a picture-in-picture context menu or to request picture-in-picture automatically in some cases. disableremoteplayback a boolean attribute used to disable the capability of remote playback in devices that are attached using wired (hdmi, dvi, etc.) and wi
reless technologies (miracast, chromecast, dlna, airplay, etc). in safari, you can use x-webkit-airplay="deny" as a fallback. duration read only a double-precision floating-point value which indicates the duration (total length) of the media in seconds, on the media's timeline. if no media is present on the element, or the media is not valid, the returned value is nan. if the media has no known...
...video is to be played "inline", that is within the element's playback area. note that the absence of this attribute does not imply that the video will always be played in fullscreen. poster a url for an image to be shown while the video is downloading. if this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame. p
reload this enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played. it may have one of the following values: none: indicates that the video should not be p
reloaded. metadata: indicates that only video metadata (e.g. length) is fetched. auto: indicate...
...And 3 more matches
Evolution of HTTP - HTTP
50 gmt server: apache (image content of 3077 bytes) http/1.1 was first published as rfc 2068 in january 1997. ...
...lished in june 2014 in prevision of the
release of http/2, this protocol has been extremely stable over more than 15 years. using http for secure transmissions the largest change that happened to http was done as early as end of 1994. instead of sending http over a basic tcp/ip stack, netscape communications created an additional encrypted transmission layer on top of it: ssl. ssl 1.0 was never
released outside the company, but ssl 2.0 and its successor ssl 3.0 allowed for the creation of e-commerce web sites by encrypting and guaranteeing the authenticity of the messages exchanged between the server and client. ssl was put on the standards track and eventually became tls, with versions 1.0, 1.1, 1.2, and 1.3 appearing successfully to close vulnerabilities. during the same time, the need f...
...ssl 3.0 allowed for the creation of e-commerce web sites by encrypting and guaranteeing the authenticity of the messages exchanged between the server and client. ssl was put on the standards track and eventually became tls, with versions 1.0, 1.1, 1.2, and 1.3 appearing successfully to close vulnerabilities. during the same time, the need for an encrypted transport layer raised: the web left the
relative trustiness of a mostly academic network, to a jungle where advertisers, random individuals or criminals compete to get as much private information about people, try to impersonate them or even to replace data transmitted by altered ones. as the applications built over http became more and more powerful, having access to more and more private information like address books, e-mail, or the geo...
...And 3 more matches
HTTP caching - HTTP
inds of caches: these can be grouped into two main categories: private or shared caches. a shared cache is a cache that stores responses for reuse by more than one user. a private cache is dedicated to a single user. this page will mostly talk about browser and proxy caches, but there are also gateway caches, cdn, reverse proxy caches and load balancers that are deployed on web servers for better
reliability, performance and scaling of web sites and web applications. private browser caches a private cache is dedicated to a single user. you might have seen "caching" in your browser's settings already. a browser cache holds all documents downloaded via http by the user. this cache is used to make visited documents available for back/forward navigation, saving, viewing-as-source, etc. withou...
...ses. use this header to define your caching policies with the variety of directives it provides. no caching the cache should not store anything about the client request or server response. a request is sent to the server and a full response is downloaded each and every time. cache-control: no-store cache but revalidate a cache will send the request to the origin server for validation before
releasing a cached copy. cache-control: no-cache private and public caches the "public" directive indicates that the response may be cached by any cache. this can be useful if pages with http authentication, or response status codes that aren't normally cacheable, should now be cached. on the other hand, "private" indicates that the response is intended for a single user only and must not be stor...
...ate" indicates that the response is intended for a single user only and must not be stored by a shared cache. a private browser cache may store the response in this case. cache-control: private cache-control: public expiration the most important directive here is "max-age=<seconds>" which is the maximum amount of time a resource will be considered fresh. contrary to expires, this directive is
relative to the time of the request. for the files in the application that will not change, you can usually add aggressive caching. this includes static files such as images, css files and javascript files, for example. for more details, see also the freshness section below. cache-control: max-age=31536000 validation when using the "must-revalidate" directive, the cache must verify the status of ...
...And 3 more matches
Link - HTTP
ng one or more links in http headers. it is semantically equivalent to the html <link> element. syntax link: < uri-reference >; param1=value1; param2="value2" <uri-reference> the uri reference, must be enclosed between < and >. parameters the link header contains parameters, which are separated with ; and are equivalent to attributes of the <link> element. ...
... html <link> element. syntax link: < uri-reference >; param1=value1; param2="value2" <uri-reference> the uri reference, must be enclosed between < and >. parameters the link header contains parameters, which are separated with ; and are equivalent to attributes of the <link> element. ...
...ference >; param1=value1; param2="value2" <uri-reference> the uri reference, must be enclosed between < and >. parameters the link header contains parameters, which are separated with ; and are equivalent to attributes of the <link> element. ...
...And 3 more matches
WebAssembly.Instance - JavaScript
efox for androidopera for androidsafari on iossamsung internetnode.jsinstancechrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0instance() constructorchrome full support 5...
... full support 8.0.0instance() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
...And 3 more matches
Strict mode - JavaScript
e aware of it, just in case. javascript's strict mode, introduced in ecmascript 5, is a way to opt in to a restricted variant of javascript, thereby implicitly opting-out of "sloppy mode". strict mode isn't just a subset: it intentionally has different semantics from normal code. browsers not supporting strict mode will run strict mode code with different behavior from browsers that do, so don't
rely on strict mode without feature-testing for support for the
relevant aspects of strict mode. strict mode code and non-strict mode code can coexist, so scripts can opt into strict mode incrementally. strict mode makes several changes to normal javascript semantics: eliminates some javascript silent errors by changing them to throw errors. fixes mistakes that make it difficult for javascript e...
...o strict mode, if you want to change your code to work in the restricted variant of javascript. invoking strict mode strict mode applies to entire scripts or to individual functions. it doesn't apply to block statements enclosed in {} braces; attempting to apply it to such contexts does nothing. eval code, function code, event handler attributes, strings passed to windowtimers.settimeout(), and
related functions are entire scripts, and invoking strict mode in them works as expected. strict mode for scripts to invoke strict mode for an entire script, put the exact statement "use strict"; (or 'use strict';) before any other statements. // whole-script strict mode syntax 'use strict'; var v = "hi! i'm a strict mode script!"; this syntax has a trap that has already bitten a major site: it ...
... by prefixing the octal number with a zero: 0644 === 420 and "\045" === "%". in ecmascript 2015 octal number is supported by prefixing a number with "0o". i.e. var a = 0o10; // es2015: octal novice developers sometimes believe a leading zero prefix has no semantic meaning, so they use it as an alignment device — but this changes the number's meaning! a leading zero syntax for the octals is ra
rely useful and can be mistakenly used, so strict mode makes it a syntax error: 'use strict'; var sum = 015 + // !!! syntax error 197 + 142; var sumwithoctal = 0o10 + 8; console.log(sumwithoctal); // 16 seventh, strict mode in ecmascript 2015 forbids setting properties on primitive values. without strict mode, setting properties is simply ignored (no-op), with strict mode, how...
...And 3 more matches
Web audio codec guide - Web media technologies
rameters available—and the range of possible values—varies from codec to codec, and even among different encoding utilities for the same codec, so read the documentation that comes with the encoding software you use to learn more. features affecting encoded audio size several factors affect the size of the encoded audio. some of these are a matter of the form of the source audio; others are
related to decisions made while encoding the audio. lossless versus lossy codecs there are two basic categories of audio compression. lossless compression algorithms reduce the size of the audio without compromising the quality or fidelity of the sound. upon decoding audio compressed with a lossless codec such as flac or alac, the result is identical in every way to the original sound, down to the ...
...annels to be used to provide alternative audio, such as vocals in different languages or descriptive audio for visually impaired people. audio frequency bandwidth the audio frequency bandwidth of a codec indicates the range of audio frequencies that can be represented using the codec. some codecs operate specifically by eliminating audio that falls outside a given frequency range. there is a cor
relation between the sample rate and the maxium sound frequency that can be represented by a waveform represented by a codec. at a theoretical level, the maximum frequency a codec can represent is the sample rate divided by two; this frequency is called the nyquist frequency. in reality, the maximum is slightly lower, but it's close. the audio frequency bandwidth comes into play especially vividly w...
... 9 yes 3.1 container support mp4, adts, 3gp rtp / webrtc compatible yes licensing for streaming or distributing aac-encoded content: no license required; developers of codecs are required to obtain a patent license through via licensing [1] due to patent issues, firefox does not directly support aac. ...
...And 3 more matches
Using dns-prefetch - Web Performance
the request. this process is known as dns resolution. while dns caching can help to reduce this latency, dns resolution can add significant latency to requests. for websites that open connections to many third parties, this latency can significantly reduce loading performance. dns-prefetch helps developers mask dns resolution latency. ...
...on can add significant latency to requests. for websites that open connections to many third parties, this latency can significantly reduce loading performance. dns-prefetch helps developers mask dns resolution latency. the html <link> element offers this functionality by way of a
rel attribute value of dns-prefetch. ...
...parties, this latency can significantly reduce loading performance. dns-prefetch helps developers mask dns resolution latency. the html <link> element offers this functionality by way of a
rel attribute value of dns-prefetch. the cross-origin domain is then specified in the href attribute: syntax <link
rel="dns-prefetch" href="https://fonts.gstatic.com/" > examples <html> <head> <link
rel="dns-prefetch" href="https://fonts.gstatic.com/"> <!-- and all other head elements --> </head> <body> <!-- your page content --> </body> </html> you should place dns-prefetch hints in the <head> element any time your site references resources on cross-origin domains, but there are some things to keep in mind. best practices there are 3 main things to keep in mind: for one, dns-p...
...And 3 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
o be a nightmare. it is usually much better to create a single version of your code which doesn't care about what browser or platform is accessing the site, but instead uses feature tests to find out what code features the browser supports or what the values of certain browser features are, and then adjusts the code appropriately. this tends to be termed responsive design or adaptive design, two
related but different approaches. this is much more
reliable, more maintainable, and more future proof. you don't get caught in the situation of having to bring out more new site versions as more new browsers and platforms come out, and adjust code as feature support in existing browsers changes. there are disadvantages to this approach as well. if the content, layout, and functionality need to cha...
...there are more tricks up our sleeves for this mobile app layout! as mentioned above, we used mozilla brick, a collection of ready-rolled mobile ui components, in the making of the mobile app layout. in particular, we used the deck component for the nice transition effect between cards when the buttons are pressed. for more on using brick, read mozilla brick: ready made ui components. ...
...moving on to the javascript, <script> elements don't accept media attributes, so i had to do this a different way. ...
...And 3 more matches
Content type - SVG: Scalable Vector Graphics
ty, the all-lowercase form "rgb(" is preferred. the integer value 255 corresponds to 100%, and to f or ff in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #fff. white space characters are allowed around the numerical values. all rgb colors are specified in the srgb color space. using srgb provides an unambiguous and objectively measurable definition of the color, which can be
related to international standards. color ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)? | "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...
....2). the corresponding svg dom interface definitions for <color> are defined the one defined by css. svg's extension to color, including the ability to specify icc-based colors, are represented using dom interface svgcolor. coordinate <coordinate> a <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the
relevant axis (the x-axis for x coordinates, the y-axis for y coordinates). its syntax is the same as that for <length>. within the svg dom, a <coordinate> is represented as an svglength or an svganimatedlength. frequency <frequency> frequency values are used with aural properties. as defined in css2, a frequency value is a <number> immediately followed by a frequency unit identifier. the...
...an optional base iri, followed by a "#" character, followed by the iri fragment identifier. for example, the following iri can be used to specify the element whose id is "lamppost" within file somedrawing.svg: http://example.com/somedrawing.svg#lamppost iris are used in the xlink:href attribute. some attributes allow both iris and text strings as content. to disambiguate a text string from a
relative iri, the functional notation <funciri> is used. this is simply an iri delimited with a functional notation. note: for historical reasons, the delimiters are "url(" and ")", for compatibility with the css specifications. the funciri form is used in presentation attributes . svg makes extensive use of iri references, both absolute and
relative, to other objects. for example, to fill a rectan...
...And 3 more matches
xml:base support in old browsers - Archive of obsolete content
however, it is working in some of the cases tested. ...
... // var ns = '...
...; } else { // if link is
relative, it should be from full path, minus the file var dirpath = loc.pathname.substring(0, loc.pathname.lastindexof('/')-1); if (link.lastindexof('/') !== link.length-1) { link += '/'; } link = loc.protocol + '//' + loc.host + dirpath + link; } } return link; } function getxmlbase (thisitem) { // fix: need to keep going up the chain if still a
relative url!!!!! // var ns = 'http://www.w3.org/xml/1998/namespace'; var att, protocolpos; var xmlbase = ''; var abs = false; // avoid loop if node is not present if (!thisitem || !thisitem.nodename) { return xmlbase; } // check present element and higher up for xml:base // now check for the next matching local name up in the hierarchy (until the document root) while (thisitem.nodename !
...And 2 more matches
Mozilla Documentation Roadmap - Archive of obsolete content
d non trivial. this tutorial was aimed at compiling all the right resources for extension development and putting them in the right context, but there's much more to learn, and knowing how to find it is part of what we felt was necessary to teach. let's look into the resources that have helped us the most. the mozilla developer center this is the official and most extensive guide to everything
related to mozilla. mdc is where this tutorial is hosted, and where most of its links point to. it encompasses firefox, other mozilla products, javascript, css, xul, web and extension development guidelines, accessibility, usability, best practices... the list goes on. it's incredibly comprehensive, and its underlying wiki technology makes it easy to expand and evolve with the help of the community. ...
...it encompasses firefox, other mozilla products, javascript, css, xul, web and extension development guidelines, accessibility, usability, best practices... the list goes on. it's incredibly comprehensive, and its underlying wiki technology makes it easy to expand and evolve with the help of the community. having said that, there are a few problems with it. first of all, the in-site search is not
reliable, so we recommend using a search engine like google, with queries such as "mdc javascript code modules" or "javascript code modules site:developer.mozilla.org". secondly, there are several important articles that are very lacking in information, like the preferences system page. and finally, what we mentioned in our xpcom section: almost no documentation on xpcom components. the documentation...
...tant articles that are very lacking in information, like the preferences system page. and finally, what we mentioned in our xpcom section: almost no documentation on xpcom components. the documentation on interfaces is very complete, but it isn't nearly as useful as the documentation that existed at xulplanet and was later taken down. xulplanet allowed you to navigate between interfaces and their
related components, which makes locating components very easy. hopefully this will be corrected in the future. in the meantime, you can still navigate xulplanet using the wayback machine. mdc should be your first stop when looking for documentation. if you find it lacking or missing some piece of information, please consider adding it once you've found it. everyone looking for it later will thank yo...
...And 2 more matches
Setting Up a Development Environment - Archive of obsolete content
effective add-on development (or any kind of development, really): a source code editor, a source control system, and a build system. in regards to code editing, there's no official mozilla ide. on the other hand, extensions use the same (or similar) languages that are used for web development, so most text editors and ides are up to the task. most xul tools and plugins you'll find online are me
rely templates that generate the folder structure for the project, and that's not much help. we recommend komodo edit. it's free, open source, and cross-platform. it's based on the mozilla xulrunner platform, so it has support for some of the particularities in firefox extension development. komodo edit has automatic completion for xul tags and attributes, and it supports mozilla's css extensions (c...
... this extension, and it can only be done if you have a valid certificate provided by a trusted certificate authority. the only noticeable difference for the user is that the xpi installation dialog will say that the extension was created by you, making the dialog a little easier to trust. it's not common to sign extensions because most users will trust the official add-ons site (amo) rather than
rely on extension signatures. on the other hand, it is standard practice for big companies to sign their extensions. you'll need to download some libraries in order to be able to sign your extension. follow the instructions, and add something like the following to your makefile: # the directory where the signature sources are located. signature_dir := signature # the signing key /certificate fil...
...a_files) \ $(signature_rsa_file) $(signature_files): $(build_dir) $(xpi_built) @signtool -d $(signature_dir) -k $(cert_name) \ -p $(cert_password) $(build_dir) keep in mind that your password should not be in your makefiles, and you must be very careful with the certificate information. ideally this should be handled by a single person, and only done near the end of the
release process. you should also have a different make command, such as make signed in order to distinguish the signed and unsigned development builds. firefox profile management it is good development practice to keep your test environment separate from everything else. you don't want unstable extensions to break your everyday firefox profile, risking data loss. it's much better to have a differen...
...And 2 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
was a no-brainer to us that wired news was a perfect candidate for the total conversion to xhtml and css. the content of the site tells the story of how technology affects our daily lives, especially in the realms of business, culture, and politics. why not attempt to use technology standards for the web to live out that story? the visual design of wired news and the vignette templates were all so
rely stale, and we had no significant effort invested into either for more than two years. i think that fact played a critical role in our team's willingness to try out something completely new. our engineering team actually needed the least convincing to convert over to a standards-based design, because they could also immediately envision the benefits to their workload and maintenance of the site. ...
...t all the html-based presentation? technically, there are 13 total stylesheets used at any one time. the breakdown: 1 master screen media file which imports 4 files: a base file (bulk of formatting) a file for finance/table formatting color file (override colors and background images for specific color scheme) temp file (used for styles associated with temporary features and ad-
related pages) 1 print media file 1 aural media file 3 master alternate style sheets which import 1 file each the 3 imported files set alternate font sizes (small, large, larger) how much did the size of a typical wired news page shrink? the html went from 32 kb down to 19 kb, but images increased from 8 to 13 kb. we've noted that some of the file size comparison's aren't necess...
...ad a few disadvantages from my perspective. one was the required order of content within generic markup. for wired news, the center (or main) column usually contains the most important content for each page. i wanted center column content to appear first in browsers that got the un-styled version. with floats, either the left column or the right column always had to be drawn first. for sites that
rely on a left or right column for primary navigation, this content order requirement of float usage may produce desired and advantageous behavior. i also found a lot of trouble ensuring a consistent vertical start position of columns using floats. two column layouts using floats seemed easy. but adding a third column to the mix created too many width variables for some browsers to dynamically calcu...
...And 2 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
models possible. one such model is inner-browsing, which is our name for a model in which all navigation occurs within a single page, as in a typical application interface. the single-page context and abstraction of data from the presentation can give your web applications new continuity, precision and control. this model is also interesting because is optimized to access contextual data instead
reloading full web pages. this article discusses the concept of inner-browsing and possible approaches for its implementation. it also provides two implementation examples using the model. the first one looks like a traditional dhtml ticker application and uses hidden iframes and javascript to provide updates inside the webpage's ticker headlines section. this sample was made using iframes to illustr...
...ies such as soap-based remote procedure calls, xmlhttprequest interfaces, or dom 3 load. the second example shows a tabbed menu that dynamically loads news headlines into the current web page. this implementation uses xmlhttprequest. 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. html and web standards have evolved and now offer flexible and fine-grained control to layout as well supporting dhtml, powerful programming languages like javascript, and additional media through embeddable third-party resources like...
... how applications like this exemplify inner-browsing and how they might be implemented using the inner-browsing approach. some examples: web page with ticker it is common to see web pages with a ticker element, often used to rotate news or stock quotes updates. a simple ticker element implemented in dhtml statically includes the data in the page. if the data changes, it will not update unless you
reload the web page. this article includes a ticker example demonstrating that the inner-browsing model can be used to dynamically request new data from the server side and provide updates to the ticker. spell check suppose you have a web publishing system for a portal, and a spell check application on your server. today, this publishing system allows your users to modify content for the portal, but ...
...And 2 more matches
Source code directories overview - Archive of obsolete content
for editing text and managing undo/redo. embedding contains c interfaces and code for generic high-level browser functions (e.g. forward, back, history). the [#seamonkey-webshell webshell] code wraps these interfaces according to the particular platform and way (e.g. activex) that is being supported. extensions contains c interfaces, c code, xul and javascript code for various add-ins that are
related to browsing. these include: cookies, irc, wallet, dom inspector, p3p, schema validation, spellchecker, transformiix, typeaheadfind, javascript debugger, xforms, etc. gfx contains c interfaces and code for platform independent drawing and imaging. it can be used to draw rectangles, lines, images, etc. essentially, it is a a set of interfaces for a platform-independent device (drawing) context...
...ed the mozilla browser in a mac application as well as some sample file-handling code from apple. mailnews contains c interfaces and code for the mail and news component (i.e. messenger in mozilla classic). it includes all the code for managing mail, reading newsgroup messages, importing other mail formats, composing new messages and so on. modules contains c code for various different browsing
related features that are built into mozilla. it contains code for handling various image formats (e.g. .png, .gif), allowing drop-in java virtual machines (called oji, for "open java interface"), supporting plug-ins and reading various compression formats (e.g. jar, zip, zlib). this code originated from mozilla as well as various different companies and individual people. netwerk contains c interfa...
...expat.). plugin contains code for the mrj plugin on mac. profile contains c interfaces, c code, xul and javascript scripts for creating new user profiles, managing existing user profiles, migrating profiles from mozilla classic and using default profiles for popular isps (e.g. earthlink and concentric networks). rdf contains c interfaces and code for accessing various data and organizing their
relationships according to rdf. rdf stands for "resource description framework" which is an open standard. this code reads and writes data from and to the local file system, databases, the internet or any other source using a url-like syntax. security contains the security modules including nss and psm. storage contains an implementation of sqlite3. suite will contain files specific to the mozilla...
...And 2 more matches
Proxy UI - Archive of obsolete content
tion button. seamonkey menu: preferences > advanced group > proxies panel menu: right-click on offline-online button (on browser windows). camino configured in os (networking preferences) (recently added - some support for reading os and account settings.)ui elements preferences panel overview the ui is based on selecting a proxy mode, then filling out any additional needed information in "
related" ui. the "ok" button saves the preferences. the preference changes selecting the proxy "mode" all product's proxy preference panels share a basic design: a radio button that selects the proxy mode, then "
related proxy mode" ui when needed. for the purposes of this document, "proxy mode" means both: whatever was selected in the ui (as opposed to the value of the network.proxy.type. the underl...
...to the value of the network.proxy.type. the underlying behavior. the currently available modes are based on "network.proxy.type". for example, firefox 3: [ ] no proxy [ ] auto-detect proxy settings for this network [ ] manual proxy configuration: [ ] automatic proxy configuration url: behavior default value: "no proxy" is selected all other "type" radio buttons are enabled, but not selected. ...
...erlying behavior. the currently available modes are based on "network.proxy.type". for example, firefox 3: [ ] no proxy [ ] auto-detect proxy settings for this network [ ] manual proxy configuration: [ ] automatic proxy configuration url: behavior default value: "no proxy" is selected all other "type" radio buttons are enabled, but not selected. "
related" ui elements only two proxy modes have
related ui. ...
...And 2 more matches
URIs and URLs - Archive of obsolete content
new protocol but that might not be necessary because necko already provides uri implementations that can deal with a number of schemes, by implementing the generic urlparser defined in rfc 2396. nsiuri and nsiurl in a strict sense necko does only know urls, uris by the above definition are much too generic to be properly represented inside a library. there are however two interfaces which loosely
relate to the distinction between uri and url as per the above definition: nsiuri and nsiurl. nsiuri represents access to a very simple, very generic form of an url. simply speaking it's scheme and non-scheme, separated by a colon, like "about". nsiurl inherits from nsiuri and represents access to typical urls with schemes like "http", "ftp", ... nssimpleuri one implementation of nsiuri is nssimpleur...
...ity segment, like "http". noauthority these urls have no or a degenerated authority segment, like the "file" scheme. also this parser can identify drives if possible depending on the platform. standard it is not known if an authority segment exists or not, less syntax correction can be applied in this case. noteable differences necko does not support certain deprecated forms of
relative urls, based on the following part of rfc 2396: if the scheme component is defined, indicating that the reference starts with a scheme name, then the reference is interpreted as an absolute uri and we are done. otherwise, the reference uri's scheme is inherited from the base uri's scheme component. due to a loophole in prior specifications (rfc1630), some parsers allow the scheme name t...
...on the following part of rfc 2396: if the scheme component is defined, indicating that the reference starts with a scheme name, then the reference is interpreted as an absolute uri and we are done. otherwise, the reference uri's scheme is inherited from the base uri's scheme component. due to a loophole in prior specifications (rfc1630), some parsers allow the scheme name to be present in a
relative uri if it is the same as the base uri scheme. unfortunately, this can conflict with the correct parsing of non-hierarchical uri. for backwards compatibility, an implementation may work around such references by removing the scheme if it matches that of the base uri and the scheme is known to always use the "hier_part" syntax. the parser can then continue with the steps below for the remainde...
...And 2 more matches
Result Generation - Archive of obsolete content
re the labels for the arrows, called predicates. in this example, all the arrows have the same label. usually, this won't be the case. templates provide a means of navigating around using only arrows with specific labels. here is one serialization of rdf/xml for this graph, though there are many others. ...
...lly, this won't be the case. templates provide a means of navigating around using only arrows with specific labels. here is one serialization of rdf/xml for this graph, though there are many others. ...
... this won't be the case. templates provide a means of navigating around using only arrows with specific labels. here is one serialization of rdf/xml for this graph, though there are many others. ...
...And 2 more matches
Using nsIXULAppInfo - Archive of obsolete content
with mozilla/xulrunner 1.8, there now is a way to find out which application, application version, and gecko version your code is running on. this is useful, for example, for extensions that support several mozilla-based applications or several versions of a single application. this is not useful for scripts on webpages, which should continue using the navigator object when it's not possible to
rely on feature-detection. nsixulappinfo interface to distinguish between different mozilla-based applications, use the frozen nsixulappinfo interface. the following sections provide a few examples of using nsixulappinfo from javascript. note that while firefox 1.5, thunderbird 1.5, and xulrunner 1.8-based applications support nsixulappinfo, older applications, such as firefox and thunderbird 1.0,...
..._id) { // running under seamonkey } else { // another app } note: you could also use nsixulappinfo.name, which is a human-readable name for the application, such as "firefox", "thunderbird" or "seamonkey", but who knows, maybe they'll rename it again! version sometimes you need to know the version of the application your code is running under. for example, one of unfrozen functions you're
relying on was changed. note: nsixulappinfo provides information about the application and the platform, be careful to use the right one, especially when dealing with xulrunner-based applications. in such cases, you probably want to check nsixulappinfo.version and/or nsixulappinfo.appbuildid. the latter is useful if you're trying to support nightly development builds of the application, and the for...
...des information about the application and the platform, be careful to use the right one, especially when dealing with xulrunner-based applications. in such cases, you probably want to check nsixulappinfo.version and/or nsixulappinfo.appbuildid. the latter is useful if you're trying to support nightly development builds of the application, and the former can be useful if you only support official
releases, and to distinguish between branch and trunk builds. example 1: checking firefox version // assuming we're running under firefox var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); var versionchecker = components.classes["@mozilla.org/xpcom/version-comparator;1"] .getservice...
...And 2 more matches
XUL element attributes - Archive of obsolete content
ges, the children stretch to fit. use the flex attribute to create elements that stretch in the opposite direction. left the elements are aligned on their left edges. center the elements are centered horizontally. right the elements are aligned on their right edges. the pack attribute is
related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. allownegativeassertions type: boolean valid on any element that has a datasourc...
...so has a corresponding script property contextmenu. datasources type: space separated list of datasource uris a space-separated list of datasources that an element's template will use for content generation. these can be either internal datasources such as rdf:bookmarks or a url. the datasources attribute may be placed on most elements, although it will usually be found on trees and menu
related elements. the element should have a template element as a child. for rdf templates, the specified datasources are combined into a single composite datasource which holds the data from all of the datasources. this composite datasource is accesssible via a script through the database property. for xml datasources, only one source is used, either the url of an xml file or an anchor reference t...
... type: string (representing an integer) indicates the flexibility of the element, which indicates how an element's container distributes remaining empty space among its children. flexible elements grow and shrink to fit their given space. elements with larger flex values will be made larger than elements with lower flex values, at the ratio determined by the two elements. the actual value is not
relevant unless there are other flexible elements within the same container. once the default sizes of elements in a box are calculated, the remaining space in the box is divided among the flexible elements, according to their flex ratios. specifying a flex value of 0 has the same effect as leaving the flex attribute out enti
rely. height type: string (representing an integer) the preferred h...
...And 2 more matches
XML - Archive of obsolete content
xul syntax & rules xul is a standards-based interface definition language. it attempts to balance precise control of layout with flexibility and ease of use, and in this respect it does a great job. using a combination of xul's ready-made widgets (e.g., menubar, scrollbar, progressmeter, and so on) and xul's incorporation of such standards as html4, dom1/2, and cascading stylesheets, you can design any interface that you can imagine, using any number of different features, tools, and methodologies. there are many times, for example, when you may use javascript tricks to add extra behavior. ...
...ed new languages out of xml. mathml and the chemical markup language (cml) are two of the better-known and more widely-used languages, but there are hundreds. information developers create languages particular to their applications, any time they need a very specific way to represent the structure of some data. when we say language, we mean that developers create a set of terms, orlexicon, and a
relationship between these terms, or what some people call agrammar. then they insist that their authors use the language to describe the thing it has been created for. those authors may be people or machines, but they must use the new language if the readers are to understand what sort of data it is they are reading. it's much simpler than it seems -- much simpler, in fact, than a lot of xml primers...
... what xml is: a meta-language for defining languages appropriate to the tasks at hand; it's structured in a way that makes it accessible as "information" to both humans and machines. html -- which is a derived language like our memoml (see the appendix notes for information on the geneology of markup languages) -- has been created for the purposes of representing hypertext documents and the basic
relationships between them. humans read raw html often when they edit html documents, though this is changing as regular html editors are replaced by wysiwyg html editors, and so do html parsers, which use the markup to format the document in its presentational form in web browsers. like html and memoml, xul is an xml-based language. where in html the elements are used to describe the look of text, ...
...And 2 more matches
listbox - Archive of obsolete content
a listbox may contain multiple columns. there are numerous methods which allow the items in the listbox to be retrieved and modified. you may specify the number of rows to display in the list using the rows attribute. additional rows can be viewed using a scroll bar. a listbox is expected to contain listitem elements. all the rows in the listbox are the same height, which is the height of the tallest item in the list. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementall...
...en the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...And 2 more matches
menu - Archive of obsolete content
when the user clicks the menu element, the child menupopup of the menu will be displayed. this element is also used to create submenus. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user s...
...nimum width of the menu label or button will be the same as that necessary for the menupopup. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...And 2 more matches
menuitem - Archive of obsolete content
it acts much like a button but it is rendered on a menu. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. note: the ...
...ame radio group can be checked at once. more information on adding checkmarks to menus in the xul tutorial validate type: one of the values below this attribute indicates whether to load the image from the cache or not. this would be useful if the images are stored remotely or you plan on swapping the image frequently. the following values are accepted, or leave out the attribute enti
rely for default handling: always the image is always checked to see whether it should be
reloaded. never the image will be loaded from the cache if possible. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some el...
...And 2 more matches
toolbarbutton - Archive of obsolete content
where possible, duplicate functionality in a menu item or context menu. where not possible, make all toolbarbuttons focusable by -moz-user-focus: normal. ...
... where possible, duplicate functionality in a menu item or context menu. where not possible, make all toolbarbuttons focusable by -moz-user-focus: normal. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. dlgtype type: one of the values below the dialog type of the button, used only when the button is in a dialog box. you can use this feature to replace the standard dialog box buttons with custom buttons, yet the d...
...And 2 more matches
tree - Archive of obsolete content
the tree may contain any number of rows and any number of columns. each row of the tree may contain child rows which are displayed indented from the parent. unlike other elements, the data to display inside the tree is not specified using tags, but is determined from a view object. the view object implements the nsitreeview interface. the view is queried for the data to appear in the tree. there are several ways in which trees are used, as listed below. ...
...le for rdf generated trees with a fairly small number of rows. custom tree view nsitreeview no for this tree you implement the nsitreeview interface yourself. the tree's data is retrieved from this custom view. the custom view should be attached to the tree by setting its view property. more information is available in the xul tutorial. also tree widget changes.
relevant accessbility guidelines provide alternative access (for example, via menus) to column picker and for header behaviors like sorting (these have no default keyboard access). attributes disablekeynavigation, disabled, editable, enablecolumndrag, flags, hidecolumnpicker, onselect, rows, seltype, statedatasource, tabindex, treelines properties accessibletype,...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementall...
...And 2 more matches
2006-10-13 - Archive of obsolete content
author is declaring rfe (request for enhancement). ...
...author is declaring rfe (request for enhancement). ...
...author is declaring rfe (request for enhancement). ...
...And 2 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
this document introduces the basic concepts of public-key cryptography. for an overview of ssl, see "introduction to ssl." for an overview of encryption and decryption, see "encryption and decryption." information on digital signatures is available from "digital signatures." public-key cryptography is a set of well-established techniques and standards for protecting communications from eavesdropping, tampering, and impersonation attacks. encryption and decryption allow two communicating parties to disguise information they send to each other. ...
...portant to note that these two assumptions are true only if unauthorized personnel have not gained access to the user's machine or password, the password for the client software's private key database has been set, and the software is set up to request the password at reasonable frequent intervals. neither password-based authentication nor certificate-based authentication address security issues
related to physical access to individual machines or passwords. public-key cryptography can only verify that a private key used to sign some data corresponds to the public key in a certificate. it is the user's responsibility to protect a machine's physical security and to keep the private-key password secret. these are the steps shown in figure 5: the client software, such as communicator, maint...
...e the corporate calendar program, and access various servers. multiple passwords are an ongoing headache for both users and system administrators. users have difficulty keeping track of different passwords, tend to choose poor ones, and tend to write them down in obvious places. administrators must keep track of a separate password database on each server and deal with potential security problems
related to the fact that passwords are sent over the network routinely and frequently. solving this problem requires some way for a user to log in once, using a single password, and get authenticated access to all network resources that user is authorized to use-without sending any passwords over the network. this capability is known as single sign-on. both client ssl certificates and s/mime certif...
...And 2 more matches
Developing cross-browser and cross-platform pages - Archive of obsolete content
pt errors and page layout problems and you may want to ensure your scripts reach as wide an audience as possible. there are 2 known approaches for such goals: the browser identification approach (also known as useragent string detection and often referred as "browser sniffing") and the object/feature support detection approach. the browser identification approach is now known to be complicated, un
reliable and difficult to maintain. browser identification approach (aka "browser sniffing"): not best, not
reliable approach this approach, still commonly used nowadays, attempts to identify the browser and makes the web author at design time decide what that implies in terms of capabilities of the visiting browser. such approach is fraught with problems and difficulties. it requires from the web ...
...apabilities of all current browsers that may visit the page and then to code appropriately for these. it requires from the web author to make assumptions about what will happen with future browsers or to decide to provide future browsers a safe fallback service. it assumes that web authors are able to correctly identify browsers and browser versions in the first place... which is far from being a
reliable and easy task to achieve. the browser identification approach
relies on functions that check the browser type string value and browser version string value and that search for certains characters or sub-strings in the navigator.useragent property string. once "detected", the web author then uses different functions (aka code branching) or points the user to different pages (aka site branchi...
...oach. // bad sample if (navigator.appversion.charat(0) == "8") { if (navigator.appname == "netscape") { isns8 = true; alert("netscape 8"); }; } else if (navigator.appversion.indexof("msie") != -1) { isie = true; alert("internet explorer"); }; while this kind of checking in the above code can work in a crude sense, sharp readers may wonder what happens when internet explorer 8 is
released or when an opera 8.x user visits the page or even when an user with any non-netscape browser starting with a "8" character in the appversion string visits that page. as new browsers are
released, it becomes necessary to make updates to such code which attempts to narrow down the browser and browser version and to make the appropriate switches. another major problem with this approach is tha...
...And 2 more matches
New in JavaScript - Archive of obsolete content
age is based on. ecmascript 5 support implementation status for the current standard ecma-262 edition 5.1 in mozilla-based engines and products. ecmascript 2015 support implementation status for the draft ecma-262 edition 6 (es2015) in mozilla-based engines and products. ecmascript next support implementation status for upcoming ecma-262 features as per the yearly (es2016/es2017/es2018/...)
release schedule in mozilla-based engines and products. javascript versions deprecated ( ). the explicit versioning and opt-in of language features was mozilla-specific and are in process of being removed. firefox 4 was the last version which referred to a javascript version (1.8.5). with new ecma standards, javascript language features are now often mentioned with their initial definition in ecma...
...javascript versions deprecated ( ). the explicit versioning and opt-in of language features was mozilla-specific and are in process of being removed. firefox 4 was the last version which referred to a javascript version (1.8.5). with new ecma standards, javascript language features are now often mentioned with their initial definition in ecma-262 editions such as ecmascript 2015. javascript was
released as version 1.0 in march 1996 in netscape navigator 2.0 and internet explorer 2.0. javascript 1.1 version shipped in netscape navigator 3.0.
released on august 19, 1996. javascript 1.2 version shipped in netscape navigator 4.0-4.05.
released on june 11, 1997. javascript 1.3 version shipped in netscape navigator 4.06-4.7x.
released on october 19, 1998. standardization work to be compl...
...n shipped in netscape navigator 3.0.
released on august 19, 1996. javascript 1.2 version shipped in netscape navigator 4.0-4.05.
released on june 11, 1997. javascript 1.3 version shipped in netscape navigator 4.06-4.7x.
released on october 19, 1998. standardization work to be compliant with ecma-262 1st and 2nd edition. javascript 1.4 version shipped with netscape's server-side javascript.
released in 1999. javascript 1.5 version shipped in netscape navigator 6.0 and firefox 1.0.
release on november 14, 2000. standardization work to be compliant with ecma-262 3rd edition. javascript 1.6 version shipped in firefox 1.5.
released in november 2005. includes ecmascript for xml (e4x), new array methods plus string and array generics. ...
...And 2 more matches
Reference - Archive of obsolete content
e versions in the past tense. i also support the use of a deprecated pre box with these examples. since it's been 9 months since the last comment on this, i think i'll go ahead and change all of the examples. if anyone disagrees, you can always revert. sevenspade 13:19, 2 july 2006 (pdt) after some thought, i removed the references to using language="javascript1.2", and all references are me
rely presented as information detailing past behavior. the "backwards compatibility" sections have been renamed to "behavior in older versions." however, i think this is only appropriate if we are going to document the evolution of everything, or at least note the most significant changes introduced in the various versions. otherwise, i think we should just remove the "behavior in other versions" se...
...5:37, 31 aug 2005 (pdt) gonna follow mozilla's coding guides here: http://www.mozilla.org/hacking/mozil...de.html#visual --maian 00:30, 20 september 2005 (pdt) btoa() and atob() base64 encode and decode functions this documentation is missing the base64 encode (btoa) and decode (atob) functions. anyone know why this has been left out? danbeck 07:02, 22 september 2005 (pdt) afaict , base64-
related functionality is not a part of the javascript engine, but a dom feature (probably non-standard). --nickolay 08:31, 22 september 2005 (pdt) what's funny is that this talk page shows up first in a google search for "btoa javascript". this is number 2. it's not in the ecma docs. if it's not in a standard, and that sun doc is corrent, then it should probably go in the window object methods. --jo...
...r find someone to do so). thanks for your thoughts --callek 15:05, 13 january 2006 (pst) notification when reorganization is finished leandro (localiser for the portuguese wiki) would like to be emailed when the js reference reorganization has been finished. his user page is here: http://developer.mozilla.org/pt/docs...%c3%aas_xavier -- dria 08:19, 24 february 2006 (pst) object and function
relation here is my problem , it has been breaking my head for quite some time now. i'm very confused about the way function and object in the javascript core are
related at first i thought it was something like this : function -> object -> instance instance is for example the math object, it behaves same way as creating new object. i checked this by doing alert(math.constructor) //shows that o...
...And 2 more matches
Correctly Using Titles With External Stylesheets - Archive of obsolete content
this can lead to a stylesheet being ignored, which is typically not what an author intends to do. why titles matter the title attribute affects how your external stylesheet is applied to a document. in fact, the use of the title attribute is so significant that html 4.01 categorizes stylesheets according to the presence or absence of a title. ...
... affects a document, or if it is only used under certain circumstances. there are three kinds of stylesheets that are possible: persistent, preferred, and alternate stylesheets. authors will be most familiar with persistent stylesheets, of which any number may be applied to a document at once. ...
...eets, of which any number may be applied to a document at once. a persistent stylesheet is one which has no title attribute and a value of stylesheet supplied for the
rel attribute. a document may refer to one or more persistent stylesheets, all of which are used in the presentation of the document. a preferred stylesheet, on the other hand, is one that has a value of stylesheet supplied for the
rel attribute, and any value at all for the title attribute. here are two examples: <link type="text/css"
rel="stylesheet" title="basic styles" href="basic.css" /> <link type="text/css"
rel="stylesheet" title="fish and boats" href="ocean.css" /> according to the html 4.01 specification, only one of the preferred stylesheets can be used at a time. therefore, given the above example, only one of the ...
...And 2 more matches
Index - Game development
popular computer activities. new technologies are constantly arriving to make it possible to develop better and more powerful games that can be run in any standards-compliant web browser. 2 anatomy of a video game games, javascript, main loop, requestanimationframe i want to be clear that any of the above, or none of them, could be best for your game. the correct decision enti
rely depends on the trade-offs that you are willing (and unwilling) to make. the concern is mostly with switching to another option. fortunately, i do not have any experience with this, but i have heard it is an excruciating game of whack-a-mole. 3 examples demos, example, games, web this page lists a number of impressive web technology demos for you to get inspiration from, and ...
... is mostly with switching to another option. fortunately, i do not have any experience with this, but i have heard it is an excruciating game of whack-a-mole. 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. a testament to what can be done with javascript, webgl, and
related technologies. 4 index meta found 74 pages: 5 introduction to html5 game development (summary) firefox os, games, html5, mobile games built with html5 work on smartphones, tablets, pcs and smart tvs.update your game whenever you want.players can play the game anywhere, anytime. 6 introduction to game development for the web firefox os, g...
... you've finished all the lessons — congratulations! by this point you would have learnt the basics of phaser and the logic behind simple 2d games. 56 scaling 2d, beginner, canvas, games, javascript, phaser, tutorial scaling refers to how the game canvas will scale on different screen sizes. we can make the game scale to fit on any screen size automatically during the p
reload stage, so we don't have to worry about it later. 57 the score 2d, beginner, canvas, games, javascript, phaser, tutorial, scoring having a score can also make the game more interesting — you can try to beat your own highscore, or your friend's. in this article we'll add a scoring system to our game. 58 win the game 2d, beginner, canvas, games, javascript, p...
...And 2 more matches
Game promotion - Game development
ormation you can include the better — you should include screenshots, description, trailer, press kit, requirements, available platforms, support details and more. you'll get bonus points for allowing your users to directly play your games online — at least in demo form. also, you should do some work on seo to allow people to find your games more easily. you should also blog about everything
related to your gamedev activities. write about your development process, nasty bugs you encounter, funny stories, lessons learned, and the ups and downs of being a game developer. continually publishing information about your games will help educate others, increase your reputation in the community, and further improve seo. a further option is to publish monthly reports that summarize all your progr...
... developers and provides a great starting point to create your website. presskit() is a press kit builder that helps you create a press page to share with the media. social media your social media presence is very important — follow the right hashtags, make friends, engage in conversations, help other devs in need. honesty is key and you should be authentic, because nobody likes boring press
releases or pushy advertisements. when the time comes your community will help you spread the word about your shiny little game. you should use at least twitter and facebook and be active on appropriate forums — the most popular one is html5gamedevs.com. share your gamedev news and answer questions, so people will value what you're doing and will know that you're ok. remember to not be too pushy o...
... you have no budget and limited time. press you can try and reach the press about your game, but bear in mind that they get a tonne of requests like this every single day, so be humble and patient if they don't answer right away, and be polite when talking to them. be sure to check first if they are dealing with specific genres of games or platforms, so you don't send them something that is not
relevant to them in the first place. if you're honest with your approach and your game is good, then you've got more of a chance of success. 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. tutorials i...
...And 2 more matches
Desktop gamepad controls - Game development
to update the state of the gamepad's currently pressed buttons we will need a function that will do exactly that on every frame: function gamepadupdatehandler() { buttonspressed = []; if(controller.buttons) { for(var b=0; b<controller.buttons.length; b++) { if(controller.buttons[b].pressed) { buttonspressed.push(b); } ...
...playerx += 5; } if(gamepadbuttonpressedhandler(11)) { alert('boom!'); } // ... ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } in this case, we are checking the four d-pad buttons (0-3) and the a button (11). note: please remember that different devices may have different key mappings, i.e. the d-pad right button have an index of 3 on the wi
reless xbox 360, but may have a different one on another device. 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'). you can see a live demo in action — try connecting your gamepad and pressi...
... on-screen instructions when the game is started, some introduc...
...And 2 more matches
Initialize the framework - Game development
nd the source code for this section at gamedev-phaser-content-kit/demos/lesson01.html. before we can start writing the game's functionality, we need to create a basic structure to render the game inside. this can be done using html — the phaser framework will generate the required <canvas> element. the game's html the html document structure is quite simple, as the game will be rendered enti
rely on the <canvas> element generated by the framework. using your favourite text editor, create a new html document, save it as index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev phaser workshop - lesson 01: initialize the framework</title> <style>* { padding: 0; margin: 0; }</style> <script sr...
...this tutorial uses phaser v2 — it won't work with the current version on phaser (v3). the v2 lib...
...this tutorial uses phaser v2 — it won't work with the current version on phaser (v3). the v2 library is s...
...And 2 more matches
How CSS is structured - Learn web development
hod of bringing css to a document. you can link a single css file to multiple web pages, styling all of them with the same css stylesheet. in the getting started with css, we linked an external stylesheet to our web page. you reference an external css stylesheet from an html <link> element: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <link
rel="stylesheet" href="styles.css"> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> the css stylesheet file might look like this: h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } the href attribute of the <link> element needs to reference a file on your file system. in the example above, the css...
...d-color: yellow; border: 1px solid black; } p { color: red; } the href attribute of the <link> element needs to reference a file on your file system. in the example above, the css file is in the same folder as the html document, but you could place it somewhere else and adjust the path. ...
...ple above, the css file is in the same folder as the html document, but you could place it somewhere else and adjust the path. here are three examples: <!-- inside a subdirectory called styles inside the current directory --> <link
rel="stylesheet" href="styles/style.css"> <!-- inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory --> <link
rel="stylesheet" href="styles/general/style.css"> <!-- go up one directory level, then inside a subdirectory called styles --> <link
rel="stylesheet" href="../styles/style.css"> internal stylesheet an internal stylesheet resides within an html document. to create an internal stylesheet, you place css inside a <style> element contained inside the html <head>. the html for an internal stylesheet mi...
...And 2 more matches
Web fonts - Learn web development
we need to find the font files that contain the fonts. fonts are created by font foundries and are stored in different file formats. there are generally three types of sites where you can obtain fonts: a free font distributor: this is a site that makes free fonts available for download (there may still be some license conditions, such as crediting the font creator). examples include font squir
rel, dafont, and everything fonts. a paid font distributor: this is a site that makes fonts available for a charge, such as fonts.com or myfonts.com. you can also buy fonts directly from font foundries, for example linotype, monotype, or exljbris. an online font service: this is a site that stores and serves the fonts for you, making the whole process easier. see the using an online font service se...
... a site that makes fonts available for a charge, such as fonts.com or myfonts.com. you can also buy fonts directly from font foundries, for example linotype, monotype, or exljbris. an online font service: this is a site that stores and serves the fonts for you, making the whole process easier. see the using an online font service section for more details. let's find some fonts! go to font squir
rel and choose two fonts — a nice interesting font for the headings (maybe a nice display or slab serif font), and slightly less flashy and more readable font for the paragraphs. when you find each font, press on the download button, and save the file inside the same directory as the html and css files you saved earlier. it doesn't matter whether they are ttf (true type fonts) or otf (open type fon...
...section in the right-hand column, you can click on the different tags and classifications to filter the displayed choices. generating the required code now you'll need to generate the required code (and font formats). for each font, follow these steps: make sure you have satisfied any licensing requirement, if you are going to use this in a commercial and/or web project. go to the fontsquir
rel webfont generator. upload your two font files using the upload fonts button. check the checkbox labeled "yes, the fonts i'm uploading are legally eligible for web embedding." click download your kit. after the generator has finished processing, you should get a zip file to download — save it in the same directory as your html and css. implementing the code in your demo at this point, unz...
...And 2 more matches
How to structure a web form - Learn web development
rd. the use case in this example is one of the most important. each time you have a set of radio buttons, you should nest them inside a <fieldset> element. there are other use cases, and in general the <fieldset> element can also be used to section a form. ideally, long forms should be spread across multiple pages, but if a form is getting long and must be on a single page, putting the different
related sections inside different fieldsets improves usability. because of its influence over assistive technology, the <fieldset> element is one of the key elements for building accessible forms; however it is your responsibility not to abuse it. if possible, each time you build a form, try to listen to how a screen reader interprets it. if it sounds odd, try to improve the form structure. the <la...
...ten to how a screen reader interprets it. if it sounds odd, try to improve the form structure. the <label> element as we saw in the previous article, the <label> element is the formal way to define a label for an html form widget. this is the most important element if you want to build accessible forms — when implemented properly, screenreaders will speak a form element's label along with any
related instructions, as well as it being useful for sighted users. take this example, which we saw in the previous article: <label for="name">name:</label> <input type="text" id="name" name="user_name"> with the <label> associated correctly with the <input> via its for attribute (which contains the <input> element's id attribute), a screenreader will read out something like "name, edit text". the...
...read out something like "name, edit text". there is another way to associate a form control with a label — nest the form control within the <label>, implicitly associating it. <label for="name"> name: <input type="text" id="name" name="user_name"> </label> even in such cases however, it is considered best practice to set the for attribute to ensure all assistive technologies understand the
relationship between label and widget. if there is no label, or if the form control is neither implicitly or explicitly associated with a label, and a screenreader will read out something like "edit text blank", which isn't very helpful at all. labels are clickable, too! another advantage of properly set up labels is that you can click or tap the label to activate the corresponding widget. this is...
...And 2 more matches
The web and web standards - Learn web development
interest, enough to convince timbl's bosses to allow him to go ahead and create a global hypertext system. by late 1990, timbl had created all the things needed to run the first version of the web — http, html, the first web browser, which was called worldwideweb, an http server, and some web pages to look at. in the next few years that followed, the web exploded, with multiple browsers being
released, thousands of web servers being set up, and millions of web pages being created. ok, that's a very simple summary of what happened, but i did promise you a brief summary. one last significant data point to share is that in 1994, timbl founded the world wide web consortium (w3c), an organization that brings together representatives from many different technology companies to work together on...
...e code to build a website for free, and anyone can contribute to the standards creation process, where the specs are written. because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing. you wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or
releasing a new version of html that everyone has to buy to continue making web sites, or worse still, just deciding they aren't interested any more and just turning it off. this allows the web to remain a freely-available public resource. don't break the web another phrase you'll hear around open web standards is "don't break the web" — the idea is that any new web technology that is introduced...
...pact, single-column layout on mobile phone browsers. try adjusting the width of your browser window now, and see what happens. performance means getting web sites to load as quickly as possible, but also making them intuitive and easy to use so that users don't get frustrated and go somewhere else. ...
...And 2 more matches
Introduction to events - Learn web development
ve some kind of event model, and the way the model works often differs from javascript's way. in fact, the event model in javascript for web pages differs from the event model for javascript as it is used in other environments. for example, node.js is a very popular javascript runtime that enables developers to use javascript to build network and server-side applications. the node.js event model
relies on listeners to listen for events and emitters to emit events periodically — it doesn't sound that different, but the code is quite different, making use of functions like on() to register an event listener, and once() to register an event listener that unregisters after it has run once. the http connect event docs provide a good example. you don't need to understand anything about other su...
... features and options available with this event mechanism. these are a little out of scope for this article, but if you want to read them, visit the addeventlistener() and removeeventlistener() reference pages. what mechanism should i use? of the three mechanisms, you shouldn't use the html event handler attributes — these are outdated, and bad practice, as mentioned above. the other two are
relatively interchangeable, at least for simple uses: event handler properties have less power and options, but better cross-browser compatibility (being supported as far back as internet explorer 8). you should probably start with these as you begin learning. dom level 2 events (addeventlistener(), etc.) are more powerful, but can also become complex and are less well supported (supported as far...
... you may run into difficulties, as such ancient browsers use different event models from newer browsers. but never fear, most javascript libraries (for example jquery) have built-in functions that abstract away cross-browser differences. don't worry about this too much at this stage in your learning journey. other event concepts in this section, we briefly cover some advanced concepts that are
relevant to events. it is not important to understand these concepts fully at this point, but they might serve to explain some code patterns you'll likely come across. event objects sometimes inside an event handler function, you'll see a parameter specified with a name such as event, evt, or simply e. this is called the event object, and it is automatically passed to event handlers to provide extr...
...And 2 more matches
Video and Audio APIs - Learn web development
this is an icon font — all the characters of the alphabet equate to common icons you might want to use in an application. next we use generated content to display an icon on each button: we use the ::before selector ...
...n on http requests because you don't need to download those icons as image files, great scalability, and the fact that you can use text properties to style them — like color and text-shadow. ...
... the inner <div> is absolutely positioned to sit directly on top of the outer <div>. it is also given an initial width of 0, so you can't see it at all. ...
...And 2 more matches
Deployment and next steps - Learn web development
a particularly useful plugin which is also maintained by the svelte team is svelte-preprocess, which pre-processes many different languages in svelte files such as postcss, scss, le...
...application. we are also telling gitlab to deploy the contents of the public folder. on the last line, we are configuring gitlab to redeploy our app only when there's a push to our master branch. since our app will be published at a subdirectory (like https://your-user.gitlab.io/mdn-svelte-todo), we'll have to make the references to the javascript and css files in our public/index.html file
relative. to do this, we just remove the leading slashes (/) from the /global.css, /build/bundle.css, and /build/bundle.js urls, like this: <title>svelte to-do list</title> <link
rel='icon' type='image/png' href='favicon.png'> <link
rel='stylesheet' href='global.css'> <link
rel='stylesheet' href='build/bundle.css'> <script defer src='build/bundle.js'></script> do this now. now we just h...
...vations behind svelte, you should read rich harris's rethinking reactivity presentation on youtube. he is the creator of svelte, so he has a couple of things to say about it. you also have the interactive slides available here which are, unsurprisingly, built with svelte. if you liked it, you will also enjoy the return of 'write less, do more' presentation, which rich harris gave at jscamp 2019.
related projects there are other projects
related to svelte that are worth checking out: sapper: an application framework powered by svelte that provides server-side rendering (ssr), code splitting, file-based routing and offline support, and more. think of it as next.js for svelte. if you are planning to develop a fairly complex web application you should definitely have a look at this project. ...
...And 2 more matches
Introduction to automated testing - Learn web development
you to easily install packages, share your own packages with others, and run useful scripts on your projects. once the install completes, test that node is installed by typing the following into the terminal, which returns the installed versions of node and npm: node -v npm -v if you've got node/npm already installed, you should update them to their latest versions. to update node, the most
reliable way is to download and install an updated installer package from their website (see link above). to update npm, use the following command in your terminal: npm install npm@latest -g note: if the above command fails with permissions errors, fixing npm permissions should sort you out. to start using node/npm-based packages on your projects, you need to set up your project directories ...
...o with gulp. the gulp plugin directory has literally thousands of plugins to search through. other task runners there are many other task runners available. we certainly aren't trying to say that gulp is the best solution out there, but it works for us and it is fairly accessible to beginners. you could also try using other solutions: grunt works in a very similar way to gulp, except that it
relies on tasks specified in a config file, rather than using written javascript. see getting started with grunt for more details. you can also run tasks directly using npm scripts located inside your package.json file, without needing to install any kind of extra task runner system. this works on the premise that things like gulp plugins are basically wrappers around command line tools. so, if you ...
...re you get lifetime access to their platform. the only difference between their premium and their freemium plan is on the amount of consumption. for automation testing through their selenium grid, lambdatest offers 60 minutes per month of free testing. the basics: manual tests once you sign in to lambdatest, you will be routed to the lambdatest dashboard. the dashboard will provide you details
related to how many minutes you have consumed, how many concurrent sessions are running, your total number of tests to date, and more. to start off with manual testing you need to select the "real time testing" tab from the left navigation menu. as you click on the real time testing you will be directed to a screen where you can choose the browser configuration, browser version, os, and screen...
...And 2 more matches
Software accessibility: Where are we today?
led, were unable to use applications which were written for microsoft operating systems. these applications assumed that computer users could: read and react to text and images displayed on the screen. type on a standard keyboard. select text, pictures, and other information using a mouse react to sounds played. this tends to be somewhat less of a limitation in that most software doesn't
rely exclusively on audio to
relay feedback. if a person was unable to do one of the above-listed tasks, they found themselves unable to use many popular computer applications. here are some of the groups of people that have problems doing some of those tasks: print disabled: blind, deaf-blind, low vision, obstructed vision, dyslexic, cognitively disabled and illiterate individuals. physically ...
...uentially and methodically. only small pieces of sequential, non-graphical information can be conveyed - via text-to-speech or a refreshable braille display. whatever the user does, the software needs to respond with small, bite sized pieces of information that are as short and to the point as possible. ideally, intelligent decisions are made, so the user does not have to wade through as much non-
relevant data. alternative ways to command the computer and enter data another problem is how people with disabilities get information into the computer. if you're physically disabled, you may not be able to type on a regular keyboard or use a mouse. here are some of the alternative ways physically disabled people enter information: sticky keys make entering key combinations easy. for ...
...r data another problem is how people with disabilities get information into the computer. if you're physically disabled, you may not be able to type on a regular keyboard or use a mouse. here are some of the alternative ways physically disabled people enter information: sticky keys make entering key combinations easy. for example to make a capital letter, first press the shift key,
release it, then press the letter to be capitalized. the sticky key technique is utilized by people who have only one usable hand, or who have no use of their hands and type using a stick in their mouth. single switch technologies enable persons with severe physical disabilities. some, like stephen hawking, enter information by choosing among lists of options. they might press a switch ...
...And 2 more matches
Testopia
testopia is a test case management extension for bugzilla. it is designed to be a generic tool for tracking test cases, allowing for testing organizations to integrate bug reporting with their test case run results. though it is designed with software testing in mind, it can be used to track testing on virtually anything in the engineering process. ...
... testing organizations to integrate bug reporting with their test case run results. though it is designed with software testing in mind, it can be used to track testing on virtually anything in the engineering process. testopia 3.0 (not yet
released) if you upgraded to bugzilla 5.0, you probably noticed that testopia 2.5 is not compatible with this version. despite bugzilla 5.0 has already been
released a few months ago, we don't plan to
release a fix for testopia immediately, because it's currently under heavy work to make testopia a fully self-contained extension, which means that all tr_*.cgi scripts which are currently in the bugzilla/ root directory are being moved into extensions/testopia/lib/. this is not an trivial task, it takes time (it started in august 2014), and we decided that...
... the good news is that the current code in the git repository already works with bugzilla 5.0, and so if you upgraded to 5.0 already, and if you don't mind having a work-in-progress extension on your machine, you can decide to pull the code from the git repository. ...
...And 2 more matches
Creating reftest-based unit tests
riant, a "gold standard", that is determined to be correct. if one has software that multiplies numbers, one wants a regression test to show that 2 * 2 continues to be calculated to be 4, not something similar to but not quite exactly 4. but an operating system does change with time. it is not invariant. and a browser may change the visual effect produced by a tag while still being compliant with
relevant standards. for example, the html 4.01 specification at the w3c specifies that text inside of a <blockquote> will be indented, but it does not specify the number of pixels of the indentation. if a browser changes the depth of the indenting and the visual construct is tested against an invariant, the test would appear to fail. but the test should not fail, unless the "<blockquote>" element did...
.../reftest.list! if you try to run the full suite, you may experience stalls or other issues. creating reftest-based unit tests your first reftest it is a silly example, but this will step you through creating your first reftest. step 1 for now you must check out and build the browser in order to run the tests. see the build documentation for details on doing that. sorry about this, but the
released builds and the nightly builds are built with the "--disable-tests" option and reftest will not work - see bug 369809. step 2 open a terminal window. create a directory (inside firefox's source code tree) and make that your current directory (i.e. move to that directory). step 3 create a file named foo.html with the following: <html><head><title>reftest0001</title> <body><strong>hello!<...
...interesting or unusual ways. reftests and preferences in order to use preferences that are not listed in the browser's built-in preferences files such as all.js (in other words, preferences that will not show up in about:config) it is necessary to add the preference to testing/profiles/reftest/user.js. reftests and elevated privileges in general, reftests that you intend to check-in must not
rely on behaviour that requires elevated privileges. the build process runs reftests in a profile that does not automatically grant elevated privileges: requesting them will cause the standard security alert to display, which will likely cause the machine running the test to hang or timeout. any tests that require such privileges to work correctly should be testing chrome only pieces of ui. you can ...
...And 2 more matches
Obsolete Build Caveats and Tips
soft.com/en-us/library/dh8che7s%28v=vs.110%29.aspx note: starting with gecko 7.0, you should no longer include "-zc:wchar_t-" in the command line when building on windows. if you're using visual studio, go to project properties > c/c++ > language > treat wchar_t as built-in type and set it to "yes". from source_code/mercurial mozilla-2.0 (firefox 4.0) code for the firefox 4.0 (gecko 2.0)
release lives in
releases/mozilla-2.0. to get this code, do the following: # pull the mozilla source to the folder 20src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/
releases/mozilla-2.0/ 20src cd 20src mozilla-1.9.2 (firefox 3.6) code for the firefox 3.6 (gecko 1.9.2)
release lives in
releases/mozilla-1.9.2. to get this code, do t...
...ory is downloaded to .hg hg clone https://hg.mozilla.org/
releases/mozilla-2.0/ 20src cd 20src mozilla-1.9.2 (firefox 3.6) code for the firefox 3.6 (gecko 1.9.2)
release lives in
releases/mozilla-1.9.2. to get this code, do the following: # pull the mozilla source to the folder 192src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/
releases/mozilla-1.9.2/ 192src cd 192src mozilla-1.9.1 (firefox 3.5) code for the firefox 3.5 (gecko 1.9.1)
release lives in
releases/mozilla-1.9.1. ...
... from windows_sdk_versions visual c++ 9 (vs2008) professional/express download and install the windows 7 sdk. ...
...And 2 more matches
Storage access policy: Block cookies from trackers
een available in firefox for many years. this policy protects against cross-site tracking while minimizing the site breakage associated with traditional cookie blocking. this article explains how the policy works and how you can test it. testing in firefox this cookie policy has been available in firefox since version 63. ...
...t cross-site tracking while minimizing the site breakage associated with traditional cookie blocking. this article explains how the policy works and how you can test it. testing in firefox this cookie policy has been available in firefox since version 63. this documentation describes the policy that we intend to ship to firefox
release users, but may not match what is implemented in the current
release version of firefox. that's because we document new aspects of the policy as soon as they land in firefox nightly, our pre-
release channel. firefox nightly may also contain experimental features that we don't yet plan to ship to
release users; experimental features will not be included in this documentation, but may nevertheless impact the functionality of domains classified as trackers. we r...
...we’ll keep this page updated with the newest information as we strengthen our protections. these protections are on by default in nightly. the cookie policy can be enabled in other versions of firefox through the content blocking settings (these steps will vary by version; the linked documentation includes a dropdown to select the appropriate firefox version). ...
...And 2 more matches
mozbrowserloadstart
(the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
...). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. example in this example the mozbrowserloadend and mozbrowserloadstart events are used to change the icon shown on the stop/
reload button between stop (x) and
reload (r), as appropriate. ...
...ot. cancelable read only boolean whether the event is cancellable or not. example in this example the mozbrowserloadend and mozbrowserloadstart events are used to change the icon shown on the stop/
reload button between stop (x) and
reload (r), as appropriate. ...
...And 2 more matches
Browser API
liframeelement interface. browser api interfaces to support the requirement of a browser <iframe>, the htmliframeelement dom interface has been extended with new methods that give the <iframe> some super powers. navigation methods the following navigation methods allow navigation through the browsing history of the <iframe>. they are necessary to be able to implement back, forward, stop, and
reload buttons. htmliframeelement.
reload() allows
reloading of the <iframe> element content. htmliframeelement.stop() allows stopping of the <iframe>'s content loading. htmliframeelement.getcangoback() indicates whether it's possible to navigate backwards. htmliframeelement.goback() changes the location of the <iframe> for the previous location in its browsing history. htmliframeelement.ge...
...usage such as requestanimationframe. htmliframeelement.getvisible() indicates the current visibility state of the browser <iframe>. htmliframeelement.setactive() sets the current <iframe> as the active frame, which has an effect on how it is prioritized by the process manager. htmliframeelement.getactive() indicates whether the current browser <iframe> is the currently active frame. audio-
related methods the following methods allow direct control of sound in the browser element. htmliframeelement.getvolume() gets the current volume of the browser <iframe>. htmliframeelement.setvolume() sets the current volume of the browser <iframe>. htmliframeelement.mute() mutes any audio playing in the browser <iframe>. htmliframeelement.unmute() unmutes any audio playing in the browser ...
...nt.getvolume() gets the current volume of the browser <iframe>. htmliframeelement.setvolume() sets the current volume of the browser <iframe>. htmliframeelement.mute() mutes any audio playing in the browser <iframe>. htmliframeelement.unmute() unmutes any audio playing in the browser <iframe>. htmliframeelement.getmuted() indicates whether the browser <iframe> is currently muted. event-
related methods in order to manage the browser <iframe>'s content, many new events were added (see below). 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(). htmliframeelement.sendmouseevent() sends a mouseevent to the <iframe>'s content. utility meth...
...And 2 more matches
Script security
and are therefore same-origin with each other. therefore there's no need for any security checks, there are no wrappers, and there is no performance overhead for the common case of objects in a single window interacting with each other. whenever cross-compartment access happens, the wrappers enable us to implement the appropriate security policy. because the wrapper we choose is specific to the
relationship between the two compartments, the security policy it implements can be static: when the caller uses the wrapper, there's no need to check who is making the call or where it is going. cross-compartment access same-origin as we've already seen, the most common scenario for same-origin access is when objects belonging to the same window object interact. this all takes place within the sa...
...unctionally, it's as if the target is in the caller's compartment. cross-origin if the two compartments are cross-origin, the caller gets a cross-origin wrapper. this denies access to all the object's properties, except for a few properties of window and location objects, as defined by the same-origin policy. privileged to unprivileged code the most obvious example of this kind of security
relation is between system-privileged chrome code and untrusted web content, but there are other examples in gecko. the add-on sdk runs content scripts in sandboxes, which are initialized with an expanded principal, giving them elevated privileges with respect to the web content they operate on, but reduced privileges with respect to chrome. if the caller has a higher privilege than the target objec...
...as lower privileges than the target object, then the caller gets an opaque wrapper. an opaque wrapper denies all access to the target object. however, the privileged target is able to copy objects and functions into the less privileged scope using the exportfunction() and cloneinto() functions, and the less privileged scope is then able to use them. ...
...And 2 more matches
Scroll-linked effects
the definition of a scroll-linked effect is an effect implemented on a webpage where something changes based on the scroll position, for example updating a positioning property with the aim of producing a parallax scrolling effect. this article discusses scroll-linked effects, their effect on performance,
related tools, and possible mitigation techniques. 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. these effects work well in browsers where the scrolling is done synchronously on the browser's main thread. however, most browsers now support some sort of async...
...icky-positioning effect, where the "toolbar" div will stick to the top of the screen as you scroll down. <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. therefore, with asynchronous scrolling, the event handler will be delayed
relative to the user-visible scroll, and so the div will not stay visually fixed as intended. instead, it will mov...
...if it is, then it triggers an animation to "snap" the scroll position to the top of the div. as this animation is driven by javascript on the browser's main thread, it ...
...And 2 more matches
Introduction to NSPR
xplicit client request and remains a valid, independent execution entity until it returns from its root function or the process abnormally terminates. (prthread and functions for creating and manipulating threads are described in detail in threads.) nspr threads are lightweight in the sense that they are cheaper than full-blown processes, but they are not free. ...
...chieve the cost reduction by
relying on their containing process to manage most of the resources that they access. this, and the fact that threads share an address space with other threads in the same process, makes it important to remember that threads are not processes . nspr threads are scheduled in two separate domains: local threads are scheduled within a process only and are handled enti
rely by nspr, either by completely emulating threads on each host operating system (os) that doesn't support threads, or by using the threading facilities of each host os that does support threads to emulate a
relatively large number of local threads by using a
relatively small number of native threads. global threads are scheduled by the host os--not by nspr--either within a process or across pr...
...eduling. setting thread priorities preempting threads interrupting threads for reference information on the nspr api used for thread scheduling, see threads. setting thread priorities the host operating systems supported by nspr differ widely in the mechanisms they use to support thread priorities. in general, an nspr thread of higher priority has a statistically better chance of running
relative to threads of lower priority. however, because of the multiple strategies to provide execution vehicles for threads on various host platforms, priorities are not a clearly defined abstraction in nspr. at best they are intended to specify a preference with respect to the amount of cpu time that a higher-priority thread might expect
relative to a lower-priority thread. this preference is still...
...And 2 more matches
certutil
for certificate requests, ascii output defaults to standard output unless redirected. -b validity-time specify a time at which a certificate is required to be valid. use when checking certificate validity with the -v option. the format of the validity-time argument is yymmddhhmmss[+hhmm|-hhmm|z], which allows offsets to be set
relative to the validity end time. specifying seconds (ss) is optional. when specifying an explicit time, use a z at the end of the term, yymmddhhmmssz, to close it. when specifying an offset time, use yymmddhhmmss+hhmm or yymmddhhmmss-hhmm for adding or subtracting time, respectively. if this option is not used, the validity check defaults to t...
...ed. usage and examples most of the command options in the examples listed here have more arguments available. the arguments included in these examples are the most common ones or are used to illustrate a specific scenario. use the -h option to show the complete list of arguments for each command option. creating new security databases certificates, keys, and security modules
related to managing certificates are stored in three
related databases: o cert8.db or cert9.db o key3.db or key4.db o secmod.db or pkcs11.txt these databases must be created before certificates or keys can be generated. certutil -n -d [sql:]directory creating a certificate request a certificate request contains most or all of the information that is used to ge...
...base existing certificates or certificate requests can be added manually to the certificate database, even if they were generated elsewhere. this uses the -a command option. certutil -a -n certname -t trustargs -d [sql:]directory [-a] [-i input-file] for example: $ certutil -a -n "cn=my ssl certificate" -t "u,u,u" -d sql:/home/my/sharednssdb -i /home/example-certs/cert.cer a
related command option, -e, is used specifically to add email certificates to the certificate database. the -e command has the same arguments as the -a command. the trust arguments for certificates have the format ssl,s/mime,code-signing, so the middle trust settings
relate most to email certificates (though the others can be set). for example: $ certutil -e -n "cn=john smith email cert...
...And 2 more matches
Bytecode Descriptions
_ic stricteq, strictne stack: lval, rval ⇒ (lval op rval) strict equality operators (=== and !==). pop two values, check whether they're equal, and push the boolean result. this does not call user-defined methods and can't throw (except possibly due to oom while flattening a string). implements: strict equality comparison. format: jof_ic lt, gt, le, ge stack: lval, rval ⇒ (lval op rval)
relative operators (<, >, <=, >=). pop two values, compare them, and push the boolean result. the comparison may perform conversions that call .tostring()/.valueof() methods and can throw. implements:
relational operators: evaluation. format: jof_ic instanceof stack: value, target ⇒ (value instanceof target) the instanceof operator. this throws a typeerror if target is not an object. it calls ta...
...alls to requireobjectcoercible in the spec, we need this instruction only for destructuring assignment and initialization. toasynciter stack: iter, next ⇒ asynciter create and push an async iterator wrapping the sync iterator iter. next should be iter's .next method. implements: createasynctosynciterator. the spec says this operation takes one argument, but that argument is a record with two
relevant fields, [[iterator]] and [[nextmethod]]. used for for await loops. setprototype mutateproto stack: obj, protoval ⇒ obj set the prototype of obj. obj must be an object. implements: b.3.1 proto property names in object initializers, step 7.a. array literals newarray operands: (uint32_t length) stack: ⇒ array create and push a new array object with the given length, preallocating ...
...getfullyear(); }, the implicit this passed to getfullyear is date, not undefined. this walks the run-time environment chain looking for the environment record that contains the function. if the function call is not inside a with statement, use jsop::gimplicitthis instead. if the function call definitely refers to a local binding, use jsop::undefined. implements: evaluatecall step 1.b. but not enti
rely correctly. see bug 1166408. format: jof_atom gimplicitthis operands: (uint32_t nameindex) stack: ⇒ this like jsop::implicitthis, but the name must not be bound in any local environments. the result is always undefined except when the name refers to a binding in a non-syntactic with environment. note: the frontend has to emit jsop::gimplicitthis (and not jsop::undefined) for global unqualifi...
...And 2 more matches
SpiderMonkey 31
these
release notes are incomplete. the mozilla javascript team is pleased to announce the
release of spidermonkey 31. spidermonkey 31 is the javascript engine that shipped in firefox 31. it continues to improve performance over previous spidermonkey
releases, with a significantly improved garbage collector and other features. it also contains new language and api features described in detail below. please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. ...
...ith a significantly improved garbage collector and other features. it also contains new language and api features described in detail below. please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. the download url is outdated and spidermonkey not
release alone! get it here mozilla-esr31 you will find it in "firefox extended support
release 31" package on hg
release platform support spidermonkey 31 is supported on all the platforms where firefox 31 runs. compiling it requires a c++ compiler, and the jsapi can only be used from c++ code. if you are compiling with microsoft's visual studio, note that the minimum supported version is msvc10...
...been specialized to implement the same interface as js::value, for simplicity and to ease migration pain. changes to introduce handles to the jsapi are not individually documented, because of the breadth of the changes involved. the following features in earlier versions of spidermonkey have been dropped. xxx list removed features here spidermonkey 31 is not binary-compatible with previous
releases, nor is it source-code compatible. many jsapi types, functions, and callback signatures have changed, though most functions that have changed still have the same names and implement essentially unchanged functionality. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly stra...
...And 2 more matches
Setting up an update server
htly mars can be found here on archive.mozilla.org. be sure that you use the one that matches your machine's configuration. for example, if you want the nightly mar from 2019-09-17 for a 64 bit windows machine, you probably want the mar located at https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-36-29-mozilla-central/firefox-71.0a1.en-us.win64.complete.mar. prebuilt mars for
release and beta can be found here. beta builds are those with a b in the version string. after locating the desired version, the mars will be in the update directory. you want to use the mar labelled complete, not a partial mar. here is an example of an appropriate mar file to use: https://archive.mozilla.org/pub/firefox/
releases/69.0b9/update/win64/firefox-69.0b9.complete.mar. building a mar buil...
...> <update type="minor" displayversion="2000.0a1" appversion="2000.0a1" platformversion="2000.0a1" buildid="21181002100236"> <patch type="complete" url="http://127.0.0.1:8000/<mar name>" hashfunction="sha512" hashvalue="<hash>" size="<size>"/> </update> </updates> if you've downloaded the mar you're using, you'll find the sha512 value in a file called sha512sums in the root of the
release directory on archive.mozilla.org for a
release or beta build (you'll have to search it for the file name of your mar, since it includes the sha512 for every file that's part of that
release), and for a nightly build you'll find a file with a .checksums extension adjacent to your mar that contains that information (for instance, for the mar file at https://archive.mozilla.org/pub/firefox/night...
... if you've built your own mar, you can obtain its sha512 checksum by running the following command, which should work in linux, macos, or windows in the mozillabuild environment: shasum --algorithm 512 <filename> on windows, you can get the exact file size in bytes for your mar by right clicking on it in the file explorer and selecting properties. you'll find the correct size in bytes at ...
...And 2 more matches
Component Internals
the weblock component tutorial takes you step by step through the component creation process. xxx mediawiki...xxx sucks creating components in c++ let's start by examining how xpcom components are written in c++. the most common type of component is one that is written in c++ and compiled into a shared library (a dll on a windows system or a dso on unix). the illustration below shows the basic
relationship between the shared library containing the component implementation code you write and the xpcom framework itself. in this diagram, the outer boundary is that of the module, the shared library in which a component is defined. a component in the xpcom framework when you build a component or module and compile it into a library, it must export a single method named nsgetmodule. this nsg...
... in modules, and those modules are defined in shared library files that typically sit in the components directory of an xpcom application. a set of default libraries stored in this components directory makes up a typical gecko installation, providing functionality that consists of networking, layout, composition, a cross-platform user interface, and others. another, even more basic view of this
relationship of components to the files and interfaces that define them is shown in onion peel view of xpcom component creation in the next chapter. the component is an abstraction sitting between the actual module in which it is implemented and the objects that its factory code creates for use by clients. xpcom initialization to understand why and when your component library gets called, it is im...
...cture of xpcom. type library manifests type library manifests contain the following information: location of all type library files mapping of all known interfaces to type libraries where these structures are defined using the data in these two manifests, xpcom knows exactly which component libraries have been installed and what implementations go with which interfaces. additionally, it
relates the components to the type libraries in which the binary representations of the interfaces they support are defined. the next section describes how to hook into the xpcom startup and registration process and make the data about your component available in these manifests, so that your component will be found and registered at startup. registration methods in xpcom what is xpcom registrati...
...And 2 more matches
Mozilla internal string guide
fit in it. there are a number of additional string classes: classes which exist primarily as constructors for the other types, particularly nsdependent[c]string and nsdependent[c]substring. these types are really just convenient notation for constructing an ns[c]s[ubs]tring with a non-default ownership mode; they should not be thought of as different types. nsliteral[c]string which should ra
rely be constructed explicitly but usually through the ""_ns and u""_ns user-defined string literals. nsliteral[c]string is trivially constructible and destructible, and therefore does not emit construction/destruction code when stored in statics, as opposed to the other string classes. the major string classes the list below describes the main base classes. once you are familiar with them, see th...
...xt node and spidermonkey strings. latin1 converts to utf-16 by zero-extending each byte to a 16-bit code unit. note that this kind of "latin1" is not available for encoding html, css, js, etc. specifying charset=latin1 means the same as charset=windows-1252. windows-1252 is a similar but different encoding used for interchange. in addition, there exist multiple other (legacy) encodings. the web-
relevant ones are defined in the encoding standard. conversions from these encodings to utf-8 and utf-16 are provided by mozilla::encoding. additonally, on windows the are some rare cases (e.g. drag&drop) where it's necessary to call a system api with data encoded in the windows locale-dependent legacy encoding instead of utf-16. in those rare cases, use multibytetowidechar/widechartomultibyte from k...
...iate. there is no single answer to this question, but the important points are: surprisingly many strings are very often just ascii. ascii is a subset of utf-8 and is, therefore, efficient to represent as utf-8. representing ascii as utf-16 bad both for memory usage and cache locality. rust strongly prefers utf-8. if your c++ code is interacting with rust code, using utf-8 in nsacstring and me
rely validating it when converting to rust strings is more efficient than using nsastring on the c++ side. networking code prefers 8-bit strings. networking code tends to use 8-bit strings: either with utf-8 or latin1 (byte value is the unicode scalar value) semantics. js and dom prefer utf-16. most gecko code uses utf-16 for compatibility with js strings and dom string which are potentially-invali...
...And 2 more matches
mozIStorageConnection
able(in string atablename, in string atableschema); mozistoragependingstatement executeasync([array, size_is(anumstatements)] in mozistoragebasestatement astatements, in unsigned long anumstatements, [optional] in mozistoragestatementcallback acallback ); void executesimplesql(in autf8string asqlstatement); boolean indexexists(in autf8string aindexname); void p
reload(); obsolete since gecko 1.9 void removefunction(in autf8string afunctionname); mozistorageprogresshandler removeprogresshandler(); void rollbacktransaction(); void setgrowthincrement(in print32 aincrement, in autf8string adatabasename); mozistorageprogresshandler setprogresshandler(in print32 agranularity, in mozistorageprogresshandler ahandler);...
... boolean indicates if the connection is open and ready to use. this will be false if the connection failed to open, or it has been closed. read only. databasefile nsifile the current database nsifile. null if the database connection refers to an in-memory database. read only. lasterror long the last sqlite error code that occurred. read only. note: this is not
reliable if you are using asynchronous statements or if you are using the connection on multiple threads. lasterrorstring autf8string the english error string reported by the sqlite library for the last sqlite operation. read only. note: this is not
reliable if you are using asynchronous statements or if you are using the connection on multiple threads. lastinsertro...
... schemaversion long the schema version of the database. this should not be used until the database is ready. ...
...And 2 more matches
nsIAccessible
cessibles nsiaccessible.firstchild, nsiaccessible.lastchild to get first and last child nsiaccessible.children, nsiaccessible.getchildat(), nsiaccessible.childcount to navigate through the children by index accessible position you can use nsiaccessible.indexinparent to get accessible index in its parent. use nsiaccessible.groupposition() to get information about this accessible in its group. ...
...index accessible position you can use nsiaccessible.indexinparent to get accessible index in its parent. use nsiaccessible.groupposition() to get information about this accessible in its group.
relations many accessibles are linked with each other, for example, if one accessible gives the accessible name for another accessible (for example, html:label and html control) then these accessibles are
related, please refer to
relations documentation for more information. you can get
related accessibles by methods nsiaccessible.getaccessible
related() nsiaccessible.get
relations() nsiaccessible.get
relation() and nsiaccessible.
relationscount. focus and selection in order to focus an accessible or get focused child accessible use nsiaccessible.takefocus() and nsiaccessible.focusedchild. to sele...
...accessible node geometrically to the right of this one. getaccessibletoleft this method returns an accessible node geometrically to the left of this one. getaccessibleabove this method returns an accessible node geometrically above this one. getaccessiblebelow this method returns an accessible node geometrically below this one. ...
...And 2 more matches
nsIIOService
ntentpolicytype); nsiuri newfileuri(in nsifile afile); nsiuri newuri(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute type description offline boolean returns true if networking is in "offline" mode. when in offline mode, attempts to access the network will fail (although this does not necessarily cor
relate with whether there is actually a network available -- that's hard to detect without causing the dialer to come up). observers will be notified of changes to this attribute. methods allowport() checks if a port number is banned. this involves consulting a list of unsafe ports, corresponding to network services that may be easily exploitable. if the given port is considered unsafe, then...
...me for the protocol handler that could override the ioservice's decision. return value true if the port is allowed, false otherwise. extractscheme() utility to extract the scheme from a url string, consistently and according to spec (see rfc 3986). note: most url parsing is done via nsiuri, and in fact the scheme can also be extracted from a url string via nsiuri. this method is provided pu
rely as an optimization. acstring extractscheme( in autf8string urlstring ); parameters urlstring the string for the url to extract the scheme from. return value a string corresponding to the scheme. exceptions thrown ns_error_malformed_uri if url string is not of the right form. getprotocolflags() returns the protocol flags for a given scheme. unsigned long getprotocolflags( ...
...ment in which the image will be loaded. and for a css stylesheet it's the document whose rendering will be affected by the stylesheet. if possible, pass in the element which is performing the load. but if the load is coming from a js api (such as xmlhttprequest) or if the load might be coalesced across multiple elements (such as for ) then pass in the document node instead. for loads that are not
related to any document, such as loads coming from addons or internal browser features, use null here. aloadingprincipal the loadingprincipal of the channel. the principal of the document where the result of this request will be used. this defaults to the principal of aloadingnode, so when aloadingnode is passed this can be left as null. however for loads where aloadingnode is null this argument mu...
...And 2 more matches
nsILivemarkService
you can also use this check whether something is a livemark or not. 1.0 66 introduced gecko 1.8 obsolete gecko 22.0 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) this interface is obsolete. implemented by: @mozilla.org/browser/livemark-service;2. ...
... long long createlivemark( in long long folder, in astring n...
... long long createlivemark( in long long folder, in astring name, in nsiuri siteuri, in nsiur...
...And 2 more matches
nsIMsgFolder
void copyfolder(in nsimsgfolder srcfolder, in boolean ismovefolder,in nsimsgwindow msgwindow, in nsimsgcopyservicelistener listener ); void copyfilemessage(in nsifile file, in nsimsgdbhdr msgtoreplace,in boolean isdraft, in unsigned long newmsgflags,in nsimsgwindow msgwindow,in nsimsgcopyservicelistener listener); void acquiresemaphore(in nsisupports semholder); void
releasesemaphore(in nsisupports semholder); boolean testsemaphore(in nsisupports semholder); void getnewmessages(in nsimsgwindow awindow, in nsiurllistener alistener); void writetofoldercache(in nsimsgfoldercache foldercache, in boolean deep); long getnumnewmessages(in boolean deep); void setnumnewmessages(in long numnewmessages); acstring generat...
... acstring readonly charset acstring the charset of this folder. charsetoverride boolean biffstate unsigned long locked boolean readonly flags unsigned long direct access to the set/get all the flags at once. knowssearchnntpextension boolean readonly allowsposting boolean readonly
relativepathname acstring readonly sizeondisk unsigned long size of this folder on disk (not including .msf file) for imap, it's the sum of the size of the messages. username acstring readonly hostname acstring readonly expungedbytes unsigned long readonly deletable boolean readonly: can this folder be deleted. for examp...
... acstring readonly hostname acstring readonly expungedbytes unsigned long readonly deletable boolean readonly: can this folder be deleted. for example, special folders cannot be deleted. displayrecipients boolean readonly: should we be displaying recipients instead of the sender. for example, in the sent folder, recipients are more
relevant than the sender. manyheaderstodownload boolean readonly: used to determine if it will take a long time to download all the headers in this folder - so that we can do folder notifications synchronously instead of asynchronously. requirescleanup boolean readonly hasnewmessages boolean does this folder have new messages. firstnewmessage n...
...And 2 more matches
nsINavHistoryQuery
sited. this allows place queries to be returned (which might include bookmark folders -- use the bookmark service's getfolderuri) as well as anything else that may have been tagged with an annotation. this will only work for results_as_uri since there will be no visits for these items. begintime prtime begin time range for results (inclusive). begintimereference long one of the constants time_
relative_* which indicates how to interpret the corresponding begin time value. domain autf8string this is the host or domain name (controlled by domainishost). when domainishost, domain only does exact matching on host names. otherwise, it will return anything whose host name ends in domain. this one is a little different than most. setting it to an empty string is a real query and will match any ...
... query and will match any uri that has no host name (local files and such). set this to null (in c++ use setisvoid) if you don't want domain matching. domainishost boolean this controls the meaning of domain, and whether it is an exact match domainishost = true, or hierarchical (= false). endtime prtime end time range for results (inclusive). endtimereference long one of the constants time_
relative_* which indicates how to interpret the corresponding end time value. foldercount long read only: count of folders. hasannotation boolean read only: whether or not, annotation exists. hasbegintime boolean read only: whether or not, the corresponding begin time is considered. hasdomain boolean read only: whether or not, domain exists. hasendtime boolean read only: whether or not, the...
...uriisprefix to control whether this is an exact match. uriisprefix boolean controls the interpretation of uri. when unset (default), the uri will request an exact match of the specified uri. when set, any history entry beginning in uri will match. for example http://bar.com/foo will match http://bar.com/foo as well as http://bar.com/foo/baz.gif. constants constant value description time_
relative_epoch 0 default value. the time is
relative to jan 1 1970 gmt, (this is a normal prtime). as a special case, a 0 time
relative to time_
relative_epoch indicates that the time is not part of the query. this is the default, so an empty query will match any time. time_
relative_today 1 the time is
relative to this morning at midnight. normally used for queries
relative to today. for example, a ...
...And 2 more matches
nsISessionStore
astring getclosedwindowdata(); astring gettabstate(in nsidomnode atab); astring gettabvalue(in nsidomnode atab, in astring akey); astring getwindowstate(in nsidomwindow awindow); astring getwindowvalue(in nsidomwindow awindow, in astring akey); void init(in nsidomwindow awindow); void persisttabattribute(in astring aname); void resto
relastsession(); void setbrowserstate(in astring astate); void settabstate(in nsidomnode atab, in astring astate); void settabvalue(in nsidomnode atab, in astring akey, in astring astringvalue); void setwindowstate(in nsidomwindow awindow, in astring astate, in boolean aoverwrite); void setwindowvalue(in nsidomwindow awindow, in astring akey, in astring ...
...will always be false when in private browsing mode. methods deletetabvalue() deletes a value from a specified tab. void deletetabvalue( in nsidomnode atab, in astring akey ); parameters atab the tab for which to delete the value. akey the key whose value is to be deleted. exceptions thrown this metho...
...ze the service. persisttabattribute() sets the name of a tab attribute to be saved and restored for all xul tabs. note: at present, there's no way to pick and choose tabs to set persistent attributes for. this method affects all tabs indiscriminately. void persisttabattribute( in astring aname ); parameters aname the name of the attribute to be saved and restored for all tabs. ...
...And 2 more matches
Using nsIDirectoryService
locations. 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. once the service finds a location, if the provider says that the location is persistent, the service will cache that location so it is very quick on subsequent calls. different providers can provide certain locations that are
relevant to them. for example, in seamonkey, the profile service is a provider for locations that are
relative to the current profile. the caller asking for the file location, of course, doesn't need to know who the providers are. as a caller of the service, you never deal with the providers, only the service. defined locations the nsiproperties keywords that you will use to get locations are defined...
... provided by xpcom, are constant with the system, and and should not need customization. although you will not customize these locations, you may need to tell xpcom where its /bin directory is. this is done by passing a directory to ns_initxpcom or, for embedding, as the first parameter to ns_initembedding. the location of the components folder and the components registry, among other things, are
relative to the /bin directory. if mozilla's components directory is not in the same directory as your process, you will need to set the /bin directory as described above. in this case you will also need to tell the system of the location of dlls that are linked against. this aspect of file location is not
related to nsidirectoryservice, but needs mention here. on the macintosh, these dlls are the sh...
...ared libs in the "essential files" directory. you need to include an alias in your application that points to this directory and the resource id of this alias goes into your 'cfrg' resource. on platforms which use path environment variables, you will need to set one of these paths to the /bin directory. ...
...And 2 more matches
Weak reference
ion of your reference. this isn't always appropriate, and can lead to trouble. if, for instance, this owning reference is part of a cycle of owning references (e.g., if the referenced object also holds a owning reference back to you), then none of the objects in the cycle can be reclaimed without taking special measures. there are less severe situations. a naive design for an observer/observable
relationship would require the observable to hold a owning reference to the observer. after all, the observable must send messages to each observer, notifying it of the appropriate state changes. to do that, it will call a method on the observer, so it needs a pointer. and the call would fail if the pointer were allowed to dangle, therefore, the pointer should be a owning reference. this design, howe...
...nly need a short life compared to the thing being observed. it might go away after the first interesting event, even. but in this design, by hitching its life to the observable, it is kept on life-support long past any need or use. ...
... how do i use it? here's an example. the new and interesting things are highlighted. #include "nsweakptr.h" #include "nsiweakreferenceutils.h" // ... // it's easy to get a weak reference... ...
...And 2 more matches
Mail composition back end
ded objects or links will be sent as part of the message in mhtml nsimsgidentity *auseridentity, - the user identity for the person doing the send operation. this will be needed to determine the appropriate folder for copy operations. nsimsgcompfields *fields, - the message composition fields. this will contain all of the
relevant header information for message creation prbool digest_p, - this is a flag that says that most of the documents we are attaching are themselves messages, and so we should generate a multipart/digest container instead of multipart/mixed. (it's a minor difference.) prbool dont_deliver_p, - if "dont_de...
...of the first attachment is provided via `attachment1_type' `attachment1_body' and `attachment1_body_length'. these may all be 0 if all attachments are provided externally. const struct nsmsgattachmentdata *attachments, - subsequent attachments are provided as urls to load, described in the nsmsgattachmentdata structures. ...
...'. these may all be 0 if all attachments are provided externally. const struct nsmsgattachmentdata *attachments, - subsequent attachments are provided as urls to load, described in the nsmsgattachmentdata structures. const struct nsmsgattachedfile *p
reloaded_attachments, - attachments that are already locally stored on disk (note: both attachments and p
reloaded_attachments cannot be specified on a single call void *
relatedpart /* nsmsgsendpart */, - a
related part for multipart
related operations nsimsgsendlistener **alistenerarray) = 0; - an array of listeners for the send operation. this can be nsnull if you want to do the delivery operation "blind" ...
...And 2 more matches
Using the Mozilla symbol server
the debugger will not be able to show you the content of all variables and the execution path can seem strange because of inlining, tail calls, and other compiler optimizations. ...
...the debugger will not be able to show you the content of all variables and the execution path can seem strange because of inlining, tail calls, and other compiler optimizations. ...
...the debugger will not be able to show you the content of all variables and the execution path can seem strange because of inlining, tail calls, and other compiler optimizations. the only workaround is to build an unoptimized local build. ...
...And 2 more matches
Drawing and Event Handling - Plugins
s a drawable. for windowed plug-ins, the browser calls the npp_setwindow method with an npwindow structure that represents a window. ...
... ws_info; /* platform-dependent additional data */ #endif /* xp_unix */ npwindowtype type; /* whether this is a window or a drawable */ } npwindow; the window parameter is a platform-specific handle to a native window element in the browser window hierarchy on windows and unix. on mac os, window is a pointer to an np_port. the x and y fields specify the top-left corner of the plug-in
relative to the page. the width and height fields specify the dimensions of the plug-in area. these values should not be modified by the plug-in. the cliprect field defines the clipping rectangle of the plug-in in a coordinate system where the origin is the top-left corner of the drawable or window. the browser calls npp_setwindow whenever the drawable changes. for windowless plugins, a cliprect of...
...he windowing system of its native platform. the plug-in api provides a native window handle within which an instance does its drawing through the api call npp_setwindow. npp_setwindow passes the instance an npwindow object containing the native window handle. on windows and unix, each instance receives its own child window within the browser window hierarchy, and imaging and event processing are
relative to this window. mac os does not support child windows. the native window is shared between the instance and the browser. the instance must restrict its drawing to a specified area of the shared window, and it must always save the current settings, set up the drawing environment, and restore the shared drawing environment to the previous settings. on mac os, events are explicitly provided to ...
...And 2 more matches
Plug-in Basics - Plugins
prefix "npp", and all of the browser-specific functions have the prefix "npn". note: np_initialize and np_shutdown are not technically a part of the function table that the plug-in hands to the browser. the browser calls them when the plug-in software is loaded and unloaded. these functions are exported from the plug-in dll and accessed with a system table lookup, which means that they are not
related to any particular plug-in instance. again, see initialization and destruction for more information about initializing and destructing. the browser calls the plug-in api function npp_new when the instance is created. multiple instances of the same plug-in can exist (a) if there are multiple embedded objects on a single page, or (b) if several browser windows are open and each displays the ...
...ng interface (api) is made up of two groups of functions and a set of shared data structures. plug-in methods are functions that you implement in the plug-in; gecko calls these functions. the names of all the plug-in functions in the api begin with npp_, for example, npp_new. there are also a couple of functions (i.e., np_initialize and np_shutdown) that are direct library entry points and not
related to any particular plug-in instance. browser methods are functions implemented by gecko; the plug-in calls these functions. the names of all the browser functions in the api begin with npn_, for example, npn_write. data structures are plug-in-specific types defined for use in the plug-in api. the names of structures begin with np, for example, npwindow. all plug-in names in the api start w...
...have one of these display modes: embedded in a web page and visible embedded in a web page and hidden displayed as a full page in its own window an embedded plug-in is part of a larger html document and is loaded at the time the document is displayed. the plug-in is visible as a rectangular subpart of the page (unless it is hidden). embedded plug-ins are commonly used for multimedia images
relating to text in the page, such as the adobe flash plug-in. when gecko encounters the object or embed element in a document, it attempts to find and display the file represented by the data and src attributes, respectively. the height and width attributes of the object element determine the size of the embedded plug-in in the html page. for example, this object element calls a plug-in that display...
...And 2 more matches
Version, UI, and Status Information - Plugins
in to display a message on the status line, get agent information, and check on the current version of the plug-in api and the browser. displaying a status line message users are accustomed to checking the ui status line at the bottom of the browser window for updates on the progress of an operation or the url of a link on the page. you can also use the status line to notify the user of plug-in-
related information. the user might appreciate seeing the percentage completed of the current operation or the url of a button or other link object when the cursor is over it, all of which the browser shows. in fact, your plug-in interface should be consistent with the rest of the browser in this way. to accomplish this, the plug-in calls the npn_status method to display your message on the status l...
...d minor version numbers, which are determined when the plug-in and navigator are compiled, and compare them. if the versions are not compatible, the plug-in can let the user know. the plug-in can also use the version number to find out whether a particular feature exists on the version of the browser that the plug-in is running in. the browser and plug-in api major version numbers represent code
release numbers, and their minor version numbers represent point
release numbers. for example, plug-in api version 6.03 has a major version number of 6 and a point
release number of 3. differing version numbers may mean that the current plug-in api and the browser versions are incompatible. changes to the minor version numbers indicate a smaller difference than changes to the major version. changes ...
...ly indicate incompatibility. the plug-in calls the npn_version method to check for changes in major and minor plug-in api version numbers. it gets the values from the plug-in rather than from the browser. void npn_version(int *plugin_major, int *plugin_minor, int *netscape_major, int *netscape_minor); this function returns the plug-in version number in plugin_major, the plug-in point
release number in plugin_minor, the browser version number in netscape_major, and the browser point
release number in netscape_minor. this code declares variables to hold the version numbers and calls npn_version to return the major and minor version numbers for the browser and the plug-in api. int plugin_major, plugin_minor, netscape_major, netscape_minor; // declare variables to hold version numb...
...And 2 more matches
Responsive Design Mode - Firefox Developer Tools
for example, many pages ch...
...for example, many pages check for touch su...
...mode and returns to regular browsing the settings menu includes the following commands: left-align viewport - when checked moves the rdm viewport to the left side of the browser window show user agent - when checked displays the user agent string the final two options define when the page is
reloaded:
reload when touch simulation is toggled: when this option is enabled, the page is
reloaded whenever you toggle touch support.
reload when user agent is changed: when this option is enabled, the page is
reloaded whenever the user agent is changed.
reloading on these changes can be helpful because certain page behaviors would otherwise not be applied. for example, many pages check for touch support on load and only add event handlers if it is supported, or only enable certa...
...And 2 more matches
Element.getBoundingClientRect() - Web APIs
the element.getboundingclientrect() method returns the size of an element and its position
relative to the viewport. the element's size is equal to its width/height + padding + border-width in the case that the standard box model is being used, or width/height only if box-sizing: border-box has been set on it. syntax domrect = element.getboundingclientrect(); value the returned value is a domrect object which is the union of the rectangles returned by getclientrects() for the element, i.e., the css border-boxes associated with the element. ...
...alue is a domrect object which is the union of the rectangles returned by getclientrects() for the element, i.e., the css border-boxes associated with the element. the result is the smallest rectangle which contains the entire element, with read-only left, top, right, bottom, x, y, width, and height properties describing the overall border-box in pixels. properties other than width and height are
relative to the top-left of the viewport. empty border-boxes are completely ignored. if all the element's border-boxes are empty, then a rectangle is returned with a width and height of zero and where the top and left are the top-left of the border-box for the first css box (in content order) for the element. the amount of scrolling that has been done of the viewport area (or any other scrollable...
...t of the border-box for the first css box (in content order) for the element. the amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the bounding rectangle. this means that the rectangle's boundary edges (top, right, bottom, left) change their values every time the scrolling position changes (because their values are
relative to the viewport and not absolute). if you need the bounding rectangle
relative to the top-left corner of the document, just add the current scrolling position to the top and left properties (these can be obtained using window.scrollx and window.scrolly) to get a bounding rectangle which is independent from the current scrolling position. cross-browser fallback scripts requiring high cross...
...And 2 more matches
HTML Drag and Drop API - Web APIs
a translucent representation of the draggable elements follows the pointer during the drag operation. for web sites, extensions, and xul applications, you can customize which elements can become draggable, the type of feedback the draggable elements produce, and the droppable elements. ...
... html drag and drop includes a description of the interfaces, basic steps to add drag-and-drop support to an application, and an interoperability summary of the interfaces. drag events html drag-and-drop uses the dom event model and drag events inherited from mouse events. a typical drag operation begins when a user selects a draggable element, drags the element to a droppable element, and then
releases the dragged element. during drag operations, several event types are fired, and some events might fire many times, such as the drag and dragover events. each drag event type has an associated global event handler: event on event handler fires when… drag ondrag …a dragged item (element or text selection) is dragged. dragend ondragend …...
...ing drag operations, several event types are fired, and some events might fire many times, such as the drag and dragover events. each drag event type has an associated global event handler: event on event handler fires when… drag ondrag …a dragged item (element or text selection) is dragged. dragend ondragend …a drag operation ends (such as
releasing a mouse button or hitting the esc key; see finishing a drag.) dragenter ondragenter …a dragged item enters a valid drop target. (see specifying drop targets.) dragexit ondragexit …an element is no longer the drag operation's immediate selection target. dragleave ondragleave …a dragged item leaves a valid drop target. dragover on...
...And 2 more matches
MouseEvent - Web APIs
wn. mouseevent derives from uievent, which in turn derives from event. though the mouseevent.initmouseevent() method is kept for backward compatibility, creating of a mouseevent object should be done using the mouseevent() constructor. several more specific events are based on mouseevent, including wheelevent and dragevent. ...
...) coordinates. mouseevent.clienty read only the y coordinate of the mouse pointer in local (dom content) coordinates. mouseevent.ctrlkey read only returns true if the control key was down when the mouse event was fired. mouseevent.metakey read only returns true if the meta key was down when the mouse event was fired. ...
...eevent.ctrlkey read only returns true if the control key was down when the mouse event was fired. mouseevent.metakey read only returns true if the meta key was down when the mouse event was fired. mouseevent.movementx read only the x coordinate of the mouse pointer
relative to the position of the last mousemove event. mouseevent.movementy read only the y coordinate of the mouse pointer
relative to the position of the last mousemove event. ...
...And 2 more matches
SVGSVGElement - Web APIs
the svgsvgelement interface provides access to the properties of <svg> elements, as well as methods to manipulate them. this interface contains also various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering devices. ...
...dom attributes currentscale and currenttranslate are equivalent to the 2×3 matrix [a b c d e f] = [currentscale 0 0 currentscale currenttranslate.x currenttranslate.y]. if "magnification" is enabled (i.e., zoomandpan="magnify"), then the effect is as if an extra transformation were placed at the outermost le...
...used. svgsvgelement.unpauseanimations() unsuspends (i.e., unpauses) currently running animations that are defined within the svg document fragment, causing the animation clock to continue from the time at which it was suspended. svgsvgelement.animationspaused() returns true if this svg document fragment is in a paused state. svgsvgelement.getcurrenttime() returns the current time in seconds
relative to the start time for the current svg document fragment. if getcurrenttime() is called before the document timeline has begun (for example, by script running in a <script> element before the document's svgload event is dispatched), then 0 is returned. svgsvgelement.setcurrenttime() adjusts the clock for this svg document fragment, establishing a new current time. if setcurrenttime() is cal...
...And 2 more matches
Using Service Workers - Web APIs
e worker is installed, it then receives an activate event. the primary use of onactivate is for cleanup of resources used in previous versions of a service worker script. the service worker will now control pages, but only those opened after the register() is successful. i.e. a document starts life with or without a service worker and maintains that for its lifetime. so documents will have to be
reloaded to actually be controlled. the below graphic shows a summary of the available service worker events: promises promises are a great mechanism for running async operations, with success dependant on one another. this is central to the way service workers work. promises can do a variety of things, but all you need to know for now is that if something returns a promise, you can attach...
...egistration failed console.log('registration failed with ' + error); }); } the outer block performs a feature detection test to make sure service workers are supported before trying to register one. next, we use the serviceworkercontainer.register() function to register the service worker for this site, which is just a javascript file residing inside our app (note this is the file's url
relative to the origin, not the js file that references it.) the scope parameter is optional, and can be used to specify the subset of your content that you want the service worker to control. in this case, we have specified '/sw-test/', which means all content under the app's origin. if you leave it out, it will default to this value anyway, but we specified it here for illustration purposes. the ...
... sw on a page, browsers that don’t support sw but do support appcache will use that, and browsers that support both will ignore the appcache and let sw take over. why is my service worker failing to register? this could be for the following reasons: you are not running your application through https. the path to your service worker file is not written correctly — it needs to be written
relative to the origin, not your app’s root directory. in our example, the worker is at https://mdn.github.io/sw-test/sw.js, and the app’s root is https://mdn.github.io/sw-test/. but the path needs to be written as /sw-test/sw.js, not /sw.js. the service worker being pointed to is on a different origin to that of your app. this is also not allowed. also note: the service worker will only ...
...And 2 more matches
UIEvent.layerX - Web APIs
syntax var xpos = event.layerx xpos is an integer value in pixels for the x-coordinate of the mouse pointer, when the mouse event fired. ...
... syntax var xpos = event.layerx xpos is an integer value in pixels for the x-coordinate of the mouse pointer, when the mouse event fired. ...
... syntax var xpos = event.layerx xpos is an integer value in pixels for the x-coordinate of the mouse pointer, when the mouse event fired. ...
...And 2 more matches
UIEvent.layerY - Web APIs
syntax var ypos = event.layery; ypos is an integer value in pixels for the y-coordinate of the mouse pointer, when the mouse event fired. ...
... syntax var ypos = event.layery; ypos is an integer value in pixels for the y-coordinate of the mouse pointer, when the mouse event fired. ...
... syntax var ypos = event.layery; ypos is an integer value in pixels for the y-coordinate of the mouse pointer, when the mouse event fired. ...
...And 2 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
pplication is concerned, it makes no difference whether you're calling out or receiving a call. the best thing about perfect negotiation is that the same code is used for both the caller and the callee, so there's no repetition or otherwise added levels of negotiation code to write. perfect negotiation works by assigning each of the two peers a role to play in the negotiation process that's enti
rely separate from the webrtc connection state: a polite peer, which uses ice rollback to prevent collisions with incoming offers. a polite peer, essentially, is one which may send out offers, but then responds if an offer arrives from the other peer with "okay, never mind, drop my offer and i'll consider yours instead." an impolite peer, which always ignores incoming offers that collide with its...
... put the remainder of our reception code in there. if we already have video coming in from the remote peer (which we can see if the remote view's <video> element's srcobject property already has a value), we do nothing. otherwise, we set srcobject to the stream at index 0 in the streams array. the perfect negotiation logic now we get into the true perfect negotiation logic, which functions enti
rely independently from the rest of the application. handling the negotiationneeded event first, we implement the rtcpeerconnection event handler onnegotiationneeded to get a local description and send it using the signaling channel to the remote peer. let makingoffer = false; pc.onnegotiationneeded = async () => { try { makingoffer = true; await pc.setlocaldescription(); signaler.s...
...let's take a dive into the code to see how it works now. on receiving a description in the revised code, if the received message is an sdp description, we check to see if it arrived while we're attempting to transmit an offer. if the received message is an offer and the local peer is the impolite peer, and a collision is occurring, we ignore the offer because we want to continue to try to...
...And 2 more matches
Lighting a WebXR setting - Web APIs
however, there are issues and details to keep in mind while creating your lighting code, especially for augmented reality (ar) applications. this guide discusses these topics. and while this article provides brief reminders as to how lighting works in general, it is not by any means a tutorial in lighting or a guide to how to create a properly-lit 3d scene. ...
...e will be brighter than the other faces. because the intensity of diffuse light depends on the angle of incidence (the angle between the vector representing the direction from which the light reaches the surface and the surface's normal vector or the vector perpendicular to the surface), the intensity or brightness of the light reflected by an object varies depending on the surface's orientation
relative to the light source. a photo taken by nasa's cassini spacecraft showing specular reflection of light from a lake of liquid methane on the surface of saturn's moon titan. specular light specular light is the light that makes up the highlights on reflective objects, such as gems, eyes, shiny cups and plates, and the like. specular lights tend to appear as bright spots or squares on ...
...te to the pixel before the pixel is stored into the framebuffer. the color of each pixel in the final, rendered, scene is calculated using some intricate math that factors in things like: the color of the texture element (the pixel within the texture mapped onto the object; also known as a texel) corresponding to the screen pixel, given the object geometry, the viewer position and orientation
relative to each polygon, and so forth. the viewer position and distance. the surface material and reflectivity. the concavity or convexity of the surface at the target location. the position, color, directionality, and brightness of each light source in the scene. the color and brightness of any ambient light in the scene; this is light which is applied equally throughout the scene, with no sou...
...And 2 more matches
window.location - Web APIs
indow/location" example #1: navigate to a new page whenever a new value is assigned to the location object, a document will be loaded using the url as if location.assign() had been called with the modified url. note that security settings, like cors, may prevent this to effectively happen. ...
...whenever a new value is assigned to the location object, a document will be loaded using the url as if location.assign() had been called with the modified url. note that security settings, like cors, may prevent this to effectively happen. ...
...ll be loaded using the url as if location.assign() had been called with the modified url. note that security settings, like cors, may prevent this to effectively happen. ...
...And 2 more matches
XRView - Web APIs
n 3d). projectionmatrix read only the projection matrix that will transform the scene to appear correctly given the point-of-view indicated by eye. this matrix should be used directly in order to avoid presentation distortions that may lead to potentially serious user discomfort. transform read only an xrrigidtransform which describes the current position and orientation of the viewpoint in
relation to the xrreferencespace specified when getviewerpose() was called on the xrframe being rendered. usage notes positions and number of xrviews per frame while rendering a scene, the set of views that are used to render the scene for the viewer as of the current frame are obtained by calling the xrframe object's getviewerpose() method to get the xrviewerpose representing (in essence) the p...
...ed by calling the xrframe object's getviewerpose() method to get the xrviewerpose representing (in essence) the position of the viewer's head. 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. it's possible to have xrview objects which represent overlapping regions as well as enti
rely disparate regions; in a game, you might have views that can be presented to observe a remote site using a security camera or other device, for example. in other words, don't assume there are exactly two views on a given viewer; there can be as few as one (such as when rendering the scene in inline mode, and potentially many (especially if the field of view is very large). there might also be vie...
...t = 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. } special view transforms there are a few special transforms that are used on the view while rendering and lighting a scene. ...
...And 2 more matches
WAI-ARIA Roles - Accessibility
lement and all of its children should be treated similar to a desktop application, and no traditional html interpretation techniques should be used. this role should only be used to define very dynamic and desktop-like web applications.aria: article rolethe article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. ...
...adding role="button" will make an element appear as a button control to a screen reader. ...
... interactive controls. elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.aria: comment rolethe comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment.aria: complementary rolethe complementary landmark role is used to designate a supporting section that
relates to the main content, yet can stand alone when separated. these sections are frequently presented as sidebars or call-out boxes. if possible, use the html <aside> element instead.aria: contentinfo rolethe contentinfo landmark role is used to identify information repeated at the end of every page of a website, including copyright information, navigation links, and privacy statements. this secti...
...And 2 more matches
prefers-reduced-data - CSS: Cascading Style Sheets
has made no preference known to the system. this keyword value evaluates as false in the boolean context. reduce indicates that user has expressed the preference for lightweight alternate content. ...
... user agent implements this feature, although various operating systems do support such preferences and if this media query is ever implemented user agents will likely
rely on the settings provided by the operating system. examples note: no browser currently implements this feature so the following example will not work. ...
...gents will likely
rely on the settings provided by the operating system. examples note: no browser currently implements this feature so the following example will not work. ...
...And 2 more matches
Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
the logical properties and values specification introduces flow-
relative mappings for many of the properties and values in css. this article introduces the specification, and explains flow
relative properties and values. why do we need logical properties? css traditionally has sized things according to the physical dimensions of the screen. therefore we describe boxes as having a width and height, position items from the top and left, float things left, assign borders, margin, and padding to the top, right, bottom, left, etc. the logical properties and values specification defines mappings for these physical values to their logical, or flow
relative, counterparts — e.g. start and end as opposed to left and right/top and bottom. an example of why these mappings might be needed is as foll...
... if i now change the writing mode of this component to vertical-rl using the writing-mode property, the alignment continues to work in the same way. ...
... if i now change the writing mode of this component to vertical-rl using the writing-mode property, the alignment continues to work in the same way. the inline dimension is now running vertically and the block dimension horizontally. the grid doesn't look the same however, as the width assigned to the container is a horizontal measure, a measure tied to the physical and not the logical or flow
relative running of the text. if instead of the width property we use the logical property inline-size, the component now works the same way no matter which writing mode it is displayed using. you can try this out in the live example below. change writing-mode from vertical-rl to horizontal-tb on .grid to see how the different properties change the layout. when working with a site in a writi...
...And 2 more matches
Using z-index - CSS: Cascading Style Sheets
the same layer), stacking rules explained in the section stacking without the z-index property apply. in the following example, the layers' stacking order is rearranged using z-index. the z-index of element #5 has no effect since it is not a positioned element. ...
... in the section stacking without the z-index property apply. in the following example, the layers' stacking order is rearranged using z-index. the z-index of element #5 has no effect since it is not a positioned element. ...
...operty apply. in the following example, the layers' stacking order is rearranged using z-index. the z-index of element #5 has no effect since it is not a positioned element. ...
...And 2 more matches
Creating a cross-browser video player - Developer guides
on github. html markup to start off with, let's take a look at the html that makes up the player. the video first of all the <video> element is defined, contained within a <figure> element that acts as the video container. to anyone familiar with html5 markup and the <video> element, there should be nothing here that surprises you. ...
...en though this player will define its own custom control set, the controls attribute is still added to the <video> element, and the player's default control set is switched off later with javascript. doing things this way still allows users who have javascript turned off (for whatever reason) to still have access to the browser's native controls. a poster image is defined for the video, and the p
reload attribute is set to metadata, which informs the browser that it should initially only attempt to load the metadata from the video file rather than the entire video file. this provides the player with data such as video duration and format. note: ie9 behaves differently than most other browsers when a poster attribute is set. most browsers interpret the presence of a poster attribute to mean ...
...han the entire video file. this provides the player with data such as video duration and format. note: ie9 behaves differently than most other browsers when a poster attribute is set. most browsers interpret the presence of a poster attribute to mean that the specified image is to be displayed until the user chooses to play the video. ie9 will only use the specified poster image in this way if p
reload="none" is set; otherwise, it will take the first still of the video and display that instead. three different video sources are provided for the player: mp4, webm, and ogg. using these different source formats gives the best chance of being supported across all browsers that support html5 video. for further information on video formats and browser compatibility, see supported media formats. ...
...And 2 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). it's generally used as a focus indicator, to show which element will receive input events. borders any element can have a border drawn around it. a basic element border is a line drawn around the edges of the element's content. see box properties in the box model to learn about the
relationship between elements and their borders, and the article styling borders using css to learn more about applying styles to borders. you can use the border shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its width, style (solid, dashed, etc.), and so forth. border-color specifies a single color to use fo...
...ols available that can help you. while they can't replace having a good designer helping you make these decisions, they can definitely get you started. base color the first step is to choose your base color. this is the color that in some way defines your website or the subject matter of the site. just as we associate green with the beverage mountain dew and one might think of the color blue in
relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. there are plenty of ways to select a base color; a few ideas include: a color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey. a color that c...
...ith this sort of work. for example, the website colorzilla offers an extension (chrome / firefox) that offers an eyedropper tool for picking colors from the web. it can also take averages of the colors of pixels in various sized areas or even a selected area of the page. the advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of
related colors all used in concert, blending to create a desired effect. picking just one of these pixels can result in getting a color that on its own looks very out of place. fleshing out the palette once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to y...
...And 2 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
e of the linked url. no built-in functionality. allowed values are the same as the global lang attribute. ping a space-separated list of urls. when the link is followed, the browser will send post requests with the body ping to the urls. typically for tracking. referrerpolicy how much of the referrer to send when following the link. see referrer-policy for possible values and their effects.
rel the
relationship of the linked url as space-separated link types. target where to display the linked url, as the name for a browsing context (a tab, window, or <iframe>). the following keywords have special meanings for where to load the url: _self: the current browsing context. (default) _blank: usually a new tab, but users can configure browsers to open a new window instead. _parent:...
...elf: the current browsing context. (default) _blank: usually a new tab, but users can configure browsers to open a new window instead. _parent: the parent browsing context of the current one. if no parent, behaves as _self. _top: the topmost browsing context (the "highest" context that’s an ancestor of the current one). if no ancestors, behaves as _self. note: when using target, add
rel="noreferrer noopener" to avoid exploitation of the window.opener api; note: in newer browser versions (e.g. firefox 79+) setting target="_blank" on <a> elements implicitly provides the same
rel behavior as setting
rel="noopener". type hints at the linked url’s format with a mime type. no built-in functionality. obsolete attributes charsetobsolete since html5 hinted at the char...
... coordsobsolete since html5 used with the shape attribute. a comma-separated list of coordinates. nameobsolete since html5 was required to define a possible target location in a page. in html 4.01, id and name could both be used on <a>, as long as they had identical values. note: use the global attribute id instead. revobsolete since html5 specified a reverse link; the opposite of the
rel attribute. deprecated for being very confusing. shapeobsolete since html5 the shape of the hyperlink’s region in an image map. note: use the <area> element for image maps instead. properties content categories flow content, phrasing content, interactive content, palpable content. permitted content transparent, containing either flow content (excluding interactive...
...And 2 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
source will be set at a later time, under user control. see our autoplay guide for additional information about how to properly use autoplay. controls if this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback. crossorigin this enumerated attribute indicates whether to use cors to fetch the
related audio file. cors-enabled resources can be reused in the <canvas> element without being tainted. the allowed values are: anonymous sends a cross-origin request without a credential. in other words, it sends the origin: http header without a cookie, x.509 certificate, or performing http basic authentication. if the server does not give credentials to the origin site (by not setting the ac...
...ime to 3600 would be an attempt to set the current playback position well before the beginning of the media, and would fail. the getstartdate() method can be used to determine the beginning point of the media timeline's reference frame. disableremoteplayback a boolean attribute used to disable the capability of remote playback in devices that are attached using wired (hdmi, dvi, etc.) and wi
reless technologies (miracast, chromecast, dlna, airplay, etc). see this proposed specification for more information. in safari, you can use x-webkit-airplay="deny" as a fallback. duration read only a double-precision floating-point value which indicates the duration (total length) of the audio in seconds, on the media's timeline. if no media is present on the element, or the media is not valid...
... has no known end (such as for live streams of unknown duration, web radio, media incoming from webrtc, and so forth), this value is +infinity. loop a boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio. muted a boolean attribute that indicates whether the audio will be initially silenced. its default value is false. p
reload this enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. it may have one of the following values: none: indicates that the audio should not be p
reloaded. metadata: indicates that only audio metadata (e.g. length) is fetched. auto: indicates that the whole audio file can be downloaded, even if the user is...
...And 2 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
est to use a framework or library to present these, or to use a custom input of your own. another option is to use separate date and time inputs, each of which is more widely supported than datetime-local. some browsers may resort to a text-only input element that validates that the results are legitimate date/time values before letting them be delivered to the server, as well, but you shouldn't
rely on this behavior since you can't easily predict it. for those of you not using a supporting browser, the chrome/opera datetime-local control looks like the below screenshot. clicking the down arrow on the right hand side brings up a date picker to allow you to choose a date; you have to enter the time manually. the edge datetime-local control looks like the below; clicking the date and the t...
...px; } input:invalid+span:after { content: '✖'; padding-left: 5px; } input:valid+span:after { content: '✓'; padding-left: 5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely. it's also possible for someone to simply bypass your html enti
rely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth). handling browser support as mentioned above, the major problem with using date inputs...
...put as invalid) if your entry doesn't match the pattern nnnn-nn-nntnn:nn, where n is a number from 0 to 9. of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times. and what user is going to understand the pattern they need to enter the time and date in? we still have a problem. ...
...And 2 more matches
<input type="month"> - HTML: Hypertext Markup Language
the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options. for month inputs, the value of step is given in months, with a scaling factor of 1 (since the underlying numeric value is also in months). the default value of step is 1 month. using month inputs date-
related inputs (including month) sound convenient at first glance; they promise an easy ui for choosing dates, and they normalize the data format sent to the server, regardless of the user's locale. however, there are issues with <input type="month"> because at this time, many major browsers don't yet support it. we'll look at basic and more complex uses of <input type="month">, then offer advice on...
...css used in the above example. here we make use of the :valid and :invalid css properties to style the input based on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. div { margin-bottom: 10px; position:
relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it...
...position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely. it's also possible for someone to simply bypass your html enti
rely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth). handling browser support as mentioned above, the major problem with using date inputs at...
...And 2 more matches
Using the application cache - HTML: Hypertext Markup Language
che object. if any errors occur, the browser sends an error event, and the update halts. once all the files have been successfully retrieved, they are moved into the real offline cache automatically, and a cached event is sent to the applicationcache object. since the document has already been loaded into the browser from the cache, the updated document will not be rendered until the document is
reloaded (either manually or programatically). storage location and clearing the offline cache in chrome you can clear the offline cache by selecting "clear browsing data..." in the preferences or by visiting chrome://appcache-internals/. safari has a similar "empty cache" setting in its preferences but a browser restart may also be required. in firefox, the offline cache data is stored separatel...
... can also become obsolete. if an application's manifest file is removed from the server, the browser removes all application caches that use that manifest, and sends an "obsoleted" event to the applicationcache object. this sets the application cache's state to obsolete. the cache manifest file referencing a cache manifest file the manifest attribute in a web application can specify either the
relative path of a cache manifest file or an absolute url. (absolute urls must be from the same origin as the application). a cache manifest file can have any file extension, but it must be served with the mime type text/cache-manifest. note: on apache servers, the mime type for manifest (.appcache) files can be set by adding addtype text/cache-manifest .appcache to a .htaccess file within either th...
...er.png http://www.example.com/blah/blah a cache manifest file can include three sections (cache, network, and fallback, discussed below). in the example above, there is no section header, so all data lines are assumed to be in the explicit (cache) section, meaning that the browser should cache all the listed resources in the application cache. resources can be specified using either absolute or
relative urls (e.g., index.html). the "v1" comment in the example above is there for a good reason. browsers only update an application cache when the manifest file changes, byte for byte. if you change a cached resource (for example, you update the header.png image with new content), you must also change the content of the manifest file in order to let browsers know that they need to refresh the ca...
...And 2 more matches
Browser detection using the user agent - HTTP
bility of features rather than by targeting specific browsers. but browsers and standards are not perfect, and there are still some edge cases where detecting the browser is needed. using the user agent to detect the browser looks simple, but doing it well is, in fact, a very hard problem. this document will guide you in doing this as correctly as possible. it's worth re-iterating: it's very ra
rely a good idea to use user agent sniffing. you can almost always find a better, more broadly compatible way to solve your problem! considerations before using browser detection when considering using the user agent string to detect which browser is being used, your first step is to try to avoid it if possible. start by trying to identify why you want to do it. are you trying to work around a ...
... overlook what they are really after. people use user agent sniffing to detect if the users' device is touch-friendly and has a small screen so they can optimize their website accordingly. while user agent sniffing can sometimes detect these, not all devices are the same: some mobile devices have big screen sizes, some desktops have a small touchscreen, some people use smart tv's which are an enti
rely different ballgame altogether, and some people can dynamically change the width and height of their screen by flipping their tablet on its side! so, user agent sniffing is definitely not the way to go. thankfully, there are much better alternatives. use navigator.maxtouchpoints to detect if the user's device has a touchscreen. then, default back to checking the user agent screen only if (!("maxt...
...h off information on smaller screens. that will only annoy people because it will force them to use the desktop version. rather, try to have fewer columns of information in a longer page on smaller screens while having more columns with a shorter page on larger screen sizes. this effect can be easily achieved using css flexboxes, sometimes with floats as a partial fallback. also try to move less
relevant/important information down to the bottom and group the page's content together meaningfully. although it is off-topic, perhaps the following detailed example might give you insights and ideas that persuade you to forgo user agent sniffing. let us imagine a page composed of boxes of information; each box is about a different feline breed or canine breed. each box has an image, an overview, an...
...And 2 more matches
Firefox user agent string reference - HTTP
nd whether or not it's a mobile phone. firefox os phones simply say "mobile"; the web is the platform. note that platform can consist of multiple "; "-separated tokens. see below for further details and examples. though fixed in firefox 69, previous 32-bit versions of firefox running on 64-bit processors would report that the system is using a 32-bit cpu. rv:geckoversion indicates the
release version of gecko (such as "17.0"). in recent browsers, geckoversion is the same as firefoxversion. gecko/geckotrail indicates that the browser is based on gecko. on desktop, geckotrail is the fixed string "20100101" firefox/firefoxversion indicates the browser is firefox, and provides the version (such as "17.0"). from firefox 10 on mobile, geckotrail is the same as firefoxversion. the...
...pname/appversion appname/appversion indicates the application name and version. for instance, this could be "camino/2.1.1", or "seamonkey/2.7.1". firefox/firefoxversion is an optional compatibility token that some gecko-based browsers may choose to incorporate, to achieve maximum compatibility with websites that expect firefox. firefoxversion will generally represent the equivalent firefox
release corresponding to the given gecko version. some gecko-based browsers may not opt into using this token; for this reason, sniffers should be looking for gecko — not firefox! whether this token appears is controlled by the "general.useragent.compatmode.firefox" boolean pref. mobile and tablet indicators only from firefox 11 onwards. the platform part of the ua string indicates if firef...
...runs on a device that has the phone form factor, there is a mobile; token in the platform part of the ua string. when firefox runs on a tablet device, there is a tablet; token in the platform part of the ua string instead. for example: mozilla/5.0 (android 4.4; mobile; rv:41.0) gecko/41.0 firefox/41.0 mozilla/5.0 (android 4.4; tablet; rv:41.0) gecko/41.0 firefox/41.0 the version numbers are not
relevant. avoid inferring materials based on these. the preferred way to target content to a device form factor is to use css media queries. however, if you use ua sniffing to target content to a device form factor, please look for mobi (to include opera mobile, which uses "mobi") for the phone form factor and do not assume any cor
relation between "android" and the device form factor. this way, your...
...And 2 more matches
Link prefetching FAQ - HTTP
s silently prefetching specified documents and stores them in its cache. when the user visits one of the prefetched documents, it can be served up quickly out of the browser's cache. does prefetching work with https? starting in gecko 1.9.1 (firefox 3.5), https content can be prefetched. what are the prefetching hints? the browser looks for either an html <link> or an http link: header with a
relation type of either next or prefetch. an example using the link tag follows: <link
rel="prefetch" href="/images/big.jpeg"> the same prefetching hint using an http link: header: link: </images/big.jpeg>;
rel=prefetch the format for the link: header is described in rfc 5988 section 5. the browser observes all of these hints and queues up each unique request to be prefetched when the browser ...
...g>;
rel=prefetch the format for the link: header is described in rfc 5988 section 5. the browser observes all of these hints and queues up each unique request to be prefetched when the browser is idle. there can be multiple hints per page, as it might make sense to prefetch multiple documents. for example, the next document might contain several large images. some more examples follow: <link
rel="prefetch alternate stylesheet" title="designed for mozilla" href="mozspecific.css"> <link
rel="next" href="2.html"> are anchor (<a>) tags prefetched? ...
...e browser is idle. there can be multiple hints per page, as it might make sense to prefetch multiple documents. for example, the next document might contain several large images. some more examples follow: <link
rel="prefetch alternate stylesheet" title="designed for mozilla" href="mozspecific.css"> <link
rel="next" href="2.html"> are anchor (<a>) tags prefetched? no, only <link> tags with a
relation type of next or prefetch are prefetched. however, if there is sufficient interest, we may expand link prefetching support to include prefetching <a> tags, which include a
relation type of next or prefetch in the future. doing so would probably help content providers avoid the problem of stale prefetching links. is link prefetching standards compliant? yes, link prefetching as outlined in t...
...And 2 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
simplicity, powerful language features await. javascript is now used by an incredible number of high-profile applications, showing that deeper knowledge of this technology is an important skill for any web or mobile developer. it's useful to start with an overview of the language's history. javascript was created in 1995 by brendan eich while he was an engineer at netscape. javascript was first
released with netscape 2 early in 1996. it was originally going to be called livescript, but it was renamed in an ill-fated marketing decision that attempted to capitalize on the popularity of sun microsystem's java language — despite the two having very little in common. this has been a source of confusion ever since. several months later, microsoft
released jscript with internet explorer 3. it w...
...lean type, with possible values true and false (both of which are keywords.) any value can be converted to a boolean according to the following rules: false, 0, empty strings (""), nan, null, and undefined all become false. all other values become true. you can perform this conversion explicitly using the boolean() function: boolean(''); // false boolean(234); // true however, this is ra
rely necessary, as javascript will silently perform this conversion when it expects a boolean, such as in an if statement (see below). for this reason, we sometimes speak simply of "true values" and "false values," meaning values that become true and false, respectively, when converted to booleans. alternatively, such values can be called "truthy" and "falsy", respectively. boolean operations such a...
...nary operator for conditional expressions: var allowed = (age > 18) ? 'yes' : 'no'; the switch statement can be used for multiple branches based on a number or string: switch (action) { case 'draw': drawit(); break; case 'eat': eatit(); break; default: donothing(); } if you don't add a break statement, execution will "fall through" to the next level. this is very ra
rely what you want — in fact it's worth specifically labeling deliberate fallthrough with a comment if you really meant it to aid debugging: switch (a) { case 1: // fallthrough case 2: eatit(); break; default: donothing(); } the default clause is optional. you can have expressions in both the switch part and the cases if you like; comparisons take place between the two using th...
...And 2 more matches
JavaScript modules - JavaScript
local web server. basic example structure in our first example (see basic-modules) we have a file structure as follows: index.html main.js modules/ canvas.js square.js note: all of the examples in this guide have basically the same structure; the above should start getting pretty familiar. the modules directory's two modules are described below: canvas.js — contains functions
related to setting up the canvas: create() — creates a canvas with a specified width and height inside a wrapper <div> with a specified id, which is itself appended inside a specified parent element. returns an object containing the canvas's 2d context and the wrapper's id. createreportlist() — creates an unordered list appended inside a specified wrapper element, which can be used to o...
...ule, you need to import them into your script to be able to use them. ...
... so for example: /js-examples/modules/basic-modules/modules/square.js becomes ./modules/square.js you can see such lines in action in main.js. ...
...And 2 more matches
Memory Management - JavaScript
ees it when they are not used anymore (garbage collection). this automaticity is a potential source of confusion: it can give developers the false impression that they don't need to worry about memory management. memory life cycle regardless of the programming language, the memory life cycle is pretty much always the same: allocate the memory you need use the allocated memory (read, write)
release the allocated memory when it is not needed anymore the second part is explicit in all languages. the first and last parts are explicit in low-level languages but are mostly implicit in high-level languages like javascript. allocation in javascript value initialization in order to not bother the programmer with allocations, javascript will automatically allocate memory when values are ini...
... 3] range. var a = ['ouais ouais', 'nan nan']; var a2 = ['generation', 'nan nan']; var a3 = a.concat(a2); // new array with 4 elements being // the concatenation of a and a2 elements. using values using values basically means reading and writing in allocated memory. this can be done by reading or writing the value of a variable or an object property or even passing an argument to a function.
release when the memory is not needed anymore the majority of memory management issues occur at this phase. the most difficult aspect of this stage is determining when the allocated memory is no longer needed. low-level languages require the developer to manually determine at which point in the program the allocated memory is no longer needed and to
release it. some high-level languages, such as ...
...m of automatically finding whether some memory "is not needed anymore" is undecidable. as a consequence, garbage collectors implement a restriction of a solution to the general problem. this section will explain the concepts that are necessary for understanding the main garbage collection algorithms and their respective limitations. references the main concept that garbage collection algorithms
rely on is the concept of reference. within the context of memory management, an object is said to reference another object if the former has access to the latter (either implicitly or explicitly). for instance, a javascript object has a reference to its prototype (implicit reference) and to its properties values (explicit reference). in this context, the notion of an "object" is extended to somethi...
...And 2 more matches
isNaN() - JavaScript
ote, coercion inside the isnan function has interesting rules; you may alternatively want to use number.isnan(), as defined in ecmascript 2015. syntax isnan(value) parameters value the value to be tested. return value true if the given value is nan; otherwise, false. description the necessity of an isnan function unlike all other possible values in javascript, it is not possible to
rely on the equality operators (== and ===) to determine whether a value is nan or not, because both nan == nan and nan === nan evaluate to false. hence, the necessity of an isnan function. origin of nan values nan values are generated when arithmetic operations result in undefined or unrepresentable values. such values do not necessarily represent overflow conditions. a nan also results from attem...
...type number, the value is first coerced to a number. the resulting value is then tested to determine whether it is nan. ...
...ple, is su
rely "not a number." the confusion stems from the fact that the term, "not a number", has a specific meaning for numbers represented as ieee-754 floating-point values. the function should be interpreted as answering the question, "is this value, when coerced to a numeric value, an ieee-754 'not a number' value?" ecmascript 2015 contains the number.isnan() function. number.isnan(x) is a
reliable way to test whether x is nan or not. even with number.isnan, however, the meaning of nan remains the precise numeric meaning and not simply, "not a number". alternatively, in the absence of number.isnan, the expression (x != x) is a more
reliable way to test whether variable x is nan or not, as the result is not subject to the false positives that make isnan un
reliable. a polyfill for isnan...
...And 2 more matches
Autoplay guide for media and Web Audio APIs - Web media technologies
begin playback and continue to play through to the end of the media without interruption, assuming there are no dramatic changes in network performance or bandwidth. example: the autoplay attribute an <audio> element using the autoplay attribute might look like this: <audio id="musicplayer" autoplay> <source src="/music/chapter1.mp4"> </audio> example 2: detecting autoplay failure if you
rely on autoplay for anything important, or if autoplay failure will impact your app in any way, you will probably want to be able to tell when it autoplay didn't begin. unfortunately, in the case of the autoplay attribute, recognizing whether or not autoplay successfully began is tricky. there's not an event triggered when autoplay fails. nor is there an exception thrown or a callback you can set up...
...icky. there's not an event triggered when autoplay fails. nor is there an exception thrown or a callback you can set up or even a flag on the media element that tells you if autoplay worked. all you can really do is examine a few values and make an educated guess as to whether or not autoplay worked. a better approach, if you're able to adjust the direction you look at things from, is to instead
rely on knowing that playback of the media has successfully started, instead of when it fails to start. you can do this easily, by listening for the play event to be fired on the media element. the play event is sent both when the media is resumed after being paused and when autoplay occurs. that means that the first time the play event is fired, you know your media is being started for the first ti...
... a reference to the video element from the event object's target, the element's onplay handler is set to null. this will prevent any future play events from being delivered to the handler. that could happen if the video is paused and resumed by the user or automatically by the browser when the document is in a background tab. at this point, your site or app can begin whatever it needs to do that
relies upon the video having been started up. note: this approach doesn't differentiate between autoplay and the user starting playback manually. the play() method the term "autoplay" also refers to scenarios in which a script tries to trigger the playback of media that includes audio, outside the context of handling a user input event. this is done by calling the media element's play() method. ...
...And 2 more matches
Digital audio concepts - Web media technologies
t integers, one for the left channel and one for the right. that means each sample requires 32 bits of memory. at the common sample rate of 48 khz (48,000 samples per second), this means each second of audio occupies 192 kb of memory. therefore, a typical three-minute song requires about 34.5 mb of memory. that's a lot of storage, but worse, it's an insane amount of network bandwidth to use for a
relatively short piece of audio. that's why most digital audio is compressed. the process of compressing and decompressing audio is performed by encoding and decoding it using an audio codec (coder/decoder). over the years, a large variety of codecs have been developed, several of which are commonly used on the web. for details about the most important and useful ones for web developers to be famili...
... data may be too much to viably transmit during any kind of real-time applications. to solve this problem, the audio must be made smaller using compression. note: network bandwidth is obviously not the same thing as audio bandwidth, which is discussed in sampling audio, above. audio compression basics unlike text and many other kinds of data, audio data tends to be noisy, meaning the data ra
rely consists of a series of exactly repeated bytes or byte sequences. as a result, audio data is difficult to compress using traditional algorithms such as those used by generral-purpose tools like zip, which usually work by replacing repeating sequences of data with a shorthand representation. there are several techniques which can be applied when compressing audio. most codecs use a combination o...
..., can only carry audio (or any other kind of signal) in the frequency band from 300 hz to 3,000 hz. this doesn't quite cover the entire range of human speech at the low end, but enough of the waveform is available that the human ear and brain compensate easily. this also means that humans are generally acclimated to hearing speech constrainted to so narrow an audio bandwidth. human speech uses a
relatively narrow frequency band (around 300 hz to 18,000 hz, though the exact range varies from person to person due to factors including gender). in addition, the vast majority of human speech sounds tend to lie between 500 hz and 3,000 hz or so, making it possible to drop substantial portions of the overall waveform without compromising the listener's ability to understand the words being said. yo...
...And 2 more matches
Lazy loading - Web Performance
any script tag with type="module" is treated like a javascript module and is deferred by default. css by default, css is treated as a render blocking resource, so the browser won't render any processed content until the cssom is constructed. css must be thin, delivered as quickly as possible, and the usage media types and queries are advised to unblock rendering. <link href="style.css"
rel="stylesheet" media="all"> <link href="portrait.css"
rel="stylesheet" media="orientation:portrait"> <link href="print.css"
rel="stylesheet" media="print"> it is possible to perform some css optimizations to achieve that. fonts by default, font requests are delayed until the render tree is constructed, which can result in delayed text rendering. it is possible to override the default behav...
... see also: element link images and iframes very often, webpages contain many images that contribute to data-usage and how fast a page can load. ...
... see also: element link images and iframes very often, webpages contain many images that contribute to data-usage and how fast a page can load. most of those images are off-screen (non-critical), requiring user interaction (an example being scroll) in order to view them. ...
...And 2 more matches
SDK API Lifecycle - Archive of obsolete content
at the same time, developers maintaining and extending the sdk's apis need to be able to introduce new apis that aren't yet fully proven, and to retire old apis when they're no longer optimal or supported by the underlying platform. the api lifecycle aims to balance these competing demands. it has two main components: a stability index that defines how stable each module is a deprecation process that defines when and how stable sdk apis can be changed or removed from future versions of the sdk while giving developers enough time to update their code. ...
... deprecated we plan to change this module, and backwards compatibility should not be expected. don’t start using it, and plan to migrate away from this module to its replacement. the stability index for each module is written into that module’s metadata structure, and is displayed at the top of each module's documentation page. ...
...his module to its replacement. the stability index for each module is written into that module’s metadata structure, and is displayed at the top of each module's documentation page. deprecation process deprecation in the chosen
release, the sdk team will communicate the module's deprecation: update the module's stability index to be "deprecated" include a deprecation notice in the
release notes, the add-ons blog, and the jetpack google group. the deprecation notice should point developers at a migration guide. migration the deprecation period defaults to 18 weeks (that is, three
releases) although in some cases, generally those out of our control, it might be shorter than this. during this time, the module will be in the deprecated state. the sdk team will track usage of d...
.... in preparation for this date the sdk team will decide whether to go ahead with removal: this will depend on how many developers have successfully migrated from the deprecated module, and on how urgently the module needs to be removed. if it's ok to remove the module, it will be removed. the sdk team will remove the corresponding documentation, and communicate the removal in the usual ways: the
release notes, the add-ons blog, and the jetpack google group. if it's not ok to remove it, the team will continue to support migration and aim to remove the module in the next
release. ...
jpm - Archive of obsolete content
the command prompt, type: jpm you should see a screen summarizing the available jpm commands. note that unlike cfx, jpm is available in every command prompt you start, as long as you installed it with the --global flag. install a different version of firefox as of firefox 48, it is not possible to use unsigned add-ons (i.e. any add-on which you are in the process of developing) in the branded
release or beta versions of firefox. thus, you will need to download and install a different version of firefox. assuming you don't want an old version of firefox, your options are firefox developer edition, firefox nightly, unbranded beta, or unbranded
release. when testing your add-on, you will need to use the -b option to jpm run. see selecting a browser version. problems? if you do not see thi...
...opment, with the following file structure: my-addon index.js package.json test test-index.js jpm run this command runs a new instance of firefox with the add-on installed: jpm run jpm run accepts the following options: -b --binary binary use the version of firefox specified in binary. binary may be specified as a full path or as a path
relative to the current directory. jpm run -b /path/to/firefox/nightly see selecting a browser version. --binary-args cmdargs pass extra arguments to firefox. for example, to pass the -jsconsole argument to firefox and launch the browser console, try the following: jpm run --binary-args -jsconsole to pass multiple arguments, or arguments containing spaces, quo...
...or "testmycode.js") call every function exported from that file whose name starts with "test". jpm test see the tutorial on unit testing and the reference documentation for the assert module for more details on this. jpm test accepts the following options: -b --binary binary use the version of firefox specified in binary. binary may be specified as a full path or as a path
relative to the current directory. jpm test -b /path/to/firefox/nightly see selecting a browser version. --binary-args cmdargs pass extra arguments to firefox. for example, to pass the -jsconsole argument to firefox, which will launch the browser console, try the following: jpm test --binary-args -jsconsole to pass multiple arguments, or arguments contain...
...oduction signing api. for example, you could pass https://addons-dev.allizom.org/api/v3 to use the dev instance of addons.mozilla.org. --xpi=/path/to/file.xpi an xpi file to sign. when no file is specified, a new xpi will be generated from the current directory (or --addon-dir). techniques selecting a browser version by default, jpm run and jpm test runs the
release version of firefox. you can instruct jpm to use a different version in one of two ways: you can use the -b or --binary option to instruct jpm to run a different version of firefox. you can supply a path to a specific binary: jpm run -b /path/to/firefox/nightly as a shorthand for this, you can pass "nightly", "firefoxdeveloperedition", "aurora", "beta", or "firefox" and jpm will lo...
Code snippets - Archive of obsolete content
various mozilla applications. many of these samples can also be used in xulrunner applications, as well as in actual mozilla code itself. these examples demonstrate how to accomplish basic tasks that might not be immediately obvious. general examples and demos from mdn articles a collection of examples and demos from articles. window code opening and manipulating windows toolbar toolbar
related code sidebar sidebar
related code forms forms
related code xml code used to parse, write, manipulate, etc. xml file i/o code used to read, write and process files drag & drop code used to setup and handle drag and drop events dialogs code used to display and process dialog boxes alerts and notifications modal and non-modal ways to notify users preferences code used to read, w...
... miscellaneous miscellaneous useful code fragments html to dom using a hidden browser element to parse html to a window's dom javascript libraries here are some javascript libraries that may come in handy. stringview a library that implements a stringview vi...
... miscellaneous miscellaneous useful code fragments html to dom using a hidden browser element to parse html to a window's dom javascript libraries here are some javascript libraries that may come in handy. stringview a library that implements a stringview view for javascript typed ...
...arsing exotic programming languages (i.e., creating compilers). this snippets shows a possible way to start from. 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. downloading files code to download files, images, and to monitor download progress password manager code used to read and write passwords to/from the integrated password manager bookmarks code used to read and write bookmarks javascript...
Extension Versioning, Update and Compatibility - Archive of obsolete content
the toolkit version format supports the firefox version format but allows greater flexibility. ...
...o install. choosing minversion and maxversion minversion and maxversion should specify the range of versions of the application you have tested with. in particular you should never specify a maxversion that is larger than the currently available version of the application since you do not know what api and ui changes are just around the corner. with compatibility updating it is not necessary to
release a whole new version of the extension just to increase its maxversion. for the maxversion it is generally permissible to use a * in place of the minor version of the application you support, for example 2.0.0.* would mean that you support any minor update to version 2 of the application. the application will usually suggest to extension authors which version part it is sensible to do this wit...
...ollowing tags, any other tags have themselves and their contents completely stripped: h1, h2 and h3 for general headings p for paragraphs ul and ol for lists. within lists use the usual li tag for each list item. within h1, h2, h3, p and li tags you may use: b or strong for bolder text i or em for italicized text formatting in firefox 4 and later from firefox 4 the restrictions are
relaxed somewhat. the following tags are interpreted normally: h1, h2 and h3 for general headings p, div, pre and blockquote for block formatting ul, ol, li, dl, dt and dd for lists b, i, em, strong, u, q, sub, sup and code for text formatting br and hr for line breaking the head, style and script tags and any of their contents are completely stripped. other tags aren't included in the resul...
...the user then can click the show information button, and will see the information, on the right hand side. (note the button caption is changed to hide information) problems you may encounter a problem where the content will not b...
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
. also, because it works with the javascript in extensions and firefox itself, the debugger can be a good way to learn about design methods. installing this is bundled with the mozilla suite and the current version of seamonkey, but it needs to be installed as an extension in firefox. see https://addons.mozilla.org/firefox/216/. install the extension in firefox directly from the above url and
relaunch firefox. starting up select “javascript debugger” from the tools menu. targeting javascript for debugging. when venkman first launches, it can only debug the file currently open in your web browser. this is because a lot of javascript files can slow down the browser down if they’re opened for debugging, but you’ll need to lift this restriction in order to develop extensions. unch...
...ing, but you’ll need to lift this restriction in order to develop extensions. uncheck the “exclude browser files” menu item under the debug menu (figure 1). fixme: figure 1: uncheck “exclude browser files.” set up quicknote for the purposes of this explanation, we’re going to use the file-storage mechanism in quicknote1 for our debugger. install quicknote from the following url and
relaunch firefox. https://addons.mozilla.org/firefox/46/. after
relaunching firefox, activate quicknote. then select tools:quicknote:float to display it in its own window. using venkman read in source code activate venkman, and then select open windows:quicknote.xul:files on the top-left of the screen. double-click on quicknote.js to open it in source-code view (figure 2). fixme: figure 2: selec...
...ift to that location and start investigating again. fixme: figure 4: adding a watch target mozunit mozunit is a tool for javascript that assists with unit testing. it provides an ui similar to that of eclipse’s junit test runner. it should be very easy for java programmers to get up to speed on it quickly. installing mozunit is a feature of mozlab. install mozlab from the following url and
relaunch firefox. http://hyperstruct.net/projects/mozunit after
relaunching, set up the editor you’ll use to write tests. open the about:config screen and edit the extensions.mozlab.mozunit.editor property. parameters are as shown in table 1. if you want to use terapad2, for example, insert the following: c:\app\tpad090\terapad.exe /jl=%l %f table 1: parameters used in mozunit pa...
...er to specify what you’re looking for (see figures 6, 7).4 this results in the file nsilocalfile.idl. let’s display it. every method includes explanatory comments. in initwithpath, the nsilocalfile object gets initialized, and any information already in it gets reset. also be aware of a potential problem when using paths not representing entities.5 this requires a full path as an argument.
relative paths will throw errors. this should help you understand the initwithpath specification. fixme: figure 6: searching without a trailing space fixme: figure 7: searching with a trailing space fixme: listing 7: source-code fragment var file = components.classes['@mozilla.org/file/local;1'] .createinstance(components.interfaces.nsilocalfile); file.initwithpath(hoge); how is thi...
XPCOM Objects - Archive of obsolete content
g point for xulrunner. xpcom is the way in which the two layers (xulrunner and chrome) communicate. most of the objects and functions in the lower layers are hidden from the chrome; those that need to be publicized are exposed through xpcom components and interfaces. you can think of xpcom as a reference to all the capabilities available on the lower layers of firefox. using xpcom components is
relatively simple, as you've seen in previous examples. this.obsservice = cc["@mozilla.org/observer-service;1"].getservice(ci.nsiobserverservice); the cc object (components.classes) is an index to static objects and class definitions available through xpcom. the string between the brackets is just an identifier, in this case corresponding to the observer service. you'll usually know what string...
...e. xpcom components can implement multiple interfaces, and they often do. let's look at the preference service as an example of this. we'll look at its documentation in a very old xul site called xul planet. all of its documentation was planned to be migrated to mdc, but it looks like it was never finished and xul planet was discontinued. their xpcom documentation is better in terms of seeing the
relationships between components and interfaces, so we'll use that. another useful resource is this xpcom reference. this is generated from source, and it's kept
relatively up to date. it shows the
relationships between components and interfaces, but it's more of a source browser than a documentation reference. stepping into the time machine, we see the preferences service component page. right at ...
...we use the preferences service to get and set preference values, such as the preference value we're getting on the fourth line of code. these methods are in the nsiprefbranch interface. the getservice and createinstance methods allow you to get the component already set to an interface. in many cases you only need to use one interface, and you won't have to worry about queryinter...
...erence observer. then we change it back, because after that we only need to get and set preferences, and those methods are in nsiprefbranch. trying to access methods or attributes without having the right interface set will result in an exception being thrown. passing parameters passing parameters to xpcom methods is no different from other js objects, with some exceptions. in general, you can
rely on javascript's ability to transform values to the correct type, but it's usually best to pass the right type in the first place. this section is a quick guide on how to read xpcom documentation, which basically amounts to understanding the syntax of xpidl, the language used to specify xpcom interfaces. at mdc, you'll see stuff like this: void setcharpref(in string aprefname, in string avalu...
Setting up an extension development environment - Archive of obsolete content
istinctive development preferences in about:config. install firefox development extensions specifically for this new developer user profile. edit files in the extensions folder of this profile, and restart the application as this new developer profile. development profile the use of a separate user profile for development can be advantageous, averting performance degradation from development
related settings, and further isolating personal data (such as bookmarks, extensions, and settings) from your testing environment. you could be running two instances of firefox simultaneously. note: for an extended guide on how to set up even more user profiles, take a look at multiple firefox profiles. this particularly comes in handy for the use of all currently available firefox versions. it eve...
...://github.com/noitidart/devprefs. maxversion needs to be set in install.rdf javascript.options.showinconsole = true. logs errors in chrome files to the error console. nglayout.debug.disable_xul_cache = true. disables the xul cache so that changes to windows and dialogs do not require a restart. this assumes you're using directories rather than jars. changes to xul overlays will still require
reloading of the document overlaid. browser.dom.window.dump.enabled = true. enables the use of the dump() statement to print to the standard console. see window.dump for more info. you can use nsiconsoleservice instead of dump() from a privileged script. javascript.options.strict = true. enables strict javascript warnings in the error console. note that since many people have this setting turned of...
...ay mean you won't have time to see the messages logged before the automatic restart happens. to see them, prevent the automatic restart by setting the environment no_em_restart to 1 before starting the application.) nglayout.debug.disable_xul_fastload = true. for gecko 2.0+ (firefox 4.0+). see this bug for more information. although the bug has been closed, it is believed that this pref is still
relevant. you might also want to set dom.report_all_js_exceptions = true. see exception logging in javascript for details. devtools.errorconsole.deprecation_warnings = true. detect deprecated code use. warning: never set nglayout.debug.disable_xul_fastload to true in a production environment; it exists solely to aid in debugging. in particular, add-ons should never change this preference. not...
... its chrome urls using traditional directories, rather than a jared structure. see below. place the file in the extensions folder of your profile and restart the application. using directories rather than jars regardless of whether you choose to eventually package your extension's chrome in a jar or in directories, developing in directories is simpler. if you choose a jared structure for
releasing, you can still develop with a directory structure by editing your chrome.manifest. for example, rather than having content myextension jar:chrome/myextension.jar!/content/ use content myextension chrome/content/ preventing the first launch extension selector requires gecko 8.0(firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) starting in firefox 8, on the first launch of a new vers...
Promises - Archive of obsolete content
the following page contains examples of many promise-based replacement apis for common operations. these apis allow asynchronous operation to be achieved with a coding style similar to synchronous variants. the following examples make use of the task api, which harnesses generator functions to remove some of the syntactic clutter of raw promises, such that asynchronous promise code more closely resembles synchronous, procedural code. ...
...f.reporterror("publication failed", e); }); file io file io in add-ons should be done via the os.file api, which provides a simple, but powerful, interface for reading, writing, and manipulating both text and binary files. it is also available for use off-main-thread in workers as a synchronous api. this interface replaces the previous, complicated xpcom nsifile and streams apis, and their
related javascript helper modules. these older interfaces should be avoided, even in their asynchronous forms, due to their performance penalties and needless complexity. representative example usage components.utils.import("resource://gre/modules/osfile.jsm"); task.spawn(function* () { // retrieve file metadata to check modification time. let info = yield os.file.stat(configpath); if...
...// make the second request. resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = resolve; xhr.onerror = reject; xhr.open("post", updateurl); xhr.send(form); }); // use the response of the second request. notifyuser(resp.target.responsetext); }); example using promise-based helper the following example
relies on the helper function defined below. task.spawn(function* () { // make the initial request. let xhr = yield request(dataurl, { responsetype: "json" }); let data = xhr.response; // use the response to construct form data object for the // second request. let form = new formdata; form.append("id", data.id); form.append("content", data.content); // make th...
...rst, it’s important to note that sqlite should be avoided in favor of simpler solutions, such as flat json files, under most circumstances. the io, memory, and cpu overhead added by sqlite is substantial, and in most cases outweighs the cost of dealing with flat files directly. for use cases which are not easily served by other options, or for legacy code which cannot easily be upgraded to non-
relational models, the sqlite.jsm module provides a clean, promise-based interface to sqlite databases. representative example usage components.utils.import("resource://gre/modules/sqlite.jsm"); task.spawn(function* () { // open the connection. let db = yield sqlite.openconnection({ path: database_path }); try { // start a transaction to insert the data. yield db.execu...
Updating addons broken by private browsing changes - Archive of obsolete content
idls nsitransferable: see using the clipboard for information about the new init method. imgicache: this must no longer be obtained as a service. see the imgicache article for more information. moziasyncfavicons/nsifaviconservice: setandfetchfaviconforpage/setandloadfaviconforpage now take a required privacy status argument, either nsifaviconservice...
...a new argument; see the nsiwebbrowserpersist docs for more information. nsicontentprefservice: getpref, setpref, haspref, hascachedpref, removepref, removegroupedprefs, removeprefsbyname, getprefs, and getprefsbyname all take a required nsiloadcontext argument to indicate the privacy status of the pref in question. use privatebrowsingutils.getprivacycontextfromwindow(win) to obtain it from the
relevant window. nsidownloadmanager/nsidownload: integer download ids (and specifically the id property of nsidownload) are deprecated, and don't allow access to private downloads. all downloads now use guids, and contain a new guid property. nsidownload now has retry, cancel, remove, pause, and resume methods which should be used instead of deprecated similarly-named nsidownloadmanager method...
... be used instead of deprecated similarly-named nsidownloadmanager methods. nsidownload's getdownload method is deprecated; use the asynchronous getdownloadbyguid method instead. nsidownloadmanager now has activeprivatedownloads, activeprivatedownloadcount, and privatedbconnection members to complement the existing public ones. nsidownloadmanager's addlistener method is deprecated. addprivacyawa
relistener should be used instead, or no notifications will be received for private downloads. there is a new download-manager-remove-download-guid notification, which passes an nsisupportscstring subject for the guid or null. nsihttpauthmanager: setauthidentity and getauthidentity now take an optional boolean parameter to indicate whether the identity is classified as private. nsistricttrans...
...required document argument (prior to the optional boolean and string arguments) indicating the document that originated the save action. gprivatebrowsingui: can no longer be used to control private browsing of any kind. any new private browsing session should be opened using openbrowserwindow, and any queries for private browsing status should use privatebrowsingutils.iswindowprivate(win) on a
relevant window object. saveurl: takes a new required document argument indicating the source of the url being saved. ...
MMgc - Archive of obsolete content
lection, and not incrementally, so write barriers aren't needed. write barriers are not needed for pointers to gc objects from unmanaged memory (gcroot). gcroots are marked at the end of the mark phase, and not incrementally, so no write barriers are required. drc() is required for rc objects, since the reference count must be maintained. write barriers are not needed for c++ objects that exist pu
rely on the stack, and never in the heap. the flash player class "nativeinfo" is a good example. such objects are essentially the same as stack-based local variables. zeroing rcobjects all rcobjects (including all subclasses) must zero themselves out completely upon destruction. asserts enforce this. the reason is that our collector zeroes memory upon free and this was hurting performance. since mmgc...
...d a gc pointer or not. this is a lot to ask from our c++ developers, so instead, mmgc assumes that every memory location might potentially contain a gc pointer. that means that it might occasionally turn up a "false positive." a false positive is a memory location that looks like it contains a pointer to a gc object, but it's really just some jpeg image data or an integer variable or some other un
related data. when the gc encounters a false positive, it has to assume that it might be a pointer since it doesn't have an exact description of whether that memory is a pointer or not. so, the not-really-pointed-to object will be leaked. memory leaks don't sound like an ok thing, right? well, memory leaks that result from programmer error tend to be bad leaks... leaks that grow over time. with such ...
...ng (drc). drc is a scheme for getting more immediate reclamation of objects, while still achieving high performance and getting the other benefits of garbage collection. classic reference counting previous versions of the flash player, up to flash player 7, used reference counting to track object lifetimes. class object { public: object() { refcount = 0; } void addref() { refcount++; } void
release() { if (!--refcount) delete this; } int refcount; } reference counting is a kind of automatic memory management. reference counting can track
relationships between objects, and as long as addref and
release are called at the proper times, can reclaim memory from objects that are no longer referenced. problem: circular references reference counting falls down when circular references ...
...bject to a gc root 1 and 2 are pretty well isolated. 1 is the setslot method in the avm- and some assembly code in the avm+. #2 can be found by examining all non-const methods of gc objects (and making all fields private, something the avm+ code base does already). #3 is a little harder because there are a good # of gc roots. this is an unfortunate artifact of the existing code base, the avm+ is
relatively clean and its reachability graph consists of basically 2 gc roots (the avmcore and urlstreams) but the avm- has a bunch (currently includes securitycallbackdata, moviecliploader, camerainstance, fappacket, microphoneinstance, csoundchannel, urlrequest, responceobject, urlstream and urlstreamsecurity). in order to make things easier we could avoid wb's for #3 by marking the root set twice. ...
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. ...
...ore efficient approach is to create the microsummaries on the server-side using the same tools and languages you already use to generate pages. for example, if you use php scripts to generate pages on your site, you could write php code to output a microsummary when the view=microsummary url parameter is present. then just link to the microsummaries from within the pages themselves using a <link
rel="microsummary"> element, f.e.: <head> <link
rel="microsummary" href="index.php?view=microsummary"> </head> when firefox encounters a <link
rel="microsummary"> element, it loads the url in the href attribute. if the url points to a generator, it uses the generator to generate the microsummary for the page. otherwise, if the url returns plain text content (or html content that can be converted...
...ith this addition, we've finished writing the xslt transform sheet that converts the spread firefox home page to its microsummary. specifying the page to which the generator applies now that we've written the transform sheet, we have to specify the page to which it applies. if we were the spread firefox webmasters, we might simply reference the generator within the page itself by adding a <link
rel="microsummary"> tag to its <head> element: <head> <link
rel="microsummary" href="path/to/our/generator.xml"> </head> since we're not that site's webmasters, however, we can specify the page to which the generator applies within the generator itself and then make the generator available for download and installation. to specify pages to which a generator applies, we use a <pages> element with...
... conclusion you should now have a microsummary generator that displays the current firefox download count when you install it, bookmark the spread firefox home page, and select the microsummary from the summary drop-down menu in the add bookmark dialog. for more information about microsummaries, see the microsummaries home page. ...
JavaScript crypto - Archive of obsolete content
at any time. warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. use <keygen> or the future web crypto api instead. using the mozilla crypto object from javascript mozilla defines a special javascript object to allow web pages access to certain cryptographic-
related services. these services are a balance between the functionality web pages need and the requirement to protect users from malicious web sites. most of these services are available via the dom window object as window.crypto. services are provided to enable: smart card events, generating certificate requests, importing user certs, generating random numbers, logging out of your tokens, and sign...
...ard events web sites can make themselves more smartcard friendly by listening for smartcard insertion and removal events. to enable your document to receive these events, you must first tell the crypto system you are interested by setting window.crypto.enablesmartcardevents to true. you can then register event handlers for these events with the document.addeventlistener() method. ...
...ents with the document.addeventlistener() method. two smart card
related events are generated: smartcard-insert when smartcards are inserted, and smartcard-remove when smartcards are removed. web sites which use ssl clientauth login could use the following code to refresh the page on token insertions and removals: <!doctype html> <p>... ...
...this allows the page to automatically login and logout based on the presence of the smartcard. generating keys and issuing user certificates there are several crypto object methods used in generating keys for certificates: generatecrmfrequest(), importusercertificates(). the generatecrmfrequest() function generates a key and creates a crmf request...
Elements - Archive of obsolete content
><html:b>hello world! </html:b><children/></content> </binding> <binding id="hello2"> <content><html:b>hello from my binding! </html:b><children/></content> </binding> </bindings> you can view the result by opening helloworld.html in firefox. hello.xml should reside in the same directory which contains helloworld.html. next: bindings > binding element. notes in the current stable
releases of mozilla products (e.g. firefox 2) it is impossible to attach bindings to table sub-elements (rows, cells etc.) you can attach binding only to the table element itself. this has been fixed for future versions of mozilla products. see bug 83830 for more information and for workarounds. default encoding in xml documents (including xbl files) is utf-8. an explicit encoding declarations may b...
...tion and for workarounds. default encoding in xml documents (including xbl files) is utf-8. an explicit encoding declarations may be present to override the default, for example <?xml version="1.0" encoding="iso-8859-1"?> uri in namespace declarations is an opaque string used to uniquely identify the namespace. it doesn't have to (and often it doesn't) point to some actual schema or a namespace-
related resource. namespaces in xml besides the default namespace, you can declare any amount of additional namespaces to handle your content. the most useful namespaces could be html/xhtml, xul (xml user interface language), svg (scalable vector graphics) and xlink. this way a more-or-less universal namespace declaration in your bindings could be like: <bindings xmlns="http://www.mozilla.org/xbl"...
... handler to fire. charcode - the charcode attribute imposes a filter on key handlers. its value is a single character, e.g., "z". if this attribute is present, then its value must match the charcode field of the dom key event object in order for the handler to fire. [editor's note: as dom events mature more attributes may be added. for example, mutation events define several new fields such as
relatedtarget that could be supported in the filtering syntax.] key - the key attribute has the same meaning as charcode. clickcount - the clickcount attribute imposes a filter on the handler. it is used with mouse handlers to specify how many times a button has been clicked. the event handler will only be matched if the value of the clickcount field in the dom mouse event object matches the value ...
...g. id - the id attribute is a document-unique identifier. src - the url of the style sheet to apply to the binding content. image <!element image empty> <!attlist image id id #implied src uri #required > declares an image resource used by the binding. the image is loaded as soon as the binding is used. you can use this to p
reload a number of images for later use. the image tag must be inside the resources tag. id - the id attribute is a document-unique identifier. src - the url of the image to load. ...
Using XPInstall to Install Plugins - Archive of obsolete content
script file is a cross-platform file (zip) and since javascript is understood by mozilla browsers on all platforms, often one single xpi package can be deployed on all platforms. this is, in fact, how skins and themes are installed to mozilla browsers, changing their look and feel. this article focuses on how to install plugins. which browsers support xpinstall? currently, all mozilla browsers
released by mozilla.org support xpinstall, and a family of browsers based on mozilla code support xpinstall. in particular, this includes: recent netscape browsers such as netscape 6.2.x and netscape 7.0, which are both based on netscape gecko, which is at the core of the mozilla browser recent beta-only versions of the aol software based on netscape gecko, the layout engine of the mozilla project...
...are dlls, on unix these are *.so files). these files are native code files made with the netscape plugin api. if the plugin is scriptable, then it will also consist of an xpt file. examples would be flash 6r47 on windows, which consists of a dll (called npswf32.dll) and an xpt file for scriptability (called flashplayer.xpt). if you are developing a plugin and wish to make it scriptable, read the
relevant portions of the plugin api. additional software. many plugins are part of additional software for media types. for example, realplayer on windows consists of a plugin dll, but also the realplayer application (exe) which the plugin dll is a subset of. in this case, the plugin is the part of the software package that is browser-specific, as a mechanism to give the application additional "hook...
...e part of the software package that is browser-specific, as a mechanism to give the application additional "hooks" into the browser. xpinstall can be used to install any combination of these files on an end-user's machine. for those familiar with netscape communicator 4.x's smartupdate technology, this will be a familiar idea. a brief history of netscape installer technologies this section is
relevant if you are familiar with netscape communicator 4.x's smartupdate installer technology. the use of javascript as the install logic is not unprecedented in netscape browsers. netscape communicator 4.x uses the notion of smartupdate to install software, particularly plugins and java applets to be run locally. smartupdate is not supported by mozilla browsers (and netscape/aol browsers based on m...
...rectory, install to a secondary location, and to write to the windows system registry to disclose this secondary location. this section traces some of the xpinstall apis that can do this. a complete template of an xpi package is also presented in this section. not all the work needs to be done in javascript -- if you have a native installer (exe) that recognizes netscape gecko browsers, and you me
rely wish to wrap the exe installer in an xpi package for a streamlined delivery to the client, you can easily do so. this section refers extensively to the xpinstall api documentation. initializing installation with plugin identifier all xpinstall installations are initiated with the initinstall method of the install object. since the install object is available to the install script, it need not...
compareTo - Archive of obsolete content
min minor version number. rev revision number. bld build number. ...
...ion parameter, this method returns a negative number. otherwise, it returns a positive number. in particular, this method returns one of the following values: -4 this version object has a smaller (earlier) major number than version. -3 this version object has a smaller (earlier) minor number than version. -2 this version object has a smaller (earlier)
release number than version. -1 this version object has a smaller (earlier) build number than version. 0 the version numbers are the same; both objects represent the same version. 1 this version object has a larger (newer) build number than version. 2 this version object has a larger (newer)
release number than version. 3 this...
...larger (newer)
release number than version. 3 this version object has a larger (newer) minor number than version. 4 this version object has a larger (newer) major number than version. ...
...s a larger (newer) major number than version. the following constants are defined and available for checking the value returned by compareto: installversion.major_diff installversion.minor_diff installversion.
rel_diff installversion.bld_diff installversion.equal installversion.major_diff_minus installversion.minor_diff_minus installversion.
rel_diff_minus installversion.bld_diff_minus example this code uses the compareto method to determine whether or not version 3.2.1 of the royal airways software has been previously installed: existingvi = installtrigger.getversion("/royalairways/royalsw"); if ( existingvi.compareto("3.2.1") <= 0 ) { // ... proceed to update ... } ...
refreshPlugins - Archive of obsolete content
returns nothing. description refreshplugins lets you register new plug-ins without having to restart the browser. ...
... returns nothing. description refreshplugins lets you register new plug-ins without having to restart the browser. ...
... returns nothing. description refreshplugins lets you register new plug-ins without having to restart the browser. ...
... returns nothing. description refreshplugins lets you register new plug-ins without having to restart the browser. ...
Building accessible custom components in XUL - Archive of obsolete content
, then define the column header and cells for each column. the label for each header and cell is defined in the value attribute. the flex attributes are simply for layout. note: the row and column headers are denoted by description elements, and individual cells are denoted by label elements. this is not an accessibility requirement; as we'll see in the next section, the actual xul elements are ir
relevant because we will define the role of each element in a separate attribute. <code> <grid class="spreadsheet" id="accjaxspreadsheet" flex="1"> <rows flex="1"></rows> <columns flex="1"> <column> <description value="entry #"/> <description value="1"/> <description value="2"/> <description value="3"/> <description value="4"/> <description value="5"/> ...
...; text-align: center; font-weight: bold; } </code> you can see the results by installing stage-1.xpi, restarting firefox, and selecting accjax from the tools menu. the final product looks like this: <caption>xul spreadsheet with 7 rows and 5 columns</caption> although this has the visual layout of a spreadsheet, assistive technologies will only see it as a collection of individual, un
related text labels. if we inspect this with the msaa inspect32 tool, we see that each cell is exposed as role="text". <caption>it looks like a cell, but it's not</caption> assistive technologies also have no idea that our row headers and column headers are really headers. again, they are exposed as role="text". <caption>it looks like a column header, but it's not</caption> so, befo...
... cell is exposed as role="text". <caption>it looks like a cell, but it's not</caption> assistive technologies also have no idea that our row headers and column headers are really headers. again, they are exposed as role="text". <caption>it looks like a column header, but it's not</caption> so, before we do anything else, we need to tell assistive technologies that all of these un
related elements are actually
related. this is where dhtml accessibility comes in. further reading grid element reference description element reference label element reference grid tutorial label tutorial adding roles with dhtml accessibility download stage-2.zip install stage-2.xpi using the new dhtml accessibility techniques in firefox 1.5, we can declare the role of each element in our spreads...
...handler on the spreadsheet itself (technically, the grid element), then check <var>e.target.tagname</var> to see which element actually received the event. there is no need to register event handlers on every single cell within the spreadsheet. there is one small implementation issue, which stems from the way elements are laid out within the grid element. if you want to navigate up one row, it is
relatively easy to find the right cell; it's the previous sibling of the currently focused cell. similarly, navigating down one row simply requires finding the next sibling of the currently focused cell. but navigating left and right is more difficult, since the cells are laid out in columns. we need to find the nth child of the previous column. (we could have laid out the grid by rows instead of col...
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. toolkit applications (such as firefox) use a different autocomplete mechanism than the mozilla suite. the example below will create an autocomplete textbox that will search the user's history. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incremental...
...y. the timed type is deprecated in gecko 1.9.1 and the search textbox may be used instead. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...ext in the textbox. ...
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. the autocomplete functionality is handled through one of more session objects, each of which can return a set of results given the current value of the textbox. the sessions can be set using the searchsessions attribute or by calling the addsession method. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablehistory obsolete since gecko 2.0 type: boolean note: applies to: thunderbird and seamonkeyif false, an arrow button will appear on the end of the textbox which will open a dropdown menu of all available re...
...he user is typing into the textbox. scrolling the user is scrolling through the textbox. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...e start argument is the index of the first character to select and the end argument is the index of the character after the selection. set both arguments to the same value to move the cursor to the corresponding position without selecting text. syncsessions( autocompleteelement ) obsolete since gecko 26 return type: void copy the sessions from another autocomplete element.
related interfaces nsiaccessibleprovider, nsidomxulmenulistelement ...
The Joy of XUL - Archive of obsolete content
es. overlays overlays are xul files used to describe extra content for the ui. they are a general mechanism for adding ui for additional components, overriding small pieces of a xul file without having to resupply the whole ui, and reusing particular pieces of the ui. overlays are a powerful mechanism for customizing and extending existing applications because they work in two
related but highly different ways. in one respect, overlays are synonymous with "include" files in other languages because an application may specify that an overlay be included in its definition. but overlays can also be specified externally, enabling the designer to superimpose them upon an application without changing the original source. in practical terms, this enables developers to maintai...
... leads to an overall solution that is easier and less costly to maintain in the long run. there is an additional benefit to overlays for software developers who intend to add features to mozilla that they wish to keep proprietary. the netscape public license (npl) and mozilla public license (mpl) require developers who alter original work (source code files that are provided with mozilla) to
release the source code for these changes to their customers. overlays can be used to add features to mozilla without contaminating the original open source code with proprietary alterations. xpcom/xpconnect xpcom and xpconnect are complementary technologies that enable the integration of external libraries with xul applications. xpcom, which stands for cross platform component ob...
...endar application is comprised of a xul front end and an xpcom component that leverages libical, a native library written in c, for date operations and calendar data storage. the calendar was initially developed exclusively for linux but was successfully ported to both macintosh and windows within a week. xul provides a rich set of ui components.the user interface for the calendar is written enti
rely in xul, javascript, and css, which is a testament to the power and flexibility of this application building framework. it uses simple xul components like boxes, grids, and stacks to compose views for the weeks, days, and months. the initial implementation of calendar did not exploit xbl because the developers involved were not experienced with this complementary technology. but future plans for ...
...ing within a few days. however, there was no existing win32 port available, so developers had to undertake a porting effort to migrate libical to windows. within a week this too was complete and mozilla had a working calendar for all three primary platforms: linux, macintosh, and windows. xpinstall is easy for developers and for users.the calendar is not a planned deliverable for the mozilla 1.0
release, and therefore is not included as a standard component in regular nightly and milestone
release builds. developers who are equipped with the software and knowledge required to compile mozilla can set an optional environment variable and build the calendar themselves. but many mozilla users who want to try out the calendar can't afford this luxury. using xpinstall it was easy for the developer...
command - Archive of obsolete content
for example, a clipboard paste operation can be invoked from the edit menu, a context menu and by pressing a keyboard shortcut. you attach the code to the command using the oncommand attribute. it will be called no matter how it is invoked by the user. in addition, disabling the command will automatically disable the menu items and keyboard shortcuts. commands are identified by their id. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user s...
...ement. setting this attribute to "true" indicates that the command is reserved for chrome code and is not available for use in the 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. currently, the content still receives these key events, even though it can't override them. in future
releases, it won't receive them. see bug 1173061 for details. properties inherited properties align, , 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, r...
...ributes(), 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 ...
description - Archive of obsolete content
the text can be set either with the value attribute or by placing text inside the open and close description tags. the value attribute is used to set text that appears in a single line. if text appears as a child of the description, it will wrap to multiple lines. it may contain arbitrary markup, which can be styled as needed. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. ...
...n the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...der a class used for headings. ...
key - Archive of obsolete content
when a key matching the attributes on the key element is pressed, the command will be fired on the key element. the key pressed must match the key attribute (or keycode attribute) as well as the modifiers attribute in order for the key element to be activated. for the shortcut defined using the key element to work, you must specify a command attribute (or an oncommand handler) on the key element. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. key type: character the character that must be pressed. this should be set to a displayable character. keycode type: string key code for keys that do not have displayable characters, such as the enter ke...
...pe: script code this event handler is called when the command is activated. this occurs when a user selects a menu item or presses a keyboard shortcut attached to the command. phase type: string the event phase where the handler is invoked. this should be set to the value capturing to indicate during the event capturing phase or target to indicate at the target element or left out enti
rely for the bubbling phase. properties inherited properties align, , 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, ,, ...
...d r keys are all pressed, the key will not match. to indiciate that a modifier key may optionally be pressed, place the word 'any' after listing the optional modifier key. for example: <key key="r" modifiers="shift any control"/> in this example, the shift key may or may not be pressed, while the control key must be pressed. this allows keys to match more loosely for modifier keys that aren't
relevant, yet still allows specific modifiers to be required. if the modifiers attribute is not specified, then no modifiers may be pressed for the key to match. if neither the key or keycode attribute are used, the key element will handle all key events. however, if one of the attributes is set to an empty string, the element doesn't handle any key events. for example: <!-- this element handles a...
listitem - Archive of obsolete content
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. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label ...
...ng you can make an item in a listbox a checkbox by setting this attribute to the value checkbox. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...etattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element. ...
menulist - Archive of obsolete content
the user may select one of the elements displayed in the menulist. the currently selected choice is displayed on the menulist element. to create the drop-down, put a menupopup inside the menulist containing the choices as menuitem elements. the command event may be used to execute code when the menulist selection changes. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. editable type: boolean indicates that the value of the menulist can be modified by typing directly into the value field. this is rendered as a textbox with a drop-down arrow beside it. the user may enter text into...
...en the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...eturned. removeallitems() return type: no return value removes all of the items in the menu. ...
menuseparator - Archive of obsolete content
typically drawn as a thin line. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label...
...n the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...ributes(), 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, menubar, menuitem, menulist, menupopup interfaces nsiaccessibleprovider, nsidomxulcontaineritemelement, nsidomxulselectcontrolitemelement ...
prefpane - Archive of obsolete content
a prefpane is made up of two parts, the preferences descriptions, which specify the set of preferences that will be modified, and the user interface for adjusting those preferences. the former is specified using a preferences element while the latter may be specified using other xul elements. both may be specified directly as children of the prefpane element, or the src attribute may be used to put a pane in a separate file. ...
...he separate file should use an overlay tag as its root tag since it will be loaded as an overlay to the main preferences window. more information is available in the preferences system article. attributes helpuri, image, label, onpaneload, selected, src properties image, label, preferenceelements, preferences, selected, src examples methods preferencefo
relement <prefpane id="panegeneral" label="general" src="chrome://path/to/paneoverlay.xul"/> or <prefpane id="panegeneral" label="general" onpaneload="ongeneralpaneload(event);"> <preferences> <preference id="pref_one" name="extensions.myextension.one" type="bool"/> ... more preferences ... </preferences> <checkbox label="number one?" preference="pref_one"/> ... more ui elements ...
...lected type: boolean this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. src type: url gets and sets the value of the src attribute. methods domelement getpreferenceelement(in domelement startelement) preferencefo
relement( uielement ) return type: preference element returns the preference element to which a user interface element is attached. void userchangedvalue(in domelement element); the user changed the value in a widget that the preferences system does not automatically track state changes for (1) and the preference element associated with the widget should be updated based ...
... ... ...
prefwindow - Archive of obsolete content
if there is only one prefpane, the navigation area will be hidden. on platforms where the convention is to apply changes immediately, the preferences are adjusted as soon as the user interface element is changed. on other platforms, the preferences are not applied until the dialog is closed. ...
...if there is only one prefpane, the navigation area will be hidden. on platforms where the convention is to apply changes immediately, the preferences are adjusted as soon as the user interface element is changed. on other platforms, the preferences are not applied until the dialog is closed. ...
... prefwindow tag to the id of the pane to start with. normally, you would not set this attribute as it will be set automatically such that the default pane is the same as the one showing when the preferences dialog was last closed. more information is available in the preferences system article. important note for xulrunner-based applications: the preferences system - part of the toolkit - still
relies on two browser.* preferences. the first one is browser.preferences.instantapply, a boolean preference. the preference window will not run correctly if you do not set this preference in your application's defaults (see bug 485150 for more information). a true value for this preference makes the preference window apply immediately the user choices, without waiting for the dialog to close with...
..., you possibly see strange behaviors about switching panes. this is due to bug 296418. ...
radio - Archive of obsolete content
radio buttons are almost always listed together in groups. only one radio button within the same radiogroup may be selected at a time. the user can switch which radio button is turned on by selecting it with the mouse or keyboard. other radio buttons in the same group are turned off. a label, specified with the label attribute may be added beside the radio button. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. focused type: boolean this attribute is true if the element is focused. group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group. ...
...n the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements radiogroup, checkbox interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement, nsidomxullabeledcontrolelement ...
radiogroup - Archive of obsolete content
only one radio button inside the group can be selected at a time. the radio buttons may either direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. focused type: boolean this attribute is true if the element is focused. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefw...
...n the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...cified index. ...
richlistbox - Archive of obsolete 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. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incremental...
...n the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...m specified by the argument item after the number of milliseconds given by the timeout argument. ...
richlistitem - Archive of obsolete content
attributes disabled, searchlabel, selected, tabindex, value properties accessible, control, disabled, label, selected, tabindex, value examples (example needed) attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. searchlabel type: string text used for 'find-as-you-type' (fayt) searching. in situations where the search text is ambiguous or missing, searchlabel can be used to give context to fayt. if searchlabel is not pre...
...n the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...ributes(), 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, nsidomxulselectcontrolitemelement ...
scale - Archive of obsolete content
a bar displayed either horizontally or vertically allows the user to select a value by dragging a thumb on the bar. use the orient attribute to specify the orientation of the scale. the default value is horizontal which displays a horizontal scale. lower values are to the left and higher values are to the right. set the orient attribute to vertical to use a vertical scale. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). the default va...
...n the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...er box by the increment. ...
tab - Archive of obsolete content
the user may click a tab to bring the associated page of the tabbox to the front. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. fadein type: boolean this attribute is set to true if the tab is fading in or out. this typically means that the tab is in the process of appearing or disappearing. first-tab type: boolean this attribute w...
... or has changed since the last time it was selected. this attribute is not present if the tab is not unread. validate type: one of the values below this attribute indicates whether to load the image from the cache or not. this would be useful if the images are stored remotely or you plan on swapping the image frequently. the following values are accepted, or leave out the attribute enti
rely for default handling: always the image is always checked to see whether it should be
reloaded. never the image will be loaded from the cache if possible. properties accesskey type: character gets and sets the value of the accesskey attribute. accessibletype type: integer a value indicating the type of accessibility object for th...
... interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement ...
Building XULRunner - Archive of obsolete content
em must be able to find an appropriate jdk on the system; see the instructions on building javaxpcom for more details. if you do not want to build javaxpcom support, specify --disable-javaxpcom in your configuration. on mac, xulrunner requires mac os x 10.3 or higher and xcode 1.5 or higher to build properly. the runtime requirement is mac os x 10.2. ...
...instead a xulrunner build is a just special build made from the firefox/mozilla tree, using the same tag as a firefox build. ...
...instead a xulrunner build is a just special build made from the firefox/mozilla tree, using the same tag as a firefox build. there is a convention where a certain xulrunner version maps to a certain tag in the cvs. ...
...elease ) up to version 1.8.0.5 the cvs repository does not have specific tags for xulrunner anymore. instead a xulrunner build is a just special build made from the firefox/mozilla tree, using the same tag as a firefox build. there is a convention where a certain xulrunner version maps to a certain tag in the cvs. for instance xulrunner 1.8.1.3, the corresponding tag is cvs is : firefox_2_0_0_3_
release to find out how those firefox tags and xulrunner version maps, check out the file mozilla/config/milestone.txt . you can also check the user agent string in firefox help/about menu to get the mapping from a certain binary firefox version to the corresponding xulrunner version. for instance, in firefox 2.0.0.9 you will get : mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.8.1.9) gecko/...
Getting started with XULRunner - Archive of obsolete content
this to any location you like, but there are many places in the documentation that will assume that you have this installed in /library/frameworks. in ubuntu desktop and its variants (xubuntu, kubuntu, ...), from version 11.10 (oneiric ocelot), xulrunner is not longer maintained and doesn't exist in ubuntu repository. ...
...ned and doesn't exist in ubuntu repository. therefore, either you need to compile xulrunner manually or download a binary
release from mozilla's ftp server. one way to achieve this is to run the following script everytime you want to install a new version: firefox_version=`grep -po "\d{2}\.\d+" /usr/lib/firefox/platform.ini` arch=`uname -p` xurl=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/
releases/$firefox_version/runtimes/xulrunner-$firefox_version.en-us.linux-$arch.tar.bz2 cd /opt sudo sh -c "wget -o- $xurl | tar -xj" sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell you could also save this script to a file for convenience. note: if you are using firefox build from ubuntuzilla repository, replace /usr/lib/firefox/platform...
...firefox/platform.ini. step 2: install xulrunner on windows, unzip the archive someplace reasonable. i unzipped it to a new c:\program files\xulrunner folder. on the mac, extract the tar.bz2 archive, which contains xulrunner as xul.framework. copy this to the /library/frameworks directory, or another location of your choice. on linux, you only need to unpack the archive if you are using a pre-
release xulrunner. in all systems you should unzip the omni.ja file into some example directory and take a look at all the awesome! first change the file extension to zip and then use your normal filesystem's decompression tool to open it up. the contents of omni.ja are available to xulrunner applications and are what make it possible to build amazing applications easily! step 3: create the appli...
...e: in xulrunner 2.0, the chrome.manifest is now used to register xpcom components in addition to its previous uses. part of this change means the /chrome/chrome.manifest is no longer considered the "root" manifest. xulrunner will not check that folder location for a root-level chrome.manifest. you need to move your existing chrome.manifest to the application root folder, remembering to update the
relative paths within the file. you could also just create a new application root-level manifest that includes the /chrome/chrome.manifest, which is what this tutorial will do. step 4: set up application.ini the application.ini file acts as the xulrunner entry point for your application. it specifies how your application intends to use the xulrunner platform as well as configure some information th...
2006-10-06 - Archive of obsolete content
sun microsystems contributes to lightning to combine it with openoffice.org sun microsystems provide users with an alternative open source choice by combining openoffice.org respectively staroffice and thunderbird/lightning. ...
... sun microsystems contributes to lightning to combine it with openoffice.org sun microsystems provide users with an alternative open source choice by combining openoffice.org respectively staroffice and thunderbird/lightning. ...
... sun microsystems contributes to lightning to combine it with openoffice.org sun microsystems provide users with an alternative open source choice by combining openoffice.org respectively staroffice and thunderbird/lightning. ...
... sun microsystems contributes to lightning to combine it with openoffice.org sun microsystems provide users with an alternative open source choice by combining openoffice.org respectively staroffice and thunderbird/lightning. ...
Examples - Archive of obsolete content
please refer to the article to learn more about these examples. if you wish to test these examples by yourself, please read the important notes. important notes if you plan to test these examples by yourself, you must use the right filename extension (it is written at the beginning of the code). ideally, upload the file to a web server and you're done. please note that the examples 4, 5 and 6 require a file named style.css to exist in the same directory as the example. you can get the contents of style.css at the bottom of this page. ...
... </p> <p> this document references css rules contained in an external stylesheet via <code>link</code>. </p> <p> note how the css rules for the background are applied in netscape 7.
... </p> <p> this document references css rules contained in an external stylesheet via <code>link</code>. </p> <p> note how the css rules for the background are applied in ne...
... </p> <p> this document references css rules contained in an external stylesheet via <code>link</code>. </p> <p> note how the css rules for the ba...
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
name of the fish created three problems: the double border was completely covered up by the image. the text of the h3 was basically touching the right side of the floated image... ...or it would have been, except in some browsers the heading was drawn over the floated image, in contradiction to the css specification. ...
...n top of the heading turned out to be a matter of
relatively positioning the floated image, and then giving it a z-index value. in order to create visual appeal, i decided to offset the top let corners of the fish image and fish name. with just a few simple margin and padding changes, this was possible. div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position:
relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} note how the image is pushed downward four pixels, while the h3 is pushed rightward four pixels. at the same time, the heading's pad...
...alf-em margins on card paragraphs, and then changed the left margin to be 160px, which makes sure the text in the paragraphs won't wrap under the floated images. this is desirable for the cases where only one word would wrap under an image. it's better to keep the text as if it's in a column of its own. div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position:
relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} div.card p {margin: 0.5em 0.5em 0.5em 160px;} and voila! the cards are done. conclusion redesigning a classic is something like be...
...se through this aspect of the redesign has gotten you hooked on the idea of using simple markup and css to create interesting effects, if you weren't already. with just the few elements i had available in this example, there were any number of possibilities for design effects, and i think you'll find the same to be true for your own designs if you just give this sort of approach a try. - fin. -
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. all rights reserved. note: this reprinted article was originally part of the devedge site. ...
Building Mozilla XForms - Archive of obsolete content
n, you should check your mozilla build environment by doing a regular firefox build. have a look at the build instructions for detailed information for your platform. ...
... a look at the build instructions for detailed information for your platform. ...
...s, branch mozilla_1_8_branch not developed any more last
release: 0.8.5ff2 firefox 3.0 gecko 1.9.0 cvs, branch head not developed any more last
release: 0.8.5ff3 firefox 3.5 gecko 1.9.1 xforms/schema-validation code does not build with firefox 3.5 any more not supported firefox 3.6 gecko 1.9.2 xforms/schema-validation code does not build with firefox 3.6 any more not developed any more last
release: 0.8.6 firefox 4 gecko 2.0 mercurial, repositories mozilla-central xforms schema-validation mostly works upcoming 0.8.7
release if you have your first working firefox build, you can go on with building the xforms extension. firefox 3.5 and up: get the source code if you want to build xforms for firefox up to 3.0, you already have the required source code, it's part of your cvs checkou...
.../schema-validation that's it, you now have everything you need to get started. configure your build: the .mozconfig file mozilla uses a file called .mozconfig in your home directory to store the build configuration. for xforms, you will need to add the following line: ac_add_options --enable-extensions="default,xforms" # if you're using a mozilla source before 2010-11-06 (e.g. an old firefox 3.6
release) use this instead (see bug 601570 for details): ac_add_options --enable-extensions="default,xforms,schema-validation" a complete .mozconfig file for a
release build might look like that: . $topsrcdir/browser/config/mozconfig mk_add_options moz_co_project=browser mk_add_options moz_objdir=@topsrcdir@/obj-@config_guess@ #mk_add_options autoconf=autoconf2.13 # possibly needed #mk_add_options m...
Implementation Status - Archive of obsolete content
tations and custom extension to the xforms 1.1 specification. these can be found on the mozilla xforms specials page. specification chapter index here we give an overview of xforms 1.1 specification chapters and the current status of the mozilla support. the sections are marked with their current status: supported, partial support, in progress, and not currently supported. we have listed the most
relevant bugs here, but check out the bugzilla xforms buglist for the complete list. 3. document structure section title status notes bugs 3.1 namespaces supported 3.2.1 common attributes supported 3.2.2 linking attributes supported ...
...mal, anyuri, base64binary, hexbinary, qname 6. ...
...xbinary, qname 6. ...
...and urlencoded-post submission methods supported 11.9.3 the put submission method supported 11.9.4 the delete submission method unsupported 11.9.5 serialization as application/xml supported 11.9.6 serialization as multipart/
related partial 330557; 11.9.7 serialization as multipart/form-data supported 11.9.8 serialization as application/x-www-form-urlencoded supported 11.10 replacing data with the submission response partial @replace with value of 'text' not supported ...
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
hin the table cell. the links will also turn red when they are hovered. gecko behavior in browsers based on netscape gecko builds later than 20020410 (netscape 6.1+), :hover styles can be applied to any element in a document. thus authors who have used bare pseudo-classes, or bare class-pseudo-class combinations, are at risk of seeing hover styles applied to more than just their links. the most
reliable fix is to add the anchor element to the selectors, like this: a:hover {color: red;} a.nav:hover {color: red;} in an attempt to avoid causing problems for legacy documents, browsers based on mozilla 1.0 and later (netscape 7+) include code that causes bare pseudo-classes to be restricted only to links if the document is rendered in "quirks" mode. in browsers based on the engine found in moz...
...t causes bare pseudo-classes to be restricted only to links if the document is rendered in "quirks" mode. in browsers based on the engine found in mozilla 1.3b and later, this quirk is extended to cover selectors that combine a bare class selector with the :hover pseudo-class (see bug 169078 for details). named anchor problems in addition to the effects described previously, there are two other
relatively common effects that authors may not expect. one is easily fixed by validation, but the other is a little more subtle. first, there is the problem of authors who open a named anchor but do not close it. for example: <a name="pagetop"> <h2>my page</h2> without a </a>, this name will effectively enclose the rest of the document. this generally means that the rest of the document will take ...
...hover {color: red;} in a document with an unclosed named anchor, any text that follows the anchor's open tag will be colored red (unless another css rule intervenes). this brings up the second common problem, which is that named anchors can accept hover styles. although authors may intend the selector a:hover to apply only to hyperlinks, it will also apply to named anchors, since the selector me
rely states that any a element which is in a hover state will be styled. in order to avoid this problem, authors should use the combined pseudo-class syntax described by css2: a:link:hover {color: red;} a:visited:hover {color: maroon;} note that, with this syntax, it is possible to style visited and unvisited links differently when they are hovered. this was not possible with simple a:hover. it doe...
...oid unexpected problems, authors are strongly encouraged to include element names in dynamic-state pseudo-classes that are meant to be applied to hyperlinks. furthermore, combining pseudo-classes prevents hover styles from being applied to non-hyperlink anchors. thus, a:hover should always be used instead of just :hover, and a:link:hover (and a:visited:hover) are preferred to the simpler a:hover
related links the dynamic pseudo-classes: :hover, :active, and :focus :hover pseudo-class (msdn) original document information author(s): eric a. meyer, netscape communications last updated date: published 07 mar 2003; revised 21 mar 2003 copyright information: copyright © 2001-2003 netscape. all rights reserved. note: this reprinted article was originally part of the devedge site. ...
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
io midl must not be used. (let's assume 'testplugin' as a plugin name-place holder.) compile nsitestplugin.idl with the idl compiler. this will generate nsitestplugin.h and nsitestplugin.xpt files. put nsitestplugin.xpt to the components folder. build nptestplugin.dll with nsitestplugin.h included for compiling scriptable instance class implementaion. put nptestplugin.dll to the plugins folder.
related sources the full sample plugin code can be found in the mozilla source tree under modules/plugin/samples/4x-scriptable/ ibm developer works has published a good article on xpcom. examples example 1. sample .idl file #include "nsisupports.idl" [scriptable, uuid(bedb0778-2ee0-11d5-9cf8-0060b0fbd8ac)] interface nsitestplugin : nsisupports { void nativemethod(); }; example 2. scriptable...
... nsitestplugin *scriptablepeer = (nsitestplugin *)instance->pdata; // see if this is the first time and we haven't created it yet if (!scriptablepeer) { nsitestplugin *scriptablepeer = new nsscriptablepeer(); if (scriptablepeer) ns_addref(scriptablepeer); // addref for ourself, // don't forget to
release on // shutdown to trigger its destruction } // add reference for the caller requesting the object ns_addref(scriptablepeer); *(nsisupports **)value = scriptablepeer; } else if (variable == nppvpluginscriptableiid) { nsiid* ptr = (nsiid *)npn_memalloc(sizeof(nsiid)); *ptr = scriptableiid; ...
...ranganathan last updated date: october 26, 2001 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...
...ranganathan last updated date: october 26, 2001 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...
Archive of obsolete content
scading style sheets language and aims at extending css2.1. it brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts. element events archived event pages firefox developer tools these are articles
related to the firefox developer tools, which are no longer current. gecko compatibility handbook ** notes ** - the solution quick reference needs more attention. - i'm also looking for a way to organize all that information. - some inline examples were removed because of technical limitations. they are actually replaced by ''-(example removed)-'' ...
...moved from the top level of mdn in a spate of furious reorganization. mmgc mmgc is the tamarin (née macromedia) garbage collector, a memory management library that has been built as part of the avm2/tamarin effort. it is a static library that is linked into the flash player but kept separate, and can be incorporated into other programs. mozilla
release faq this document may be distributed and modified freely. no guarantee of factuality in this faq is made, and it is maintained by pat gunn, who is not affiliated with netscape. various other people have contributed to this faq. newsgroup summaries obsolete: xpcom-based scripting for npapi plugins plugins that used ...
... sax sax, short forsimple api for xml, is a parsing api. sax was the first widely adopted api for xml in java, and later implemented in several other programming language environments. starting with firefox 2, a sax parser is available to xul applications and extensions. for more information, please see sax homepage. security
relying on these obsolete security articles is highly discouraged. doing so may put your systems at risk. solaris 10 build prerequisites sunbird theme tutorial this tutorial is a step-by-step guide to making a theme for sunbird 0.3a1 and later versions. it is designed for beginners. it does not cover advanced topics. table reflow internals key: ...
...the windows media player activex control in web pages to support netscape 7.1, how to control the windows media player activex control using javascript and provides working examples. this article deals uniquely with netscape 7.1 running on the windows operating system. xquery xquery is a w3c standard language which is meant to be for xml what sql is for
relational data--i.e., the ability to search, sort, extract, and remold data. it offers powerful and yet intuitive searching based on xpath, has sql-like syntax for the query portion, and has scripting features such as function and variable definitions, xml-inclusion, etc. xul booster xul booster is a third party eclipse / webtools build that offers some support for ...
HTML: A good basis for accessibility - Learn web development
all rights reversed.</p> </td> </tr> </table> if you try to naviga...
...der, it will probably tell you that there's a table to be looked at (although some screen readers can guess the difference between table layouts and data tables). you'll then likely (depending on which screen reader you're using) have to go down into the table as an object and look at its features separately, then get out of the table again to carry on navigating the content. table layouts are a
relic of the past — they made sense back when css support was not widespread in browsers, but now they just create confusion for screen reader users. additionally, their source code requires more markup, which makes them less flexible and more difficult to maintain. you can verify these claims by comparing your previous experience with a more modern website structure example, which could look somet...
...it is also much leaner and smal...
...wherever possible. note that the contents of the alt attribute should always provide a direct representation of the image and what it conveys visually. any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not come across the image before. one thing to consider is whether your images have meaning inside your content, or whether they are pu
rely for visual decoration, and thus have no meaning. if they are decorational, it is better to write an empty text as a value for alt attribute (see empty alt attributes) or to just include them in the page as css background images. note: read images in html and responsive images for a lot more information about image implementation and best practices. if you do want to provide extra contextual ...
HTML: A good basis for accessibility - Learn web development
all rights reversed.</p> </td> </tr> </table> if you try to naviga...
...der, it will probably tell you that there's a table to be looked at (although some screen readers can guess the difference between table layouts and data tables). you'll then likely (depending on which screen reader you're using) have to go down into the table as an object and look at its features separately, then get out of the table again to carry on navigating the content. table layouts are a
relic of the past — they made sense back when css support was not widespread in browsers, but now they just create confusion for screen reader users. additionally, their source code requires more markup, which makes them less flexible and more difficult to maintain. you can verify these claims by comparing your previous experience with a more modern website structure example, which could look somet...
...it is also much leaner and smal...
...wherever possible. note that the contents of the alt attribute should always provide a direct representation of the image and what it conveys visually. any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not come across the image before. one thing to consider is whether your images have meaning inside your content, or whether they are pu
rely for visual decoration, and thus have no meaning. if they are decorational, it is better to write an empty text as a value for alt attribute (see empty alt attributes) or to just include them in the page as css background images. note: read images in html and responsive images for a lot more information about image implementation and best practices. if you do want to provide extra contextual ...
Debugging CSS - Learn web development
e trying to work out which property is causing the problem. the following video provides some useful tips on debugging css using the firefox devtools: editing values in addition to turning properties on and off, you can edit their values. perhaps you want to see if another color looks better, or wish to tweak the size of something? devtools can save you a lot of time editing a stylesheet and
reloading the page. with box1 selected, click on the swatch (the small colored circle) that shows the color applied to the border. a color picker will open up and you can try out some different colors; these will update in real time on the page. in a similar fashion, you could change the width or style of the border. adding a new property you can add properties using the devtools. perhaps you ha...
...best thing to do at this point is to create something known as a reduced test case. being able to "reduce an issue" is a really useful skill. it will help you find problems in your own code and that of your colleagues, and will also enable you to report bugs and ask for help more effectively. a reduced test case is a code example that demonstrates the problem in the simplest possible way, with un
related surrounding content and styling removed. this will often mean taking the problematic code out of your layout to make a small example which only shows that code or feature. to create a reduced test case: if your markup is dynamically generated — for example via a cms — make a static version of the output that shows the problem. a code sharing site like codepen is useful for hosting red...
... test case: if your markup is dynamically generated — for example via a cms — make a static version of the output that shows the problem. a code sharing site like codepen is useful for hosting reduced test cases, as then they are accessible online and you can easily share them with colleagues. you could start by doing view source on the page and copying the html into codepen, then grab any
relevant css and javascript and include it too. after that, you can check whether the issue is still evident. if removing the javascript does not make the issue go away, don't include the javascript. if removing the javascript does make the issue go away, then remove as much javascript as you can, leaving in whatever causes the issue. remove any html that does not contribute to the issue. remove co...
...efore asking for help. a more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help. in the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the
relevant browser vendor (e.g. on mozilla's bugzilla site). as you become more experienced with css, you will find that you get faster at figuring out issues. however even the most experienced of us sometimes find ourselves wondering what on earth is going on. taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found. ...
Beginner's guide to media queries - Learn web development
max- to indicate that the given value is a minimum, or a maximum. for example, to make the color blue if the viewport is narrower than 600 pixels, use max-width: @media screen and (max-width: 600px) { body { color: blue; } } open this example in the browser, or view the source. in practice, using minimum or maximum values is much more useful for responsive design so you will ra
rely see width or height used alone. there are a number of other media features that you can test for, although some of the newer features introduced in level 4 and 5 of the media queries specification have limited browser support. each feature is documented on mdn along with browser support information, and you can find a full list at using media queries: media features. orientation one well-supp...
...this is an important first step and one which ...
... <li><a href="">about</a></li> <li><a href="">contact</a></li> <li><a href="">meet the team</a></li> <li><a href="">blog</a></li> </ul> </nav> </header> <main> <article> <div class="content"> <h1>veggies!</h1> <p> ... </p> </div> <aside class="
related"> <p> ... </p> </aside> </article> <aside class="sidebar"> <h2>external vegetable-based links</h2> <ul> <li> ... </li> </ul> </aside> </main> <footer><p>©2019</p></footer> </div> </body> this simple layout also works well on mob...
...h a smaller text size. add the below code into the bottom of your step1.html css. @media screen and (min-width: 40em) { article { display: grid; grid-template-columns: 3fr 1fr; column-gap: 20px; } nav ul { display: flex; } nav li { flex: 1; } } this css gives us a two-column layout inside the article, of the article content and
related information in the aside element. we have also used flexbox to put the navigation into a row. open step 2 in the browser, or view the source. lets continue to expand the width until we feel there is enough room for the sidebar to also form a new column. inside a media query we'll make the main element into a two column grid. we then need to remove the margin-bottom on the article in order t...
Common questions - Learn web development
this section of the learning area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the html or css learning articles.) these articles are designed to work on their own. how the web works this section covers web mechanics —questions
relating to general knowledge of the web ecosystem and how it works. how does the internet work? the internet is the backbone of the web, the technical infrastructure that makes the web possible. at its most basic, the internet is a massive network of computers communicating with each other. this article discusses how it works, in broad terms. what is the difference between webpage, website, web server, and search engine? in this article we describe ...
...es the internet work? the internet is the backbone of the web, the technical infrastructure that makes the web possible. at its most basic, the internet is a massive network of computers communicating with each other. this article discusses how it works, in broad terms. what is the difference between webpage, website, web server, and search engine? in this article we describe various web-
related concepts: webpages, websites, web servers, and search engines. these terms are often a source of confusion for newcomers to the web, or are used incorrectly. let's discover what they actually mean! what are hyperlinks? in this article, we'll go over what hyperlinks are and why they matter. what is a url? with hypertext and http, url is a key concept when it comes to the internet. ...
...ent of the internet infrastructure. they provide a human-readable address for any web server available on the internet. what is a web server? the term "web server" can refer to the hardware or software that serves websites to clients across the web — or both of them working together. in this article we go over how web servers work, and why they're important. tools and setup questions
related to the tools/software you can use to build websites. what software do i need to build a website? in this article we explain which software components you need to edit, upload, or view a website. how much does it cost to do something on the web? when you're launching a website, you may spend nothing or your costs may go through the roof. in this article we discuss how much everyt...
...r website on google app engine. what tools are available to debug and improve website performance? this set of articles shows you how to use the developer tools in firefox to debug and improve performance of your website, using the tools to check memory usage, the javascript call tree, the number of dom nodes being rendered, and more. design and accessibility this section lists questions
related to aesthetics, page structure, accessibility techniques, etc. how do i start to design my website? this article covers the all-important first step of every project: define what you want to accomplish with it. what do common web layouts contain? when designing pages for your website, it's good to have an idea of the most common layouts. this article runs through some typical web...
Client-side form validation - Learn web development
form validation has better performance than javascript, but it is not as customizable as javascript validation. javascript validation is coded using javascript. this validation is completely customizable, but you need to create it all (or use a library). using built-in form validation one of the most significant features of html5 form controls is the ability to validate most user data without
relying on javascript. this is done by using validation attributes on form elements. we've seen many of these earlier in the course, but to recap: required: specifies whether a form field needs to be filled in before the form can be submitted. minlength and maxlength: specifies the minimum and maximum length of textual data (strings) min and max: specifies the minimum and maximum values of numer...
...ive, but we've made it support capitalized as well as lower-case versions using an extra "aa" pattern nested inside square brackets. at this point, try changing the value inside the pattern attribute to equal some of the examples you saw earlier, and look at how that affects the values you can enter to make the input value valid. try writing some of your own, and see how it goes. make them fruit-
related where possible so that your examples make sense! if a non-empty value of the <input> doesn't match the regular expression's pattern, the input will match the :invalid pseudoclass. note: some <input> element types don't need a pattern attribute to be validated against a regular expression. specifying the email type, for example, validates the inputs value against a well-formed email address...
... note: you can find this example live on github as full-example.html (see also the source code.) validating forms using javascript you must use javascript if you want to take control over the look and feel of native error messages or to deal with legacy browsers t...
...= callback(e); // a callback that returns `false` stops the callback chain // and interrupts the execution of the event callback. if (output === false) return false; if (typeof previouseventcallback === 'function') { output = previouseventcallback(e); if(output === false) return false; } } }; // now we can rebuild our validation constraint // because we do not
rely on css pseudo-class, we have to // explicitly set the valid/invalid class on our email field addevent(window, "load", function () { // here, we test if the field is empty (remember, the field is not required) // if it is not, we check if its content is a well-formed e-mail address. const test = email.value.length === 0 || emailregexp.test(email.value); email.classname = test ? "valid" :...
Advanced text formatting - Learn web development
revious overview: introduction to html next there are many other elements in html for formatting text, which we didn't get to in the html text fundamentals article. 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. prerequisites: basic html familiarity, as covered in getting started with html. html text formatting, as covered in html text fundamentals. objective: to learn how to use lesser-known html elements to mark up advanced semantic features. description lists in html text fundamentals, we walked throug...
...pe of list you'll occasionally come across — description lists. the purpose of these lists is to mark up a set of items and their associated descriptions, such as terms and definitions, or questions and answers. let's look at an example of a set of terms and definitions: soliloquy in drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process
relaying them to the audience (but not to other characters.) monologue in drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present. aside in drama, where a character shares a comment only with the audience for humorous or dramatic effect. this is usually a feeling, thought or piece of additional background information description lists ...
... lists use a different wrapper than the other list types — <dl>; in addition each term is wrapped in a <dt> (description term) element, and each description is wrapped in a <dd> (description definition) element. let's finish marking up our example: <dl> <dt>soliloquy</dt> <dd>in drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process
relaying them to the audience (but not to other characters.)</dd> <dt>monologue</dt> <dd>in drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd> <dt>aside</dt> <dd>in drama, where a character shares a comment only with the audience for humorous or dramatic effect. this is usually a feeling, thought, or piece of addition...
...iptions indented somewhat from the terms. note that it is permitted to have a single term with multiple descriptions, for example: <dl> <dt>aside</dt> <dd>in drama, where a character shares a comment only with the audience for humorous or dramatic effect. this is usually a feeling, thought, or piece of additional background information.</dd> <dd>in writing, a section of content that is
related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd> </dl> active learning: marking up a set of definitions it's time to try your hand at description lists; add elements to the raw text in the input field so that it appears as a description list in the output field. you could try using your own terms an...
Images in HTML - Learn web development
before the ability to embed images (and other more interesting types of content) inside web pages was added. there are other types of multimedia to consider, but it is logical to start with the humble <img> element, used to embed a simple image in a webpage. in this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it
relates to css background images. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html.) objective: to learn how to embed simple images in html, annotate them with captions, and how html images
relate to css background images. how do we put an...
... how do we put an image on a webpage? in order to put a simple image on a webpage, we use the <img> element. this is an empty element (meaning that it has no text content or closing tag) that requires a minimum of one attribute to be useful — src (sometimes spoken as its full title, source). the src attribute contains a path pointing to the image you want to embed in the page, which can be a
relative or absolute url, in the same way as href attribute values in <a> elements. note: you should read a quick primer on urls and paths to refresh your memory on
relative and absolute urls before continuing. so for example, if your image is called dinosaur.jpg, and it sits in the same directory as your html page, you could embed the image like so: <img src="dinosaur.jpg"> if the image was in...
...the css background-image property, and the other background-* properties, are used to control background image placement. for example, to place a background image on every paragraph on a page, you could do this: p { background-image: url("images/dinosaur.jpg"); } the resulting embedded image, is arguably easier to position and control than html images. so why bother with html images? as hi...
...ges are for decoration only. if you just want to add something pretty to your page to enhance the visuals, this is fine. though, such images have no semantic meaning at all. they can't have any text equivalents, are invisible to screen readers, and so on. this is where html images shine! summing up: if an image has meaning, in terms of your content, you should use an html image. if an image is pu
rely decoration, you should use css background images. note: you'll learn a lot more about css background images in our css topic. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: html images. summary that's a...
Build your own function - Learn web development
ure and usage, but we wanted to show something interesting for this example. calling the function you've now got your function definition written into your <script> element just fine, but it will do nothing as it stands. try including the following line below your function to call it: displaymessage(); this line invokes the function, making it run immediately. when you save your code and
reload it in the browser, you'll see the little message box appear immediately, only once. we are only calling it once, after all. now open your browser developer tools on the example page, go to the javascript console and type the line again there, you'll see it appear again! so this is fun — we now have a reusable function that we can call any time we like. but we probably want it to appea...
...me directly. try saving and refreshing the page — now you should see the message box appear when you click the button. you might be wondering why we haven't included the parentheses after the function name. this is because we don't want to call the function immediately — only after the button has been clicked. if you try changing the line to btn.onclick = displaymessage(); and saving and
reloading, you'll see that the message box appears without the button being clicked! the parentheses in this context are sometimes called the "function invocation operator". you only use them when you want to run the function immediately in the current scope. in the same respect, the code inside the anonymous function is not run immediately, as it is inside the function scope. if you tried the last ...
...block: btn.onclick = function() { displaymessage('woo, this is a different message!'); }; if we want to specify parameters inside parentheses for the function we are calling, then we can't call it directly — we need to put it inside an anonymous function so that it isn't in the immediate scope and therefore isn't called immediately. now it will not be called until the button is clicked.
reload and try the code again and you'll see that it still works just fine, except that now you can also vary the message inside the parameter to get different messages displayed in the box! a more complex parameter on to the next parameter. this one is going to involve slightly more work — we are going to set it so that depending on what the msgtype parameter is set to, the function will displa...
...s require skills that are covered in the next article, so you might want to read those first before trying it. conclusion congratulations on reaching the end! this article took you through the entire process of building up a practical custom function, which with a bit more work could be transplanted into a real project. in the next article we'll wrap up functions by explaining another essential
related concept — return values. previous overview: building blocks next in this module making decisions in your code — conditionals looping code functions — reusable blocks of code build your own function function return values introduction to events image gallery ...
Functions — reusable blocks of code - Learn web development
hat are part of objects methods. you don't need to learn about the inner workings of structured javascript objects yet — you can wait until our later module that will teach you all about the inner workings of objects, and how to create your own. for now, we just wanted to clear up any possible confusion of method versus function — you are likely to meet both terms as you look at the available
related resources across the web. the built-in code we've made use of so far come in both forms: functions and methods. you can check the full list of the built-in functions, as well as the built-in objects and their corresponding methods here. you've also seen a lot of custom functions in the course so far — functions defined in your code, not inside the browser. anytime you saw a custom name wi...
...not defined". why is that? because of function scope — y and z are locked inside the a() and b() functions, so output() can't access them when called from the global scope. however, what about when it's called from inside another function? try editing a() and b() so they look like this: function a() { let y = 2; output(y); } function b() { let z = 3; output(z); } save the code and
reload it in your browser, then try calling the a() and b() functions from the javascript console: a(); b(); you should see the y and z values output in the page. this works fine, as the output() function is being called inside the other functions — in the same scope as the variables it is printing are defined in, in each case. output() itself is available from anywhere, as it is defined in th...
...the page. this works fine, as the output() function is being called inside the other functions — in the same scope as the variables it is printing are defined in, in each case. output() itself is available from anywhere, as it is defined in the global scope. now try updating your code like this: function a() { let y = 2; output(x); } function b() { let z = 3; output(x); } save and
reload again, and try this again in your javascript console: a(); b(); both the a() and b() call should output the value of x — 1. these work fine because even though the output() calls are not in the same scope as x is defined in, x is a global variable so is available inside all code, everywhere. finally, try updating your code like this: function a() { let y = 2; output(z); } funct...
...console: a(); b(); both the a() and b() call should output the value of x — 1. these work fine because even though the output() calls are not in the same scope as x is defined in, x is a global variable so is available inside all code, everywhere. finally, try updating your code like this: function a() { let y = 2; output(z); } function b() { let z = 3; output(y); } save and
reload again, and try this again in your javascript console: a(); b(); this time the a() and b() calls will both return an annoying referenceerror: variable name is not defined error — this is because the output() calls and the variables they are trying to print are not in the same function scopes — the variables are effectively invisible to those function calls. note: the same scoping r...
Introduction to web APIs - Learn web development
away from you by the api. third-party apis are not built into the browser by default, and you generally have to retrieve their code and information from somewhere on the web. for example, the twitter api allows you to do things like displaying your latest tweets on your website. it provides a special set of constructs you can use to query the twitter service and return specific information.
relationship between javascript, apis, and other javascript tools so above, we talked about what client-side javascript apis are, and how they
relate to the javascript language. let's recap this to make it clearer, and also mention where other javascript tools fit in: javascript — a high-level scripting language built into browsers that allows you to implement functionality on web pages/apps. n...
...in action. find out more about these types of api in manipulating documents. apis that fetch data from the server to update small sections of a webpage on their own are very commonly used. 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". apis that make this possible include xmlhttprequest and the fetch api. you may also come across the term ajax, which describes this technique. find out more about such apis in fetching data from the server. apis for drawing and manipulating graphics are now widely supported in browsers — t...
... next, we create a gainnode object using the audiocontext.creategain() method, which can be used to adjust the volume of audio fed through it, and create another event handler that changes the value of the audio graph's gain (volume) whenever the slider value is changed: const gainnode = audioctx.creategain(); volumeslider.addeventlistener('input', function() { gainnode.gain.value = t...
...its context object is created by getting a reference to the <canvas> element you want to draw on, and then calling its htmlcanvaselement.getcontext() method: const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); anything that w...
Object-oriented JavaScript for beginners - Learn web development
t emulates object classes via constructor functions, and how to create object instances. prerequisites: basic computer literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects). objective: to understand the basic theory behind object-oriented programming, how this
relates to javascript ("everything is an object"), and how to create constructors and object instances. 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. the...
...(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. the basic idea of oop is that we use objects to model real world things that we want to represent inside our programs, and/or provide a simple way to access functionality that would otherwise be hard or impossible to make use of. objects can contain
related data and code, which represent information about the thing you are trying to model, and functionality or behavior that you want it to have. object data (and often, functions too) can be stored neatly (the official word is encapsulated) inside an object package (which can be given a specific name to refer to, which is sometimes called a namespace), making it easy to structure and access; objec...
...o the constructor call too. note: a constructor function name usually starts with a capital letter — this convention is used to make constructor functions easier to recognize in code. ...
...e if you want to support older browsers. we'll explore the effects of create() in more detail later on. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: object-oriented javascript. note that this set of tests
relies on some of the knowledge taught in the next two articles, so you might want to read them first before you try the tests. summary this article has provided a simplified view of object-oriented theory — this isn't the whole story, but it gives you an idea of what we are dealing with here. in addition, we have started to look at different ways of generating object instances. in the next arti...
Multimedia: video - Learn web development
ed on each browsers file type support. why optimize your multimedia? for the average website, 25% of bandwidth comes from video. optimizing video has the potential for very large bandwidth savings that translate into better website performance. optimizing video delivery it's best to compress all video, optimize <source> order, set autoplay, remove audio from muted video, optimize video p
reload, and consider streaming the video. the sections below describe each of these optimization techniques. compress all videos most video compression work compares adjacent frames within a video, with the intent of removing detail that is identical in both frames. compress the video and export to multiple video formats, including webm, mpeg-4/h.264, and ogg/theora. your video editing software pr...
...width. there is no reason to serve audio with video that is always muted. removing audio can save 20% of the bandwidth. depending on your choice of software, you might be able to remove audio during export and compression. if not, a free utility called ffmpeg can do it for you. this is the ffmpeg command string to remove audio: ffmpeg -i original.mp4 -an -c:v copy audiofreeversion.mp4 video p
reload the p
reload attribute has three available options: auto|metadata|none. the default setting is metadata. these settings control how much of a video file downloads with page load. you can save data by deferring download for less popular videos. setting p
reload="none" results in none of the video being downloaded until playback. it delays startup, but offers significant data savings for videos ...
...this is a useful option for some small or moderately sized files. changing the setting to auto tells the browser to automatically download the entire video. ...
... consider streaming video streaming allows the proper video size and bandwidth (based on network speed) to be delivered to the end user. similar to responsive images, the correct size video is delivered to the browser, ensuring fast video startup, low buffering, and optimized playback. conclusion optimizing video has the potential to significantly improve website performance. video files are
relatively large compared to other website files, and always worthy of attention. this article explains how to optimize website video through reducing file size, with (html) download settings, and with streaming. previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia:...
TypeScript support in Svelte - Learn web development
--watch. in this case, the script will execute whenever you change any file. if you are running this in your regular terminal, you are advised to keep it running in the background in a separate terminal window of its own so that it can keep reporting errors but won't interfere with other terminal usage. creating a custom type typescript supports structural typing. structural typing is a way of
relating types based solely on their members, even if you do not explicitly define the type. we'll define a todotype type to see how typescript enforces that anything passed to a component expecting a todotype will be structurally compatible with it. inside the src folder create a types folder. add a todo.type.ts file inside it. give todo.type.ts the following content: export ty...
...es we used previously. todos.svelte we will also use the filter enum in the todos.svelte component. first add the lang='ts' attribute to it, as before. next, import the filter enum — add the following import statement below your existing ones: import { filter } from '../types/filter.enum' now we will use it whenever we reference the current filter. ...
...(ts) <todosstatus bind:this={todosstatus} {todos} /> ./src/components/todos.svelte:76:12 error: type 'todotype' is not assignable to type 'undefined'. (ts) <todo {todo} this is because the todos prop in the todos...
...otype. replace the first line of the <script> section with the following: import type { todotype } from '../types/todo.type' export let todos: todotype[] we will also specify the headingel, which we used to bind to the heading tag, as an htmlelement. update the let headingel line with the following: let headingel: htmlelement finally, you'll notice the following error reported,
related to where we set the tabindex attribute. that's because typescript is type-checking the <h2> element and expects tabindex to be of type number. 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 assigni...
Componentizing our Svelte app - Learn web development
e that encapsulates html, css and javascript that belong together, written into a .svelte file. components can be big or small, but they are usually clearly defined: the most effective components serve a single, obvious purpose. the benefits of defining components are comparable to the more general best practice of organizing your code into manageable pieces. it will help you understand how they
relate to each other, it will promote reuse, and it will make your code easier to reason about, maintain, and extend. but how do you know what should be split into its own component? there are no hard rules for this. some people prefer an intuitive approach and start looking at the markup and drawing boxes around every component and subcomponent that seems to have its own logic. other people apply...
...ote: in the process of creating our first couple of components, we will also learn different techniques to communicate between components, and the pros and cons of each. extracting our filter component we'll begin by creating our filterbutton.svelte. first of all, create a new file — components/filterbutton.svelte. inside this file we will declare a filter prop, and then copy the
relevant markup over to it from todos.svelte. add the following content into the file: <script> export let filter = 'all' </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={()=> filter = 'all'} > <span class="visually-hidden">show</span> <span>all</span> <span clas...
...mponents: props-down, events-up pattern the bind directive is pretty straightforward and allows you to share data between a parent and child component with minimal fuss. however, when your application grows larger and more complex it can easily get difficult to keep track of all your bound values. a different approach is the "props-down, events-up" communication pattern. basically, this pattern
relies on child components receiving data from their parents via props and parent components updating their state by handling events emitted from child components. so props flow down from parent to child and events bubble up from child to parent. this pattern establishes a two-way flow of information, which is predictable and easier to reason about. let's look at how to emit our own events to re-imp...
...et you choose. note: svelte provides more advanced mechanisms to share information among components: the context api and stores. the context api provides a mechanism for a components and their descendants to "talk" to each other without passing around data and functions as props, or dispatching lots of events. stores allows you to share reactive data among components that are not hierarchically
related. we will look at stores later on in the series. the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/05-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app...
Strategies for carrying out testing - Learn web development
s of running complex javascript at runtime, etc (see opera mini and javascript for more details). we should put this into grade b as well. using analytics a much more accurate source of data, if you can get it, comes from an analytics app like google analytics. this is an application that will give you accurate stats on exactly what browsers people are using to browse your site. of course, this
relies on you already having a site to use it on, so it isn't much good for completely new sites. but an analytics history can be useful for finding support stats to influence say a new version of a company's site, or new features you are adding to an existing site. if you have these available, they are far more accurate than global browser stats like those mentioned above. you may also consider us...
...etection library to implement the functionality in a different way if the browser doesn't support css transitions (see implementing feature detection, later on in the course). you might also notice that the button isn't usable using only the keyboard — this also needs to be remedied. maybe we could use some javascript to implement a keyboard control for the toggle, or use some other method enti
rely? these test criteria are useful, because: they give you a set of steps to follow when you are performing tests. they can be easily turned into sets of instructions for user groups to follow when carrying out tests (e.g. "try to active the button using your mouse, and then the keyboard...") — see user testing, below. they can also provide a basis for writing automated tests. it is easier ...
...virtual box; we personally like the latter, because it is free. note: you need a lot of hard disk space available to run virtual machine emulations; each operating system you emulate can take up a lot of memory. you tend to choose the hard drive space you want for each install; you could get away with probably 10gb, but some sources recommend up to 50gb or more, so the operating system will run
reliably. a good option provided by most virtual machine apps is to create a dynamically allocated hard drive that grows and shrinks as the need arises. to use a virtual box, you need to: get hold of an installer disk or image (e.g. iso file) for the operating system you want to emulate. virtual box is unable to provide these; most, like windows oses, are commercial products that can't be freely...
...any money to spend on testing. generally you'll get your users to look at the page or view containing the new functionality on some kind of a development server, so you are not putting the final site or change live until it is finished. you should get them to follow some steps and report the results they get. it is useful to provide a set of steps (sometimes called a script) so that you get more
reliable results pertaining to what you were trying to test. we mentioned this in the what are you going to test section above — it is easy to turn the test criteria detailed there into steps to follow. for example, the following would work for a sighted user: click the question mark button using the mouse on your desktop computer a few times. refresh the browser window. select and activate the...
Command line crash course - Learn web development
ommands without needing to use the terminal directly. however, you won’t find a code editor extension for everything you want to do — you’ll have to get some experience with the terminal eventually. ...
... move forward. if the directory you want to go to is nested deep, you need to know the path to get to it. this usually becomes easier as you get more familiar with the structure of your file system, but if you are not sure of the path you can usually figure it out with a combination of the ls command (see below), and by clicking around in your explorer/finder window to see where a directory is,
relative to where you currently are. for example, if you wanted to go to a directory called src, located inside a directory called project, located on the desktop, you could type these three commands to get there from your home folder: cd desktop cd project cd src but this a waste of time — instead, you can type one command, with the different items in the path separated by forward slashes, just...
...you can type one command, with the different items in the path separated by forward slashes, just like you do when specifying paths to images or other assets in css, html, or javascript code: cd desktop/project/src note that including a leading slash on your path makes the path absolute, for example /users/your-user-name/desktop. omitting the leading slash like we’ve done above makes the path
relative to the your present working directory. this is exactly the same as you would see with urls in your web browser. a leading slash means "at the root of the web site", whereas omitting the slash means "the url is
relative to my current page". note: on windows you use backslashes instead of forward slashes, e.g. cd desktop\project\src — this may seem really odd, but if you are interested in ...
...nstalling is far from exhaustive: pros of installing globally cons of installing globally accessible anywhere in your terminal may not be compatible with your project's codebase only install once other developers in your team won't have access to these tools, for example if you are sharing the codebase over a tool like git. uses less disk space
related to the previous point, it makes project code harder to replicate (if you install your tools locally, they can be set up as dependencies and installed with npm install). always the same version feels like any other unix command although the cons list is shorter, the negative impact of global installing is potentially much larger than the benefits. however, for ...
Accessibility information for UI designers and developers
when you design user interfaces with accessibility in mind, they will work for more people. this page describes a number of design-
related aspects to look out for, in no particular order. color enough contrast ensure there is enough contrast between foreground and background colors. your content can then be better consumed by users with low vision and people with color deficiencies. the ratio should be 4.5:1 for regular text and 3:1 for large text. calculating this ratio is easiest done with a tool, for example lea verou's contrast ratio. there are also plug-ins available for design software, like stark for sketch. don't
rely on color alone when your interface uses color to distinguish between things, make sure the distinction is also made in other ways. for example, add text l...
... in other ways. for example, add text labels or texture in addition to color differences. for example, in this chart, it helps to add labels besides the colored chart lines:people who cannot see the difference between the colors, can use the labels instead. or in this one, you could consider using patterns besides colored areas: again, if people are unable to distinguish the colors, they can
rely on the patterns instead. see also: understanding sc 1.4.3: contrast the focus indicator users who navigate by keyboard (or other specialised input methods),
rely on focus styles to see where they are on the page. only one element has focus at a given time, typically revealed by browsers with a dotted outline. css lets authors change what the focus indicator look like, so you can design it to...
... forms in forms, provide labels for all controls. this includes form elements like inputs and select boxes, but also buttons. for form elements, it should be clear what kind of input is expected. placeholders are best avoided for this, as they are often too low in contrast. it is more helpful to desc...
...ver, hovering the additional content itself should not cause it to disappear consistent navigation navigation should be consistent across different pages on your site. it does not need to be exactly the same, it is fine to have a different current menu item or different subnavigation links. do make sure they appear in the same place. that way, users of screen readers and screen magnifiers can
reliably make assumptions about them and skip over them. see also: understanding success criterion 3.2.3: consistent navigation headings the heading structure of a page is like its table of contents, so it is important that the levels are consistent. the most important thing about consistent headings is that no levels are skipped. for example: after a level 2 heading, the first subheading would be...
A bird's-eye view of the Mozilla framework
gine comprise the core application services available to other core modules, and xul packages core application modules are implemented as a set of one or more xpcom (cross-platform com) objects. xpcom object model before getting into the details of the ui example, it's helpful to have a basic understanding of the xpcom object model. mozilla architectural modules are comprised of groups of
related xpcom objects that provide services to and access services from each other through dynamically queryable interfaces. object model at a glance mozilla dynamically loads and integrates core modules and xul packages into the runtime environment on startup. once loaded, a module or package has full access to the xpcom objects of all the other modules in the runtime environment. the ability to d...
...rts, the client can ask whether nsirdfnode supports nsirdfliteral by calling nsirdfnode.queryinterface(), a method in the nsisupports interface. [scriptable, uuid(00000000-0000-0000-c000-000000000046)] interface nsisupports { void queryinterface(in nsiidref uuid, iid_is(uuid),retval] out nsqiresult result); [noscript, notxpcom] nsrefcnt addref(); [noscript, notxpcom] nsrefcnt
release(); }; the uuid parameter to queryinterface() is the iid uniqely identifying the interface. if nsirdfnode doesn't support nsirdfliteral, it returns null and it's up to the client to choose an alternate course of action. the xpcom component keeps track of all interface pointers currently held by its clients using an internal reference count it increments via client calls to addref(). it is ...
...ameter to queryinterface() is the iid uniqely identifying the interface. if nsirdfnode doesn't support nsirdfliteral, it returns null and it's up to the client to choose an alternate course of action. the xpcom component keeps track of all interface pointers currently held by its clients using an internal reference count it increments via client calls to addref(). it is up to the client to call
release() when it no longer needs the interface.
release() decrements the reference count and then the object becomes a candidate for destruction. javascript handles its own garbage collection, so it doesn’t need to call addref() and
release(). inside an xpcom component figure 3 shows a more detailed view of an xpcom component. figure 3. as noted earlier, the component-specific interfaces...
... javascript client example suppose the javascript service in figure 2 is getlink() in help.js, which responds to the user clicking on a link in thecontents panel within thehelp viewer window by obtaining the link from thecontents panel elements stored in a dom tree. as a client, getlink() begins by obtaining the xulelement in the dom tree represen...
Configuring Build Options
obj so that mercurial ignores it. sometimes it can be useful to build multiple versions of the source (such as with and without diagnostic asserts). to avoid the time it takes to do a full rebuild, you can create multiple mozconfig files which specify different objdirs. ...
... useful to build multiple versions of the source (such as with and without diagnostic asserts). to avoid the time it takes to do a full rebuild, you can create multiple mozconfig files which specify different objdirs. for example, a mozconfig-dbg: mk_add_options moz_objdir=@topsrcdir@/obj-ff-dbg ac_add_options --enable-debug and a mozconfig-
rel-opt: mk_add_options moz_objdir=@topsrcdir@/obj-ff-
rel-opt ac_add_options --disable-debug ac_add_options --enable-optimize allow for building both versions by specifiying the configuration via the mozconfig environment variable: $ env mozconfig=/path/to/mozconfig-dbg ./mach build $ env mozconfig=/path/to/mozconfig-
rel-opt ./mach build don't forget to set the mozconfig environment variable for the mach run command as well. be aware that changing ...
...suite (seamonkey) ac_add_options --enable-application=suite calendar (lightning extension, uses thunderbird) ac_add_options --enable-application=comm/mail ac_add_options --enable-calendar selecting build options the build options you choose depends on what application you are building and what you will be using the build for. if you want to use the build regularly, you will want a
release build without extra debugging information; if you are a developer who wants to hack the source code, you probably want a non-optimized build with extra debugging macros. there are many options recognized by the configure script which are special-purpose options intended for embedders or other special situations, and should not be used to build the full suite/xul applications. the full list o...
...lowing command line: moz_current_project=browser ./mach build this will build only the browser. using multiple mozconfig files alternatively, you may want to create separate mozconfig files. as an example, the following steps can be used to build firefox and thunderbird. you should first create three mozconfig files. mozconfig-common: # add common options here, such as making an optimized
release build mk_add_options moz_make_flags="-j4" ac_add_options --enable-optimize --disable-debug mozconfig-firefox: # include the common mozconfig . ./mozconfig-common # build firefox mk_add_options moz_objdir=@topsrcdir@/obj-firefox ac_add_options --enable-application=browser mozconfig-thunderbird: # include the common mozconfig . ./mozconfig-common # build thunderbird mk_add_options moz_o...
Simple Sunbird build
ot listed below, see the build prerequisites page. ubuntu linux: sudo apt-get build-dep sunbird sudo apt-get install mercurial libasound2-dev libcurl4-openssl-dev libnotify-dev libiw-dev autoconf2.13 cvs fedora linux: sudo yum groupinstall 'development tools' 'development libraries' 'gnome software development' sudo yum install mercurial autoconf213 glibc-static libstdc++-static yasm wi
reless-tools-devel mesa-libgl-devel mac: install xcode tools. insert "mac os x install disc 2", then open xcodetools.mpkg. (for some mac os x versions, you will find it in a directory called "optional installs".) install macports. run these commands to install the other build tools: sudo port sync sudo port install mercurial libidl autoconf213 problems? see mac os x build prerequisites. w...
...ory without spaces (i.e. c:\ ) before doing the following steps. you can use the "cd" command to do so. # get the source hg clone http://hg.mozilla.org/comm-central/ cd comm-central python client.py checkout # setup a basic .mozconfig file echo 'ac_add_options --enable-application=calendar' > .mozconfig # let's build sunbird... echo 'mk_add_options moz_objdir=@topsrcdir@/objdir-sb-
release' >> .mozconfig # ...in this directory... # use this only if not on windows! parallel compilation on windows is # un
reliable now due to bug 524149. echo 'mk_add_options moz_make_flags="-j4"' >> .mozconfig # ...quickly. # build make -f client.mk for a debug build, you need different configuration options in your .mozconfig file. this requires more disk space, about ...
....quickly. # build make -f client.mk for a debug build, you need different configuration options in your .mozconfig file. this requires more disk space, about 2.5 gb. mk_add_options moz_objdir=@topsrcdir@/objdir-sb-debug ac_add_options --enable-application=calendar ac_add_options --enable-debug ac_add_options --disable-optimize running sunbird the sunbird executable can be found in objdir-sb-
release/mozilla/dist/bin/ (on mac, objdir-sb-
release/dist/calendar.app/contents/macos/). building sunbird and lightning if you've set up you build environment as above, then all you need to do is: echo 'ac_add_options --enable-calendar' >> .mozconfig or just add the ac_add_options --enable-calendar line to your .mozconfig with your favourite editor. then just re-run the "make -f client.mk" command ...
...ut then just re-run the "make -f client.mk" command above. make will only recompile files that changed, but it's still a long haul. ...
The Firefox codebase: CSS Guidelines
basics here are some basic tips that can optimize reviews if you are changing css: avoid !important but if you have to use it, make sure it's obvious why you're using it (ideally with a comment). the overriding css section contains more information about this. avoid magic numbers; prefer automatic sizing or alignment methods. some examples to avoid: absolutely positioned elements hardcoded values such as: vertical-align: -2px; . ...
...border-color: red; not this: border: red; put multiple selectors on different lines do this: h1, h2, h3 { font-family: sans-serif; text-align: center; } not this: h1, h2, h3 { font-family: sans-serif; text-align: center; } naming standards for class names lower-case-with-dashes is the most common. but camelcase is also used sometimes. try to follow the style of existing or
related code. other tips assume ="true" in attribute selectors. example: use option[checked], not option[checked="true"]. avoid id selectors unless it is really the wanted goal, since ids have higher specificity and therefore are harder to override. using descendant selectors is good practice for performance when possible: for example: .autocomplete-item[selected] > .autocomp...
...ion, because it might have become obsolete. afterwards, check the specificity of the other selector; if it is causing your rule to be overriden, you can try reducing its specificity, either by simplifying the selector or by changing where the rule is placed in the stylesheet. if this isn't possible, you can also try introducing a :not() to prevent the other rule from applying, this is especially
relevant for different element states (:hover, :active, [checked] or [disabled]). however, never try to increase the selector of the rule you are adding as it can easily become hard to understand. finally, once you have checked all the things above, you can permit yourself to use !important along with a comment why it is needed. using css variables adding new variables before adding new css varia...
...: color - 99% of the time it will be theme css, overflow - 99% content. 99% theme 70% theme 70% content 99% content font-*, color, *-color, border-*, -moz-appearance [1] line-height, padding, margin cursor, width, max-width, top, bottom [2], etc overflow, direction, display, *-align, align-*, *-box-*, flex-*, order if some css is layout or functionality
related, then it is likely content css. if it is esthetics
related, then it is likely theme css. when importing your stylesheets, it's best to import the content css before the theme css, that way the theme values get to override the content values (which is probably what you want), and you're going to want them both after the global values, so your imports will look like this: <?xml-stylesheet hre...
mozbrowsericonchange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsericonchange event is sent when a new icon (e.g. <link
rel="icon"> or <link
rel="apple-touch-icon">) is available in the browser <iframe>'s content. it will be fired once for each icon available. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domst...
...ellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: href a domstring representing the path to the new icon. sizes a domstring listing the sizes the new icon is available in, e.g. "16x16" or "16x16 32x32". ...
...ead only object a custom object. details the details property returns an anonymous javascript object with the following properties: href a domstring representing the path to the new icon. sizes a domstring listing the sizes the new icon is available in, e.g. "16x16" or "16x16 32x32". ...
...e.g. "16x16" or "16x16 32x32". the any keyword can also be used, to represent "any size."
rel a domstring representing the
rel attribute value from the <link> element used to link to the icon. ...
mozbrowserloadend
e following properties: backgroundcolor a domstring representing the main background color of the browser <iframe> content, expressed as an rgb value. can be used to make the theme of the surrounding ui complement the theme of the currently loaded content, for example. example in this example the mozbrowserloadstart and mozbrowserloadend events are used to change the icon shown on the stop/
reload button between stop (x) and
reload (r), as appropriate. in addition, the background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience. when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159). var browser = document.queryselector(...
...background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience. when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159). ...
....org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159). ...
...e e.detail.backgroundcolor value reported is rgb(0, 83, 159). ...
Gecko SDK
and glue libs in the gecko sdk are usually not changed as a result of security updates. you do have to get and distribute the newest gecko components (gklayout.dll etc.), though. downloading for gecko versions before 2.0, you should choose the gecko sdk version for the earliest version of mozilla you wish to target. ...
....dll etc.), though. downloading for gecko versions before 2.0, you should choose the gecko sdk version for the earliest version of mozilla you wish to target. for gecko versions 2.0 and higher, you must recompile your component for each
release as cross-version compatibility is no longer supported. in addition to the below versions, you can find other versions (including beta) here: xulrunner
releases (files include "sdk" in the name). the sdk follows the same
release schedule as firefox/thunderbird. once the sdk enters beta, it is suitable for building extensions; your component should work with
release builds of the sdk without any modifications. due to the rapid
release process, it may be a good idea to target the sdk in beta. download link latest gecko (latest firefox)...
...also, you can view the schedule on the web. unpack the sdk tarball to some suitable location. issues with the os x sdk if you need to use the xpidl utility to compile idl files on os x, it's likely that you will receive a strange error...
...also, you can view the schedule on the web. unpack the sdk tarball to some suitable location. ...
Gecko Keypress Event
charcode of dom keypress event if a keypress event is fired without any modifier keys (ctrl/alt(option)/meta(win/command)), then the properties of the event are the same as they were in gecko1.8.1. that is, when the currently selected keyboard layout produces a unicode character (according to the current state of capslock and numlock), the charcode property contains that character. ...
...erty layout or a non-latin layout, the command key switches the keyboard layout to the us qwerty keyboard layout temporary. gecko uses the character from this keyboard layout for the ctrl key also. however, when ctrl is down, gecko 1.9 currenly only replaces the charcode only when the key corresponds to a basic latin letter. this behavior is a bug, this behavior will be changed in a future major
release (bug 432951). alternative charcodes for internal key handling this section documents only gecko internal keypress event handling, so web application developers can ignore this section. gecko replaces the charcode of dom keypress events for accelerator key handling, but that is not enough. problem 1 the zoom-in shortcut handler in firefox is defined as <key key="+" modifiers="accel"/>. ho...
...places the charcode of dom keypress events for accelerator key handling, but that is not enough. problem 1 the zoom-in shortcut handler in firefox is defined as <key key="+" modifiers="accel"/>. however, the shift key must be used to enter '+' on us keyboard layout, and so the state of the shift key causes the modifiers not to match those specified in the handler. for the us keyboard layout, a
related handler is defined with <key key="=" modifiers="accel"/>, so that users do not need to use the shift key to access the zoom-in shortcut. of course, this is not much help to users with other keyboard layouts. e.g., on a japanese keyboard, '+' is entered with shift+';' (bug 339723). problem 2 the access keys for the menu items are specified with the localized characters on some localized buil...
...ch exactly and there is an outer element with a handler that does match exactly (bug 433192). when handling web content accesskeys, the handlers should consider both characters that are available on the key (without and with shift). the character that is normally entered without shift is preferred. (chrome accesskey, including menu accesskey, handling is currently similar, but this should not be
relied on. there should be no chrome access keys with punctuation characters or other characters that would normally require depressing the shift key.) during accel key handling, if the event includes the shift modifier, but an alternative charcode is not a bicameral letter (i.e., it does not have upper and lower case forms), then the shift modifier state should be ignored if there is no exactly mat...
How Mozilla determines MIME Types
introduction all data handling in mozilla is based on the mime type of the content. this means that every time an uri is loaded, mozilla must find out its mime type. the several ways how this happens are described in this document. content-type "hints" mozilla has a concept of "content-type hints". this means that, for example, if mozilla encounters a <link type="text/css"
rel="stylesheet" href="..."> element, a type of text/css will be assumed. this is, however, overridden by the actual mime type the server sends (if any). (for this specific example, the server override only happens in standards-compliant mode. see mozilla's quirks mode or web author faq). similar handling happens for <a href="..." type="foo/bar">, starting in mozilla 1.6alpha. http for http uris mozilla usuall...
...le for "magic numbers"; this can currently detect pdf and postscript. if the file starts with <?xml, asks the externalhelperappservice for a mime type for the uri. this is done because the generic text/xml mime type does not work for xul files, and xhtml files get a different dom when interpreted as text/xml. the image library will be asked for the mime type given the content. this should allow
reliable detection of all image types mozilla supports. checks whether the data is html by looking for some common html tags. the uri is handed to the externalhelperappservice for mime type guessing if all else fails, the buffer (i.e. the first few bytes of the file) is searched for embedded nulls; if none are found, text/plain will be used, otherwise application/octet-stream. externalhelperapps...
... searched for the extension. this allows extensions to register additional mappings. the key of the category entry is the extension without leading dot, the value is the mime type. the extension must be lowercase. if no ext-to-type-mapping category is found, the externalhelperappservice returns application/x-extension-ext, where ext is the extension of the file. helper applications a somewhat
related issue are the helper applications. when loading an uri with a type that mozilla can not handle, a helper app dialog shows up, and the displayed information comes from these sources: ask the os for a handler of the given <extension, mime type> pair. note that the extension here comes from the content-disposition header if present, and from the url itself otherwise. this is where the listed ...
...in the profile directory. if this fails, the data source is searched via the extension (content-disposition as above). ...
Addon
on methods on the addonmanager object. the interface can represent many different kinds of add-ons and as such, some of the methods and properties are considered "required" and others "optional," which means that the optional methods or property may not exist on addon instances for some types of add-ons. api consumers should take care to verify the existence of these methods or properties before
relying on them. 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) nsiu...
... permissions read only integer a bitfield holding all the the operations that can be performed on this add-on. operations my be restricted based on system policies (e.g., the system administrator may not allow certain add-ons to be uninstalled), add-on type (e.g., themes may not be disabled), or add-on state (e.g., an incompatible add-on cannot be enabled). providesupdatessecu
rely read only boolean true if the add-on has a secure means of updating or cannot be updated at all. scope read only integer indicates what scope the add-on is installed in, per profile, user, system, or application. type read only string the type of the add-on. userdisabled boolean true if the user wants this add-on to be disabled. vers...
... if this add-on is in the process of being installed. installdate read only date the date that the add-on was first installed. optionsurl read only string the url of the options dialog to display for this add-on. pendingupgrade read only addon if this add-on will be replaced on the next restart, this property will hold the new addon object.
releasenotesuri read only nsiuri a uri for
release notes for this version. screenshots read only addonscreenshot[] an array of addonscreenshot objects containing urls of preview images for the add-on. size read only integer the size of the add-on's files in bytes. for an add-on that has not yet been downloaded, this may be an estimated value. sourceuri ...
...y integer repositorystatus read only integer callbacks datadirectorycallback() a callback which is passed a directory path, and, when an error has occured, an error object. void datadirectorycallback( in string path, in error error ) parameters path a string representation of the addon's data directory. error if an error has occured, an error object
relevant to the error, othereise null. required methods iscompatiblewith() tests whether this add-on is known to be compatible with a particular application and platform version. void iscompatiblewith( in string appversion, in string platformversion ) parameters appversion an application version to test against platformversion a platform version to test against findupdates() starts...
Download
for example "text/plain", or null if the mime type is not available. this property may be populated or changed while the download is in progress, using the mime type provided by the server. currentbytes read only number number of bytes currently transferred. this value starts at zero, and may be updated regardless of the value of hasprogress. note: you shouldn't
rely on this property being equal to totalbytes to determine whether the download is completed. you should use the individual state properties instead, since this value may not be updated after the last piece of data is transferred. error read only downloaderror when the download fails, this is set to a downloaderror instance indicating the cause of the failure. if the download h...
... the cause of the failure. if the download has been completed successfully or has been canceled, this property is null. this property is reset to null when a failed download is restarted. haspartialdata read only boolean indicates whether, at this time, there is any partially downloaded data that can be used when restarting a failed or canceled download. this property is
relevant while the download is in progress, and also if it failed or has been canceled. if the download has been completed successfully, this property is not
relevant anymore. whether partial data can actually be retained depends on the saver and the download source, and may not be known before the download is started. hasprogress read only boolean indicates whether this down...
...this depends on the saver and the download source. launchwhensucceeded boolean if this property is true when the download finishes successfully, the target file will be opened or executed automatically. ...
...f the target file. onchange function this can be set to a function that is called after other properties change. warning: this property cannot be used if the download is part of a downloadlist. progress read only number progress percent, from 0 to 100. intermediate values are reported only if hasprogress is true. note: you shouldn't
rely on this property being equal to 100 to determine whether the download is completed. you should use the individual state properties (for example, the succeeded property) instead. saver read only downloadsaver saver object associated with this download. source read only downloadsource source of this download. starttime read only date indicates th...
Sqlite.jsm
-on. before you can use this module, you need to import it into your scope: components.utils.import("resource://gre/modules/sqlite.jsm") obtaining a connection sqlite.jsm exports the sqlite symbol. this symbol is an object with a single function: openconnection. this function takes an object defining connection options: path (required) the database file to open. this can be an absolute or
relative path. if a
relative path is given, it is interpreted as
relative to the current profile's directory. if the path does not exist, a new sqlite database will be created. the value typically ends with .sqlite. sharedmemorycache (optional) boolean indicating whether multiple connections to the database share the same memory cache. sharing the memory cache likely results in less memory utilizat...
...e the clone will be read-only, default is false. if the original connection is already read-only, the clone will be, regardless of this option. if the original connection is using the shared cache, this parameter will be ignored and the clone will be as privileged as the original connection. transactioninprogress this boolean property indicates whether a transaction is in progress. this is ra
rely needed by external callers. shrinkmemory() this function can be called to shrink the memory usage of the connection. this is a glorified wrapper around the pragma shrink_memory statement, which tells sqlite to shrink its memory usage (by clearing caches, etc). while calling this has the benefit of shrinking memory, it can make your database slower, especially if you will be interacting with i...
...positions without fixing all users of the statement. objects/named parameters are a little safer because changes in the order of parameters in the statement won't change how values are bound to those parameters. when onrow is not defined, the full results of the operation are buffered before the caller is notified of statement completion. for insert, update, and delete statements, this is not
relevant. however, it can have drastic implications for select statements. if your select statement could return lots of data, this buffering of returned rows could result in excessive memory usage. therefore, it's recommended to use onrow with select statements. along with a result row, onrow is passed a cancel function as its second argument. consumers of this api can call the cancel function ...
...d message. result is a numeric error code and message is a string description of the problem. if onrow is specified, the returned promise will be resolved with a boolean indicating whether the onrow handler was called. else, the resolved value will be an array of mozistoragerow. executetransaction(func, type) this function is used to execute a database transaction. a transaction is a series of
related statements treated as one functional unit. if the transaction succeeds, all the statements contained within it are committed as one unit. if the transaction fails, the database is rolled back to its state before the transaction started. this function receives the following arguments: func the function defining the transaction body. type the type of transaction to perform. this must be ...
XPCOMUtils.jsm
methods definelazygetter() getter functions in javascript give you a way to define a property ...
...ther one, you should generally list all the base interfaces explicitly, except for nsisupports. for example, if your component implements nsistreamconverter: mycomponent.prototype = { queryinterface: xpcomutils.generateqi([ components.interfaces.nsirequestobserver, components.interfaces.nsistreamlistener, components.interfaces.nsistreamconverter, ]), // ...methods... ...
...sistreamconverter: mycomponent.prototype = { queryinterface: xpcomutils.generateqi([ components.interfaces.nsirequestobserver, components.interfaces.nsistreamlistener, components.interfaces.nsistreamconverter, ]), // ...methods... } import
relative() imports a javascript code module given the calling javascript code module's global object (you should specify this) and a path
relative to that module. this lets modules bundled in a package load one another without having to hard-code full paths. void import
relative( that, path, scope ); parameters that the javascript object of the calling javascript code module's global scope. you should simply pass this. path the
relative path of the javascript code module to import. scope an optional object to import int...
...itted, the object passed in for the that parameter is used. remarks this lets an extension bundle its own javascript code modules within itself and have them load one another. for example, if an extension named "myextension" bundles foo.jsm and bar.jsm, and foo.jsm needs to load bar.jsm, it can do so like this: components.utils.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.import
relative(this, "bar.jsm"); in other words: import
relative will only work from other code modules (such as jsm files). it will not work from overlay scripts or bootstrap.js or etc. details can be found here: bug 628669 itersimpleenumerator() wraps an nsisimpleenumerator instance into a javascript generator that can be easily iterated over. generator itersimpleenumerator( enumerator, interface...
Bootstrapping a new locale
ocumentation has moved to https://mozilla-l10n.github.io/localizer-documentation/ . to learn how to bootstrap a new locale for mozilla projects, please see those documents. in mozilla, we use the the mercurial version control system (hg) to help manage our localizations. when a localization team is registered and your hg repository is set up for a locale, you can then clone the existing mozilla
release branch (i.e. where active development of the upcoming
release of firefox occurs) and then begin the necessary work for translation. hg allows localizers to work locally on their machines and then "push" changes to their official mozilla repository. installing mercurial depending on your operating system, you will need to install the correct version of hg on your machine. this document wil...
...ne. this document will give you the basic information on how to do that. install the compare-locales utility the next step is to install compare-locales. $ sudo easy_install compare-locales this will download and install the utility. clone the source code the next step is to download a copy of the source code to your local system, using mercurial. you will need to "hg clone" the existing
release branch for mozilla so you have all the files locally for you to begin localization. make sure to have the directory where you intend to work as the current path on your terminal. (you should "cd" to the directory before beginning.) in the terminal, type the following command: $ hg clone http://hg.mozilla.org/
releases/mozilla-x.x.x/ where "x.x.x" is the existing
release branch version. ...
...glish. before you run the copy commands, you need to make the locale directory at the same level as the mozilla-1.9.x/ you just cloned from above. navigate to that level making sure you are *not* inside mozilla-1.9.x/ and then run the following commands. warning: don't copy and paste these commands; you need to replace "ab-cd" with your language identifier first and 1.9.x with the most current
release branch. for instance, firefox 3.6 is
released from the 1.9.2 branch. from now on may be needs some corrections, (see expected structure below $cd ab-cd/browser/chrome/browser) may be needs $cp -r mozilla-1.9.x/browser/locales/ ab-cd and then $mv ab-cd/en-us ab-cd/browser and the same for the others the commands seems symbolic and not real ... see also structure expected more below. /editor...
... a not-so-compile environment by calling configure. if you just checked out the localizable parts of en-us above, it will create a plethora of warnings no such file or directory, but no errors. ../mozilla/configure --disable-compile-environment --enable-application=browser whenever you need a build directory, these are the steps that you need to do to initialize it. if you're downloading a new
release of firefox from cvs, you might want to run configure again, too. now we can actually create the language pack, make -c browser/locales langpack-en-x-dude you should find your newly created language pack in dist/install. ls dist/install you can open that file in firefox and check it out. you have to set your selected language still. you can either use the locale switcher extension, or s...
MathML Demo: <mo> - operator, fence, separator, or accent
binary operators and
relations the following table contains instances of all operators found on the swp binary operations and binary
relations panels. the symbols occur in the context of a simple expression. in general, the lspace and rspace around the
relation should be greater than that around the operation. operator and
relations center vertically on the math axis. a ± b ≤ c a ∓ b ≺ c a × b ⪯ c a ⋅ b ≪ c a * b ⊂ c a ∪ b ⊆ c a ∩ b ⊏ c a ∘ b ⊑ c a • b ∈ c a ÷ b ⊢ c a ⊔ b ⌣ c a ⊓ b ⌢ c a ○ b ≡ c a ∖ b ∼ c ...
......
... a + b ≠ c ⋅ d a + b = c ⋅ d a - b ∉ c * d a - b ∈ c * d...
...c a - b ⊸ c a + b ⇛ c a - b ⇚ c a + b ↶ c a - b ↷ c a + b ⤏ c a - b ⤎ c a + b ⇒ c a - b ⇐ c a + b ⇔ c negated
relations the following table contains instances of all negated
relations found on the swp panel. the symbols occur in the context of a simple expression. in general, the lspace and rspace around negated
relations should be similar to the spacing around
relations. a + b ≠ c ⋅ d a + b = c ⋅ d a - b ∉ c * d a - b ∈ c * d a + b ≨︀ c × d a...
Activity Monitor, Battery Status Menu and top
this article describes the activity monitor, battery status menu, and top — three
related tools available on mac os x. note: the power profiling overview is worth reading at this point if you haven't already. it may make parts of this document easier to understand. activity monitor this is a built-in os x tool that shows real-time process measurements. it is well-known and its "energy impact" measure is likely to be consulted by users to compare the power consumption of different programs. ...
...nown and its "energy impact" measure is likely to be consulted by users to compare the power consumption of different programs. (apple support documentation specifically recommends it for troubleshooting battery life problems.) unfortunately "energy impact" is not a good measure for either users or software developers and it should be avoided. activity monitor can still be useful, however. power-
related measurements activity monitor has several tabs. they can all be customized to show any of the available measurements (by right-clicking on the column strip) but only the "energy" tab groups child processes with parent processes, which is useful, so it's the best one to use. the following screenshot shows a customized "energy" tab. the power-
related columns are as follows. energy impact...
...pu, and network activity. 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. ioreg -l | grep board-id in contrast, on mac os 10.9 it is computed via a simpler machine model-independent formula that only factors in cpu usage and wakeup frequency. in both cases "energy impact" often cor
relates poorly with actual power consumption and should be avoided in favour of direct measurements that have clear physical meanings. what does "average energy impact" measure? when the energy tab of activity monitor is first opened, the "average energy impact" column is empty and the title bar says "activity monitor (processing...)". after 5–10 seconds, the "average energy impact" column is pop...
... a few minutes to disappear. the exception is when the application is closed, in which case it disappears immediately. and it appears that a program with an “energy impact” of roughly 20 or more will eventually show up as significant, and programs that have much higher “energy impact” values tend to show up more quickly. all of these battery status menu observations are difficult to make
reliably and so should be treated with caution. it is clear, however, that the window used by the battery status menu is measured in seconds or minutes, which is much less than the 8 hour window used for “average energy impact” in activity monitor. top top is similar to activity monitor, but is a command-line utility. to see power-
related measurements, invoke it as follows. top -stats pid,comm...
McCoy
kage for your operating system, just extract it where you like and run it. mccoy-0.5.en-us.win32.zip (windows) mccoy-0.5.en-us.linux-i686.tar.bz2 (linux) mccoy-0.5.en-us.mac.dmg (mac os x universal) there are some known issues with running mccoy on linux. it will not run on older versions of linux and there are known problems even on up to date systems. we hope to resolve this for the next
release - or around the year 2100. uninstalling mccoy to uninstall mccoy simply delete the applications files. the cryptographic keys and other mccoy data are kept in a profile folder separate from the application so you can uninstall and reinstall without losing your precious keys. backing up data if you need to backup your data or move it from one machine to another you need to take a copy of t...
... the first step is to create a cryptographic key. simply click the "create" toolbar button or select "create key" from the "keys" menu. you should give the ke...
... the first step is to create a cryptographic key. simply click the "create" toolbar button or select "create key" from the "keys" menu. you should give the key a name that will remind you what you are using it for. ...
...key you need to add its public part to your add-on's install.rdf file. the simplest way to do this is to select the key then click the install toolbar button. you must then locate your install.rdf for mccoy and the public part of the key will be added directly to the file. the file will be overwritten so take a backup if you need to. you can then include this install.rdf in your add-on's xpi and
release it. if you wish to manually add the public key to the install.rdf you can right click the key, select \"copy public key\" and then add it to the file as an updatekey entry.
releasing an update once you are ready to
release an updated version of your add-on you must create yourself an update.rdf file. you need to use mccoy to sign this file so that the application can verify that it reall...
About NSPR
pr20, an effort started in 1996, built on that original idea, though very little is left of the original code. (the "20" in "nspr20" does not mean "version 2.0" but rather "second generation".) many of the concepts have been reformed, expanded, and matured. today nspr may still be appropriate as the platform dependent layer under java, but its primary application is supporting clients written enti
rely in c or c++. how it works nspr's goal is to provide uniform service over a wide range of operating system environments. it strives to not export the lowest common denominator, but to exploit the best features of each operating system on which it runs, and still provide a uniform service across a wide range of host offerings. threads threads are the major feature of nspr. the industry's offer...
...pr provides synchronization methods more suited for use by java. the java-like facilities include monitor reentrancy, implicit and tightly bound notification capabilities with the ability to associate the synchronization objects dynamically. i/o nspr's i/o is a slightly augmented bsd sockets model that allows arbitrary layering. it was originally intended to export synchronous i/o methods only,
relying on threads to provide the concurrency needed for complex applications. that method of operation is preferred though it is possible to configure the network i/o channels as non-blocking in the traditional sense. network addresses part of nspr deals with manipulation of network addresses. nspr defines a network address object that is internet protocol (ip) centric. while the object is not dec...
...rent time from the host system, and convert them to and from the 64-bit and structural representation. additionally there are routines to convert to and from most well-known forms of ascii into the 64-bit nspr representation. memory management nspr provides api to perform the basic malloc, calloc, realloc and free functions. depending on the platform, the functions may be implemented almost enti
rely in the nspr runtime or simply shims that call immediately into the host operating system's offerings. linking support for linking (shared library loading and unloading) is part of nspr's feature set. in most cases this is simply a smoothing over of the facilities offered by the various platform providers. where it's headed nspr is applicable as a platform on which to write threaded applicati...
... as a platform on which to write threaded applications that need to be ported to multiple platforms. the current implementation supports macintosh (ppc), win-32 (winnt, win9x) and 20 versions of unix and is still expanding. the basic api is stable and expected to remain that way. nspr is functionally complete and has entered a mode of sustaining engineering. as operating system vendors issue new
releases of their operating systems, nspr will be moved forward to these new
releases by interested players. original document information author: larryh@netscape.com last updated date: 2000 (portions of the introduction moved to the history section in 2012) ...
nss tech note5
zilla/source/security/nss/ and http://lxr.mozilla.org/security/ be sure to look for sample code first for things you need to do. note: this document contains code snippets that focus on essential aspects of the task and often do not illustrate all the cleanup that needs to be done. also, this document does not attempt to be an exhaustive survey of all possible ways to do a certain task; it me
rely tries to show a certain way. encrypt/decrypt include headers #include "nss.h" #include "pk11pub.h" make sure nss is initialized.the simplest init function, in case you don't need a nss database is nss_nodb_init(".") choose a cipher mechanism. note that some mechanisms (*_pad) imply the padding is handled for you by nss. if you choose something else, then data padding is the ...
... /* turn the secitem into a key object */ pk11symkey* symkey = pk11_importsymkey(slot, ciphermech, pk11_originunwrap, cka_encrypt, &keyitem, null); if generating the key - see section generate a symmetric key <big>prepare the parameter for crypto context. iv is
relevant only when using cbc mode of encryption. if not using cbc mode, just pass a null iv parm to pk11_paramfromiv function secitem ivitem; ivitem.data = /* ptr to an array of iv bytes */ ivitem.len = /* length of the array of iv bytes */ secitem *secparam = pk11_paramfromiv(ciphermech, &ivitem);</big> <big>now encrypt and decrypt using the key and parameter setup in above steps</...
... pk11_originunwrap, cka_wrap, &keyitem, null); if generating the key - see section generate a symmetric key <big>prepare the parameter for crypto context. iv is
relevant only when using cbc cipher mode. if not using cbc mode, just pass a null secparam to pk11_wrapsymkey or pk11_unwrapsymkey function secitem ivitem; ivitem.data = /* ptr to an array of iv bytes */ ivitem.len = /* length of the array of iv bytes */ secitem *secparam = pk11_paramfromiv(wrapmech, &ivitem);</big> allocate space for the wrapped key secitem wrappedkey; wrap...
... pk11_originunwrap, cka_wrap, &keyitem, null); if generating the key - see section generate a symmetric key prepare the to-be-wrapped key seckeyprivatekey *tobewrappedprivkey <big>prepare the parameter for crypto context. iv is
relevant only when using cbc cipher mode. if not using cbc mode, just pass a null secparam to pk11_wrapprivkey function secitem ivitem; ivitem.data = /* ptr to an array of iv bytes */ ivitem.len = /* length of the array of iv bytes */ secitem *secparam = pk11_paramfromiv(wrapmech, &ivitem);</big> allocate space for the wrapped key. note that a 2048-bit wrapped rsa private key takes ...
PKCS #11 Module Specs
upply additional module specs for loading. moduledbonly - this library has no pkcs #11 functions and is only used for loading additional modules. trustorder - integer value specifying the order in which the trust information for certificates specified by tokens on this pkcs #11 library should be rolled up. '0' means that tokens on this library should not supply trust information (default). the
relative order of two pkcs#11 libraries which have the same trustorder value is undefined. cipherorder - integer value specifiying the order in which tokens are searched when looking for a token to do a generic operation (des/hashing, etc). ciphers - comma separated list of ciphers this token will enable that isn't already enabled by the library (currently only fortezza is defined) (case-insensitiv...
...n which tokens are searched when looking for a token to do a generic operation (des/hashing, etc). 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. valid slotparams values are: slotflags - comma separated list of cipher groups which this slot is expected to be the default implementation for (case-insensitive). valid flags are: rsa - this token should be used for all rsa operations (other than private key operations where the key lives in another token). dsa - this token should be used for all dsa operation...
...ecified. every - prompt whenever the a private key on this token needs to be access (this is on the entire token, not on a key-by-key basis. timeout- whenever the last explicit login was longer than 'timeout' minutes ago. only - authenticate to the token only when necessary (default). ...
...it will not initialize if the parameters= is not specified. ...
PKCS11 Implement
s cka_id attribute must match the value of the cka_id attribute for the corresponding private key, and the value of the certificate's cka_label attribute must also match the value of the cka_label attribute for the private key. for private keys that don't include certificates, nss doesn't set the cka_label attribute, or sets it to null, until it receives the certificate. c_copyobject the nss ra
rely calls c_copyobject but may sometimes do so for non-token private keys. c_destroyobject the nss calls c_destroyobject to destroy certificates and keys on tokens. c_getobjectsize the nss never calls c_getobjectsize. c_getattributevalue the nss calls c_getattributevalue to get the value of attributes for both single objects and multiple objects. this is useful for extracting public keys, n...
...butes for both single objects and multiple objects. this is useful for extracting public keys, nonsecret bulk keys, and so on. c_setattributevalue the nss uses c_setattributevalue to change labels on private keys. c_findobjectsinit, c_findobjects, c_findfinal the nss calls these functions frequently to look up objects by cka_id or cka_label. these values must match the equivalent values for
related keys and certificates and must be unique among key pairs on a given token. the nss also looks up certificates by ck_issuer and ck_serial. if those fields aren't set on the token, s/mime won't work. functions for different kinds of tokens the nss expects different kinds of pkcs #11 support from four different kinds of tokens: external key distribution tokens are used with corresponding plug-...
...bjects or messages or to perform ssl authentication. they cannot be used for encrypted s/mime, because they can't decrypt messages. signing and decryption tokens can be used for s/mime and for encrypted transactions over unsecured networks such as the internet. multipurpose tokens provide the full range of cryptographic services. they can be thought of as cryptographic accelerator cards. future
releases of nss will also support multipurpose tokens that are fips-140 compliant. table 1.2 summarizes the pkcs #11 functions (in addition to the other functions described in this document) that nss expects each type of token to support. pkcs #11 functions required for different kinds of tokens external key distribution tokens signing tokens signing and decryption tokens multipurpose toke...
...ception to this requirement involves key generation for a new certificate, during which an orphan key waits for a brief time for a matching certificate. the nss uses part of the public key (modulus for rsa, value for dsa) as the key id during this time. nss doesn't require token public keys, but if they exist, nss expects the value of the cka_id attribute to be associated with private key and any
related certificates. sessions and session objects the nss depends on a pkcs #11 v. 2.0 semantic requiring all session objects to be visible in all of a token's sessions. ...
gtstd.html
ay be found in the current nss reference getting started with ssl chapter 2 getting started with ssl this chapter describes how to set up your environment, including certificate and key databases. ssl, pkcs #11, and the default security databases setting up the certificate and key databases building nss programs ssl, pkcs #11, and the default security databases the basic
relationships among the nss libraries are described in introduction to network security services. before running the sample programs, it's important to understand the
relationships between the ssl interface, the pkcs #11 interface, pkcs #11 modules, and the default netscape security databases. a pkcs #11 module (also called a cryptographic module) manages cryptographic services such as encryption an...
...ecryption via the pkcs #11 interface. pkcs #11 modules can be thought of as drivers for cryptographic devices that can be implemented in either hardware or software. netscape provides a built-in pkcs #11 module with nss. other kinds of pkcs #11 modules include the netscape fortezza module, used by the government, and the litronic pkcs #11 module for smart card readers. ...
...are or software. netscape provides a built-in pkcs #11 module with nss. other kinds of pkcs #11 modules include the netscape fortezza module, used by the government, and the litronic pkcs #11 module for smart card readers. figure 2.1 illustrates the
relationships between nspr, ssl, pkcs #11, and the available cryptographic modules. ssl is built on top of nspr, which handles sockets, threads, and
related low-level os operations. on any given server or client, one or more pkcs #11 modules may be available. figure 2.1
relationships among nss libraries, cryptographic modules, slots, and tokens as shown in the figure, ssl communicates with pkcs #11 modules through the pkcs #11 interface. any pkcs #11 module that supports pkcs #11 can be used with the nss libraries. netscape software uses ...
...ritical production business uses using nss's command line tools, nor with the simple command line test tools that come with any package of cryptographic libraries. many who have attempted it have eventually come to regret that decision. for production deployment, the nss team strongly recommends that you either: use certificates from a competent third-party ca that is already known to your
relying party software (e.g. your ssl clients), or use professional grade ca software, such as red hat's dogtag certificate system, to set up and operate your own ca and issue your own certificates. for complete information about the command-line options used in the examples that follow, see using the certificate database tool. setting up the ca db and certificate set up the ca with its ...
TLS Cipher Suite Discovery
they must agree on these items: key establishment algorithm (such as rsa, dh, or ecdh) peer authentication algorithm (such as rsa, dsa, ecdsa) bulk data encryption algorithm (such as rc4, des, aes) and key size digest algorithm for message authentication checking (sha1, sha256) there are numerous available choices for each of those categories, and the number of possible combinations of all those choices is large. tls does not allow all possible combinations of choices from those categories to be used. ...
...ell-defined cipher suites grows with time, and no tls implementation offers all known cipher suites at all times. an implementation that claimed to offer all defined cipher suites would only be able to make that claim for a short time until another new cipher suite was defined. at any time, any real implementation implements some subset of the complete set of well-defined cipher suites. ...
...to that end, nss's libssl offers a way for applications to discover at run time the set of cipher suites supported by that version of libssl. ...
...on will attempt to use. here are the details of how an nss-based application learns what cipher suites are supported and obtains the information to display to the user. libssl offers a public table of well defined cipher suite numbers. the cipher suites are listed in the table in order of preference, from the most preferred cipher suite to the least preferred. the size of this table varies from
release to
release, and so libssl makes the number of entries in that table publicly available too. the table and the number of entries are declared in "ssl.h", as follows: /* constant table enumerating all implemented ssl 2 and 3 cipher suites. */ ssl_import const pruint16 ssl_implementedciphers[]; /* number of entries in the above table. */ ssl_import const pruint16 ssl_numimplementedciph...
Garbage collection
, but checks may be done when traversing cross-compartment wrappers. the engine may gc a single compartment without gcing the others. the engine can also gc a set of compartments without gcing the rest. cross-compartment wrappers are used as roots for single- and multi-compartment gcs. compartments are a fundamental cross-cutting concept in spidermonkey (see also compartments), though anything
related to memory is now more concerned with zones, especially gc. zone a zone is a collection of compartments. zones mainly serve as boundaries for gcs: the garbage collector collects at the level of a zone, not an individual compartment. unlike compartments, zones have no special security properties. some properties of zones are: every compartment belongs to exactly one zone every js heap obj...
...ointer to b. b will not be marked, because b is only reachable through a and we are all done with a, because a is black. thus, b is live but will be collected. the write barrier is a piece of code that runs just before a pointer store occurs and records just enough information to make sure that live objects don't get collected. the spidermonkey incremental write barrier spidermonkey uses a (
relatively!) simple, common incremental write barrier called a snapshot-at-the-beginning allocate-black barrier. to understand how this barrier works, first assume that we're going to do an incremental gc during which no new objects are allocated, just to keep things simple. how do we make sure the gc doesn't collect any live objects? one way would be to make sure that every object that was live at ...
...object* old). if zone->needsincrementalbarrier(), then writebarrierpre() marks old. that's it. the class heap<t> is provided to make it easy to invoke write barriers. a heap<t> encapsulates a t* and invokes the write barrier whenever assigned to. thus, object fields of gc-pointer type should normally be defined as type heap<t>. the class heapvalue does the same thing for value. heapslot (and the
related class heapslotarray) is the same, but for object slots. heapid is the same, but for jsid. object private fields must be handled specially. the private field itself is opaque to the engine, but it may point to things that need to be marked, e.g., an array of jsobject pointers. in this example, if the private field is overwritten, the jsobject pointers could be 'lost', so a write barrier must ...
...hunkinfo, chunkbitmap, arena, arenaheader, cell, and freespan structures that define the heart of the gc heap's structures. gc/marking.{h,cpp} defines all marking functions for the various garbage-collected things. gc/memory.{h,cpp} contains a few functions for mapping and unmapping pages, along with platform-specific implementations. the map/unmap functions are used by gc.cpp to allocate and
release chunks. there are also functions to commit or decommit memory, i.e., tell the os that certain pages are not being used and can be thrown away instead of paged to disk. gc/root.h defines classes for noting variables as gc roots. gc/statistics.{h,cpp} defines struct statistics, which stores spidermonkey gc performance counters. dictionary of terms black in common cs terminology, an objec...
JSAPI User Guide
ally provided by other components, not the spidermonkey engine itself. spidermonkey provides a few core javascript data types—numbers, strings, arrays, objects, and so on—and a few methods, such as array.push. it also makes it easy for each application to expose some of its own objects and functions to javascript code. browsers expose dom objects. your application will expose objects that are
relevant for the kind of scripts you want to write. it is up to the application developer to decide what objects and methods are exposed to scripts. hello world using the spidermonkey library to build spidermonkey from source, see spidermonkey build documentation. some systems (such as debian) provide spidermonkey as a prebuilt package. build it from source instead. your program will be easier to...
... careful to ensure that any values it needs are gc-reachable. the garbage collector is rather eager about its job. any object you leave lying around will be destroyed if you don't tell the jsapi you're still using it. second, the application should take steps to reduce the performance impact of garbage collection. keeping objects alive if your jsapi application crashes, it is likely due to a gc-
related error. the application must ensure that the garbage collector can reach all the objects, numbers, and strings that are still being used. otherwise, the gc will free the memory occupied by those values, leading to a probable crash the next time your program tries to use them. there are many ways to ensure that a value is gc-reachable. if you just need the value to remain reachable for the ...
...ata and implement jsclass.mark. if a function creates new objects, strings, or numbers, it can use js_enterlocalrootscope and js_leavelocalrootscope to keep those values alive for the duration of the function. to keep a value alive permanently, store it in a gc root. still, gc bugs do occur. these two functions, both available only in debug builds, are especially useful for debugging gc-
related crashes: use js_setgczeal to enable extra garbage collection. gc zeal usually causes a gc-
related crash to occur much sooner (closer to its cause) and more
reliably. it's for development and debugging only, because the extra garbage collection makes js very slow. use js_dumpheap to dump the spidermonkey heap or specific interesting parts of it. see spidermonkey garbage collection int...
...t have both a snake and a mouse, you don't have this problem. likewise, if your application doesn't have both untrusted users (snakes) and sensitive data or dangerous functionality that's exposed to javascript (mice), then you don't need to read any further. the functions and objects created by js_initstandardclasses are safe. they do not provide access to files, the network, or anything browser-
related. the most sensitive information they expose to scripts is the current date and time. object-capabilities-based security one way to keep a snake from eating a mouse is to keep the mouse and the snake in separate cages. one way to keep user a from accessing user b's sensitive data or dangerous functions is to keep each user's code in a separate sandbox. that is, create a separate jscontext a...
JSObjectOps.dropProperty
obsolete since javascript 1.8.5this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. warning! jsobjectops is not a supported api. details of the api may change from one
release to the next. this documentation should be considered spidermonkey internals documentation, not api documentation. see bug 408416 for details. the jsobjectops.dropproperty callback
releases a jsproperty. syntax typedef void (*jspropertyrefop)(jscontext *cx, jsobject *obj, jsproperty *prop); name type description cx jscontext * a context that was the cx argument to an earlier call to jsobjectops.lookupproperty that found a property. obj jsobject * the object of wh...
...p); name type description cx jscontext * a context that was the cx argument to an earlier call to jsobjectops.lookupproperty that found a property. obj jsobject * the object of which prop is an own property. that is, the value that the jsobjectops.lookupproperty hook stored in the *objp out parameter. prop jsproperty * the property to
release. that is, the value that jsobjectops.lookupproperty hook stored in the *propp out parameter. description the following contract governs jsobjectops callers and implementations: whenever jsobjectops.lookupproperty returns a jsproperty pointer, the property is locked. while the property is locked, the caller may access it using other jsobjectops callbacks. it may not otherwise call ...
...lementations: whenever jsobjectops.lookupproperty returns a jsproperty pointer, the property is locked. while the property is locked, the caller may access it using other jsobjectops callbacks. it may not otherwise call into the jsapi in ways that might trigger other property accesses. (in a js_threadsafe build, that would risk deadlock.) when finished with a locked property, the caller must
release it by calling the dropproperty callback. the lifetime of the jsproperty * extends from the successful defineproperty or lookupproperty call to the dropproperty call. as a spidermonkey implementation detail, what is actually locked here (under the native implementation of jsobjectops) is not the property but some collection of objects including the object on which the property is defined. t...
...objectops implementation; deadlock does not happen because each thread accesses only one property at a time. a single, built-in jsobjectops implementation is used for most spidermonkey objects that are exposed to scripts. custom jsobjectops implementations can either retain the spidermonkey property storage and locking scheme (by copying all or most of the built-in jsobjectops) or replace it enti
rely. threads. in a js_threadsafe build, any consistency observed by multiple threads operating on the same data is provided solely by the property locking scheme described above. in spidermonkey 1.8 and earlier, the main built-in jsobjectops implementation serialized all accesses to a given object's properties. (that is, for each object, all property accesses happened in some order, and what each t...
SpiderMonkey 1.8.8
these
release notes are an incomplete draft and were initially seeded from the 1.8.5
release notes, so lots of the information here isn't actually new to spidermonkey 1.8.8 (nor is it even the case that the version number will be 1.8.8!). the mozilla javascript team is pleased to announce the
release of spidermonkey 1.8.8. you can download full source code here: insert-actual-link-when-the-
release-happens (md5 checksum: insert-actual-hash-here). spidermonkey 1.8.8 is the javascript engine that shipped in firefox 10.0. it continues to improve performance over previous spidermonkey
releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code. it also contains new language and api features described in detail below. please ...
...ual-hash-here). spidermonkey 1.8.8 is the javascript engine that shipped in firefox 10.0. it continues to improve performance over previous spidermonkey
releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code. it also contains new language and api features described in detail below. please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. —insert-actual-
release-date-here platform support spidermonkey 1.8.8 is supported on all the platforms where firefox insert-actual-firefox-version-number-here runs. spidermonkey 1.8.8 includes a just-in-time compiler (jit) that compiles javascript...
...erpreter, as in previous versions. it's the same language, just not as fast. migrating to spidermonkey 1.8.8 the following features in earlier versions of spidermonkey have been dropped. the jsresolve_classname and jsresolve_with resolve flags (passed to jsclass.resolve when jsclass.flags contains jsclass_new_resolve) have been removed. spidermonkey 1.8.8 is not binary-compatible with previous
releases, nor is it source-code compatible. many jsapi types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most sig...
...monkey embedders should also be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi stable for embedders. we have chosen to concentrate on performance and correctness as primary concerns instead. the team is considering the removal of tinyids js_threadsafe is going away, with future versions supporting only thread-safe builds a new debugging api is on the way to replace jsd.
release notes errata this is a list of changes which need to be made to the
release notes asap. feel free to fix any problems you spot -- this is a wiki! don't add anything here -- this is for after the
release notes are completed. :-) ...
SpiderMonkey 17
these
release notes are an incomplete draft and were initially seeded from the (now-defunct) 1.8.8
release notes, which were themselves seeded from the 1.8.5
release notes, so lots of the information here isn't actually new to spidermonkey 17. the mozilla javascript team is pleased to announce the
release of spidermonkey 17. you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/mozjs17.0.0.tar.gz (md5 checksum: 20b6f8f1140ef6e47daa3b16965c9202). spidermonkey 17 is the javascript engine that shipped in firefox 17. it continues to improve performance over previous spidermonkey
releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code. it also contains new language and api features described in...
...or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. ...
...an interpreter, as in previous versions. it's the same language, just not as fast. migrating to spidermonkey 17 the following features in earlier versions of spidermonkey have been dropped. the jsresolve_classname and jsresolve_with resolve flags (passed to jsclass.resolve when jsclass.flags contains jsclass_new_resolve) have been removed. spidermonkey 17 is not binary-compatible with previous
releases, nor is it source-code compatible. many jsapi types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most sig...
...performance and correctness as primary concerns instead. the team is considering the removal of tinyids js_threadsafe is going away, with future versions supporting only thread-safe builds a new debugging api is on the way to replace jsd. in the future every api is going to take handles instead of raw pointers. exact stack rooting is requirement for a (moving) generational garbage collector.
release notes errata this is a list of changes which need to be made to the
release notes asap. feel free to fix any problems you spot -- this is a wiki! don't add anything here -- this is for after the
release notes are completed. :-) ...
SpiderMonkey 45
spidermonkey 45 is outdated and contains known security vulnerabilities. these
release notes are incomplete. the mozilla javascript team is pleased to announce the
release of spidermonkey 45. you can download full source code from https://ftp.mozilla.org/pub/spidermonkey/
releases/45.0.2/mozjs-45.0.2.tar.bz2 sha256: 570530b1e551bf4a459d7cae875f33f99d5ef0c29ccc7742a1b6f588e5eadbee md5: 2ca34f998d8b5ea79d8616dd26b5fbab spidermonkey 45 is the javascript engine that shipped in firefox 45. it continues to improve performance over previous spidermonkey
releases. it also contains new language and api features described in detail below. please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org u...
...nt speed increase. it is supported on x86, x86_64, and arm architectures. on several other platforms (sparc, mips), the jit is provided but not supported. on remaining platforms the jit is disabled; javascript code runs in an interpreter, as it has in previous versions. it's the same language, just not as fast. ...
...e jit is disabled; javascript code runs in an interpreter, as it has in previous versions. it's the same language, just not as fast. migrating to spidermonkey 45 spidermonkey 45 is not binary-compatible with previous
releases, nor is it source-code compatible. many jsapi types; functions, and callback signatures, have changed though most functions that have retain their previous name, providing
relatively unchanged functionality. applications will require significant changes, but most changes will be automatically detected by the c/c++ compiler, making them easy to detect and updating the code a
relatively straightforward job. here is a list of the most significant changes: js::nullptr is obsolete. you should now use nullptr instead. (supporting decltype(nullptr)). new javascript langu...
...ere... future direction jscontext and jsruntime are merging. ...
Shell global objects
function. timesaccessed returns a number that indicates how many times this variable is accessed perfmeasurement see perfmeasurement.jsm. shell only functions functions always available version([number]) get or force a script compilation version number. options([option ...]) get or toggle javascript options. load(['foo.js' ...]) load files named by string arguments. filename is
relative to the current working directory. load
relativetoscript(['foo.js' ...]) load files named by string arguments. filename is
relative to the calling script. evaluate(code[, options]) evaluate code as though it were the contents of a file. options is an optional object that may have these properties: isrunonce use the isrunonce compiler option (default: false) noscriptrval use the n...
...accepts the same arguments as gc(). getbuildconfiguration() return an object describing some of the configuration options spidermonkey was built with. haschild(parent, child) return true if child is a child of parent, as determined by a call to tracechildren setsavedstacksrngstate(seed) set this compartment's savedstack...
...unks slicetimebudget markstacklimit highfrequencytimelimit highfrequencylowlimit highfrequencyhighlimit highfrequencyheapgrowthmax highfrequencyheapgrowthmin lowfrequencyheapgrowth dynamicheapgrowth dynamicmarkslice allocationthreshold minemptychunkcount maxemptychunkcount compactingenabled refreshframeslicesenabled
relazifyfunctions(...) perform a gc and allow
relazification of functions. accepts the same arguments as gc(). getbuildconfiguration() return an object describing some of the configuration options spidermonkey was built with. haschild(parent, child) return true if child is a child of parent, as determined by a call to tracechildren setsavedstacksrngstate(seed) set this compartment's savedstacks' rng state. getsavedframecount() return the...
...wasmissupported() returns a boolean indicating whether webassembly is supported on the current device. wasmtexttobinary(str) translates the given text wasm module into its binary encoding. wasmbinarytotext(bin) translates binary encoding to text format wasmextractcode(module) extracts generated machine code from webassembly.module. islazyfunction(fun) true if fun is a lazy jsfunction. is
relazifiablefunction(fun) ture if fun is a jsfunction with a
relazifiable jsscript. enableshellallocationmetadatabuilder() use shellallocationmetadatabuilder to supply metadata for all newly created objects. getallocationmetadata(obj) get the metadata for an object. bailout() force a bailout out of ionmonkey (if running in ionmonkey). bailafter(number) start a counter to bail once after pass...
SpiderMonkey: The Mozilla JavaScript runtime
guides building spidermonkey build documentation how to get spidermonkey source code, build it, and run the test suite. using spidermonkey introduction to the javascript shell documentation of the command-line javascript shell, js. ...
... directions future directions for functionality, design, and coding practices. spidermonkey internals a design overview and a file-by-file walkthrough of the implementation. bytecode reference spidermonkey bytecode reference. ...
...s. spidermonkey internals a design overview and a file-by-file walkthrough of the implementation. bytecode reference spidermonkey bytecode reference. ...
...s a design overview and a file-by-file walkthrough of the implementation. bytecode reference spidermonkey bytecode reference. ...
Secure Development Guidelines
mozilla. ...
...eax, ebx, ecx, edx, edi, esi) 2 stack-
related registers (esp, ebp) mark top and bottom of current stack frame status register (eflags) contains various state information instruction pointer (eip) points to register being executed; can’t be modified directly introduction: gaining control (2) eip is modified using call or jump instructions attacks usually
rely on obtaining control over the eip otherwise the attacker can try to control memory pointed to by an existing function pointer a vulnerability is required to modify the eip or sensitive memory saved return addr or function pointer get altered introduction: gaining control (3) common issues used to gain control buffer overflows format string bugs integer overflows/underflows ...
... bbv: stack overflow example: void foo(char *bar) { char c[12]; strcpy(c, bar); } int main(int argc, char **argv) { foo(argv[1]); } bbv: stack overflow before the stack overflow bbv: stack overflow after the stack overflow bbv: heap overflow dynamic memory malloc() ...
...le: void *p; size_t new_size; p = realloc(p, new_size); if (p == null) { /* handle error */ } memory leaks: prevention tools like valgrind can help detect memory leaks writing secure code: object management reference counting issues real-life example (bug 440230) void addref() { ++mrefcnt; ns_log_addref(this, mrefcnt, "nscssvalue::array", sizeof(*this)); } void
release() { --mrefcnt; ns_log_
release(this, mrefcnt, "nscssvalue::array"); if (mrefcnt == 0) delete this; } reference counting issues: prevention use the largest data type available on your platform for your reference counter use a hard limit constructor/destructor issues if a constructor fails the destructor never gets called this can lead to memory leaks constr...
History Service Design
ariety of nice features. for example, is possible to create a query folder containing the 10 pages most visited by the user, allowing to fast find good candidates for bookmarking. a locationbar intelligent algorithm (aka: the awesomebar) allows searchs through bookmarks, history, keywords (and much more) detaching the user from the old long searches through tree views. this is possible through a
relevance algorithm that assigns a param called frecency to every page in history, see the places frecency algorithm for major informations. history service provides the basics to create such adaptive search paths, allowing for a better browsing experience through a common interface. long term objectives include the ability to index more informations from the visited pages, through fulltext indexes,...
...rd-party products so they can provide text searching capabilities to the places system. places core history service (nsinavhistoryservice.idl) is the core of places, every other places service depends on it to correctly work, so it gets always initialized at application startup. actual tasks executed by this service include: database creation, maintenance and initialization: all services
rely on a common shared database called places.sqlite. history service checks for database existance and coherence, and initializes the connection through the storage service. history management: provides basic and advanced apis to store and modify visits and page details.
relevance calculation: maintain and expire frecency values for pages. history expiration: expire old visits and...
...kup). once the database connection has been set-up the schema version of the database is checked. schema version is upgraded every time a change is made to the database schema, history service will eventually upgrade the database, moving and fixing its datas accordingly. in case the database has been created for the first time history service will create all tables, indexes and triggers, calling
related inittables static methods of other dependant services. finally temporary tables, indexes and triggers are created, this happens at every run since those entities are removed when closing the connection. temporary storage is used to avoid too frequent writes to the disk, since those are most likely to cause fsyncs (to ensure data integrity) on the target filesystem. the temporary data (actual...
...uded from history, so they will never be added, for example: about, view-source, chrome. if a page can be added we first check if it exists already, then it is added or updated accordingly to the previous check, and common attributes are set based on concurrent visit properties. typed means the page as a typed visit, hidden means the page should not be shown in autocomplete, while frecency is the
relevance the page will have in locationbar queries. finally observers are notified a new visit has been added. every visit is identified by its visit date, and a visit type (also known as transition type) that represents how we have come to that page (typed, click, redirect, bookmark, etc.). an additional property of a visit is the visit we have come from, this is used to track visit chains in glob...
Querying Places
ails about what constitutes a session). results_as_full_visit: this is an extended version of result_type_visit. the results are of type result_type_full_visit and have additional information about the visit, such as the referring visit, and how the transition happened (typed, redirect, link, etc). not yet implemented -- see bug 320831. ...
...lts_as_full_visit: this is an extended version of result_type_visit. the results are of type result_type_full_visit and have additional information about the visit, such as the referring visit, and how the transition happened (typed, redirect, link, etc). not yet implemented -- see bug 320831. ...
...n of result_type_visit. the results are of type result_type_full_visit and have additional information about the visit, such as the referring visit, and how the transition happened (typed, redirect, link, etc). not yet implemented -- see bug 320831. ...
... contain the word "firefox" in the title/url or that i've visited today from mozilla.org. // first query object searches for "firefox" in title/url var query1 = placesutils.history.getnewquery(); query1.searchterms = "firefox"; // second query object searches for visited in past 24 hours and from mozilla.org var query2 = placesutils.history.getnewquery(); query2.begintimereference = query2.time_
relative_now; query2.begintime = -24 * 60 * 60 * 1000000; // 24 hours ago in microseconds query2.endtimereference = query2.time_
relative_now; query2.endtime = 0; // now query2.domain = "mozilla.org"; var result = placesutils.history.executequeries([query1, query2], 2, options); note: keyword searching doesn't work correctly across or queries. the current behavior does the normal query and then sel...
The Publicity Stream API
nt as a general application messaging system. accessing the api the publicity api can be enabled by including a javascript library. this library will detect whether native api support is enabled by the user's browser, if not it will shim in a pure html implementation. [is this still doable?] the javascript library should be included from: https://myapps.mozillalabs.com/jsapi/publicity.js all apis
related to open web applications are accessed under the navigator.apps object. publicity stream api (navigator.apps.publicity.*) the publicity api is exposed as properties on the navigator.apps.publicity object. publicizeactivity( <activity>, [ { [ onsuccess: <function> ], [ onerror: <function> ] } ]): applications should call this method when an user-initiated activity deemed attractive to po...
... properties) finally, the publicizeactivity() function will throw an exception if required arguments are missing, or if unsupported arguments are present. 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 not recommended that applications consume the publicity stream in any way (please use your own server for any in-app social aspects). 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 ...
... store. it is not recommended that applications consume the publicity stream in any way (please use your own server for any in-app social aspects). 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. onerror is an error callback that will be invoked if the installation fails. possible error codes include: denied - if the user does not log in correctly permissiondenied - if the site is not allowed to access the publicity stream networkerror - if the publicity server is unreachable for_apps is a json...
...r callback that will be invoked if the installation fails. possible error codes include: denied - if the user does not log in correctly permissiondenied - if the site is not allowed to access the publicity stream networkerror - if the publicity server is unreachable for_apps is a json list of apps that this store has (each represented as its origin url), so that stream events not
relating to applications in a given presentation context can be excluded from the return value. if null or an empty list is passed, events for all apps are returned. since the timestamp of the earliest event you want returned. if not specified, will default to the beginning of the stream. before the timestamp of the latest event you want returned. if not specified, will default to now. count th...
Preface
ogies that make up xpcom. accordingly, the book is arranged so that you can follow along and create your own components or learn about different xpcom topics individually, as in a reference work. for example, the introduction includes a discussion of components and what they are, and the first chapter - in which you compile the basic code and register it with mozilla - prompts a discussion of the
relationship between components and modules, of xpcom interfaces, and of the registration process in general. the top of each chapter provides a list of the major topics covered. sidebar sections are included to highlight technical details. by the end of the book, if we've done our job, you will have learned how to build a component and you will know something about the framework for these component...
...pics covered. sidebar sections are included to highlight technical details. by the end of the book, if we've done our job, you will have learned how to build a component and you will know something about the framework for these components in gecko, which is xpcom. who should read this book no one. it is badly out of date, and much of what it says is either no longer remotely accurate, or is seve
rely deprecated. if you are a historian, though... creating xpcom components is meant for c++ developers. though you can create xpcom components in javascript and other languages, and though you might be able to follow along as a c programmer, the component implementation code is written in c++, and much of the discussion of how to make your codeinto an xpcom component starts from c++. you don't ...
... implies, xpcom is similar to microsoft com. if you have any experience with this technology, much of it can be applied to xpcom. however, this book does not assume any prior knowledge of com - all of the basic com ideas will be introduced. this book provides a tutorial about building an xpcom component that controls browsing behavior. although, xpcom can be used in many environments which are un
related to web browsing, xpcom's main client is gecko, an open source, standards compliant, embeddable web browser, where it's easiest and most practical to illustrate xpcom's functionality. a full description of the component in this tutorial can be found in the what we'll be working on section of the tutorial. despite what old documentation says, xpcom should not be used to make npapi plugins scr...
...he mozilla source tree or use the gecko sdk, you can build your own components which leverage components that already exist in gecko. the weblock component we describe in this tutorial is a practical (and, we hope, genuinely useful) addition to the browser. in order to build it, your gecko sdk or mozilla source tree needs to be version 1.2 or later (xpcom interfaces were not fully frozen in prior
releases). this book assumes you are using the sdk rather than compiling in a mozilla source tree, though the difference between these two approaches is minimal. details about downloading the sdk, building, and getting programmatic access to gecko components are provided in the appendix to this book, setting up the gecko sdk. conventions the formatting conventions listed below are used to designat...
Setting up the Gecko SDK
g/pub/mozi....8.0.4.tar.bz2 windows: http://ftp.mozilla.org/pub/mozi...vc-1.8.0.4.zip mac: http://ftp.mozilla.org/pub/mozi...ac-1.8.0.4.zip note that the version number for the archives above is 1.8. the weblock component was built with version 1.4a, which is no longer available. you may want to check for newer versions at gecko versions prior to 1.7: http://ftp.mozilla.org/pub/mozi...illa/
releases/ gecko versions after 1.8: http://ftp.mozilla.org/pub/mozi...nner/
releases/ once you download the sdk, you can expand it into any convenient location. in this appendix, we set up the windows gecko sdk in c:\gecko-sdk\. if you choose some other location, remember to adjust the settings described here (e.g., in the building a microsoft visual cpp project section below) to point to this new ...
...this finalizes the project settings and gives you a project that will hold and compile xpcom components. building a windows project this section is writting for those of you who do not...
...this finalizes the project settings and gives you a project that will hold and compile xpcom components. building a windows project this section is writting for those of you who do not wish to install visual studio or the express ...
...ction is writting for those of you who do not wish to install visual studio or the express edition, allowing the user to be able to create commercial extensions without buying the full version of visual studio and allowing them to use their own editors. first, you need to get the sdk, this project uses the following tools to compile the extension for use. tools needed gecko 1.9.2 sdk: http://
releases.mozilla.org/pub/mozi....win32.sdk.zip windows platform sdk: http://www.microsoft.com/downloads/e...displaylang=en moztools: http://ftp.mozilla.org/pub/mozilla.o...8-moztools.zip the windows platform sdk has the c++ compiler/linker needed, moztools has several tools and libraries needed for this example. setting up the tools this is probably the most difficult part. install the microso...
IAccessibleText
'o' in "two", then: the caretoffset for the "one ? three" object would be 4, matching the embed character</li> the caretoffset for "two" would be 2, matching the "o" the caret position/offset is that of the character logically following it, for example to the right of it in a left to right language. [propget] hresult caretoffset( [out] long offset ); parameters offset the returned offset is
relative to the text() represented by this object. return value s_false if the caret is not currently active on this object, that is the caret is located on some other object. the returned offset value will be -1. s_ok. characterextents() returns the bounding box of the specified position. the virtual character after the last character of the represented text(), that is the one at position length is...
...aracterextents() returns the bounding box of the specified position. the virtual character after the last character of the represented text(), that is the one at position length is a special case. it represents the current input position and will therefore typically be queried by at more often than other positions. because it does not represent an existing character its bounding box is defined in
relation to preceding characters. it should be roughly equivalent to the bounding box of some character when inserted at the end of the text(). its height typically being the maximal height of all the characters in the text() or the height of the preceding character, its width being at least one pixel so that the bounding box is not degenerate. [propget] hresult characterextents( [in] long offset, ...
...idth being at least one pixel so that the bounding box is not degenerate. [propget] hresult characterextents( [in] long offset, [in] enum ia2coordinatetype coordtype, [out] long x, [out] long y, [out] long width, [out] long height ); parameters offset index of the character for which to return its bounding box. the valid range is 0..length. coordtype specifies if the coordinates are
relative to the screen or to the parent window. x x coordinate of the top left corner of the bounding box of the referenced character. y y coordinate of the top left corner of the bounding box of the referenced character. width width of the bounding box of the referenced character. height height of the bounding box of the referenced character. return value e_invalidarg if bad [in] passed, [out] valu...
...bstring to a specified location. hresult scrollsubstringtopoint( [in] long startindex, [in] long endindex, [in] enum ia2coordinatetype coordinatetype, [in] long x, [in] long y ); parameters startindex 0 based character offset. endindex 0 based character offset - the offset of the character just past the last character of the string. coordinatetype specifies whether the coordinates are
relative to the screen or the parent object. x defines the x coordinate. y defines the y coordinate. return value e_invalidarg if bad [in] passed. s_false if the object is already at the specified location. s_ok. selection() returns the character offsets of nth active text() selection. [propget] hresult selection( [in] long selectionindex, [out] long startoffset, [out] long endoffset ); param...
imgICache
image/public/imgicache.idlscriptable please add a summary to this article. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) as of firefox 18, there is no longer a single image cache. that means that using getservice in order to obtain it will yield incorrect results. ...
...criptable please add a summary to this article. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) as of firefox 18, there is no longer a single image cache. that means that using getservice in order to obtain it will yield incorrect results. ...
...s last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) as of firefox 18, there is no longer a single image cache. that means that using getservice in order to obtain it will yield incorrect results. ...
...sults. use the following snippet to obtain a
relevant image cache for a given document or channel (where
relevantdocument is a document object that contains images you care about, or
relevantchannel is an nsichannel that is used for fetching images): var tools = components.classes["@mozilla.org/image/tools;1"].getservice(components.interfaces.imgitools); var cache = tools.getimgcachefordocument(
relevantdocument); // alternatively, tools.getimgcacheforchannel(
relevantchannel) if there is no
relevant document or channel, null may be passed, but this will cause any image cache requests to use the permanent storage cache (ie. any images from windows in private browsing mode will not be present in the cache returned from a call with a null parameter). method overview void clea...
mozIAsyncFavicons
. as an alternative, you can just use placesutils.favicons from javascript. ...
...vicon data is currently associated with the favicon uri, adatalen will be 0, adata will be an empty array, and amimetype will be an empty string. setandfetchfaviconforpage() declares that a given page uses a favicon with the given uri and attempts to fetch and save the icon data by loading the favicon uri through a asynchronous network request. if the icon data already exists, we will not try to
reload the icon unless aforce
reload is true. similarly, if the icon is in the failed favicon cache we will not do anything unless aforce
reload is true, in which case we'll try to
reload the favicon. this function will only save favicons for "good" uris, as defined by what gets added to history or is a bookmark. for "bad" uris, this function will succeed but do nothing. this function will also ignore ...
...icon_errorpage_url in nsifaviconservice.idl). icons that fail to load will automatically be added to the failed favicon cache, and this function will not save favicons for non-bookmarked uris when history is disabled. note: this function is identical to nsifaviconservice.setandloadfaviconforpage() void setandfetchfaviconforpage( in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforce
reload, in unsigned long afaviconloadtype, in nsifavicondatacallback acallback optional ); parameters apageuri uri of the page whose favicon is being set. afaviconuri uri of the favicon to associate with the page. aforce
reload if false, we try to
reload the favicon only if we do not have it or it has expired from the cache. setting to true causes us to ...
...oad, in unsigned long afaviconloadtype, in nsifavicondatacallback acallback optional ); parameters apageuri uri of the page whose favicon is being set. afaviconuri uri of the favicon to associate with the page. aforce
reload if false, we try to
reload the favicon only if we do not have it or it has expired from the cache. setting to true causes us to
reload the favicon even if we have a usable copy. afaviconloadtype set to nsifaviconservice.favicon_load_private if the favicon is loaded from a private browsing window. set to nsifaviconservice.favicon_load_non_private otherwise acallback optional once we're done setting and/or fetching the favicon, we invoke this callback. replacefavicondata() sets the data for a given ...
nsIAccessibleText
characterextents() returns the bounding box of the specified position. the virtual character after the last character of the represented text, that is the one at position length is a special case. it represents the current input position and will therefore typically be queried by at more often than other positions. because it does not represent an existing character its bounding box is defined in
relation to preceding characters. it should be roughly equivalent to the bounding box of some character when inserted at the end of the text. its height typically being the maximal height of all the characters in the text or the height of the preceding character, its width being at least one pixel so that the bounding box is not degenerate. void getcharacterextents( in long offset, out long x, ...
...eters offset index of the character for which to return its bounding box. the valid range is 0..length. x x coordinate of the bounding box of the referenced character. y y coordinate of the bounding box of the referenced character. width width of the bounding box of the referenced character. height height of the bounding box of the referenced character. coordtype specifies if the coordinates are
relative to the screen or to the parent window (see constants declared in nsiaccessiblecoordinatetype.constants). getoffsetatpoint() get the text offset at the given point, or return -1 if no character exists at that point. long getoffsetatpoint( in long x, in long y, in unsigned long coordtype ); parameters x the position's x value for which to look up the index of the character that is ren...
...is invalid or there is no character under the point. getrangeextents() the virtual character after the last character of the represented text, that is the one at position length is a special case. it represents the current input position and will therefore typically be queried by at more often than other positions. because it does not represent an existing character its bounding box is defined in
relation to preceding characters. it should be roughly equivalent to the bounding box of some character when inserted at the end of the text. its height typically being the maximal height of all the characters in the text or the height of the preceding character, its width being at least one pixel so that the bounding box is not degenerate. void getrangeextents( in long startoffset, in long endof...
...th. endoffset index of the character for which to return its bounding box. the valid range is 0..length. x x coordinate of the bounding box of the referenced character. y y coordinate of the bounding box of the referenced character. width width of the bounding box of the referenced character. height height of the bounding box of the referenced character. coordtype specifies if the coordinates are
relative to the screen or to the parent window (see constants declared in nsiaccessiblecoordinatetype.constants. getselectionbounds() void getselectionbounds( in long selectionnum, out long startoffset, out long endoffset ); parameters selectionnum startoffset endoffset gettext() string methods may need to return multibyte-encoded strings, since some locales can not be encoded using 16-b...
nsIDOMClientRect
ar box. the type of box is specified by the method that returns such an object. it is returned by functions like element.getboundingclientrect. ...
...st changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) attributes attribute type description bottom float y-coordinate,
relative to the viewport origin, of the bottom of the rectangle box. read only. height float height of the rectangle box (this is identical to bottom minus top). read only. left float x-coordinate,
relative to the viewport origin, of the left of the rectangle box. read only. right float x-coordinate,
relative to the viewport origin, of the right of the rectangle box. read only. top float y-coordinate,
relative to the viewport origin, of the top of the rectangle box. read only. width float width of the rectangle box (this is identical to right minus l...
...read only. ...
...read only. see also cssom view module : the clientrect interfacewd this object was renamed a few times: initial name was textrectangle, then clientrect, then domrect. ...
nsIDOMNSHTMLDocument
lean querycommandenabled(in domstring commandid); boolean querycommandindeterm(in domstring commandid); boolean querycommandstate(in domstring commandid); boolean querycommandsupported(in domstring commandid); domstring querycommandtext(in domstring commandid); obsolete since gecko 14.0 domstring querycommandvalue(in domstring commandid); void
releaseevents(in long eventflags); void routeevent(in nsidomevent evt); void write(); obsolete since gecko 2.0 void writeln(); obsolete since gecko 2.0 attributes attribute type description alinkcolor domstring same as body.alink bgcolor domstring same as body.bgcolor compatmode domstring returns "backcompat"...
...mented in gecko. value some commands require an argument. you can pass null for those commands that do not need an argument. return value true if the command was recognized, false otherwise. execcommandshowhelp() obsolete since gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) this method never did anything but throw an exception, and was removed enti
rely in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11). boolean execcommandshowhelp( in domstring commandid ); parameters commandid the name of the command. return value this method is not supported and always throws an exception. getselection() domstring getselection(); parameters none. return value the text of the current selection, the same as window.getselection.tostr...
...mmandsupported( in domstring commandid ); parameters commandid the name of the command to query. return value returns true if the command is supported on the current range, false otherwise. querycommandtext() obsolete since gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) this method never did anything but throw an exception, and was removed enti
rely in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11). domstring querycommandtext( in domstring commandid ); parameters commandid the name of the command to query. return value this method is not supported and always throws an exception. querycommandvalue() domstring querycommandvalue( in domstring commandid ); parameters commandid the name of the command to q...
...rs commandid the name of the command to query. return value this method is not supported and always throws an exception. querycommandvalue() domstring querycommandvalue( in domstring commandid ); parameters commandid the name of the command to query. return value the value of the command. for the gethtml command, the current selection is returned as an html source fragment.
releaseevents() provided for compatibility with netscape 4.x, but does not actually do anything. void
releaseevents( in long eventflags ); parameters eventflags routeevent() provided for compatibility with netscape 4.x, but does not actually do anything. void routeevent( in nsidomevent evt ); parameters evt write() obsolete since gecko 2.0 (firefox 4 / t...
nsIDOMSimpleGestureEvent
for update events, this indicates the movement since the previous update; for the mozrotategesture and mozmagnifygesture events, this indicates the total movement that occurred while th...
...lockwise rotation). for magnify gestures, the units are implementation-specific; however, positive values indicate zooming in, and negative values indicate zooming out. read only. note: on mac os x, the units used for magnification gestures by the underlying operating system api are not documented at this time; typical values appear to be in the range 0.0 to 100.0, but currently you can only
rely on the value being either positive or negative. on windows, the units indicate the difference between the previous and current width between the two touch points, in pixels. direction unsigned long the direction in which the gesture moved. see direction constants and rotation constants on this page. read only. constants direction constants constant value ...
... deltaarg the value t...
...n boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget
relatedtargetarg, in unsigned long directionarg, in double deltaarg ); parameters typearg canbubblearg cancelablearg viewarg detailarg screenxarg screenyarg clientxarg clientyarg ctrlkeyarg altkeyarg shiftkeyarg metakeyarg buttonarg
relatedtargetarg directionarg the value to assign to the direction attribute. deltaarg the value to assign to the delta attribute. see also mouse gesture events event ...
nsIDOMWindowUtils
query_content_flag_selection_find 0x0100 one of values of aadditionalflags of sendquerycontentevent(). query_content_flag_selection_urlsecondary 0x0200 one of values of aadditionalflags of sendquerycontentevent(). query_content_flag_selection_urlstrikeout 0x0400 one of values of aadditionalflags of sendquerycontentevent(). query_content_flag_offset_
relative_to_insertion_point 0x0800 one of values of aadditionalflags of sendquerycontentevent(). query_selected_text 3200 query_selected_text queries the first selection range's information. query_text_content 3201 query_text_content queries the text at the specified range. query_caret_rect 3203 query_caret_rect queries the (collapsed) caret rect o...
...owser widget. void setcssviewport( in float awidthpx, in float aheightpx ); parameters awidthpx the width of the viewport in css pixels. aheightpx the height of the viewport in css pixels. setdisplayport() set the "displayport" to be <xpx, ypx, widthpx, heightpx> in units of css pixels, regardless of the size of the enclosing widget/view. this will *not* trigger reflow. ...
... it's legal to set a displayport that extends beyond the css viewport in any direction (left/right/top/bottom). it's also legal to set a displayport that extends beyond the document's bounds. ...
...ust have universalxpconnect privileges. void setdisplayport( in float axpx, in float aypx, in float awidthpx, in float aheightpx ); parameters axpx aypx awidthpx aheightpx setresolution() get/set the resolution at which rescalable web content is drawn. currently this is only (some) thebes content. setting a new resolution does *not* trigger reflow. this api is enti
rely separate from textzoom and fullzoom; a resolution scale can be applied together with both textzoom and fullzoom. the effect of is api for gfx code to allocate more or fewer pixels for rescalable content by a factor of |resolution| in either or both dimensions. setresolution together with setdisplayport() can be used to implement a non-reflowing scale-zoom in concert with another entity that can...
nsIMsgIncomingServer
playofflinemsg(in nsimsgwindow awindow); boolean equals(in nsimsgincomingserver server); void forgetpassword(); void forgetsessionpassword(); astring generateprettynameformigration(); boolean getboolattribute(in string name); boolean getboolvalue(in string attr); 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 ...
...ow); void performexpand(in nsimsgwindow amsgwindow); void removefiles(); 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(); vo...
...ribute( in string name ); parameters name missing description return value missing description exceptions thrown missing exception missing description getcharvalue() acstring getcharvalue( in string attr ); parameters attr missing description return value missing description exceptions thrown missing exception missing description getfilevalue() nsilocalfile getfilevalue( in string
relpref, in string abspref ); parameters
relpref missing description abspref missing description return value missing description exceptions thrown missing exception missing description getfilterlist() nsimsgfilterlist getfilterlist( in nsimsgwindow amsgwindow ); parameters amsgwindow missing description return value missing description exceptions thrown missing exception missing descrip...
...ring attr, in acstring value ); parameters attr missing description value missing description exceptions thrown missing exception missing description setdefaultlocalpath() void setdefaultlocalpath( in nsilocalfile adefaultlocalpath ); parameters adefaultlocalpath missing description exceptions thrown missing exception missing description setfilevalue() void setfilevalue( in string
relpref, in string abspref, in nsilocalfile avalue ); parameters
relpref missing description abspref missing description avalue missing description exceptions thrown missing exception missing description setfilterlist() void setfilterlist( in nsimsgfilterlist afilterlist ); parameters afilterlist missing description exceptions thrown missing exception missing description setintattribu...
nsIURL
if the url denotes a path to a directory and not a file, for example http://host/foo/bar/, then the directory attribute accesses the complete /foo/bar/ portion, and the filename is the empty string. if the trailing slash is omitted, then th...
...ng directory portion of a url. if the url denotes a path to a directory and not a file, for example http://host/foo/bar/, then the directory attribute accesses the complete /foo/bar/ portion, and the filename is the empty string. if the trailing slash is omitted, then the directory is /foo/ and the file is bar (that is this is a syntactic, not a semantic breakdown of the path). and hence don't
rely on this for something to be a definitely be a file. but you can get just the leading directory portion for sure. some characters may be escaped. filebasename autf8string file basename portion of a filename in a url. some characters may be escaped. fileextension autf8string file extension portion of a filename in a url. if a file extension does not exist, the empty s...
...filename in a url. if a file extension does not exist, the empty string is returned. some characters may be escaped. filename autf8string file name portion of a url. if the url denotes a path to a directory and not a file, for example http://host/foo/bar/, then the directory attribute accesses the complete /foo/bar/ portion, and the filename is the empty string. note that this is pu
rely based on searching for the last trailing slash. and hence don't
rely on this to be a definite file. some characters may be escaped. filepath autf8string path including the directory and file portions of a url. for example, the filepath of "http://host/foo/bar.html#baz" is "/foo/bar.html". some characters may be escaped. param autf8string parameters specified af...
... ftp://foo.com/bar/ http://foo.com/a.htm#i http://foo.com/b.htm http://foo.com/ ftp://foo.com/c.htm#i ftp://foo.com/c.htm ftp://foo.com/c.htm file:///a/b/c.html file:///d/e/c.html file:/// autf8string getcommonbasespec( in nsiuri auritocompare ); parameters auritocompare a uri to compare with return value the common uri portion get
relativespec() this method takes a uri and returns a substring of this if it can be made
relative to the uri passed in. if no commonality is found, the entire uri spec is returned. if they are identical, "" is returned. filename, query, and so forth are always returned except when uris are identical. autf8string get
relativespec( in nsiuri auritocompare ); parameters auritocompare a uri to...
nsIWebBrowserPersist
o decompress it. persist_flags_replace_existing_files 32 replace existing files on the disk (use with due diligence!) persist_flags_no_base_tag_modifications 64 don't modify or add base tags. persist_flags_fixup_original_dom 128 make changes to original dom rather than cloning nodes. persist_flags_fixup_links_to_destination 256 fix links
relative to destination location (not origin) persist_flags_dont_fixup_links 512 do not make any adjustments to links. persist_flags_serialize_output 1024 force serialization of output (one file at a time; not concurrent) persist_flags_dont_change_filenames 2048 don't make any adjustments to filenames. persist_flags_fail_on_broken_links 4096 ...
...apply_conversion 16384 let the webbrowserpersist decide whether the incoming data is encoded and whether it needs to go through a content converter, for example to decompress it. persist_flags_append_to_file 32768 append the downloaded data to the target file. this can only be used when persisting to a local file. persist_flags_force_allow_cookies 65536 force
relevant cookies to be sent with this load even if normally they wouldn't be. persist_state_ready 1 persister is ready to save data. persist_state_saving 2 persister is saving data. persist_state_finished 3 persister has finished saving data. encode_flags_selection_only 1 output only the current selection as opposed to the whole document. ...
...e referrer policy to use for the request, taken from nsihttpchannel. apostdata post data to pass with an http request or nsnull. aextraheaders additional headers to supply with an http request or nsnull. afile target file. this may be a nsilocalfile object or an nsiuri object with a file scheme or a scheme that supports uploading (for example ftp). ...
...request or nsnull. afile target file. this may be a nsilocalfile object or an nsiuri object with a file scheme or a scheme that supports uploading (for example ftp). aprivacycontext a context derived from a
relevant window or document (eg. the window containing a link being saved) via a docshell that qis to nsiloadcontext. used to ensure that privacy-sensitive operations (such as saving a uri
related to a private browsing session) do not leak any information (eg. cookies, permanent cache, etc.) null must only be passed in the event that no such
relevant context exists (ie. the uri being saved is un
related to any current browsing session). important: if you think that you should be passing null here, you are almost certainly wrong. null should be passed only when no plausible privacy cont...
nsIXPConnect
void reparentscopeawarewrappers(in jscontextptr ajscontext, in jsobjectptr aoldscope, in jsobjectptr anewscope); obsolete since gecko 1.9.1 nsixpconnectjsobjectholder reparentwrappednativeiffound(in jscontextptr ajscontext, in jsobjectptr ascope, in jso...
...ptr acache, in nsiidptr aiid, in boolean aallowwrapper, out jsval aval, out nsixpconnectjsobjectholder aholder); attributes attribute type description collectgarbageonmainthreadonly prbool obsolete since gecko 1.9 currentjsstack nsistackframe read only. currentnativecallcontext nsaxpcnativecallcontextptr read only. ...
...on missing description notejscontext() note: ajscontext as a child to the cycle collector. [noscript,notxpcom] void notejscontext( in jscontextptr ajscontext, in nscctraversalcallbackref acb ); parameters ajscontext the jscontext to note. acb the cycle collection traversal callback. return value missing description exceptions thrown missing exception missing description
releasejscontext() void
releasejscontext( in jscontextptr ajscontext, in prbool nogc ); parameters ajscontext missing description nogc missing description exceptions thrown missing exception missing description native code only!removejsholder stop rooting the js objects held by aholder. void removejsholder( in voidptr aholder ); parameters aholder the object that hold...
...hrown missing exception missing description wrapnative() wrapnative() will create a new jsobject or return an existing one. the jsobject is returned inside a refcounted nsixpconnectjsobjectholder. as long as this holder is held the jsobject will be protected from collection by javascript's garbage collector. it is a good idea to transfer the jsobject to some equally protected place before
releasing the holder (i.e., use js_setproperty to make this object a property of some other jsobject). this method now correctly deals with cases where the passed in xpcom object already has an associated jsobject for the cases: 1) the xpcom object has already been wrapped for use in the same scope as an nsixpconnectwrappednative. 2) the xpcom object is in fact an nsixpconnectwrappedjs and thus alre...
Thunderbird extensions
ides help for creating extensions for the thunderbird email client. there are similarities with firefox extensions, but there are also differences that may confound the starting thunderbird developer. this documention series focuses on thunderbird. need personalized help? see community / communications. warning: this content is for older versions of thunderbird. much of it may no longer be
relevant. see developer.thunderbird.net for newer information. documentation getting started with thunderbird a brave, young developer wants to develop an add-on for thunderbird. these links to help through this journey. start by reading the tutorial and learn how to build a thunderbird extension. also see thunderbird 57-60 add-ons guide for changes introduced...
...cipes for things extensions want to do. still stuck? ask in a community communication channel on the right. feeling really brave? read the source using a fancy interface; you can often find tests that demonstrate what you're trying to achieve. the gloda database thunderbird has a subsystem called gloda. gloda stands for « global database », and creates thunderbird-wide
relations between objects. gloda provides concepts such as conversations, messages, identities, contacts. all these concepts are
related : a conversation contains messages which are linked to identities (from field, to field) which are themselves part of a contact: indeed, a contact has multiple identities. typical use cases for gloda: find all messages whose subject matches [search term], find ...
...lete 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 api rewrite over the past years making most techniques considerably easier) thunderbird 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 : ...
...ture 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 ...
Initialization and Destruction - Plugins
wn example, which includes the np_initialize and np_shutdown methods. initialization the browser calls np_initialize when a plug-in is loaded and before the first instance is created. use this function to allocate the memory and resources shared by all instances of your plug-in. nperror np_initialize(void) { }; after the last plug-in instance is deleted, the browser calls np_shutdown, which
releases the memory or resources allocated by np_initialize. for an example that shows the use of both the np_initialize and np_shutdown methods, see initialize and shutdown example. during initialization, when the browser encounters data of a mime type registered for a plug-in (either embedded in an html page or in a separate file), it loads the plug-in code into memory (if it hasn't been loaded al...
...file), it loads the plug-in code into memory (if it hasn't been loaded already) and creates a new instance of the plug-in. for more information, see registering plug-ins. plug-ins are native code libraries: .dll files on windows, .so or .dso files on unix, and powerpc shared library files or 68k code resources on mac os. to reduce memory overhead, plug-ins are usually loaded only when needed and
released as soon as possible. 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. this table is filled out by the browser before the initialization call. the other table lists all api calls from the browser to the plug-in. this table is filled out by the plug-in during the ...
...zeof(npsaveddata)); (*save)->len = mylength; (*save)->buf = (void*) npn_memalloc(mylength); strcpy((*save)->buf, mydata); if you allocate saved instance data in npp_destroy, be sure to allocate memory with this function, since the browser can delete the saved data with the equivalent of npn_memalloc at any time. shutdown when the application no longer needs the plug-in, it is shut down and
released. np_shutdown gives you an opportunity to delete data allocated in np_initialize to be shared by all instances of a plug-in. the browser calls the plug-in's np_shutdown function, which informs the plug-in that its library is about to be unloaded, and gives it a chance to cancel any outstanding i/o requests, delete threads it created, free any memory it allocated, and perform any other closing...
...portunity to delete data allocated in np_initialize to be shared by all instances of a plug-in. the browser calls the plug-in's np_shutdown function, which informs the plug-in that its library is about to be unloaded, and gives it a chance to cancel any outstanding i/o requests, delete threads it created, free any memory it allocated, and perform any other closing tasks. the np_shutdown function
releases memory or resources shared across all instances of a plug-in. it is called once after the last instance of the plug-in is destroyed, before
releasing the plug-in library itself. void np_shutdown(void); for an example that shows both the np_initialize and np_shutdown methods, see initialize and shutdown example. initialize and shutdown example this example demonstrates the use of the np_i...
Gecko Plugin API Reference - Plugins
the names of all of these methods begin with npp_ to indicate that they are implemented by the plug-in and called by the browser. for an overview of how these two sides of the plug-in api interact, see the how plug-ins work and overview of plug-in structure sec...
...call thread-safe way to request that the browser calls a plug-in function on the browser or plug-in thread (the thread on which the plug-in was initiated). npn_poppopupsenabledstate pops the popups-enabled state. npn_posturl posts data to a url. npn_posturlnotify posts data to a url, and receives notification of the result. npn_pushpopupsenabledstate pushes the popups-enabled state. npn_
reloadplugins
reloads all plug-ins in the plugins directory. npn_requestread requests a range of bytes for a seekable stream. npn_setvalue sets windowless plug-in as transparent or opaque. npn_setvalueforurl allows a plug-in to change the stored information associated with a url, in particular its cookies. npn_status displays a message on the status line of the browser window. npn_useragent...
...sion returns version information for the plug-in api. npn_write pushes data into a stream produced by the plug-in and consumed by the browser. ...
...ssing browser objects from a plugin how to call plugin native methods the api extensions npstring npvariant npn_
releasevariantvalue npn_getstringidentifier npn_getstringidentifiers npn_getintidentifier npn_identifierisstring npn_utf8fromidentifier npn_intfromidentifier npobject npn_createobject npn_retainobject npn_
releaseobject npn_invoke npn_invokedefault npn_evaluate npn_getproperty npn_setproperty npn_removeproperty npn_hasproperty npn_hasmethod npn_setexception npclass structures npanycallbackstruct npbyterange npembedprint npevent npfullprint npp np_port npprint npprintcallbackstruct nprect npregion npsaveddata npsetwindowcallb...
Debugger.Source - Firefox Developer Tools
ance representing the serialized text of a block of webassembly code, its properties provide the serialized text as a string. currently only entire modules evaluated via new webassembly.module are represented. spidermonkey constructs exactly one debugger.source for each underlying webassembly module per debugger instance. please note at the time of this writing, support for webassembly is very p
reliminary. many properties below return placeholder values. convention for descriptions of properties and methods below, if the behavior of the property or method differs between the instance referring to javascript source or to a block of webassembly code, the text will be split into two sections, headed by “if the instance refers to javascript source” and “if the instance refers to webasse...
... debugger.source instances for such sources should return undefined.) if the instance refers to webassembly code, the url of the script that called new webassembly.module with the string "> wasm" appended. sourcemapurl if the instance refers to javascript source, if this source was produced by a minimizer or translated from some other language, and we know the url of a source map document
relating the source positions in this source to the corresponding source positions in the original source, then this property’s value is that url. otherwise, this is null. (on the web, the translator may provide the source map url in a specially formatted comment in the javascript source code, or via a header in the http reply that carried the generated javascript.) this property is writable, s...
...ons to dom elements’ event handler idl attributes. if one assigns a function, that function’s script’s source doesnot belong to the dom element; the function’s definition must appear elsewhere.) (if the sources attached to a dom element change, the debugger.source instances representing superceded code still refer to the dom element; this accessor only reflects origins, not current
relationships.) elementattributename if this source belongs to a dom element because it is an event handler content attribute or an event handler idl attribute, this is the name of that attribute, a string. otherwise, this is undefined. introductiontype if the instance refers to javascript source, a string indicating how this source code was introduced into the system. this accessor returns o...
... script source and the call that created the worker are always in separate threads, but debugger is an inherently single-threaded facility: its debuggees must all run in the same thread. since the global that created the worker is in a different thread, it is guaranteed not to be a debuggee of the debugger instance that owns this source; and thus the creating call is never “in debuggee code”.
relating a worker to its creator, and other multi-threaded debugging concerns, are out of scope for debugger. if the instance refers to webassembly code, introductionscript is the debugger.script instance referring to the same underlying webassembly module. introductionoffset is undefined. source metadata generated from file: js/src/doc/debugger/debugger.source.md watermark: sha256:5ca...
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. each request is displayed in its own row: by default, the network monitor is cleared each time you navigate to a new page or
reload the current page. you can override this behavior by checking "enable persistent logs" in the settings. network request columns you can toggle columns on and off by right-clicking on the table header and choosing the specific column from the context menu. a reset columns command is available on the context menu to reset the columns to their initial configuration. you can also change the width of the columns...
...cipher was used) failed https (for example, a certificate was invalid) http localhost indicates that the url belongs to a known tracker that would be blocked with content blocking enabled. timeline the request list also displays a timeline for the different parts of each request. each timeline is given a horizontal position in its row
relative to the other network requests, so you can see the total time taken to load the page. for more details on the color-coding used here, see the section on the timings page. starting in firefox 45, the timeline also contains two vertical lines: the blue line marks the point at which the page's domcontentloaded event is triggered. the red line marks the point at which the page's load event i...
...view your page as it would look without a resource (e.g., if it were blocked by the browser or an extension), you can block requests matching patterns you specify. click the request blocking icon in the toolbar. this opens the blocking sidebar. (click the icon again when you want to close the sidebar.) enter a string in the field with the placeholder text block resource when url contains.
reload the page to test it with the specified url blocked. other actions you can take with request blocking: to turn all request blocking off or on: toggle the checkbox next to enable request blocking. to turn a specific block off or on: toggle the checkbox next to that item. to delete a blocked item, click the x icon that appears when you focus the item. (starting with firefox 77) right-clic...
...e "-" operator. for example, the query "-google.com" will show all requests that don't have "google.com" in the url. request properties use the search box in the toolbar. see next section. filtering by properties the search box recognizes specific keywords, which can be used to filter the requests by specific request properties. those keywords are followed by a colon and a
related filter value. the filter values are matched case insensitive. prepending a minus (-) negates the filter. you can combine different filters together by separating them with a space. keyword meaning examples status-code shows resources that have the specific http status code. status-code:304 method shows resources that have were requested via the speci...
Page inspector 3-pane mode - Firefox Developer Tools
this article explains how to use the page inspector's 3-pane mode. feature summary from firefox 62 onwards, the page inspector has a new mode available — 3-pane mode. when activated, this allows you to see the following simultaneously: the html pane on the left hand side, as usual. the css rules in the middle in their own separate pane, rather than as a tab. the other css
related features — such as computed styles view, animations view, and fonts view — in tabs on the right hand side, as usual. note: at narrower browser window widths, the tabs appear below the css rules pane. having the css rules in their own pane is very useful because it allows you to not only inspect your html and edit the css applied to it, but also see the effect this has on css features such as comp...
...ew — in tabs on the right hand side, as usual. note: at narrower browser window widths, the tabs appear below the css rules pane. having the css rules in their own pane is very useful because it allows you to not only inspect your html and edit the css applied to it, but also see the effect this has on css features such as computed styles and grids in real time. you just need to have the
relevant tab open to see the effect. a brief walkthrough the 3-pane inspector is disabled by default. it is enabled via a toggle control found in the tabs pane on the left hand side. press the toggle control to toggle between the 2- and 3-pane views. with the 3-pane mode enabled, you can observe live changes in css features as you edit the rules applied to the page. for example, you could e...
...ggle between the 2- and 3-pane views. with the 3-pane mode enabled, you can observe live changes in css features as you edit the rules applied to the page. for example, you could edit a css grid property and observe the change immediately in the grid inspector. enabling the 3-pane inspector pre-firefox 62 in earlier versions of firefox (since firefox 59/60), you can enable 3 pane mode in
release/beta by going to about:config and flipping the following prefs to true: devtools.inspector.split-rule-enabled — this switches 3-pane mode on and off. devtools.inspector.split-sidebar-toggle — this adds the ui toggle button that lets you toggle it on and off. in firefox 61, these preferences got renamed to: devtools.inspector.three-pane-enabled devtools.inspector.three-pane-toggle ...
...flipping the following prefs to true: devtools.inspector.split-rule-enabled — this switches 3-pane mode on and off. devtools.inspector.split-sidebar-toggle — this adds the ui toggle button that lets you toggle it on and off. in firefox 61, these preferences got renamed to: devtools.inspector.three-pane-enabled devtools.inspector.three-pane-toggle you need to flip these two to true in
release/beta to test the feature in firefox 61. note: the 3-pane inspector is already enabled in nightly/developer edition before firefox 62. ...
Examine and edit CSS - Firefox Developer Tools
ghts all declarations which contain any part of the string. for example, searching for "color" will highlight declarations containing border-bottom-color and background-color as well as just color.: if you enclose the search query in backticks, like this: `color`, the search is restricted to exact matches: expanding shorthand properties shorthand properties can be expanded to display their
related longhand properties by clicking the arrow besides them. displaying pseudo-elements the rule view displays the following pseudo-elements, if they are applied to the selected element: ::after ::backdrop ::before ::first-letter ::first-line ::selection :-moz-color-swatch :-moz-number-spin-box :-moz-number-spin-down :-moz-number-spin-up :-moz-number-text :-moz-number-wrapper :-moz-...
...arrow next to the property name (or pressing enter or space while it is selected) shows the rule that set this value, along with a link to the source filename and line number: by default, this view only shows values that have been explicitly set by the page: to see all values, click the "browser styles" box. you can tab through the filenames/line numbers; pressing enter/return will open up the
relevant file at that point in the style editor. typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-
related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. you can also search for the values of properties: to find the rule responsible for setting the font to "lucida grande", type t...
...roperty that starts with the letters you've typed. for example, here the user has typed "c" and the default choice is "color": if you enter an invalid value for a property when editing it, or an unknown property name, a yellow alert icon appears besides the declaration. edits that you make in the rules view are reflected in the style editor, and vice versa. any changes you make are temporary:
reloading the page will restore the original styling. while you're editing css, the context menu you'll see is the normal one for working with editable text: css variable autocompletion css variable names will auto-complete depending on the variables defined in the css. if you enter var( into a property value and then type a dash (-), any variables you have declared in your css will then appear ...
... by 100. track changes when you are editing the rules in the rules view, you can see the changes you have made in the changes pane. note: you can view changes made to the rules view only. if you edit the css using the style editor, the changes will not be shown in the changes pane. also remember, as noted above, that changes you make to the css rules are temporary and will be reset if you
reload the page. if you are satisfied with the changes you have made, you can copy the new settings to page the edited rule into your stylesheet. right-click on the changes panel and select copy rule from the context menu. the copy rule command copies the entire element, class, or id definition, including any unchanged rules and the rules that describe your changes. for example, copying the chan...
Attr - Web APIs
the attr interface represents one of a dom element's attributes as an object. in most dom methods, you will directly retrieve the attribute as a string (e.g., element.getattribute()), but certain functions (e.g., element.getattributenode()) or means of iterating return attr types. ...
...roperties name read only the attribute's name. namespaceuri read only a domstring representing the namespace uri of the attribute, or null if there is no namespace. localname read only a domstring representing the local part of the qualified name of the attribute. prefix read only a domstring representing the namespace prefix of the attribute, or null if no prefix is specified. owne
relement read only the element holding the attribute. note: dom level 4 removed this property. the assumption was that since you get an attr object from an element, you should already know the associated element. as that doesn't hold true in cases like attr objects being returned by document.evaluate, the dom living standard reintroduced the property. gecko outputs a deprecation note star...
...'t care that this is going away. parentnode this property now always returns null. previoussibling this property now always returns null. schematypeinfo read only the type information associated with this attribute. while the type information contained in this attribute is guaranteed to be correct after loading the document or invoking document.normalizedocument, this property may not be
reliable if the node was moved. specified this property now always returns true. textcontent use attr.value instead. the following methods have been deprecated: appendchild() obsolete since gecko 14 modify the value of attr.value instead. clonenode() you shouldn't have been using this in the first place, so you probably don't care that this is going away. createattribute() use element.s...
...4 modify the value of attr.value instead. replacechild() obsolete since gecko 14 modify the value of attr.value instead. setattributenode() use element.setattribute() instead. setattributenodens() use element.setattributens() instead. specifications specification status comment domthe definition of 'attr' in that specification. living standard added owne
relement property back dom4the definition of 'attr' in that specification. obsolete moved namespaceuri, prefix and localname from node to this api and removed owne
relement, schematypeinfo and isid. document object model (dom) level 3 core specificationthe definition of 'attr' in that specification. obsolete initial definition ...
Element: keyup event - Web APIs
bubbles yes cancelable yes interface keyboardevent event handler property onkeyup the keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered. for example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. an uppercase "a" is reported as 65 by all events. since firefox 65, the keyup and keydown events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details). ...
...ported as 65 by all events. since firefox 65, the keyup and keydown events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details). ...
...nts 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. ...
... 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. ...
GlobalEventHandlers.onmouseup - Web APIs
it uses the onmousedown and onmouseup event handlers. ...
...it uses the onmousedown and onmouseup event handlers. ...
... living standard ...
... living standard ...
HTMLAreaElement - Web APIs
the htmlareaelement interface provides special properties and methods (beyond those of the regular object htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <area> elements. ...
...s a usvstring containing the port component, if any, of the referenced url. htmlhyperlinkelementutils.protocol is a usvstring containing the protocol component (including trailing colon ':'), of the referenced url. htmlareaelement.referrerpolicy is a domstring that reflects the referrerpolicy html attribute indicating which referrer to use when fetching the linked resource. htmlareaelement.
rel is a domstring that reflects the
rel html attribute, indicating
relationships of the current document to the linked resource. 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. htmlhyperlinkelementutils.search is a usvstring containing the search element ...
...tutils.tostring() returns a usvstring containing the whole url of the script executed in the worker. it is a synonym for htmlhyperlinkelementutils.href. specifications specification status comment html living standardthe definition of 'htmlareaelement' in that specification. living standard the following property has been added: download. technically, the url-
related properties, media, host, hostname, pathname, port, protocol, search, and hash, have been moving to the htmlhyperlinkelementutils mixin, and htmlareaelement implements this mixin. html5the definition of 'htmlareaelement' in that specification. recommendation technically, the properties tabindex and accesskey are now defined on htmlelement. the following property is now obsol...
...tocol, search, and hash, have been moving to the htmlhyperlinkelementutils mixin, and htmlareaelement implements this mixin. html5the definition of 'htmlareaelement' in that specification. recommendation technically, the properties tabindex and accesskey are now defined on htmlelement. the following property is now obsolete: nohref. the following properties have been added:
rel,
rellist, media, hreflang, type, host, hostname, pathname, port, protocol, search, and hash. document object model (dom) level 2 html specificationthe definition of 'htmlareaelement' in that specification. obsolete no change from document object model (dom) level 1 specification. document object model (dom) level 1 specificationthe definition of 'htmlareaelement' in that s...
HTMLElement - Web APIs
the htmlelement interface represents any html element. some elements directly implement this interface, while others implement it via an interface that inherits it. ...
... htmlelement.nomodule is a boolean indicating whether an import script can be executed in user agents that support module scripts. htmlorforeignelement.nonce returns the cryptographic number used once that is used by content security policy to determine whether a given fetch will be allowed to proceed. htmlelement.offsetheight read only returns a double containing the height of an element,
relative to the layout. htmlelement.offsetleft read only returns a double, the distance from this element's left border to its offsetparent's left border. htmlelement.offsetparent read only returns a element that is the element from which all offset calculations are currently computed. htmlelement.offsettop read only returns a double, the distance from this element's top border to its off...
...order to its offsetparent's left border. htmlelement.offsetparent read only returns a element that is the element from which all offset calculations are currently computed. htmlelement.offsettop read only returns a double, the distance from this element's top border to its offsetparent's top border. htmlelement.offsetwidth read only returns a double containing the width of an element,
relative to the layout. htmlelement.properties read only returns a htmlpropertiescollection… htmlelement.spellcheck is a boolean that controls spell-checking. it is present on all html elements, though it doesn't have an effect on all of them. htmlelement.style is a cssstyledeclaration, an object representing the declarations of an element's style attributes. htmlorforeignelement.tabindex ...
...<select>, or <textarea> element has been changed and committed by the user. unlike the input event, the change event is not necessarily fired for each alteration to an element's value. pointer events gotpointercapture fired when an element captures a pointer using setpointercapture(). also available via the ongotpointercapture property. lostpointercapture fired when a captured pointer is
released. also available via the onlostpointercapture property. pointercancel fired when a pointer event is canceled. also available via the onpointercancel property. pointerdown fired when a pointer becomes active. also available via the onpointerdown property. pointerenter fired when a pointer is moved into the hit test boundaries of an element or one of its descendants. also available vi...
Working with the History API - Web APIs
cause the url bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists. suppose now that the user navigates to http://google.com, then clicks the back button. at this point, the url bar will display http://mozilla.org/bar.html and history.state will contain the stateobj. the popstate event won't be fired because the page has been
reloaded. the page itself will look like bar.html. if the user clicks back once again, the url will change to http://mozilla.org/foo.html, and the document will get a popstate event, this time with a null state object. here too, going back doesn't change the document's contents from what they were in the previous step, although the document might update its contents manually upon receiving the popst...
...ure changes to the method. alternatively, you could pass a short title for the state to which you're moving. url the new history entry's url is given by this parameter. note that the browser won't attempt to load this url after a call to pushstate(), but it might attempt to load the url later, for instance after the user restarts the browser. the new url does not need to be absolute; if it's
relative, it's resolved
relative to the current url. the new url must be of the same origin as the current url; otherwise, pushstate() will throw an exception. this parameter is optional; if it isn't specified, it's set to the document's current url. note: in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) through gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2), the passed object ...
...t url. in contrast, setting window.location keeps you at the same document only if you modify only the hash. you don't have to change the url if you don't want to. in contrast, setting window.location = "#foo"; creates a new history entry only if the current hash isn't #foo. you can associate arbitrary data with your new history entry. with the hash-based approach, you need to encode all of the
relevant data into a short string. if title is subsequently used by browsers, this data can be utilized (independent of, say, the hash). note that pushstate() never causes a hashchange event to be fired, even if the new url differs from the old url only in its hash. in a xul document, it creates the specified xul element. in other documents, it creates an element with a null namespace uri. the ...
...a call to replacestate, the popstate event's state property contains a copy of the history entry's state object. see window.onpopstate for sample usage. reading the current state when your page loads, it might have a non-null state object. this can happen, for example, if the page sets a state object (using pushstate() or replacestate()) and then the user restarts their browser. when the page
reloads, the page will receive an onload event, but no popstate event. however, if you read the history.state property, you'll get back the state object you would have gotten if a popstate had fired. you can read the state of the current history entry without waiting for a popstate event using the history.state property like this: let currentstate = history.state ...
Basic concepts - Web APIs
ing web workers. it used to include a synchronous version also, for use in web workers, but this was removed from the spec due to lack of interest by the web community. indexeddb used to have a competing spec, websql database, but the w3c deprecated it on november 18, 2010. while both indexeddb and websql are solutions for storage, they do not offer the same functionalities. websql database is a
relational database access system, whereas indexeddb is an indexed table system. big concepts if you have assumptions from working with other types of databases, you might get thrown off when working with indexeddb. so keep the following important concepts in mind: indexeddb databases store key-value pairs. the values can be complex structured objects, and keys can be properties of those obje...
...t of an event is the idbrequest object that was generated as a result of doing some database operation. success events don't bubble up and they can't be canceled. error events, on the other hand, do bubble, and can be cancelled. this is quite important, as error events abort whatever transactions they're running in, unless they are cancelled. indexeddb is object-oriented. indexeddb is not a
relational database with tables representing collections of rows and columns. this important and fundamental difference affects the way you design and build your applications. in a traditional
relational data store, you would have a table that stores a collection of rows of data and columns of named types of data. indexeddb, on the other hand, requires you to create an object store for a type of d...
... when a database is first created, its version is the integer 1 if not specified otherwise. each database can have only one version at any given time. durable in firefox, indexeddb used to be durable, meaning that in a readwrite transaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk. as of firefox 40, indexeddb transactions have
relaxed durability guarantees to increase performance (see bug 1112702), which is the same behaviour as other indexeddb-supporting browsers. in this case the complete event is fired after the os has been told to write the data but potentially before that data has actually been flushed to disk. the event may thus be delivered quicker than before, however, there exists a small chance that the entire tr...
...odes of transactions are: readwrite, readonly, and versionchange. the only way to create and delete object stores and indexes is by using a versionchange transaction. to learn more about transaction types, see the reference article for indexeddb. because everything happens within a transaction, it is a very important concept in indexeddb. to learn more about transactions, especially on how they
relate to versioning, see idbtransaction, which also has reference documentation. request the operation by which reading and writing on a database is done. every request represents one read or write operation. index an index is a specialized object store for looking up records in another object store, called the referenced object store. the index is a persistent key-value storage where the va...
Location - Web APIs
both the document and window interface have such a linked location, accessible via document.location and window.location respectively. ...
..."port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span> css html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;} [title] {position:
relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;} [title]:hover:before, :target:before {background:black; color:yellow;} [title] [title]:before {margin-...
...em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-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.addeventliste...
...ms and url.searchparams to make it easy to parse out the parameters from the querystring. location.hash is a usvstring containing a '#' followed by the fragment identifier of the url. location.origin read only returns a usvstring containing the canonical form of the origin of the specific location. methods location.assign() loads the resource at the url provided in parameter. location.
reload()
reloads the current url, like the refresh button. location.replace() replaces the current resource with the one at the provided url (redirects to the provided url). the difference from the assign() method and setting the href property is that after using replace() the current page will not be saved in session history, meaning the user won't be able to use the back button to navigate to it...
MediaDevices.getUserMedia() - Web APIs
syntax var promise = navigator.mediadevices.getusermedia(constraints); parameters constraints a mediastreamconstraints object specifying the types of media to request, along with any requirements for each typ...
...w promises directly, the code looks like this: navigator.mediadevices.getusermedia(constraints) .then(function(stream) { /* use the stream */ }) .catch(function(err) { /* handle the error */ }); note: if the current document isn't loaded secu
rely, navigator.mediadevices will be undefined, and you cannot use getusermedia(). see security for more information on this and other security issues
related to using getusermedia(). syntax var promise = navigator.mediadevices.getusermedia(constraints); parameters constraints a mediastreamconstraints object specifying the types of media to request, along with any requirements for each type. the constraints parameter is a mediastreamconstraints object with two members: video and audio, describing the media types requested. either or bo...
...ot recording is currently active. if you've muted your camera (so-called "facemuting"), your camera's activity light goes out to indicate that the camera is not actively recording you, without discarding the permission to resume using the camera once muting is over. security there are a number of ways security management and controls in a user agent can cause getusermedia() to return a security-
related error. note: the security model for getusermedia() is still somewhat in flux. the originally-designed security mechanism is in the process of being replaced with feature policy, so various browsers have different levels of security support, using different mechanisms. you should test your code carefully on a variety of devices and browsers to be sure it is as broadly compatible as possible ...
...eed the ability to use both camera and microphone: <iframe src="https://mycode.example.net/etc" allow="camera;microphone"> </iframe> read our guide, using feature policy, to learn more about how it works. encryption based security the getusermedia() method is only available in secure contexts. a secure context is one the browser is reasonably confident contains a document which was loaded secu
rely, using https/tls, and has limited exposure to insecure contexts. if a document isn't loaded in a secure context, the navigator.mediadevices property is undefined, making access to getusermedia() impossible. attempting to access getusermedia() in this situation will result in a typeerror. document source security because of the obvious security concern associated with getusermedia() if used un...
Using Navigation Timing - Web APIs
ing information to help isolate performance problems with your site's code or resources. unlike other tools or libraries, the navigation timing api lets you gather information that only the browser can provide at a level of accuracy much improved over other techniques. it also offers the advantage of being able to provide timing information as perceived by the user rather than data that has no cor
relation to what the user experiences. collecting timing information using the api is as simple as obtaining the performance object using window.performance and looking up what you need within the object returned. 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...
...esented above. for a list of the available timing values you can look for in performancetiming, see the performancetiming interface's properties section. determining navigation type to put the timing information obtained from performancetiming into the correct perspective, you need to know more about what sort of load operation occurred. in particular, you need to know: was this a load or a
reload? was this a navigation or a move forward or backward through history? how many (if any) redirects were required in order to complete the navigation? this information is provided by the performance.navigation property, which returns a performancenavigation object that includes the needed information. let's add this information to the example above. the new code looks like this: window.add...
... window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; output = "load time: " + loadingtime + " ms<br/>"; output += "navigation type: "; switch(performance.navigation.type) { case performancenavigation.type_navigate: output += "navigation"; break; case performancenavigation.type_
reload: output += "
reload"; break; case performancenavigation.type_back_forward: output += "history"; break; default: output += "unknown"; break; } output += "<br/>redirects: " + performance.navigation.redirectcount; document.queryselector(".output").innerhtml = output; }, false); this amends the previous example by looking at the conten...
...k; default: output += "unknown"; break; } output += "<br/>redirects: " + performance.navigation.redirectcount; document.queryselector(".output").innerhtml = output; }, false); this amends the previous example by looking at the contents of the performance.navigation object. performance.navigation.type indicates what kind of load operation took place: a navigation, a
reload, or a shift through the browser's history. we also obtain the number of redirects that were incurred during the navigation from performance.navigation.redirectcount. this information is output to the screen just like the page load time was previously: by inserting it into the element with class "output". html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 16px...
NotificationEvent - Web APIs
opera full support 37safari ? webview android no support nochrome android full support 42firefox android ...
... opera full support 37safari ? webview android no support nochrome android full support 42firefox android ...
... opera no support nosafari ? webview android no support nochrome android full support 48firefox android ...
... opera full support 37safari ? webview android no support nochrome android full support 42firefox android ...
PublicKeyCredentialCreationOptions - Web APIs
the publickeycredentialcreationoptions dictionary of the web authentication api holds options passed to navigators.credentials.create() in order to create a publickeycredential. properties publickeycredentialcreationoptions.rp an object describing the
relying party which requested the credential creation. publickeycredentialcreationoptions.user an object describing the user account for which the credential is generated. publickeycredentialcreationoptions.challenge a buffersource, emitted by the
relying party's server and used as a cryptographic challenge. this value will be signed by the authenticator and the signature will be sent back as part of authenticatorattestationresponse.attestationobject. publickeycredentialcreationoptions.pubkeycredparams an array of element w...
... descending order of preference. publickeycredentialcreationoptions.timeout optional a numerical hint, in milliseconds, which indicates the time the caller is willing to wait for the creation operation to complete. this hint may be overridden by the browser. publickeycredentialcreationoptions.excludecredentials optional an array of descriptors for existing credentials. this is provided by the
relying party to avoid creating new public key credentials for an existing user who already have some. publickeycredentialcreationoptions.authenticatorselection optional an object whose properties are criteria used to filter out the potential authenticators for the creation operation. publickeycredentialcreationoptions.attestation optional a string which indicates how the attestation (for the aut...
...xtensions are used to request additional processing (e.g. dealing with legacy fido apis credentials, prompting a specific text on the authenticator, etc.). methods none. ...
... id : new uint8array(26) /* another id */ } ] } }; // create the new credential with the options above navigator.credentials.create(createcredentialoptions) .then(function (newcredentialinfo) { var attestationresponse = newcredentialinfo.response; var clientextensionsoutputs = newcredentialinfo.getclientextensionsresults(); // send the response to the
relying party server // it will verify the content and integrity before // creating a new credential }).catch(function (err) { // deal with any error properly console.error(err); });; specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'publickeycredentialcreationoption...
Selection - Web APIs
on or manipulation, call window.getselection(). a user may make a selection from left to right (in document order) or right to left (reverse of document order). the anchor is where the user began the selection and the focus is where the user ends the selection. if you make a selection with a desktop mouse, the anchor is placed where you pressed the mouse button, and the focus is placed where you
released the mouse button. anchor and focus should not be confused with the start and end positions of a selection. the anchor can be placed before the focus or vice-versa, depending on the direction you made your selection. properties selection.anchornoderead only returns the node in which the selection begins. can return null if selection never existed in the document (e.g., an iframe that...
...ection api was initially created by netscape and allowed multiple ranges (for instance, to allow the user to select a column from a <table>). however, browsers other than gecko did not implement multiple ranges, and the specification also requires the selection to always have a single range. selection and input focus selection and input focus (indicated by document.activeelement) have a complex
relationship that varies by browser. in cross-browser compatible code, it's better to handle them separately. safari and chrome (unlike firefox) currently focus the element containing selection when modifying the selection programmatically; it's possible that this may change in the future (see w3c bug 14383 and webkit bug 38696). behavior of selection api in terms of editing host focus changes the...
...nges the selection using the mouse or the keyboard, the anchor does not move. editing host an editable element (e.g., an html element with contenteditable set, or the html child of a document that has designmode enabled). focus of a selection the focus of a selection is the end point of the selection. when making a selection with a mouse, the focus is where in the document the mouse button is
released. as the user changes the selection using the mouse or the keyboard, the focus is the end of the selection that moves. this is not the same as the focused element of the document, as returned by document.activeelement. range a range is a contiguous part of a document. a range can contain entire nodes as well as portions of nodes (such as a portion of a text node). a user will normally on...
... a selection as a range object. range objects can also be created via the dom and programmatically added or removed from a selection. specifications specification status comment selection apithe definition of 'selection' in that specification. working draft the selection api specification is based on the html editing apis specification and focuses on the selection-
related functionality. ...
Using readable streams - Web APIs
am requires attaching a reader to it. this is done using the readablestream.getreader() method: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => response.body) .then(body => { const reader = body.getreader(); invoking this method creates a reader and locks it to the stream — no other reader may read this stream until this reader is
released, e.g. by invoking readablestreamdefaultreader.
releaselock(). also note that the previous example can be reduced by one step, as response.body is synchronous and so doesn't need the promise: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => { const reader = response.body.getreader(); reading the stream now you’ve got y...
...().then(({ done, value }) => { the results can be one of three different types: if a chunk is available to read, the promise will be fulfilled with an object of the form { value: thechunk, done: false }. if the stream becomes closed, the promise will be fulfilled with an object of the form { value: undefined, done: true }. if the stream becomes errored, the promise will be rejected with the
relevant error. next, we check whether done is true. if so, there are no more chunks to read (the value is undefined) so we return out of the function and close the custom stream with readablestreamdefaultcontroller.close(): if (done) { controller.close(); return; } note: close() is part of the new custom stream, not the original stream we are discussing here. we’ll explain more about the ...
... pull(controller) { }, cancel() { }, type, autoallocatechunksize }, { highwatermark, size() }); the constructor takes two objects as parameters. the first object is required, and creates a model in javascript of the underlying source the data is being read from. the second object is optional, and allows you to specify a custom queuing strategy to use for your stream. you’ll ra
rely have to do this, so we’ll just concentrate on the first one for now. the first object can contain up to five members, only the first of which is required: start(controller) — a method that is called once, immediately after the readablestream is constructed. inside this method, you should include code that sets up the stream functionality, e.g. beginning generation of data or otherwise ge...
...source. pull(controller) — a method that, when included, is called repeatedly until the stream’s internal queue is full. this can be used to control the stream as more chunks are enqueued. cancel() — a method that, when included, will be called if the app signals that the stream is to be cancelled (e.g. if readablestream.cancel() is called). the contents should do whatever is necessary to
release access to the stream source. type and autoallocatechunksize — these are used — when included — to signify that the stream is to be a bytestream. bytestreams will be covered separately in a future tutorial, as they are somewhat different in purpose and use case to regular (default) streams. they are also not implemented anywhere as yet. looking at our simple example code again, you ca...
Touch - Web APIs
or implements any other property. basic properties touch.identifier read only returns a unique identifier for this touch object. a given touch point (say, by a finger) will have the same identifier for the duration of its movement around the surface. this lets you ensure that you're tracking the same touch all the time. ...
... for this touch object. a given touch point (say, by a finger) will have the same identifier for the duration of its movement around the surface. this lets you ensure that you're tracking the same touch all the time. touch.screenx read only returns the x coordinate of the touch point
relative to the left edge of the screen. touch.screeny read only returns the y coordinate of the touch point
relative to the top edge of the screen. touch.clientx read only returns the x coordinate of the touch point
relative to the left edge of the browser viewport, not including any scroll offset. touch.clienty read only returns the y coordinate of the touch point
relative to the top edge of the browser viewport, not including any scroll offset. touch.pagex read only returns the x coordinate of t...
...unlike clienty, this value includes the vertical scroll offset, if any. ...
...unlike clienty, this value includes the vertical scroll offset, if any. ...
UIEvent.pageY - Web APIs
this property takes into account any vertical scrolling of the page. ...
...this property takes into account any vertical scrolling of the page. ...
...note the pagex\pagey properties still return the a...
...iv> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are
relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> <span>make the page scroll more! this is a positioned div so clicking it will return layerx/layery values that are
relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" siz...
Fundamentals of WebXR - Web APIs
ement. webxr additionally provides support for accepting inputs from control devices such as handheld vr controllers or specialized mixed reality gamepads. webxr is not a rendering technology, and provides no features for actually managing 3d data or rendering it to the display. this is an important fact to keep in mind; while webxr manages the timing, scheduling, and the various points of view
relevant when drawing the scene, it does not actually know how to load and manage models, render and texture them, and so forth. that part is enti
rely up to you. fortunately, webgl and the various webgl-based frameworks and libraries are available to make it much easier to deal with all of that. how is webxr different from webvr? webvr was generally considered to be an experimental api designed to ...
...bvr. thus, webxr was created. the most obvious difference, at the highest level, is that webxr supports not just virtual reality applications, but also augmented reality, which blends virtual objects with the user's true physical environment. another key difference is that webxr has integrated support for the advanced input controllers that are used with most mixed reality headsets, while webvr
relied on the gamepad api to support the controllers. in webxr, the primary select and squeeze actions are directly supported using events, while other controls are available through a special webxr-specific implementation of the gamepad object. basic concepts before getting into too much detail, let's consider some basic concepts that you need to know before you learn how to develop xr code. fiel...
...re limitations on how wide the fov can get without installing lenses into the user's eyeballs. a wide fov can substantially improve the user's sense of immersion. however, increasing the fov can also increase the weight and cost of the headset. degrees of freedom the term degrees of freedom is an indication of how much freedom of movement the user has within the virtual world. this is directly
related to how many types of movement the webxr hardware configuration is capable of recognizing and reproducing into the virtual scene. diagram showing the movements possible with 3 degree of freedom hardware: yaw, roll, and pitch. freedom of rotational movement the first three degrees of freedom are rotational. the rotational degrees of freedom are: pitch: looking up and down yaw: look...
...ler and lower-priced xr devices typically use an integrated computer or connect to a smartphone, essentially using the mobile cpu and gpu to run apps, render images, and display them to the user. higher-powered solutions typically offload application execution and graphics processing to an external device such as a desktop computer, and are either tethered to the computer using a cable or use a wi
reless network to receive the imagery to display to the user. headsets most immersive vr experiences take place using goggles or a headset of some kind. a vr headset is worn on the head, with a strap that goes behind the head to fasten it in place, and one or two displays whose screens are focused into the eyes using lenses. by presenting a slightly different image to each eye, the illusion of dept...
Movement, orientation, and motion: A WebXR example - Web APIs
e, the xrwebgllayer has its viewport configured to restrict drawing to the left half of the drawing surface. contrarily, when rendering the right eye, the viewport is set to restrict drawing to the right half of the surface. this example demonstrates this by showing the canvas on the screen, even when presenting a scene as an immersive display using an xr device. dependencies while we will not
rely upon any 3d graphics frameworks such as three.js or the like for this example, we do use the glmatrix library for matrix math, which we've used in other examples in the past. this example also imports the webxr polyfill maintained by the immersive web working group, which is the team responsible for the webxr api's specification. by importing this polyfill, we allow the example to work on many b...
...cubeorientation will store the current orientation of the cube, while cubematrix and mousematrix are storage for matrices used during the rendering of the scene. inverseorientation is a quaternion which will be used to represent the rotation to apply to the reference space for the object in the frame being r...
...orientation is the inverseorientation quaternion. we copy the transform's matrix into mousematrix, which we'll use later to display the mouse look matrix to the user (so this is a step you normally can skip). finally, we pass the xrrigidtransform into the object's current xrreferencespace in order to obtain the reference space that integrates this transform to represent the placement of the cube
relative tot he user given the user's movements. that new reference space is returned to the caller. rendering the scene the renderscene() function is called to actually render the parts of the world that are visible to the user at the moment. it's called once for each eye, with slightly different positions for each eye, in order to establish the 3d effect needed for xr gear. most of this code is...
...ulated as the number of radians of rotation to apply given the elapsed time and stored into the constants xrotationfortime, yrotationfortime, and zrotationfortime. after enabling and configuring depth testing, we check the value of the enablerotation constant to see if rotation of the cube is enabled; if it is, we use glmatrix to rotate the cubematrix (representing the cube's current orientation
relative to the world space) around the three axes. with the cube's global orientation established, we then multiply that by the inverse of the view's transform matrix to get the final model view matrix—the matrix to apply to the object to both rotate it for its animation purposes, but to also move and reorient it to simulate the viewer's motion through the space. then the view's normal matrix is ...
Using the Web Speech API - Web APIs
ecognition 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. the web speech api has a main controller interface for this — speechrecognition — plus a number of closely-
related interfaces for representing grammar, results, etc. generally, the default speech recognition system available on the device will be used for the speech recognition — most modern oses have a speech recognition system for issuing voice commands. think about dictation on macos, siri on ios, cortana on windows 10, android speech, etc. note: on some browsers, like chrome, using speech recognit...
...eech grammar list to contain our grammar, using the speechgrammarlist() constructor. var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); we add our grammar to the list using the speechgrammarlist.addfromstring() method. this accepts as parameters the string we want to add, plus optionally a weight value that specifies the importance of this grammar in
relation of other grammars available in the list (can be from 0 to 1 inclusive.) the added grammar is available in the list as a speechgrammar object instance. speechrecognitionlist.addfromstring(grammar, 1); we then add the speechgrammarlist to the speech recognition instance by setting it to the value of the speechrecognition.grammars property. we also set a few other properties of the recognitio...
...nt) { diagnostic.textcontent = 'error occurred in recognition: ' + event.error; } speech synthesis speech synthesis (aka text-to-speech, or tts) involves receiving synthesising text contained within an app to speech, and playing it out of a device's speaker or audio output connection. the web speech api has a main controller interface for this — speechsynthesis — plus a number of closely-
related interfaces for representing text to be synthesised (known as utterances), voices to be used for the utterance, etc. again, most oses have some kind of speech synthesis system, which will be used by the api for this task as available. demo to show simple usage of web speech synthesis, we've provided a demo called speak easy synthesis. this includes a set of form controls for entering text to...
...ions property to return the currently selected <option> element. we then use this element's data-name attribute, finding the speechsynthesisvoice object whose name matches this attribute's value. we set the matching voice object to be the value of the speechsynthesisutterance.voice property. finally, we set the speechsynthesisutterance.pitch and speechsynthesisutterance.rate to the values of the
relevant range form elements. then, with all necessary preparations made, we start the utterance being spoken by invoking speechsynthesis.speak(), passing it the speechsynthesisutterance instance as a parameter. inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getatt...
WindowOrWorkerGlobalScope.setInterval() - Web APIs
nt is converted to a signed 32-bit integer. this effectively limits delay to 2147483647 ms, since it's specified as a signed integer in the idl. examples example 1: basic syntax the following example demonstrates setinterval()'s basic syntax. var intervalid = window.setinterval(mycallback, 500, 'parameter 1', 'parameter 2'); function mycallback(a, b) { // your code here // parameters are pu
rely optional. console.log(a); console.log(b); } example 2: alternating two colors the following example calls the flashtext() function once a second until the stop button is pressed. <!doctype html> <html> <head> <meta charset="utf-8" /> <title>setinterval/clearinterval example</title> <script> var nintervid; function changecolor() { nintervid = setinterval(flashtext, 100...
...-8" /> <title>javascript typewriter - mdn example</title> <script> function typewriter (sselector, nrate) { function clean () { clearinterval(nintervid); btyping = false; bstart = true; ocurrent = null; asheets.length = nidx = 0; } function scroll (osheet, npos, beraseandstop) { if (!osheet.hasownproperty('parts') || amap.length < npos) { return true; } var o
rel, bexit = false; if (amap.length === npos) { amap.push(0); } while (amap[npos] < osheet.parts.length) { o
rel = osheet.parts[amap[npos]]; scroll(o
rel, npos + 1, beraseandstop) ? amap[npos]++ : bexit = true; if (beraseandstop && (o
rel.ref.nodetype - 1 | 1) === 3 && o
rel.ref.nodevalue) { bexit = true; ocurrent = o
rel.ref; spart = ocurrent.nodevalu...
...e (amap[npos] < osheet.parts.length) { o
rel = osheet.parts[amap[npos]]; scroll(o
rel, npos + 1, beraseandstop) ? ...
...on framework remains the recommended way for simple animations, because daemon without its collection of methods is essentially a clone of it. minidaemon.js /*\ |*| |*| :: minidaemon :: |*| |*| revision #2 - september 26, 2014 |*| |*| /docs/web/api/window.setinterval |*| https://developer.mozilla.org/user:fusionchess |*| https://github.com/madmurphy/minidaemon.js |*| |*| this framework is
released under the gnu lesser general public license, version 3 or later. |*| http://www.gnu.org/licenses/lgpl-3.0.html |*| \*/ function minidaemon (oowner, ftask, nrate, nlen) { if (!(this && this instanceof minidaemon)) { return; } if (arguments.length < 2) { throw new typeerror('minidaemon - not enough arguments'); } if (oowner) { this.owner = oowner; } this.task = ftask; if (isfinite(...
ARIA annotations - Accessibility
wai-aria version 1.3 sees the addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside web documents. typical use cases include edit suggestions (i.e. an addition and/or deletion in an editable document), and comments (e.g. an editorial comment
related to a part of a document under review). below we'll introduce the new features associated with aria annotations, and have a look at some code examples that show them in action. note: you can find all the examples discussed in this article in a demo file at aria-annotations. aria annotations features the aria attributes providing these new abilities are as follows: aria-description="" — provides a detailed description of an html element, as opposed to t...
...ption of an html element, as opposed to the brief label provided by aria-label. role="insertion" and role="deletion" — semantically denote html elements whose contents represent an insertion to or deletion from the overall document. these are semantically equivalent to the html <ins> and <del> elements. note that these aren’t part of the new aria annotations features, but they are of central
relevance. role="mark" — semantically denotes html elements containing text that is marked/highlighted for reference purposes. this is semantically equivalent to the html <mark> element. role="suggestion" — semantically denotes a single proposed change to an editable document. this should be used on an element that wraps a single insertion and deletion (see role="insertion" and role="deletion" ...
...t on the page, or to a previous comment. to provide a semantic association between the document content being annotated and the annotation, an aria-details attribute can be set on the annotated content that contains the id of the annotated element. aria-details has been updated so that it can support multiple ids — this makes sense, for example you can easily envisage having multiple comments
relating to the same bit of text. aria annotation roles and objects are currently exposed in: firefox from version 75 onwards, on windows and linux (on macos, we are first waiting for apple to define what safari will expose as apple-dialect attributes to voiceover, and will then follow suit.) chrome from version 81 onwards, currently behind the #enable-accessibility-expose-aria-annotations flag ...
...this is the job of role="suggestion", which should be set on an element wrapping both of them like so: <p>freida’s pet is a <span role="suggestion"><span role="deletion">black cat called luna</span><span role="insertion">purple tyrannosaurus rex called tiny</span></span>. </p> we could even provide an information box saying who made the suggestion and when, and associate it with...
ARIA: article role - Accessibility
instead of a div with an article role, use the <article> element. ...
...ents, forum posts, newspaper articles or other items grouped together on one page. <div role="article"> <h2>heading of the segment</h2> <p>paragraph for the segment.</p> <p>another paragraph.</p> ... controls to interact with the article, share it, etc. ... </div> <div role="article"> ... </div> this example shows two articles side by side on one page that could be structured similarly and are
related. instead of a div with an article role, use the <article> element. always use native element if available. instead of using role="article", the <article> element can be used. <article> <h2>heading of the segment</h2> <p>paragraph for the segment.</p> <p>another paragraph.</p> ... controls to interact with the article, share it, etc. ... </article> <article> ... </article> description ...
...segment</h2> <p>paragraph for the segment.</p> <p>another paragraph.</p> ... controls to interact with the article, share it, etc. ... </article> <article> ... </article> description the article role denotes a section of a document, page, or site that, if it were standing on its own, could be viewed as a complete document, page or site. ...
...ent, page, or site that, if it were standing on its own, could be viewed as a complete document, page or site. the aim of a set of article sections is to indicate their
relationship to one another. articles are not considered a navigational landmark, but many assistive technologies that support landmarks also support a means to navigate among articles. they may also support indication of nesting
relationships within articles. articles can be nested, indicating that a nested article directly
relates to the one it is nested in, but not necessarily to the ones outside the nesting hierarchy. see the examples for specific use cases. if an article is part of a feed, it can have the aria-posinset and aria-setsize attributes set to indicate which position within the feed this particular article re...
ARIA: row role - Accessibility
nging of cell order or otherwise changing individual cell order such as through drag and drop, use grid or treegrid instead. note: using the native html table element (<table>) along with the table row element (<tr>) whenever possible is strongly encouraged. associated wai-aria roles, states, and properties context roles role="rowgroup" an optional contextual row parent, it establishes a
relationship between descendant rows. it is a structural equivalent to the thead, tfoot, and tbody elements in an html table element. role="table" one of the three possible contexts (along with grid and treegrid) in which you'll find a row, it identifies the row as being part of a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> html elemen...
...id, but with rows that can be expanded and collapsed in the same manner as for a tree. descendant roles role="cell" a cell in a row within a tabular container. role="gridcell" a cell in a row within a grid or treegrid. role="columnheader" a header cell that is the structural equivalent of the html <th> element with a column scope. unlike a plain cell, the columnheader role establishes a
relationship between it and all cells in the corresponding column. role="rowheader" a header cell that is the structural equivalent of the html <th> element with a row scope. unlike a plain cell, the rowheader role establishes a
relationship between it and all cells in the corresponding row. states and properties aria-expanded state the aria-expanded attribute, which defines the state of ...
...expanded="false": row is currently collapsed. aria-expended="undefined" or the attribute is missing: the row is neither expandable nor collapsible. if the element with the aria-expanded attribute controls the expansion of another grouping container that is not 'owned by' the element, the author should reference the container by using the aria-controls attribute. aria-selected state only
relevant if the row is in an interactive container, such as a grid or treegrid, but not
relevant if the row is in a table. the aria-selected attribute can take one of three values, or be omitted: aria-selected="true: row is currently selected aria-selected="false": row is not currently selected. aria-selected="undefined" or the attribute is missing: the row is not selectable. aria-colin...
...perty. the table body is in a separate rowgroup, with four rows currently in the dom. because not all the rows are in the dom, we've included the aria-rowindex property on every row. best practices only use table, tbody, thead, tr, th, td, etc., for data table structure. you can add these aria roles to ensure accessibility should the native semantics of the table be removed, such as with css. a
relevant use case for the aria table role is when the native semantics of a table are overridden by css's display property, such as by display: grid. in this case, you can use the aria table roles to add the semantics back in. <table role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <caption id="semantic_elements_table_desc">semantic ...
Accessibility and Spacial Patterns - Accessibility
spatial localization nasa conducted research on the perception of color, and found that luminance contrast mattered greatly as to how they were perceived. the two images below are from nasa research, specifically, from the article, "designing with blue" "spatial localization. symbols which have the same luminance as their background are perceptually less secu
rely located in space and time than are symbols with higher luminance contrast. they tend to "float" visually or be "captured" by adjacent symbols with high luminance-contrast. the phenomenon seems to be especially problematic for symbol/background combinations that differ only in the blue channel." distance between stripes photosensitive seizures may be caused by static images as well as animation. the mechanism for this i...
...ightness. text and padding wcag standards for contrast perception do not take into account the effect of padding. for example, blue text on a gray background is easier to perceive if it is surrounded "locally" by black than by white. there is such a thing as "local" adaptation to colors. the bottom line: padding matters. ...
... braille modern technology enalbes non-experts to print braille. adobe illustrator, for example, allows one to typeset ada braille for printing out. ...
...mply lay a finger on "top" of a braille character, the user has to move her finger over the character, in the way that a sighted person must move her eyes across text written on a page. the nature of space can change depending upon what mime type is being used, and its version. for example, borders on svg can extend both inward and outward from its dimensions, or for newer versions of svg, enti
rely outward from it, thus reducing the space around the svg to enable perception. see also mdn accessibiltity: what users can do to browse more safely web accessibiltity for seizures and physical reactions web accessibility: understanding colors and luminance braille part 3: a step-by-step guide to typesetting ada braille correctly in adobe illustrator spatial math in brailleblaste...
Operable - Accessibility
nitions for operable and its guidelines and success criteria, see principle 2: operable — user interface components and navigation must be operable. guideline 2.1 — keyboard accessible: make all functionality available from a keyboard this guideline covers the necessity of making core website functionality available via a keyboard in addition to other means (e.g. mouse), so that users that
rely on keyboard controls can access them. success criteria how to conform to the criteria practical resource 2.1.1 keyboard (a) all functionality should be accessible using keyboard controls, unless it cannot be done using the keyboard (e.g. freehand drawing). built-in controls should be used where possible (e.g. tabbing through form controls), and you should only bui...
...aaa conformance, all functionality should be accessible using keyboard controls — with no exceptions. see ui controls and building keyboard accessibility back in 2.1.4 character key shortcuts (a) added in 2.1 if a single character key shortcut exists, then at least one of the following is true: single character key shortcuts can be turned off, remapped or are only active when the
relevant user interface component is in focus. understanding character key shortcuts note: also see the wcag description for guideline 2.1 keyboard accessible: make all functionality available from a keyboard. guideline 2.2 — enough time: provide users enough time to read and use content this guideline covers situations in which functionality may have a time limit. for example, purcha...
...s essential). understanding animations from interactions note: also see the wcag description for guideline 2.3 seizures and physical reactions: do not design content in a way that is known to cause seizures or physical reactions. guideline 2.4 — navigable: provide ways to help users navigate, find content, and determine where they are the conformance criteria under this guideline
relate to ways in which users can be expected to orientate themselves, and find the content and functionality they are looking for on the current page or other pages of the site. success criteria how to conform to the criteria practical resource 2.4.1 bypass blocks (a) a mechanism should be provided that allows the user to skip straight to the main content or func...
...reenreader 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. the only exception to this is where a page is one step in a process, so should only logically have links to the previous and next steps. most of these mechanisms can be created using simple html features, for example see search field, creating a navigation menu, styling links as buttons. 2.4.6 headings and labels (aa) heading (e.g. <h2>) and <label> element...
Text labels and names - Accessibility
tions. <input type="checkbox" id="terms"> </label> <input type="checkbox" id="emailoptin"> <label for="emailoptin">yes, please send me news about this product.</label> form elements should have a visible text label in addition to having a <label> for every form element, those labels should be visible, not hidden. visible labels help all users understand the purpose of a form element. do not
rely on placeholder text, because it disappears as soon as the user starts typing. frame elements must be labeled frame elements, both <iframe> and the older, obsolete <frame>, must have a title to describe the contents of the frame. use the title attribute to label a frame element. without a title, users of assistive technologies have to navigate into the frame in order to understand what it conta...
...symbol. since mglyph elements are used for non-standard symbols without unicode definitions, screen readers won't automatically be able to name them. alternative text helps users of screen readers understand the symbol. headings must be labeled make sure that your headings have non-empty text content, and are not hidden, such as with css display:none or aria-hidden=true. users of screen readers
rely on headings to understand the structure and content of a document. also, be sure you are using heading elements only for actual section headings, and not as a shortcut way to make text stand out. screen reader users typically "skim" a page's headings, much like sighted users; non-heading text that is marked-up with heading elements can cause confusion. headings should have visible text content...
...t as a shortcut way to make text stand out. screen reader users typically "skim" a page's headings, much like sighted users; non-heading text that is marked-up with heading elements can cause confusion. headings should have visible text content make sure that your headings have non-empty text content, and are not hidden, such as with css display:none or aria-hidden=true. users of screen readers
rely on headings to understand the structure and content of a document. do not use heading elements to mark up images or other graphical content. use title attribute to describe <iframe> content make sure that <iframe> elements have a title attribute to describe the contents of the frame. without a title, users of assistive technologies have to navigate into the frame in order to understand what it...
... </optgroup> </select> toolbars must be labeled when there is more than one toolbar if you define more than one toolbar in a web application using the aria toolbar role, you must use the aria-label attribute to label each one so that it can be described by assistive technology. it is a good practice to label a toolbar, even if there is only one per page. 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. 2.4.4 link purpose (in context) (a) the purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link c...
:valid - CSS: Cascading Style Sheets
we then absolutely position diffe...
...we then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively. ...
...we then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively. to add a bit of extra urgency to the invalid data, we've also given the inputs a thick red border when invalid. ...
...n. the email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address. accessibility concerns the color green is commonly used to indicate valid input. people who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not
rely on color to convey meaning. typically, descriptive text and/or an icon are used. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.1 | w3c understanding wcag 2.0 specifications specification status comment html living standardthe definition of ':valid' in that specification. living standard no change. html5the...
Border-radius generator - CSS: Cascading Style Sheets
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /******************************************************************************/ /******************************************************************************/ /* * preview area */ #preview { height: 500px; border: 1px solid #ccc; border-radius: 3px; text-align: center; overflow: hidden; position:
relative; } #preview .content { width: 100%; height: 100%; display: block; } #preview input { color: #333; border: 1px solid #ccc; border-radius: 3px; } #subject { width: 400px; height: 150px; margin: 0 auto; border: 3px solid #c60; background: #fff; position:
relative; } .radius { width: 50%; height: 50%; border: 1px solid #ccc; display: none; position: absolute; z-index: 1; -...
...om: 0; right: 0; } /* bottom left */ #bottom-left { bottom: 0; left: 0; } #bottom-left .radius { border-bottom-left-radius: 100%; bottom: 0; } /* input sliders */ #preview .ui-input-slider { margin: 10px; position: absolute; z-index: 10; } #radius-ui-sliders { width: 100%; height: 100%; min-height: 75px; min-width: 150px; padding: 20px 50px; top: -20px; left: -50px; position:
relative; } #tlr { top: -30px; left: -50px; display: none; } #tlw { top: -30px; left: 30px; } #tlh { top: 20px; left: -50px; } #trr { top: -30px; right: -50px; display: none; } #trw { top: -30px; right: 30px; } #trh { top: 20px; right: -50px; } #brr { bottom: -30px; right: -50px; display: none; } #brw { bottom: -30px; right: 30px; } #brh { bottom: 20px; right: -50px; } ...
..., #preview .ui-input-slider-right { visibility: hidden; } #preview .ui-input-slider-container:hover .ui-input-slider-left { visibility: visible; } #preview .ui-input-slider-container:hover .ui-input-slider-right { visibility: visible; } /* * */ #unit-selection { width: 200px; height: 75px; margin: 30px 30px 0 0; padding: 30px; border: 3px solid #555; border-radius: 10px; position:
relative; float: right; } #unit-selection .info { height: 20%; width: 100%; line-height: 20%; font-size: 20px; text-align: center; position:
relative; top: 40%; } #unit-selection .dropdown { width: 50px; height: 20px; margin: 10px; padding: 0; border-radius: 3px; position: absolute; overflow: hidden; } #unit-selection select { width: 50px; height: 20px; marign: 0; padding: 0 0 0...
...-22px; left: 30px; } #unit-selection .unit-bottom-left-h { bottom: 20px; left: -37px; } /******************************************************************************/ /******************************************************************************/ #radius-lock { width: 200px; height: 75px; margin: 30px 0 0 30px; padding: 30px; border: 3px solid #555; border-radius: 10px; position:
relative; float: left; } #radius-lock .ui-checkbox { color: #fff; position: absolute; } #radius-lock .ui-checkbox > label { height: 20px; width: 34px; padding: 0; } #radius-lock .info { height: 20%; width: 100%; line-height: 20%; font-size: 20px; text-align: center; position:
relative; top: 40%; } #radius-lock [data-topic="top-left"] { top: 10px; left: 10px; } #radius-lock [data-t...
CSS Box Alignment - CSS: Cascading Style Sheets
the module aims to create a consistent method of alignment across all of css. this document details the general concepts found in the specification. note: the documentation for each layout method will detail how box alignment is applied there. older alignment methods css traditionally had very limited alignment capabilities. we were able to align text using text-align, center blocks using auto margins, and in table or inline-block layouts using the vertical-align property. ...
...s axis using align-items. the first item overrides the align-items set on the group by setting align-self to center. key concepts and terminology the specification details some alignment terminology to make it easier to discuss these alignment properties outside of their implementation within a particular layout method. there are also some key concepts which are common to all layout methods.
relationship to writing modes alignment is linked to writing modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom and left. instead we describe alignment in terms of the start and end of the particular dimension we are working with. this ensures that alignment works in the same way whichever writing mode the document has. ...
...then the fallback alignment will come into play and deal with the available space. this fallback alignment is specified individually for each layout method and detailed on the page for that method. types of alignment there are three different types of alignment that the specification details; these use keyword values. positional alignment: specifying the position of an alignment subject with
relation to its alignment container. baseline alignment: these keywords define alignment as a
relationship among the baselines of multiple alignment subjects within an alignment context. distributed alignment: these keywords define alignment as a distribution of space among alignment subjects. positional alignment keyword values the following values are defined for positional alignment, and can ...
...ment keyword values the following values are defined for positional alignment, and can be used as values for content alignment with justify-content and align-content and also for self alignment with justify-self and align-self. center start end self-start self-end flex-start for flexbox only flex-end for flexbox only left right other than the physical values of left and right, which
relate to physical attributes of the screen, all of the other values are logical values and
relate to the writing mode of the content. for example, when working in css grid layout, if you are working in english and set justify-content to start this will move the items in the inline dimension to the start, which will be the left as sentences in english start on the left. if you were using arabic, a r...
Logical properties for floating and positioning - CSS: Cascading Style Sheets
box floated with float: left, the second with float: inline-start. if you change the writing-mode to vertical-rl or the direction to rtl you will see that the left-floated box always sticks to the left, whereas the inline-start-floated item follows the direction and writing-mode. example: inset properties for positioned layout positioning generally allows us to position an element in a manner
relative to its containing block — we essentially inset the item
relative to where it would fall based on normal flow. to do this we have historically used the physical properties top, right, bottom and left. these properties take a length or a percentage as a value, and
relate to the user's screen dimensions. new properties have been created in the logical properties specification for when you w...
... block — we essentially inset the item
relative to where it would fall based on normal flow. to do this we have historically used the physical properties top, right, bottom and left. these properties take a length or a percentage as a value, and
relate to the user's screen dimensions. new properties have been created in the logical properties specification for when you want the positioning to
relate to the flow of text in your writing mode. these are as follows: inset-block-start, inset-block-end, inset-inline-start and inset-inline-end. in the below example i have used the inset-block-start and inset-inline-end properties to position the blue box using absolute positioning inside the area with the grey dotted border, which has position:
relative. change the writing-mode property to vert...
...re as follows: inset-block-start, inset-block-end, inset-inline-start and inset-inline-end. in the below example i have used the inset-block-start and inset-inline-end properties to position the blue box using absolute positioning inside the area with the grey dotted border, which has position:
relative. change the writing-mode property to vertical-rl, or add direction: rtl, and see how the flow
relative box stays with the text direction. new two- and four-value shorthands as with other properties in the specification we have some new shorthand properties, which give the ability to set two or four values at once. inset — sets all four sides together with physical mapping. inset-inline — sets both logical inline insets. inset-block — sets both logical block insets. note: the...
...ne insets. inset-block — sets both logical block insets. note: the browsers that have implemented the logical properties specification have so far implemented the direct mappings and not the new shorthands. look to the browser compatibility data section on each property page reference for more details. example: logical values for text-align the text-align property has logical values that
relate to text direction — rather than using left and right we can use start and end. in the below example i have set text-align: right in the first block and text-align: end in the second. if you change the value of direction to rtl you will see that the alignment stays to the right for the first block, but goes to the logical end on the left in the second. this works in a more consistent way ...
Stacking context example 1 - CSS: Cascading Style Sheets
inside div #1 there is an absolutely positioned div #2, while in div #3 there is an absolutely positioned div #4, both without z-index properties. the only stacking context is the root context. without z-indexes, elements are stacked in order of occurrence. if div #2 is assigned a positive (non-zero and non-auto) z-index value, it is rendered above all the other divs. ...
... 2) note: div #1 and div #3 are not translucent. it is important to remember that assigning an opacity less than 1 to a positioned element implicitly creates a stacking context, just like adding a z-index value. and this example shows what happens when a parent element does not create a stacking context. ...
... and this example shows what happens when a parent element does not create a stacking context. ...
...osition: absolute; <br />z-index: 1; </div> </div> <br /> <div id="div3"> <br /><span class="bold">div #3</span> <br />position:
relative; <div id="div4"> <br /><span class="bold">div #4</span> <br />position: absolute; <br />z-index: 2; </div> </div> </body></html> css .bold { font-weight: bold; font: 12px arial; } #div1, #div3 { height: 80px; position:
relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; z-index: 2; position: absolute; width: 200p...
Visual formatting model - CSS: Cascading Style Sheets
ia such as a book or document printed by browser print functions. most of the information applies equally to continuous and paged media. in the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. the layout of these boxes is governed by: box dimensions and type. positioning scheme (normal flow, float, and absolute positioning).
relationships between elements in the document tree. external information (e.g., viewport size, intrinsic dimensions of images, etc.). much of the information about the visual formatting model is defined in css2, however, various level 3 specifications have added to this information. when reading specifications you will often find references to the model as defined in css2, so an understanding of ...
...isual formatting model is defined in css2, however, various level 3 specifications have added to this information. when reading specifications you will often find references to the model as defined in css2, so an understanding of the model and the terms used to describe it in css2 is valuable when reading other layout specifications. in this document we define the model and introduce some of the
related terms and concepts, linking to more specific pages on mdn for further details. the role of the viewport in continuous media, the viewport is the viewing area of the browser window. user agents can change the layout of the page when the viewport size changes — for example, if you resize your window, or change the orientation of a mobile device. if the viewport is smaller than the size of ...
...box runs behind the float, as the floated item has been taken out of flow. positioning schemes and in-flow and out-of-flow elements in css, a box may be laid out according to three positioning schemes — normal flow, floats, or absolute positioning. normal flow in css, the normal flow includes block-level formatting of block boxes, inline-level formatting of inline boxes, and also includes
relative and sticky positioning of block-level and inline-level boxes. read more about flow layout in css. floats in the float model, a box is first laid out according to the normal flow, then taken out of the flow and positioned, typically to the left or right. content may flow along the side of a float. find out more about floats. absolute positioning in the absolute positioning model (which ...
...re about flow layout in css. floats in the float model, a box is first laid out according to the normal flow, then taken out of the flow and positioned, typically to the left or right. content may flow along the side of a float. find out more about floats. absolute positioning in the absolute positioning model (which also includes fixed positioning), a box is removed from the normal flow enti
rely and assigned a position with respect to a containing block (which is the viewport in the case of fixed positioning). an element is called out of flow if it is floated, absolutely positioned, or is the root element. an element is called in-flow if it is not out of the flow. read about css positioned layout. formatting contexts and the display property boxes can be described as having an outer...
border-image - CSS: Cascading Style Sheets
nts, except internal table elements when border-collapse is collapse. ...
...the source for the border image is a ".png" file of 81 by 81 pix...
...nts, except internal table elements when border-collapse is collapse. ...
... valueas each of the properties of the shorthand:border-image-outset: as specified, but with
relative lengths converted into absolute lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedborder-image-source: none or the image with its uri made absoluteborder-image-width: as specified, but with
relative lengths converted into absolute lengthsanimation typediscrete ...
bottom - CSS: Cascading Style Sheets
mples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the effect of bottom depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the bottom property specifies the distance between the element's bottom edge and the bottom edge of its containing block. when position is set to
relative, the bottom property specifies the distance the element's bottom edge is moved above its normal position. when position is set to sticky, the bottom property is used to compute the sticky-constraint rectangle. when position is set to static, the bottom property has no effect. when both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either a...
...the bottom property is used to compute the sticky-constraint rectangle. when position is set to static, the bottom property has no effect. when both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. in all other situations, if height is constrained in any way or position is set to
relative, the top property takes precedence and the bottom property is ignored. syntax /* <length> values */ bottom: 3px; bottom: 2.4em; /* <percentage>s of the height of the containing block */ bottom: 10%; /* keyword value */ bottom: auto; /* global values */ bottom: inherit; bottom: initial; bottom: unset; values <length> a negative, null, or positive <length> that represents: for a...
...th> values */ bottom: 3px; bottom: 2.4em; /* <percentage>s of the height of the containing block */ bottom: 10%; /* keyword value */ bottom: auto; /* global values */ bottom: inherit; bottom: initial; bottom: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the bottom edge of the containing block. for
relatively positioned elements, the distance that the element is moved above its normal position. <percentage> a <percentage> of the containing block's height. auto specifies that: for absolutely positioned elements, the position of the element is based on the top property, while height: auto is treated as a height based on the content; or if top is also auto, the element is positioned wh...
...its normal position. <percentage> a <percentage> of the containing block's height. auto specifies that: for absolutely positioned elements, the position of the element is based on the top property, while height: auto is treated as a height based on the content; or if top is also auto, the element is positioned where it should vertically be positioned if it were a static element. for
relatively positioned elements, the distance of the element from its normal position is based on the top property; or if top is also auto, the element is not moved vertically at all. inherit specifies that the value is the same as the computed value from its parent element (which might not be its containing block). this computed value is then handled as if it were a <length>, <percentage>, or t...
font - CSS: Cascading Style Sheets
ands font-size-adjust and font-kerning are also reset to their initial values. ...
...t-stretch font-style font-variant font-weight line-height syntax the font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-
related properties. if font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar. ...
... shorthand:font-size: refer to the parent element's font sizeline-height: refer to the font size of the element itselfcomputed valueas each of the properties of the shorthand:font-style: as specifiedfont-variant: as specifiedfont-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real valuefont-stretch: as specifiedfont-size: as specified, but with
relative lengths converted into absolute lengthsline-height: for percentage and length values, the absolute length, otherwise as specifiedfont-family: as specifiedanimation typeas each of the properties of the shorthand:font-style: discretefont-variant: discretefont-weight: a font weightfont-stretch: a font stretchfont-size: a lengthline-height: either number or lengthfont-family: discrete formal sy...
...heckedvalue("font_weight") + " " + getcheckedvalue("font_size") + getcheckedvalue("line_height") + " " + getcheckedvalue("font_family"); return shorttext; } getcheckedvalue = function(radio_name) { oradio = document.forms[0].elements[radio_name]; for (var i = 0; i < oradio.length; i++) { if(oradio[i].checked) { var propinput = "input_" + radio_name, cu
relemname = "input_" + radio_name, cu
relem = document.getelementbyid(cu
relemname); cu
relem.value = oradio[i].value; return oradio[i].value; } } } setcss = function () { getproperties(); injectcss(shorttext); } injectcss = function(cssfragment) { old = document.body.getelementsbytagname("style"); if (old.length > 1) { old[1].parentelement.removechild(old[1]);...
margin-left - CSS: Cascading Style Sheets
s may fuse. this is called margin collapsing. in the rare cases where width is overconstrained (i.e., when all of width, margin-left, border, padding, the content area, and margin-right are defined), margin-left is ignored, and will have the same calculated value as if the auto value was specified. syntax /* <length> values */ margin-left: 10px; /* an absolute length */ margin-left: 1em; /*
relative to the text size */ margin-left: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-left: auto; /* global values */ margin-left: inherit; margin-left: initial; margin-left: unset; the margin-left property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the size of ...
...iner's width */ /* keyword values */ margin-left: auto; /* global values */ margin-left: inherit; margin-left: initial; margin-left: unset; the margin-left property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage,
relative to the width of the containing block. auto the left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. this table summarizes the different cases: value of display value of float value of position compute...
...ontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. 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. in this case, it is set to the value centering the element inside its parent. block layout mode block, inline, inline-block, block, table, inline-table, lis...
...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. in this case, it is set to the value centering the element inside its parent. 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. in this case, it is set to the value centering the...
margin-right - CSS: Cascading Style Sheets
r this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the vertical margins of two adjacent boxes may fuse. this is called margin collapsing. syntax /* <length> values */ margin-right: 20px; /* an absolute length */ margin-right: 1em; /*
relative to the text size */ margin-right: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-right: auto; /* global values */ margin-right: inherit; margin-right: initial; margin-right: unset; the margin-right property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the si...
...s width */ /* keyword values */ margin-right: auto; /* global values */ margin-right: inherit; margin-right: initial; margin-right: unset; the margin-right property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage,
relative to the width of the containing block. auto the right margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. this table summarizes the different cases: value of display value of float value of position comput...
...ontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. 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. in this case, it is set to the value centering the element inside its parent. block layout mode block, inline, inline-block, block, table, inline-table, lis...
...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. in this case, it is set to the value centering the element inside its parent. 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. in this case, it is set to the value centering the...
<position> - CSS: Cascading Style Sheets
the <position> (or <bg-position>) css data type denotes a two-dimensional coordinate used to set a location
relative to an element box. it is used in the background-position and offset-anchor properties. note: the final position described by the <position> value does not need to be inside the element's box. syntax the <position> data type is specified with one or two keywords, with optional offsets. the keyword values are center, top, right, bottom, and left. each keyword represents either an edge of the element's box or the center line between two edges. ...
...ified with one or two keywords, with optional offsets. the keyword values are center, top, right, bottom, and left. each keyword represents either an edge of the element's box or the center line between two edges. depending on the context, center represents either the center between the left and right edges, or the center between the top and bottom edges. if specified, an offset can be either a
relative <percentage> value or an absolute <length> value. positive values are offset towards the right or the bottom, whichever is appropriate. negative values are offset in the opposite directions. if only a single offset value is specified, it defines the x-coordinate, with the value for the other axis defaulting to center. /* 1-value syntax */ keyword /* either the horizontal o...
...d, it defines the x-coordinate, with the value for the other axis defaulting to center. ...
...oint will move in a straight line. examples valid positions center left center top right 8.5% bottom 12vmin right -6px 10% 20% 8rem 14px invalid positions left right bottom top 10px 15px 20px 15px specifications specification status comment css values and units module level 3the definition of '<position>' in that specification. 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. css backgrounds and borders module level 3the definition of '<bg-position>' in that specification. candidate recommendation defines <position> explicitly and extends it to support offsets from any edge. css level 2 (revision 1)the defin...
top - CSS: Cascading Style Sheets
eractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the effect of top depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block. when position is set to
relative, the top property specifies the distance the element's top edge is moved below its normal position. when position is set to sticky, the top property is used to compute the sticky-constraint rectangle. when position is set to static, the top property has no effect. when both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%)...
...icky, the top property is used to compute the sticky-constraint rectangle. when position is set to static, the top property has no effect. when both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. in all other situations, if height is constrained in any way or position is set to
relative, the top property takes precedence and the bottom property is ignored. syntax /* <length> values */ top: 3px; top: 2.4em; /* <percentage>s of the height of the containing block */ top: 10%; /* keyword value */ top: auto; /* global values */ top: inherit; top: initial; top: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned ...
...nored. syntax /* <length> values */ top: 3px; top: 2.4em; /* <percentage>s of the height of the containing block */ top: 10%; /* keyword value */ top: auto; /* global values */ top: inherit; top: initial; top: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the top edge of the containing block. for
relatively positioned elements, the distance that the element is moved below its normal position. <percentage> a <percentage> of the containing block's height. auto specifies that: for absolutely positioned elements, the position of the element is based on the bottom property, while height: auto is treated as a height based on the content; or if bottom is also auto, the element is positio...
...rmal position. <percentage> a <percentage> of the containing block's height. auto specifies that: for absolutely positioned elements, the position of the element is based on the bottom property, while height: auto is treated as a height based on the content; or if bottom is also auto, the element is positioned where it should vertically be positioned if it were a static element. for
relatively positioned elements, the distance of the element from its normal position is based on the bottom property; or if bottom is also auto, the element is not moved vertically at all. inherit specifies that the value is the same as the computed value from its parent element (which might not be its containing block). this computed value is then handled as if it were a <length>, <percentage>...
Overview of events and handlers - Developer guides
rn used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents modern web browsers can handle. events and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page,
relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing. events and event handling become central to web programming with the addition of the language to browsers, accompanying a switch in the rendering architecture of browsers from fetch and load page rendering to event driven, reflow based, page rendering. initially, brow...
...n the scripting side using the dom (document object model) representation of the html page: var buttondomelement = document.queryselector('#buttonone'); buttondomelement.addeventlistener('click', example_click_handler); or within the html page by adding the function as the value of the 'onclick' attribute, although this second approach is usually only used in very simple web pages. this code
relies on the agreement that there is a kind of event called 'click' which will call any listener (or 'handler') function with an event object argument (actually, in this case a derivative mouseevent object) and which will be fired by html button elements after user interaction. the code has no visible effect until a user interacts with the button either by placing the mouse pointer over the html but...
...that this code will only be executed after the document object emits the 'domcontentloaded' event because the html has been parsed and javasript objects created representing each of the nodes of the html document. note that in this example, the code does not even name the event argument to the function because the code never needs to use the data structure describing the event; rather, the code me
rely needs to wait to run until after then event has happened. the pattern is therefore easy to learn and implement. the difficulty with events comes from learning the wide variety of events which are generated in modern web browsers. there is also some subtlety in learning how to write the handler functions since such code works asynchronously and potentially will run repeatedly but in slightly dif...
...on, and unloading of the page, the objects in the dom (document object model) tree including user interactions or modifications, the xmlhttprequest objects used for network requests, and the media objects such as audio and video, when the media stream players change state. although this list is currently incomplete. some notable events are: note: this list of events will need work to make
relevant; that work is awaiting some global reorganization work on the documents. this will also need finding a good explanation of the events involved during page loading, such as discussed partially in this web page or in this stack overflow question. the global object window emits an event called 'load' when the page has finished rendering, meaning that all resources have been downloaded and ...
Index - Developer guides
4 getting started ajax, api, advanced, javascript, webmechanics, xmlhttprequest this article guides you through the ajax basics and gives you some simple hands-on examples to get you started. 5 wai aria live regions/api support ajax, accessibility firefox 3 contains important improvements to the way the mozilla engin...
...often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. this is a fairly complex and nascent subject with a lot of variables, so in this article, we'll introduce you to the subject and let you know how you can get started. ...
... parsing and serializing xml ajax, add-ons, dom, dom parsing, document, extensions, guide, htmldocument, json, parsing, parsing xml, serializing, serializing xml, xml, xmldocument, xmlhttprequest in this article, we'll look at the objects provided by the web platform to make the common tasks of serializing and parsing xml easy. 38 printing dom, guide, needscontent, needs
relocation, printing there may be times in which your web site or application would like to improve the user's experience when printing content. there are a number of possible scenarios: 39 svg-in-opentype draft, fonts, guide, needscontent the svg-in-opentype work is currently in the hands of the mpeg group. once we're ready for wider adoption the information from wiki.mozi...
...ard, mouse, pointer lock, touch, user input modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example. this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies.
relevant apis and events include touch events, pointer lock api, screen orientation api, fullscreen api, drag & drop and more. 43 writing forward-compatible websites css, compatibility, dom, html, javascript, web development this page explains how to write websites that do not break when new browser versions are
released. this is especially important for intranets and other no...
<input type="email"> - HTML: Hypertext Markup Language
ommas and, optionally, whitespace characters. see allowing multiple e-mail addresses for an example, or html attribute: multiple for more details. note: normally, if you specify the required attribute, the user must enter a valid e-mail address for the field to be considered valid. however, if you add the multiple attribute, a list of zero e-mail addresses (an empty string, or one which is enti
rely whitespace) is a valid value. in other words, the user does not have to enter even one e-mail address when multiple is specified, regardless of the value of required. pattern the pattern attribute, when specified, is a regular expression that the input's value must match in order for the value to pass constraint validation. it must be a valid javascript regular expression, as used by the rege...
...ote: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. size the size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be
relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use). this does not set a limit on how many characters the user can enter into the field. it only specifies approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribut...
...l filtering to ensure that your own specialized needs are met, if you have any. important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it completely. it's also possible for someone to simply bypass your html enti
rely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database. basic validation browsers that support the email input type automatically provide validation to ensure that only text that matches the s...
...: /^[a-za-z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-za-z0-9](?:[a-za-z0-9-]{0,61} [a-za-z0-9])?(?:\.[a-za-z0-9](?:[a-za-z0-9-]{0,61}[a-za-z0-9])?)*$/ to learn more about how form validation works and how to take advantage of the :valid and :invalid css properties to style the input based on whether or not the current value is valid, see form data validation. note: there are known specification issues
related to international domain names and the validation of e-mail addresses in html. see w3c bug 15489 for details. pattern validation if you need the entered e-mail address to be restricted further than just "any string that looks like an e-mail address," you can use the pattern attribute to specify a regular expression the value must match for it to be valid. if the multiple attribute is specif...
<input type="url"> - HTML: Hypertext Markup Language
ote: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. size the size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be
relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use). this does not set a limit on how many characters the user can enter into the field. it only specifies approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribut...
...w many characters the user can enter into the field. it only specifies approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribute. spellcheck spellcheck is a global attribute which is used to indicate whether or not to enable spell checking for an element. it can be used on any editable content, but here we consider specifics
related to the use of spellcheck on <input> elements. the permitted values for spellcheck are: false disable spell checking for this element. true enable spell checking for this element. "" (empty string) or no value follow the element's default behavior for spell checking. this may be based upon a parent's spellcheck setting or other factors. an input field can have spell checking enabled ...
...ements to be a valid url. but there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any. important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely. it's also possible for someone to simply bypass your html enti
rely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database. basic validation browsers that support the url input type automatica...
...plified form, the user needs to enter the url of the page that has a problem, and a message describing what is wrong. but we want the url to only successfully validate if the entered url is in a myco domain. since inputs of type url validate against both the standard url validation and the specified pattern, you can implement this easily. ...
HTML: Hypertext Markup Language
der, allows images defined by the <img> element to be loaded from foreign origins and used in a <canvas> element as if they were being loaded from the current origin. cors settings attributes some html elements that provide support for cors, such as <img> or <video>, have a crossorigin attribute (crossorigin property), which lets you configure the cors requests for the element's fetched data. p
reloading content with
rel="p
reload" the p
reload value of the <link> element's
rel attribute allows you to write declarative fetch requests in your html <head>, specifying resources that your pages will need very soon after loading, which you therefore want to start p
reloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. this ensures that they are ma...
... references html reference html consists of elements, each of which may be modified by some number of attributes. html documents are connected to each other with links. html element reference browse a list of all html elements. ...
...ment html5-noncompliant. inline elements and block-level elements html elements are usually "inline" or "block-level" elements. an inline element occupies only the space bounded by the tags that define it. a block-level element occupies the entire space of its parent element (container), thereby creating a "block." link types in html, various link types can be used to establish and define the
relationship between two documents. link elements that types can be set on include <a>, <area> and <link>. guide to media types and formats on the web the <audio> and <video> elements allow you to play audio and video media natively within your content without the need for external software support. html content categories html is comprised of several kinds of content, each of which is allowed to...
...ontent categories html is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. similarly, each has a set of other content categories they can contain and elements that can or can't be used in them. this is a guide to these categories. quirks mode and standards mode historical information on quirks mode and standards mode.
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. includes examples, links to palette-building tools, and more. view all... ...
Configuring servers for Ogg media - HTTP
so it's helpful to include key frames at regular intervals. by default, ffmpeg2theora uses one key frame every 64 frames (or about every 2 seconds at 30 frames per second), which works pretty well. note: of course, the more key frames you use, the larger your video file is, so you may need to experiment a bit to get the right balance between file size and seek performance. ...
...ult, ffmpeg2theora uses one key frame every 64 frames (or about every 2 seconds at 30 frames per second), which works pretty well. note: of course, the more key frames you use, the larger your video file is, so you may need to experiment a bit to get the right balance between file size and seek performance. consider using the p
reload attribute the html <audio> and <video> elements provide the p
reload attribute, which tells the browser to attempt to download the entire media when the page loads. without p
reload, the browser only downloads enough of the media to display the first video frame, and to determine the media's duration. p
reload is off by default, so if getting to video is the point of your web page, your users may appreciate it if you include p
reload in your video elements. using...
...setting payload to auto tells the browser to automatically begin downloading the media as soon as the page is loaded, under the assumption that the user will play it. ...
...setting payload to auto tells the browser to automatically begin downloading the media as soon as the page is loaded, under the assumption that the user will play it. ...
HTTP headers - HTTP
nvention 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. iana also maintains a registry of proposed new http headers. headers can be grouped according to their contexts: general headers apply to both requests and responses, but with no
relation to the data transmitted in the body. request headers contain more information about the resource to be fetched, or about the client requesting the resource. response headers hold additional information about the response, like its location or about the server providing it. entity headers contain information about the body of the resource, like its content length or mime type. headers ca...
... disables mime sniffing and forces browser to use the type given in content-type. x-download-options the x-download-options http header indicates that the browser (internet explorer) should not display the option to "open" a file that has been downloaded from an application, to prevent phishing attacks as the file otherwise would gain access to execute in the context of the application. (note:
related ms edge bug). x-frame-options (xfo) indicates whether a browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object>. x-permitted-cross-domain-policies specifies if a cross-domain policy file (crossdomain.xml) is allowed. the file may define a policy to grant clients, such as adobe's flash player, adobe acrobat, microsoft silverlight, or apache flex, permission t...
...ociates a specific cryptographic public key with a certain web server to decrease the risk of mitm attacks with forged certificates. public-key-pins-report-only sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated. fetch metadata request headers sec-fetch-site it is a request header that indicates the
relationship between a request initiator's origin and its target's origin. it is a structured header whose value is a token with possible values cross-site, same-origin, same-site, and none. sec-fetch-mode it is a request header that indicates the request's mode to a server. it is a structured header whose value is a token with possible values cors, navigate, nested-navigate, no-cors, same-origin, ...
...eaders header field identifies an ordered list of response header fields to include in a signature. server-timing communicates one or more metrics and descriptions for the given request-response cycle. service-worker-allowed used to remove the path restriction by including this header in the response of the service worker script. sourcemap links generated code to a source map. upgrade the
relevant rfc document for the upgrade header field is rfc 7230, section 6.7. the standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection. for example, this header standard allows a client to change from http 1.1 to http 2.0, assuming the server decides to acknowledge and implement the upgrade header field. neither party...
HTTP response status codes - HTTP
rotocol this code is sent in response to an upgrade request header from the client, and indicates the protocol the server is switching to. 102 processing (webdav) this code indicates that the server has received and is processing the request, but no response is available yet. 103 early hints this status code is primarily intended to be used with the link header, letting the user agent start p
reloading resources while the server prepares a response. successful responses 200 ok the request has succeeded. the meaning of the success depends on the http method: get: the resource has been fetched and is transmitted in the message body. head: the entity headers are in the message body. put or post: the resource describing the result of the action is transmitted in the message body...
...yntax. 401 unauthorized although the http standard specifies "unauthorized", semantically this response means "unauthenticated". that is, the client must authenticate itself to get the requested response. 402 payment required this response code is reserved for future use. the initial aim for creating this code was using it for digital payment systems, however this status code is used very ra
rely and no standard convention exists. 403 forbidden the client does not have access rights to the content; that is, it is unauthorized, so the server is refusing to give the requested resource. unlike 401, the client's identity is known to the server. 404 not found the server can not find the requested resource. in the browser, this means the url is not recognized. in an api, this can also mean...
...o be done by a proxy. 408 request timeout this response is sent on an idle connection by some servers, even without any previous request by the client. it means that the server would like to shut down this unused connection. this response is used much more since some browsers, like chrome, firefox 27+, or ie9, use http pre-connection mechanisms to speed up surfing. also note that some servers me
rely shut down the connection without sending this message. 409 conflict this response is sent when a request conflicts with the current state of the server. 410 gone this response is sent when the requested content has been permanently deleted from server, with no forwarding address. clients are expected to remove their caches and links to the resource. the http specification intends this status...
...mmon causes are a server that is down for maintenance or that is overloaded. note that together with this response, a user-friendly page explaining the problem should be sent. this responses should be used for temporary conditions and the retry-after: http header should, if possible, contain the estimated time before the recovery of the service. the webmaster must also take care about the caching-
related headers that are sent along with this response, as these temporary condition responses should usually not be cached. 504 gateway timeout this error response is given when the server is acting as a gateway and cannot get a response in time. 505 http version not supported the http version used in the request is not supported by the server. 506 variant also negotiates the server has an int...
Array.prototype.copyWithin() - JavaScript
and create new properties, if necessary. polyfill if (!array.prototype.copywithin) { object.defineproperty(array.prototype, 'copywithin', { value: function(target, start/*, end*/) { // steps 1-2. if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this); // steps 3-5. var len = o.length >>> 0; // steps 6-8. ...
...olyfill if (!array.prototype.copywithin) { object.defineproperty(array.prototype, 'copywithin', { value: function(target, start/*, end*/) { // steps 1-2. if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this); // steps 3-5. var len = o.length >>> 0; // steps 6-8. ...
...{ object.defineproperty(array.prototype, 'copywithin', { value: function(target, start/*, end*/) { // steps 1-2. if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this); // steps 3-5. var len = o.length >>> 0; // steps 6-8. var
relativetarget = target >> 0; var to =
relativetarget < 0 ? math.max(len +
relativetarget, 0) : math.min(
relativetarget, len); // steps 9-11. ...
... start/*, end*/) { // steps 1-2. if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this); // steps 3-5. var len = o.length >>> 0; // steps 6-8. var
relativetarget = target >> 0; var to =
relativetarget < 0 ? math.max(len +
relativetarget, 0) : math.min(
relativetarget, len); // steps 9-11. var
relativestart = start >> 0; var from =
relativestart < 0 ? math.max(len +
relativestart, 0) : math.min(
relativestart, len); // steps 12-14. var end = arguments[2]; var
relativeend = end === undefined ? len : end >> 0; var final =
relativeend < 0 ? math.max(len +
relativeend, 0) : math.min(
relativeend, len); // step 15. var count = math.min(final...
WebAssembly.CompileError - JavaScript
for androidopera for androidsafari on iossamsung internetnode.jscompileerrorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerror() constructorchrome full support ...
... full support 8.0.0compileerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.LinkError - JavaScript
fox for androidopera for androidsafari on iossamsung internetnode.jslinkerrorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0linkerror() constructorchrome full support ...
... full support 8.0.0linkerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.RuntimeError - JavaScript
for androidopera for androidsafari on iossamsung internetnode.jsruntimeerrorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0runtimeerror() constructorchrome full support ...
... full support 8.0.0runtimeerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
Authoring MathML - MathML
/></math>"; document.body.appendchild(div); box = div.firstchild.firstchild.getboundingclientrect(); document.body.removechild(div); return math.abs(box.height - 23) <= 1 && math.abs(box.width - 77) <= 1; } alternatively, the following ua string sniffing will allow to detect the rendering engines with native mathml support (gecko and webkit). note that ua string sniffing is not the most
reliable method and might break from version to version: var ua = navigator.useragent; var isgecko = ua.indexof("gecko") > -1 && ua.indexof("khtml") === -1 && ua.indexof('trident') === -1; var iswebkit = ua.indexof('applewebkit') > -1 && ua.indexof('chrome') === -1; mathematical fonts in order to get a good layout or to allow different style, it's important to have mathematical fonts available. i...
...thml is a similar script that allows to parse more latex commands. the installation is similar: copy latexmathml.js and latexmathml.standardarticle.css, add links in the header of your document and the latex content of your web page marked by the "latex" class will be automatically parsed and converted to html+mathml: <head> ... <script type="text/javascript" src="latexmathml.js"></script> <link
rel="stylesheet" type="text/css" href="latexmathml.standardarticle.css" /> ... </head> <body> ... <div class="latex"> \documentclass[12pt]{article} \begin{document} \title{latexml example} \maketitle \begin{abstract} this is a sample latexml document. \end{abstract} \section{first section} $$ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$ \end{document} </div> ... jqmath is anothe...
...exml document. \end{abstract} \section{first section} $$ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$ \end{document} </div> ... jqmath is another script to parse a simple latex-like syntax but which also accepts non-ascii characters like √{∑↙{n=1}↖{+∞} 6/n^2} = π to write ∑ n = 1 + ∞ 6 n 2 = π . the installation is similar: download and copy the
relevant javascript and css files on your web site and reference them in your page header (see the copy-me.html file from the zip archive for an example). one of the advantage of jqmath over the previous scripts is that it will automatically add some simple css rules to do the mathematical layout and make the formulas readable on browsers with limited mathml support. command-line programs an altern...
...ven more sophisticated tools to convert arbitrary latex documents into html+mathml. for example tex4ht is often included in tex distributions and has an option to use mathml instead of png images. this command will generate an xhtml+mathml document foo.xml from a foo.tex latex source: mk4ht mzlatex foo.tex # linux/mac platforms mzlatex foo.tex # windows platform note that tex4ebook
relies on tex4ht to generate epub documents. latexml is another tool that can generate html5 and epub documents. windows users can watch this video tutorial. given a foo.tex latex file, you can use these simple commands: latexmlc --dest foo.html foo.tex # generate a html5 document foo.html latexmlc --dest foo.epub foo.tex # generate an epub document foo.epub to handle the case of browsers with...
Image file type and format guide - Web media technologies
to a palette of 24-bit colors (8 bits each of red, green, and blue). the length of a color table is always a power of 2 (that is, each palette has 2, 4, 8, 16, 32, 64, or 256 entries). to simulate more than 255 or 256 colors, dithering is generally used. it is technically possible to tile multiple image blocks, each with its own color palette, to create truecolor images, but in practice this is ra
rely done. pixels are opaque, unless a specific color index is designated as transparent, in which case pixels colored that value are enti
rely transparent. gif supports simple animation, in which following an initial full-size frame, a series of images reflecting the parts of the image that change with each frame are provided. gif has been extremely popular for decades, due to its simplicity and c...
...ith alpha n/a gif does not provide a dedicated greyscale format. true color with alpha n/a gif does not support true color pixels. compression lossless (lzw) licensing while the gif format itself is open, the lzw compression algorithm was covered by patents until the early 2000s. as of july 7, 2004, all
relevant patents have expired and the gif format may be used freely ico (microsoft windows icon) the ico (microsoft windows icon) file format was designed by microsoft for desktop icons of windows systems. however, early versions of internet explorer introduced the ability for a web site to provide a ico file named favicon.ico in a web site's root directory to specify a favicon — an icon to...
...ll of the blue values (rather than rgb, rgb, rgb...). greyscale with alpha 4 and 8 alpha information is added by specifying that there are more than 3 samples per pixel in the samplesperpixel field, and indicating the type of alpha (1 for an associated, pre-multiplied alpha component, and 2 for unassociated alpha (a separate matte); however, alpha channels are ra
rely used in tiff files and may be unsupported by the user's software. true color with alpha 8 alpha information is added by specifying that there are more than 3 samples per pixel in the samplesperpixel field, and indicating the type of alpha (1 for an associated, pre-multiplied alpha component, and 2 for unassociated alpha (a separate matte); however, alpha channe...
... tiff files and may be unsupported by the user's software. true color with alpha 8 alpha information is added by specifying that there are more than 3 samples per pixel in the samplesperpixel field, and indicating the type of alpha (1 for an associated, pre-multiplied alpha component, and 2 for unassociated alpha (a separate matte); however, alpha channels are ra
rely used in tiff files and may be unsupported by the user's software. compression most tiff files are uncompressed, but lossless packbits and lzw compression are supported, as is lossy jpeg compression. licensing no license required (aside from any associated with libraries you might use); all known patents have expired. webp image webp supports ...
Codecs used by WebRTC - Web media technologies
avc / h.264 constrained baseline (cb) chrome (52+), edge, firefox[1], safari [1] firefox for android 68 and later do not support avc (h.264) anymore. this is due to a change in google play store requirements that prevent firefox from downloading and installing the openh264 codec needed to handle h.264 in webrtc connections. see this article on sumo for details. ...
... note: these requirements are for web browsers and other fully-webrtc compliant products. ...
...pecifically designed for low-complexity, low-delay applications such as mobile video and videoconferencing, as well as for platforms with lower performing video processing capabilities. our overview of avc and its features can be found in the main video codec guide. special parameter support requirements avc offers a wide array of parameters for controlling optional values. in order to improve
reliability of webrtc media sharing across multiple platforms and browsers, it's required that webrtc endpoints that support avc handle certain parameters in specific ways. sometimes this simply means a parameter must (or must not) be supported. sometimes it means requiring a specific value for a parameter, or that a specific set of values be allowed. and sometimes the requirements are more intricate...
...using avc in a webrtc connection. profile-level-id all webrtc implementations are required to specify and interpret this parameter in their sdp, identifying the sub-profile used by the codec. the specific value that is set is not defined; what matters is that the parameter be used at all. this is useful to note, since in rfc 6184 ("rtp payload format for h.264 video"), profile-level-id is enti
rely optional. other requirements for the purposes of supporting switching between portrait and landscape orientations, there are two methods that can be used. the first is the video orientation (cvo) header extension to the rtp protocol. however, if this isn't signaled as supported in the sdp, then it's encouraged that browsers support display orientation sei messages, though not required. unles...
OpenSearch description format
h specification, we use the moz: xml namespace prefix in the example above to ensure that other user agents that don't support this element can safely ignore it. autodiscovery of search plugins web sites with search plugins can advertise them so firefox users can easily install the plugins. to support autodiscovery, add a <link> element for each plugin to the <head> of your web page: <link
rel="search" type="application/opensearchdescription+xml" title="searchtitle" href="pluginurl"> replace the bolded items as explained below: searchtitle the name of the search to perform, such as "search mdc" or "yahoo! search". this must match your plugin file's <shortname>. pluginurl the url to the xml search plugin, so the browser can download it. if your site offers mu...
... href="pluginurl"> replace the bolded items as explained below: searchtitle the name of the search to perform, such as "search mdc" or "yahoo! search". this must match your plugin file's <shortname>. pluginurl the url to the xml search plugin, so the browser can download it. if your site offers multiple search plugins, you can support autodiscovery for them all. for example: <link
rel="search" type="application/opensearchdescription+xml" title="mysite: by author" href="http://example.com/mysiteauthor.xml"> <link
rel="search" type="application/opensearchdescription+xml" title="mysite: by title" href="http://example.com/mysitetitle.xml"> this way, your site can offer plugins to search by author, or by title. in firefox, an icon change in the search box indicates...
...es there's a provided search plugin. (see image, the green plus sign.) thus if a search box is not shown in the user's ui, they will receive no indication. in general, behavior varies among browsers. supporting automatic updates for opensearch plugins opensearch plugins can automatically update. to support this, include an extra url element with type="application/opensearchdescription+xml" and
rel="self". the template attribute should be the url of the opensearch document to automatically update to. for example: <url type="application/opensearchdescription+xml"
rel="self" template="https://example.com/mysearchdescription.xml" /> note: at this time, addons.mozilla.org (amo) doesn't support automatic updating of opensearch plugins. if you want to put your search plugin on amo, ...
...t not be larger than 10kb (see bug 361923). in addition, the search plugin service provides a logging mechanism that may be useful to plugin developers. use about:config to set the pref 'browser.search.log' to true. then, logging information will appear in firefox's error console (tools 〉 error console) when search plugins are added. reference material opensearch documentation safari 8.0
release notes: quick website search microsoft edge dev guide: search provider discovery the chromium projects: tab to search imdb.com has a working osd.xml opensearch plugin generator ready2search - create opensearch plugins. customized search through ready2search ...
Web Performance
ath improves render performance.the critical rendering path includes the document object model (dom), css object model (cssom), render tree and layout.css and javascript animation performancebrowsers are able to optimize rendering flows. in summary, we should always try to create our animations using css transitions/animations where possible. if your animations are really complex, you may have to
rely on javascript-based animations instead.lazy loadinglazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. it is a way of shorten the critical rendering path length, what would translate into improved page load times. navigation and resource timingsnavigation timings are metrics measuring a browser's document navigation events. resourc...
...trics, along with best practices to improve user perception, if not the actual timings. web performance basics in addition to the front end components of html, css, javascript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. there are many apis, developer tools, best practices, and bad practices
relating to web performance. here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic. html performance features some attributes and the source order of your mark-up can impact the performance or your website. by minimizing the number of dom nodes, making sure the best order and attributes are used for including content s...
...r https as we tend to call it—is crucial in creating secure and safe user experiences. while hardware has reduced the negative impacts tls has had on server performance, it still represents a substantial slice of the time we spend waiting for browsers to connect to servers. this article explains the tls handshake process, and offers some tips for reducing this time, such as ocsp stapling, hsts p
reload headers, and the potential role of resource hints in masking tls latency for third parties. reading performance charts developer tools provide information on performance, memory, and network requests. knowing how to read waterfall charts, call trees, traces, flame charts , and allocations in your browser developer tools will help you understand waterfall and flame charts in other performan...
...ywhere, we'll also show you how you can configure your tooling to use this feature in a widely compatible fashion. controlling resource delivery with resource hints browsers often know better than we do when it comes to resource prioritization and delivery however they're far from clairyovant. native browser features enable us to hint to the browser when it should connect to another server, or p
reload a resource before the browser knows it ever needs it. when used judiciously, this can make fast experience seem even faster. in this article, we cover native browser features like
rel=preconnect,
rel=dns-prefetch,
rel=prefetch, and
rel=p
reload, and how to use them to your advantage. performance budgets marketing, design, and sales needs, and developer experience, often ad bloat, third-party ...
Introduction to progressive web apps - Progressive web apps (PWAs)
aptops, tvs, refrigerators, etc. safe, so the connections between the user, the app, and your server are secured against any third parties trying to get access to sensitive data. offering these features and making use of all the advantages offered by web applications can create a compelling, highly flexible offering for your users and customers. is it worth doing all that? absolutely! with a
relatively small amount of effort required to implement the core pwa features, the benefits are huge. for example: a decrease in loading times after the app has been installed, thanks to caching with service workers, along with saving precious bandwidth and time. pwas have near-instantaneous loading (from the second visit). the ability to update only the content that has changed when an app updat...
...ndicate these benefits. the best-known success story is probably that of flipkart lite. india's largest e-commerce site was rebuilt as a progressive web app in 2015, which resulted in 70% increase in conversions. the aliexpress pwa has also seen much better results than either the web or the native app, with a 104% increase in conversion rates for new users. given their profit increase, and the
relatively low amount of work required for the conversion of these apps to pwas, the advantage is clear. early stage emerging startups like couponmoto have also started using progressive web apps to drive more consumer engagement, showing that they can help small as well as big companies to (re-)engage users more effectively. you can check the list at pwa.rocks for more examples. particularly wor...
...ps should have better representation in search engines, be easier to expose, catalog and rank, and have metadata usable by browsers to give them special capabilities. some of the capabilities have already been enabled on certain web-based platforms by proprietary technologies like open graph, which provides a format for specifying similar metadata in the html <head> block using <meta> tags. the
relevant web standard here is the web app manifest, which defines features of an app such as name, icon, splash screen, and theme colors in a json-formatted manifest file. this is for use in contexts such as app listings and device home screens. installability a core part of the web app experience is for users to have app icons on their home screen, and be able to tap to open apps into their own ...
... inside the web app manifest, and via a feature available in modern smartphone browsers called web app installation. linkability one of the most powerful features of the web is the ability to link to an app at a specific url without the need for an app store or complex installation process. this is how it has always been. network independence modern web apps can work when the network is un
reliable, or even non-existent. the basic ideas behind network independence are to be able to: revisit a site and get its contents even if no network is available. browse any kind of content the user has previously visited at least once, even under situations of poor connectivity. control what is shown to the user in situations where there is no connectivity. this is achieved using a combinati...
Mobile first - Progressive web apps (PWAs)
in our planning your app article, we provided a high level look into the kinds of planning and functionality decisions you should make before you start coding an app, including some ideas for desktop and mobile design. this article offers some
related ideas, looking at the concept of mobile first — the practice of designing a website so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default. ...
...n app, including some ideas for desktop and mobile design. this article offers some
related ideas, looking at the concept of mobile first — the practice of designing a website so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default. this guide looks at a few useful techniques inside the mobile first umb
rella. first things first — mobile as a default you may think that concentrating on the mobile experience first sounds pointless, as we are more used to dealing with desktop sites, and we su
rely need to consider the full gamut of features for the overall experience across desktop, mobile, etc., before then paring it down to a mobile experience that is simpler, more streamlined, or whatever. this...
... and the second one is to jump back up to the top of the article again. i had to make sure both of these were not direct children of the <article>, otherwise the following would not work: #bottom, #top { font-size: 0.8em; position:absolute; right: 1em; text-decoration: none; } #top { color: white; top: 0.5em; } #bottom { bottom: 0.5em; } i also set their parents to be positioned
relatively, so they would become the positioning contexts of the absolutely positioned elements (you don't want them to be positioned
relative to the <body> element.) adding a mobile first layout the above layout is fine for narrower layouts, but it doesn't work very well when you get wider than about 480px. to create something more suitable for desktop, i put in the following media queries: @medi...
...op version", or vice versa. you can write your own feature detects (mark pilgrim's all-in-one almost-alphabetical guide to detecting everything is a good start), but really it is much better to use a dedicated existing solution, such as modernizr. modernizr is a good choice as it not only includes a feature detect for just about everything (css, html5, some other bits besides), it is also fairly
reliable, and you can create your own custom version with only the feature detects you need in it, using the modernizr download builder. the full uncompressed modernizr library is 42kb, but the version we are using in this demo is only 8kb. i put modernizr inside my js/lib directory, then included it by putting the following construct inside my html file: <script type="text/javascript" src="js/lib/...
dx - SVG: Scalable Vector Graphics
dx="50%" x="10%" y="50%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used. for <altglyph>, if it contains a single value, dx defines a shift along the x-axis for all alternate glyph. if there are multiple values, dx defines a shift along the x-axis for each individual glyph
relative to the preceding glyph. if there are less values than glyphs, the remaining glyphs use a value of 0. if there are more values than glyphs, extra values are ignored. value list of <length> default value none animatable yes fedropshadow for <fedropshadow>, dx defines the x offset of the droped shadow. the unit used to resolve the value of the attrib...
...deprecated and shouldn't be used. for <glyphref>, dx defines the x offset of the glyph, in the font metric system. value <number> default value 0 animatable yes text for <text>, if it contains a single value, dx defines a shift along the x-axis for all glyphs. if there are multiple values, dx defines a shift along the x-axis for each individual glyph
relative to the preceding glyph. if there are less values than glyphs, the remaining glyphs use a value of 0. if there are more values than glyphs, extra values are ignored. 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 materializ...
...g</text> <text dx="0 10% 20%" x="10%" y="75%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used. for <tref>, if it contains a single value, dx defines a shift along the x-axis for all glyphs. if there are multiple values, dx defines a shift along the x-axis for each individual glyph
relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. 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. if there are...
...ng glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. 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. if there are multiple values, dx defines a shift along the x-axis for each individual glyph
relative to the preceding glyph. if there are less values than glyphs, the remaining glyphs use a value of 0. if there are more values than glyphs, extra values are ignored. value list of <length> default value none animatable yes specifications specification status comment filter effects module level 1the definition of 'dx' in ...
dy - SVG: Scalable Vector Graphics
dy="50%" x="10%" y="30%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used. for <altglyph>, if it contains a single value, dy defines a shift along the y-axis for all alternate glyph. if there are multiple values, dy defines a shift along the y-axis for each individual glyph
relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. value list of <length> default value none animatable yes fedropshadow for <fedropshadow>, dy defines the y offset of the dropped shadow. the unit used to resolve the value of the at...
...deprecated and shouldn't be used. for <glyphref>, dy defines the y offset of the glyph, in the font metric system. value <number> default value 0 animatable yes text for <text>, if it contains a single value, dy defines a shift along the y-axis for all glyphs. if there are multiple values, dy defines a shift along the y-axis for each individual glyph
relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. 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 li...
...">svg</text> <text dy="0 10 20" x="90" y="30">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used. for <tref>, if it contains a single value, dy defines a shift along the y-axis for all glyphs. if there are multiple values, dy defines a shift along the y-axis for each individual glyph
relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. 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. if there are...
...ng glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. 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. if there are multiple values, dy defines a shift along the y-axis for each individual glyph
relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. value list of <length> default value none animatable yes specifications specification status comment filter effects module level 1the definition of 'dy' ...
Paths - SVG: Scalable Vector Graphics
, 10). the "move to" command is called with the letter m. when the parser runs into this letter, it knows it needs to move to a point. so, to move to (10,10) the command to use would be m 10 10. after that, the parser begins reading for the next command. all of the commands also come in two variants. an uppercase letter specifies absolute coordinates on the page, and a lowercase letter specifies
relative coordinates (e.g., move 10px up and 7px to the left from the last point). coordinates in the d parameter are always unitless and hence in the user coordinate system. later, we will learn how paths can be transformed to suit other needs. line commands there are five line commands for <path> nodes. the first command is the "move to" or m, which was described above. it takes two parameters, ...
...e path" command, called with z. this command draws a straight line from the current position back to the first point of the path. it is often placed at the end of a path node, although not always. there is no difference between the uppercase and lowercase command. z (or) z so our path above could be shortened to: <path d="m 10 10 h 90 v 90 h 10 z" fill="transparent" stroke="black"/> the
relative forms of these commands can also be used to draw the same picture.
relative commands are called by using lowercase letters, and rather than moving the cursor to an exact coordinate, they move it
relative to its last position. for instance, since our box is 80×80, the <path> element could have been written as: <path d="m 10 10 h 80 v 80 h -80 z" fill="transparent" stroke="black"/> the pa...
...0 80" stroke="black" fill="transparent"/> </svg> the other type of bézier curve, the quadratic curve called with q, is actually a simpler curve than the cubic one. it requires one control point which determines the slope of the curve at both the start point and the end point. it takes two parameters: the control point and the end point of the curve. note: the co-ordinate deltas for q are both
relative to the previous point (that is, dx and dy are not
relative to dx1 and dy1). q x1 y1, x y (or) q dx1 dy1, dx dy <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 80 q 95 10 180 80" stroke="black" fill="transparent"/> </svg> as with the cubic bézier curve, there is a shortcut for stringing together multiple quadratic béziers, called with t. t x y ...
... this computation is for the non-rotated ellipse with start→end (110, 215)→(150.71, 170.29). the solution, (x, y), is the center of the ellipse(s). the solution will be imaginary if the ellipse's radii are too small. this second computation is for the non-rotated ellipse with start→end (110, 215)→(162.55, 162.45). the solution has a small imaginary component because the ellipse was just ba
rely expanded. the four different paths mentioned above are determined by the next two parameter flags. as mentioned earlier, there are still two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. the first parameter is the large-arc-flag. it simply determines if the arc should be greater than or less than 180 degrees; in th...
XPath snippets - XPath
lanta" state="ga" country="usa"/> <address street="123 west st" city="seattle" state="wa" country="usa"/> <address street="321 south avenue" city="denver" state="co" country="usa"/> </person> </people> you can now "query" the document with xpath expressions. although walking the dom tree can achieve similar results, using xpath expressions is much quicker and more powerful. if you can
rely on id attributes, document.getelementbyid() is still powerful, but it's not nearly as powerful as xpath. here are some examples. example: javascript code with the custom evaluatexpath() utility function // display the last names of all people in the doc var results = evaluatexpath(people, "//person/@last-name"); for (var i in results) alert("person #" + i + " has the last name " + results[i...
...oc, context, resolver) { var i, result, a = []; doc = doc || (context ? ...
...esult = doc.evaluate(expr, context, resolver, xpathresult.ordered_node_snapshot_type, null); for(i = 0; i < result.snapshotlength; i++) { a[i] = result.snapshotitem(i); } return a; } getxpathfo
relement the following function allows one to pass an element and an xml document to find a unique string xpath expression leading back to that element. ...
...ult.ordered_node_snapshot_type, null); for(i = 0; i < result.snapshotlength; i++) { a[i] = result.snapshotitem(i); } return a; } getxpathfo
relement the following function allows one to pass an element and an xml document to find a unique string xpath expression leading back to that element. ...
Compiling an Existing C Module to WebAssembly - WebAssembly
emscripten provides most of these features, although there are some limitations. as an example, let's compile an encoder for webp to wasm. the source for the webp codec is written in c and available on github as well as some extensive api documentation. that's a pretty good starting point. ...
... simple program to test whether you can get the source code of libwebp to compile, as it doesn't require any parameters or complex data structures to invoke this function. to compile this program, you need to tell the compiler where it can find libwebp's header files using the -i flag and also pass it all the c files of libwebp that it needs. a useful strategy is just gave it all the c files and
relied on the compiler to strip out everything that was unnecessary. it seemed to work brilliantly: $ emcc -o3 -s wasm=1 -s extra_exported_runtime_methods='["cwrap"]' \ -i libwebp \ webp.c \ libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c note: this strategy will not work with every c project. many projects
rely on autoconf/automake to generate system-specific code before compilation. em...
...ption between 0 and 100. it also allocates an output buffer for us that we need to free using webpfree() once we are done with the webp image. the result of the encoding operation is an output buffer and its length. because functions in c can't have arrays as return types (unless you allocate memory dynamically), this example resorts to a static global array. this may not be clean c. in fact, it
relies on wasm pointers being 32 bits wide. but this is a fair shortuct for keeping things simple: int result[2]; emscripten_keepalive void encode(uint8_t* img_in, int width, int height, float quality) { uint8_t* img_out; size_t size; size = webpencodergba(img_in, width, height, width * 4, quality, &img_out); result[0] = (int)img_out; result[1] = size; } emscripten_keepalive void free_r...
...t)img_out; result[1] = size; } emscripten_keepalive void free_result(uint8_t* result) { webpfree(result); } emscripten_keepalive int get_result_pointer() { return result[0]; } emscripten_keepalive int get_result_size() { return result[1]; } now with all of that in place, you can call the encoding function, grab the pointer and image size, put it in a javascript buffer of your own, and
release all the wasm buffers allocated in the process: api.encode(p, image.width, image.height, 100); const resultpointer = api.get_result_pointer(); const resultsize = api.get_result_size(); const resultview = new uint8array(module.heap8.buffer, resultpointer, resultsize); const result = new uint8array(resultview); api.free_result(resultpointer); note: new uint8array(somebuffer) will create a new...
Module structure of the SDK - Archive of obsolete content
s: the javascript modules which the sdk provides, such as panel and page-mod. local modules: each of the javascript files under your add-on's "lib" directory. external modules: reusable modules developed and maintained outside the sdk, but usable by sdk-based add-ons. sdk modules the modules supplied by the sdk are divided into two sorts: high-level modules like panel and page-mod provide
relatively simple, stable apis for the most common add-on development tasks. low-level modules like heritage and namespace provide more powerful functionality, and are typically less stable and more complex. to use sdk modules, you can pass require() a complete path, starting with "sdk", to the module you want to use. for high-level modules this is just sdk/<module_name>, and for low-level modules...
...dd-on consists of a single module named main.js, but you can factor your add-on's code into a collection of separate commonjs modules. each module is a separate file stored under your add-on's "lib" directory, and exports the objects you want to make available to other modules in your add-on. see the tutorial on creating reusable modules for more details. to import a local module, specify a path
relative to the importing module. for example, the following add-on contains an additional module directly under "lib", and other modules under subdirectories of "lib": my-addon lib main.js password-dialog.js secrets hash.js storage password-store.js to import modules into main: // main.js code...
...developed outside the sdk and made available to other add-on authors. 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. to import external modules, treat them like local modules: copy them somewhere under your add-ons "lib" directory and reference them with a path
relative to the importing module. for example, this add-on places external modules in a "dependencies" directory: my-addon lib main.js dependencies geolocation.js it can then load them in the same way it would load a local module. for example, to load from main: // main.js code var geo = require("./dependencies/geolocation"); ...
context-menu - Archive of obsolete content
context menu from all add-ons exceeds a certain number (normally 10 but configurable with the extensions.addon-sdk.context-menu.overflowthreshold preference) all of the menu items will instead appear in an overflow menu to avoid making the context menu too large. specifying contexts as its name implies, the context menu should be reserved for the occurrence of specific contexts. contexts can be
related to page content or the page itself, but they should never be external to the page. for example, a good use of the menu would be to show an "edit image" item when the user right-clicks an image in the page. 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. the page context first of all, ...
...vel item does not specify a context, the page context applies. an item that is in a submenu is visible unless you specify a context. the page context occurs when the user invokes the context menu on a non-interactive portion of the page. try right-clicking a blank spot in this page, or on text. make sure that no text is selected. the menu that appears should contain the items "back", "forward", "
reload", "stop", and so on. this is the page context. the page context is appropriate when your item acts on the page as a whole. it does not occur when the user invokes the context menu on a link, image, or other non-text node, or while a selection exists. declarative contexts you can specify some simple, declarative contexts when you create a menu item by setting the context property of the opti...
...to communicate to the menu item associated with the content script, the content script can call the postmessage function attached to the global self object, passing it some json-able data. the menu item's "message" event listener will be called with that data. var cm = require("sdk/context-menu"); cm.item({ label: "edit image", context: cm.selectorcontext("img"), contentscr...
panel - Archive of obsolete content
state('window', {checked: false}); } updating panel content you can update the panel's content by: sending a message to a content script that updates the dom in the same document. this is usually the best approach. embedding an iframe in the panel, and changing its document setting the panel's contenturl property. however, doing this will cause any content scripts to be unloaded and then
reloaded, so it may be less efficient, and you'll lose any state associated with the scripts. scripting panel content you can't directly access your panel's content from your main add-on code. to access the panel's content, you need to load a script into the panel. in the sdk these scripts are called "content scripts" because they're explicitly used for interacting with web content. while content...
...irefox and other applications, but means you need to take care when applying your own styles. if the panel's content is packaged along with your add-on and specified using an html file in your data directory, you can style it by embedding css directly in the html file or by referencing a css file stored under data: <!doctype html> <html> <head> <link href="panel-style.css" type="text/css"
rel="stylesheet"> </head> <body> my panel content </body> </html> from firefox 31 onwards, you can style panel content using the contentstyle or contentstylefile options. you can use these options even if the panel content is not packaged along with the add-on: var mypanel = require("sdk/panel").panel({ contenturl: "https://en.wikipedia.org/w/index.php?title=jetpack&useformat=mobile", ...
...how(); // show the panel centered vertically and // aligned to the left of the content area require("sdk/panel").panel({ position: { left: 0 } }).show(); // centered panel, default behavior require("sdk/panel").panel({}).show(); as with the css top, bottom, left, and right properties, setting both top and bottom or both left and right will implicitly set the panel's height or width
relative to the content window: // show the panel centered horizontally, with: // - the top edge 40px from the top // of the content window // - the bottom edge 100px from the bottom // of the content window require("sdk/panel").panel({ position: { top: 40, bottom: 100 } }).show(); if you set both top and bottom, but also set the panel's height explicitly using the height prope...
widget - Archive of obsolete content
string the type of event to listen for. listener : function the listener function that handles the event. removelistener(type, listener) unregisters an event listener from the widget. parameters type : string the type of event for which listener was registered. listener : function the listener function that was registered. getview(window) retrieve a widgetview instance of this widget
relative to a browser window. parameters window : browserwindow the browserwindow instance to match. returns widgetview : a widgetview instance associated with the browser window. any changes subsequently applied to this object will only be applied to the widget attached to that window. properties label the widget's label. read-only. content a string containing the widget's content. it can ...
...e events from the content script using the port.on function see the guide to communicating using port for details. events attach this event is emitted when a browser window is opened and a new widgetview object is created. if the widget has a content script, this event is fired only when the content script is applied according to the contentscriptwhen attribute. arguments widgetview : the
related widgetview object. click this event is emitted when the widget is clicked. arguments widgetview : listeners are passed a single argument which is the widgetview that triggered the click event. message if you listen to this event you can receive message events from content scripts associated with this widget. when a content script posts a message using self.postmessage(), the message is ...
...ons property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. port object that allows you to: send events to the content script using the port.emit function receive events from the content script using the port.on see the guide to communicating using port for details. events detach the detach event is fired when the widget view is removed from its
related window. this can occur if the window is closed, firefox exits, or the add-on is disabled. click this event is emitted when the widget view is clicked. message if you listen to this event you can receive message events from content scripts associated with this widget view. when a content script posts a message using self.postmessage(), the message is delivered to the add-on code in the wid...
remote/parent - Archive of obsolete content
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. the module loads asynchronously but you can start sending messages to the module immediately. you can use an absolute path to the module or a
relative path. if you use a
relative path, you must use the module parameter. const { remoterequire } = require("sdk/remote/parent"); remoterequire("./my-module.js", module); note that even single-process applications have a process that contains content frames. for consistency and to make writing multiprocess compatible code easier, remoterequire() will also create a new module loader and load mod...
... { remoterequire } = require("sdk/remote/parent"); remoterequire("./my-module.js", module); note that even single-process applications have a process that contains content frames. for consistency and to make writing multiprocess compatible code easier, remoterequire() will also create a new module loader and load modules in the main process. parameters id : string the module to load. to use a
relative path you must pass the module parameter. module : object the module to resolve the
relative module id against. to resolve
relative to the loading module, pass module here. properties processes a processes object. frames a frames object. processes the processes object lets you interact with the processes currently running. you can use it as a simple list of all running processes: co...
...vents to and from code running in the process. isremote a boolean property that indicates whether the attached process is remote from the main process. events detach event emitted when this process disconnects from the application. it may have been closed normally or it may have crashed. frame a frame provides a way to pass frame specific messages to code in other processes. the frame this
relates to may be in any of the application's processes. properties port an event emitter that can be used to send and receive frame specific events to and from code running in any process. frameelement the dom element that displays this frame in the main process. for example, this may be a xul <browser> element. istab a boolean property indicating if this frame displays in one of the applicat...
Creating annotations - Archive of obsolete content
the widget api is deprecated from firefox 29 onwards. please see the ui module for replacements. in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis. we'll use two objects to create annotations: a page-mod to find page elements that the user can annotate, and a panel for the user to enter the annotation text itself. selector page-mod selector content scripts the content script for the selector page-mod uses jquery to examine and manipulate the dom. ...
...ew-amo-review-process/. you should see the highlight appearing when you move the mouse over certain elements: click on the highlight and you should see something like this in the console output: info: show info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and p
reliminary review. annotation editor panel so far we have a page-mod that can highlight elements and send information about them to the main add-on code. next we will create the editor panel, which enables the user to enter an annotation associated with the selected element. we will supply the panel's content as an html file, and will also supply a content script to execute in the panel's context...
... your mouse over an element and click the element when it is highlighted. you should see a panel with a text area for a note: enter the note and press the return key: you should see console output like this: info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and p
reliminary review. info: we should ask for full review if possible. that's a complete annotation, and in the next section we'll deal with storing it. ...
Bootstrapped extensions - Archive of obsolete content
gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduces bootstrapped extensions. ...
...g nsicomponentmanager.addbootstrappedmanifestlocation() and nsicomponentmanager.removebootstrappedmanifestlocation(). this feature was unavailable in firefox versions before 8. adding user interface manually if you decide to go ahead and try to develop a bootstrapped extension that modifies the application's user interface, here are a few suggestions to get you started. you need to look up the
relevant application ui elements by their id by calling document.getelementbyid(), then manipulate them to inject your ui. for example, you can get access to the menu bar in firefox with document.getelementbyid("main-menubar"). be sure that at shutdown time, you remove any user interface you've added. creating a bootstrapped extension to mark an extension as bootstrappable, you need to add the fol...
...ile should contain: locale name_of_your_addon en-us locale/ here is an example add-on that opens an html page and a xul page on install: github :: l10n-xhtml-xul. here is an example showing how to use a localized html page as an options page: github :: l10n-html-options. you can go to about:config and change the value of the preference general.useragent.locale to en-us and then to en-gb and then
reload the open pages to see the localization change. further reading how to convert an overlay extension to restartless a step by step guide. some code samples are provided. the page is based on and expanded from dave garrett's step-by-step guide to convert an old overlay based extension into a restartless addon. dave townsend provides a basic code base to load ui for each opened window in a bo...
Downloading Files - Archive of obsolete content
structor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); // obtain the privacy context of the browser window that the url // we are downloading comes from. if, and only if, the url is not //
related to a window, null should be used instead. var privacy = privatebrowsingutils.privacycontextfromwindow(urlsourcewindow); persist.persistflags = persist.persist_flags_from_cache | persist.persist_flags_replace_existing_files; persist.saveuri(uritosave, null, null, null, "", targetfile, privacy); if you don't need detailed progress information, you might be happier with n...
..., "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); var obj_uri = services.io.newuri(aurltodownload, null, null); // obtain the privacy context of the browser window that the url // we are downloading comes from. if, and only if, the url is not //
related to a window, null should be used instead. 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((acurtotalp...
...source://gre/modules/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); // obtain the privacy context of the browser window that the url // we are downloading comes from. if, and only if, the url is not //
related to a window, null should be used instead. var privacy = privatebrowsingutils.privacycontextfromwindow(urlsourcewindow); var hardcodedusername = "ericjung"; var hardcodedpassword = "foobar"; persist.progresslistener = { queryinterface: xpcomutils.generateqi(["nsiauthprompt"]), // implements nsiauthprompt prompt: function(dialogtitle, text, passwordrealm, savepassword, defaulttext, resu...
Enhanced Extension Installation - Archive of obsolete content
ns // the rdf/xml datasource for the items at the // global install location. }; tracking install locations since there are only two locations, the installed location of an extension is expressed throughout the code using a boolean value, often referred to as isprofile - true if the item is installed in the profile directory's extensions folder. this boolean
relationship itself is not stored directly in the datasource. rather, if the system needs to know where an item is located, it checks to see if the item is a member of the the appropriate type container (urn:mozilla:extension:root or urn:mozilla:theme:root) in each of the two datasources. this is clumsy. item type the extension system in firefox 1.0 supports only two item types, extensions and them...
...ager, preferences system and chrome registry can locate additional files on the next start. the finalization process then notifies the startup process that finalization has changed this manifest, and that the application must be restarted to pick up changes specified therein. the startup process receives this "needsrestart" bit when the extension manager's startup completes, shuts down xpcom and
relaunches the application. on the next restart, the xredirprovider now supplies a list of directories to requesting systems listing the new item's components, defaults and chrome manifests. uninstallation, disabling, enabling these functions work on the same principle as installation - the user requests an action through the ui while the application is running and metadata is written (tobeuninstal...
...n configured for disabling. things this upgrade does not do replace rdf/xml as a storage format the rdf/xml datasource back end creates unneccessary and undesirable complexity when saving data. it also makes it more difficult to support multiple instances of a single extension at different install locations due to the singleton nature of rdf resources. extension metadata is structured and not
relational in the sense encouraged by rdf, and so a simple text storage format is probably desirable. making the database file format human readable would also help developers debug their installation problems. footnotes the term "extension" is used in this document to imply any item managed by the extension manager, including themes. the term "firefox" is used in this document to imply any appl...
Extension Etiquette - Archive of obsolete content
ers. it assumes that you are already familiar with building an extension. user interface tools menu items using the tool menu option gives the author the maximum amount of choices. whether the extensions should go at the top, bottom, or somewhere in between on the tools menu, the author always has a choice. ideally, the location would be below the add-ons item, grouped with the other extension-
related commands (menuitem:insertafter="javascriptconsole,devtoolsseparator"). sub-menus should be used for single extensions needing multiple menu items, and a tools menu item should not be created for options and preferences (for options and preferences, see the add-on manager). if possible, create a menu item in the menu where it is most applicable; for instance, a bookmark sharing extension shoul...
...om install.rdf data; creating a new xul about box is usually unnecessary. you can decrease download size by omitting a customized about box. make one only if you have a special feature that needs to be included — for example, a custom updater. theming if you have xul buttons in your extension that do functions similar to ones that already exist in a browser — for example, a feed reader that
reloads and stops — use icons from the browser's theme. the icons makes the extension lighter, while providing more consistency, especially for users using different themes. extension icons unique icons are usually worth their download weight. they allow for easy identification among other extensions in the extensions manager. coding practices namespace conflicts there are many namespaces whic...
...ates the "obvious," including the purpose of your extension. users also appreciate when your extension is shipped with a simple how-to document. ids firefox/thunderbird 1.5 or later are much more strict about the ids of extensions than their 1.0 counterparts. make sure they're valid. version numbering please follow the mozilla pattern: major version dot current incarnation dot security/bugfix
release (like 1.0.7). internationalization locales always use locale dtds and property files, even if providing your extension in one language. it will make translation of your extension to another language easier. it occurs more often than you would think. options firefox users like options. lots of options. try to include everything a user could ever want to customize in your extension, rememb...
Install Manifests - Archive of obsolete content
patibility a boolean value indicating if the add-on should be enabled when the version of the application is greater than its max version. by default, the value of this property is false meaning that the compatibility checking will not be performed against the max version. <em:strictcompatibility>true</em:strictcompatibility> usually, there is no need to restrict the compatibility: not all new
releases will break your extension and, if it is hosted on amo, you'll get notice several weeks in advance if a potential risk has been detected. moreover, an extension being disabled, even for a short period, leads to a bad experience for the user. about the only time you should need to set this if your add-on does things that are likely to be broken by firefox updates. you do not need to set this f...
... leads to a bad experience for the user. about the only time you should need to set this if your add-on does things that are likely to be broken by firefox updates. you do not need to set this flag if your add-on has a binary component, since add-ons with binary components are always subject to strict compatibility checking (because binary components need to be rebuilt for every major application
release anyway). note: if you want to restore the old behavior of strict compatibility checking of all add-ons, regardless of the value of this setting in their manifests, you can set the extensions.strictcompatibility preference to true. note: starting in gecko 11.0, applications such as firefox will assume add-ons that have not been updated in a very long time are no longer compatible by defau...
...ifying the operating system being used. %app_abi% the value of the target_xpcom_abi value from the firefox build system, identifying the compiler/architecture combination used to compile the current application. %app_locale% the current application's locale. %update_type% update_type_compatibility(32), update_type_newversion(64) %compatibility_mode%
related to default to compatible, values could be normal, ignore or strict. examples <em:updateurl>https://www.example.com/update.cgi?id=%item_id%&version=%item_version%</em:updateurl> <em:updateurl>https://www.example.com/extension/windows.rdf</em:updateurl> for add-ons hosted on addons.mozilla.org: you may not specify an updateurl property. by default, mozilla applications using the a...
Listening to events in Firefox extensions - Archive of obsolete content
nt categories of events; this article will help you learn about them and direct you to more specific documentation covering each of them. it also provides some use cases that may be of specific interest. types of events there are multiple types of events that application and extension authors can use to receive notifications from <xul:browser> and <xul:tabbrowser> elements to hear about changes
relating to loads of the content contained within them. simple dom events registering for a dom event is done using with code such as the following: function callback(evt) { // do your processing here. check evt.target for the target of the event. } b.addeventlistener("event", callback, false) where b is the browser or tabbrowser you wish to watch for events from. keep in mind that the events...
...e will only get events from the browser that is currently displayed at the time the event occurs. in order to listen to events from all browsers, including those not currently being displayed, the following example can be used: var tabsprogresslistener = { // add tabs progress listener implementation here } gbrowser.addtabsprogresslistener(tabsprogresslistener); this lets you receive events
related to all tabs. more information about listening to events from all tabs is available. how events are used by firefox the firefox frontend already listens for a number of these progress events from web pages. most of this goes on in browser.js. domlinkhandler the domlinkhandler object is called by the domlinkadded event in order to detect any rss feeds, site icons, or opensearch plugins for ...
...es update the bookmarking star button ui update the identity display as the site's security changes tabsprogresslistener this object is a tabs progress listener and receives events for all browsers in the window. it is used to detect when a webpage attempts to refresh itself and allow the user to block the attempt. how events are used by the tabbrowser tabbrowser maintains a set of objects
relating to progress listening for each browser. first it creates a browser-status-filter and adds it as a web progress listener for the browser. next it creates an internal object to receive all web progress events from the browser. this is created by the method mtabprogresslistener(). this receives events from the browser-status-filter. the filter acts to reduce the number of status and progress ev...
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
u'll need to have in order to develop for firefox. technologies used to develop firefox extensions firefox and its extensions are both based on and developed with technologies widely used on the web. its structure is similar to that of the dynamic html used on some web pages, or the html applications used on windows. if you've had experience developing with dynamic html, you'll probably find it
relatively easy to pick up the knowledge you'll need to develop firefox extensions. the role of each technology firefox is largely built using four technologies: xul, css, javascript, and xpcom. extensions are also built using these four technologies. figure 1: role of each technology in firefox in addition to these technologies, extension development will require you to learn about how to con...
...ience developing with dynamic html, as well as the topics below. for more information on these technologies, please refer to other sources. xml coding css coding basic javascript syntax xml: a text-based structural language extensible markup language (xml) is a meta-language for expressing various kinds of data. it was specified in 1998 by w3c, the organization that sets standards for web-
related technologies. it has a number of useful qualities: it is generic, extensible, and easy to validate as well-formed. some examples of xml-based markup languages include xhtml, which is html redefined on an xml base; svg, for expressing vector images; and mathml, for expressing mathematical formulas. xul, which is used in firefox, is also based on xml. listing 1: xml syntax <elementname somea...
...atures to web pages. because it was often used at first to display pop-up windows, marching text in status bars, or in other ways that made web pages less useful to users, the language acquired a reputation as having little practical use and lacking in functionality. also, because a series of security holes were discovered in javascript and the compatible technology jscript, there was an initial
reluctance to use javascript at all. nevertheless, the rise of web services like google maps, which used javascript and asynchronous communications, created an awareness of a set of technologies nicknamed ajax (asynchronous javascript and xml); that plus the advent of a number of libraries that paper over implementation differences between different web browsers has more recently led to a re-evaluat...
Custom XUL Elements with XBL - Archive of obsolete content
keep this in mind when defining the content of the binding, because weird things can happen if you don't add "xul:" to your content nodes. <binding id="person"> in general, you should only have one binding per file. bindings tend to require many lines of code, and having more than one ends up making gigantic, unbrowsable files. on the other hand, if your bindings are small and have a strong
relationship with each other, it makes sense to keep them together. as for the css file, it's usually good to have a single file declaring all bindings in your extension. content under the content tag you define the xul content that will be displayed for your element. <content> <xul:hbox> <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /> <xul:vbox flex="1"> ...
...access to its methods and properties. in this case we're calling the remove method, which we will discuss later on. if you need to create a container element, or any other element that has child nodes, you can use the xbl children tag in your content to indicate the place where the child nodes will be inserted. the includes attribute gives you a little more flexibility with children, but it's ra
rely needed. one important thing to take into account is that you shouldn't use the id attribute in any content nodes. these nodes are part of the xul dom just like any other, and having an id attribute is bound to cause problems, given that you could have more than instance of your element in the same document and then multiple inner items with the same id. in order to work around this problem, the...
...pendency on specific scripts, and your tag behaves more like the rest. just like fields and properties, methods are easy to invoke if you have a reference to the object that corresponds to the node. we have experienced problems when calling methods and setting properties on xbl nodes right after they are created and inserted to the document. this is likely due to some asynchronous operation
related to node insertion. if you need to perform an operation to a node right after insertion, we recommend using a timeout to delay the operation (a timeout set to 0 works well). handlers the handlers and handler xbl elements are used to define event handlers for the element. we have a "click" handler that displays the greeting when the "person" element is clicked: <handler phase="bubbling" ...
Introduction - Archive of obsolete content
lla community. mozilla has spawned several products and projects, the most notable being the mozilla firefox web browser. firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies. version 1.0 of firefox was
released in november 2004, version 2.0 in october 2006, and version 3.0 in june 2008. this tutorial was written after firefox 3 was
released, and has been updated with time. while most of it should still work for creating extensions in firefox 3 (and even firefox 2), it is strongly recommended that you aim to support modern firefox versions, to encourage users to stay up to date with security fixes. ...
...sed in november 2004, version 2.0 in october 2006, and version 3.0 in june 2008. this tutorial was written after firefox 3 was
released, and has been updated with time. while most of it should still work for creating extensions in firefox 3 (and even firefox 2), it is strongly recommended that you aim to support modern firefox versions, to encourage users to stay up to date with security fixes. a
release that is more than 6 months old is likely vulnerable to published security bugs. firefox and other mozilla applications can be seen as composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built. the user interface is built with technology known as xul, and the platform is known as xulrunner. xu...
...of which the interface layer is built. the user interface is built with technology known as xul, and the platform is known as xulrunner. xul xul (pronounced "zool") is one of many technologies used for creating mozilla-based products and extensions. it is only one part of the development landscape, but given that it's practically exclusive to mozilla, it tends to be used to identify all mozilla-
related development. you'll sometimes read terms like "xul applications" and "xul extensions", but ra
rely will they refer to projects that are exclusively built with xul. it usually means that the projects were built using mozilla technologies. even this project, called xul school, covers several other technologies such as javascript, css, xbl and xpcom. xulrunner xulrunner includes the gecko rende...
The Essentials of an Extension - Archive of obsolete content
t that is not necessary. the parser ignores repeated spaces. the first word in a line tells firefox what it is that is being declared (content, skin, locale, or others mentioned later on). the second is the package name, which we will explain shortly. skin and locale packages have a third value to specify what locale or what skin they are extending. there can be multiple skin and locale entries
relating to different skins and locales. the most common case is having one skin entry for the global skin, classic/1.0, and multiple locale entries, one for each translation. finally, the location is specified. there are some additional options that can be included in the entries of a chrome.manifest file. they are documented in the chrome registration page. notably, we can have entries that are os...
.../content/browseroverlay.xul with this line, firefox knows that it needs to take the contents of browseroverlay.xul and overlay it on the main browser window, browser.xul. you can declare overlays for any window or dialog in firefox, but overlaying the main browser window is the most common case by far. now let's look at the contents of our xul file. we'll skip the first few lines because they
relate to skin and locale, and we'll cover them later. <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> the root element in the file is an overlay. other xul documents use the window or dialog tag. the element has a unique id, which you should have on most elements in your xul. the second attribute is the namespace, which is so...
...you need the properties file: xulschoolhello.greeting.label = hi! how are you? the whitespace around the equals sign is ignored. just like in install.rdf, comments can be added using the # character at the beginning of the line. empty lines are ignored as well. you will often want to include dynamic content as part of localized strings, like when you want to inform the user about some stat
related to the extension. for example: "found 5 words matching the search query". your first idea would probably be to simply concatenate strings, and have one "found" property and another "words matching..." property. this is not a good idea. it greatly complicates the work of localizers, and grammar rules on different languages may change the ordering of the sentence enti
rely. for this reason it's ...
List of Former Mozilla-Based Applications - Archive of obsolete content
utodesk maya 3d modeling tool switched off of gecko for help browser in version 8.5 blam feed reader switched to webkit in version 1.8.6 boxee media center software switched to webkit in version 1.0 epiphany browser switched from gecko to webkit flock social browsing flock switched from being firefox-based to chromium-based when it
released a new beta on june 16, 2010 jolicloud web operating system as of march 2010, rw/w reports jolicloud is on chrome/chrome os joost tv over internet switched from xulrunner-based client to a web application liferea news aggregator switched to webkit in version 1.6 manyone browser browser originally mozilla-based but now i believe the h...
...ernet software no longer available beonex communicator internet software last news item on site from 2004 chameleon theme builder inactive civil netizen p2p file delivery (email attachment replacement) site not updated since 2006 compuserve client internet software no longer available doczilla sgml/xml/html browser last
release on site from july 2005 fabula language learning application inactive galeon browser last news item on site from september 2006 gencatrss rss reader domain switched over to domain parking service ghostzilla browser archived version of ghostzilla site from 2005 homebase desktop operating environment for internet computers ...
...uary 2007 mobidvd dvd/vcd/cd ripping software site down mozilla suite internet application suite development shifted to firefox, thunderbird and seamonkey applications netscape navigator browser support for netscape ended on february 1, 2008 nvu web authoring tool development stopped in 2005 and is being continued as an unofficial bugfix
release by the kompozer project pogo browser from at&t site no longer accessible as of may 2009 pyro desktop desktop environment last news item on site from july 2007 script editor editor inactive skipstone gtk+ browser last news item on site from february 2008 xabyl visual xbl editor inactive xulplayer media playe...
Developing New Mozilla Features - Archive of obsolete content
be new to even seasoned developers. our cross-platform component model (“xpcom”) is similar to com, but you’ll want to make sure you use it well before going too far with your project. and of course, we have a set of coding practices to help everyone live together. life will be much easier if your team has one or more members who are already familiar with and to the mozilla world. develop
relationships with existing developers in the area of your feature if you want to add a big new feature to mail, spend some time helping the existing mail developers. talk to the developers about fixing some of their bugs. fix some bugs. have some of your qa team get involved. once you’re familiar with an area, do the completely unexpected and write a piece of documentation. developers will be gra...
...re an informed developer who is interested and able to contribute. this will be much easier if you’ve been working on suggestion two. designate someone on your team to be involved with the mozilla.org cvs repository on a regular basis the ease of integrating your feature will increase if someone on your team is intimately involved with the source tree. reviewing the tree only at the milestone
releases is risky if you're doing significant development. something may have changed that will cause you extra work. and you'll miss the early discussion phase when you can add your perspective to the design work. if you absolutely don't have the resources to do this, then plan for extra integration time. work hard to have a developer involved in the core code who is connected to what you are doing...
...to design your feature so that it can be implemented and reviewed in manageable size patches if you can implement and submit core elements first and build on them in subsequent patches, so much the better. if you think your feature can only be implemented and reviewed in one enormous chunk, ask for design help in the appropriate newsgroup and/or from the developers with whom you have established
relationships. if it is not possible to submit your feature in manageable size patches and you submit a 500k patch, be prepared for several months of review and revision before the patch is ready to be checked in it may not take this long. but if your team has worked for months on a feature, it is going to take reviewers new to the code a long time to work their way through it. and if it’s not po...
Error Console - Archive of obsolete content
le is deprecated in firefox, and is now only made available if you set the devtools.errorconsole.enabled preference to true. use the web console instead, for web content, or the browser console for chrome content. the error console is a tool available in most mozilla-based applications that is used for reporting errors in the application chrome and in web pages user opens. it reports javascript-
related errors and warnings, css errors and arbitrary messages from chrome code. in firefox, the error console can be opened from the tools menu or by ctrl-shift-j. for information about what javascript exceptions get logged into the error console, and how to make all exceptions get logged, read the article exception logging in javascript. see setting up extension development environment#development...
...fox and extensions in the error console. before gecko 1.8.1 (firefox 2), it was called javascript console (see bug 265871). types of errors error usually a syntax error that prevents the program from compiling. warning usually lets the program compile but warns of bad coding and suggests design flaws. message very similar to warning, used very ra
rely. manipulating data displayed in error console information displayed in error console can be accessed and manipulated through the console service. extensions can write to the error console from javascript using components.utils.reporterror, or if you're fine with logging to the os-provided console, dump(). to bring up error console from within a browser or mail window, us...
...o bring up error console from within a browser or mail window, use the function tojavascriptconsole(). ...
JavaScript Client API - Archive of obsolete content
ut of the box (history, bookmarks, etc). it is possible for other components, including 3rd party extensions, to supplement the set of engines and synchronize their own data. a word of warning: the javascript client api is still a young component and is continuing to evolve. therefore, developers outside of the sync core should know that their code could require significant refactoring in future
releases. before developing against the javascript api, it is recommended to speak to developers of the api. see https://wiki.mozilla.org/services/sync for their contact information. to create a custom sync engine to synchronize a new data you, you'll need to define an engine object that extends the base syncengine object. this involves writing types that extend the store, tracker, and record types ...
...e). update(record) the argument is a record which has been remotely modified; your store should locate the matching local item (presumably using the guid, which is available in record.id) and update it to the new values provided in record. remove(record) the argument is a record which has been remotely deleted; your store should locate the matching local item and delete it. (don't
rely on the record that is passed in to this method having any of its attributes set correctly except for .id. the .id should be al you need, anyway.) applyincomingbatch : todo example store skeleton // maintains the store of all your foo-type items and their guids. function foostore(name) { store.call(this, name); } foostore.prototype = { __proto__: store.prototype, itemexists: functio...
...quire syncing. it also has to maintain a "score", which is a number from 0 to 100 which represents "how badly does this data type need to be synced right now". getting your tracker to track changes in the underlying data is probably easiest to do if you register your tracker as an observer, so that it can receive notifications from one or more mozilla components. what events you listen for is enti
rely up to you. you can find out more about registering as an observer here: [link]. the score the '''score''' is stored in this.score, a variable defined by the base tracker class. set your score by assigning a value to this.score. the score number is used by the scheduler to decide when your engine will be synced. setting it to zero means "i have no need to sync". the higher you set this number, ...
Creating a Help Content Pack - Archive of obsolete content
ribute is required. nc:defaulttopic will hold the rdf:id of the topic you want displayed when the viewer first loads if none has been specified. this attribute also specifies what topic is loaded when the user hits the home button in the viewer. we'll get to exactly how to fill in this attribute later. this attribute is optional, with fallback to the value welcome. nc:base contains the base url
relative to which the help content referenced in the descriptor file is located. for example, if your glossary, index, and table of contents rdf files are all located at chrome://myapp/locale/help/*, then you could put chrome://myapp/locale/help/ here and use only the actual file names without path when needed later. you don't actually need this attribute if you don't want it, but it's a useful short...
...t, we need to describe where to find the glossary, index, and table of contents. (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. the location of each of the glossary, index, and table of contents data sources is stored in one rdf:description element contained within one rdf:li element, like so: <rdf:seq> <rdf:li> <rdf:description nc:panelid="glossary" nc:datasources="chrome://foo/...
...ngs> <rdf:seq> </rdf:seq> <nc:subheadings> </rdf:description> </rdf:rdf> this forms the outer framework of a glossary description file. to add data to it, add one of the following per entry in your glossary within the rdf:seq above: <rdf:li> <rdf:description nc:name="" nc:link=""/> </rdf:li> the rdf:li element serves pu
rely to contain each separate entry. the rdf:description element describes the glossary entry. it has two required attributes: nc:name and nc:link. nc:name is the name for the entry - it's what's currently displayed in the glossary as the entry's title. nc:link contains a uri referencing what will be displayed in the viewer when the entry is accessed. the index file one important note on the index...
Twitter - Archive of obsolete content
in fact it's hardly more than syntactic sugar for doing xmlhttprequests. to use this library, you therefore need to be familiar with twitter's own api. (it's easy!) methods each method in twitter's api maps to a method here. ...
...omplete, etc. example: jetpack.lib.twitter.statuses.update({ data: { status: "o frabjous day!" }, username: "basic_auth_username", password: "basic_auth_password", success: function () console.log("hey!") }); user authentication you can supply a username and password to methods that require authentication using the second, more advanced call style described above. ...
...faq see twitter's api faq. since jetpack's twitter library is a very thin wrapper around twitter's api, most everything there applies here, and not much applies here that doesn't apply there. ...
slideBar - Archive of obsolete content
note: this page documents the jetpack prototype, which is no longer under active development. read the experiment report for what we learned from it and the blog post announcing the first sdk
release for what we're up to next! slidebar is a reinvention of the old sidebar features of browsers. they allow quick access to a wide range of both temporary and permanent information at the side of your browser window. when a slidebar feature is selected its contents will be revealed from behind the current webpage. it currently under development and lives in the future. jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolauto
reloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar in...
...intpersistboolauto
reloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance. ...
...loadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance. ...
Microsummary XML grammar reference - Archive of obsolete content
/1999/xsl/transform the <generator> element the <generator> element is the root tag for all microsummary generators, and should contain the remainder of the xml code describing the generator. attributes: name (required) a descriptive, human-readable name for the microsummary created by the generator. uri (optional) a valid uri uniquely identifying the generator. only
relevant for generators dynamically created by firefox code and extensions. generators installed from the web via nssidebar::addmicrosummarygenerator are identified by the remote url from which they were downloaded, and firefox ignores the value of this attribute for them. child elements: <template> (required) defines how to transform pages into their microsummaries. <pages> (r...
...for example, the regular expression http://www\.example\.com/ matches both the url http://www.example.com/ and the url http://www.evil.com/http://www.example.com/, but the regular expression ^http://www\.example\.com/ matches only the first of those two urls. see the reference core_javascript_1.5_reference:global_objects:regexp for the details of the regula...
... the <condition> element the optional <condition> element specifies an xpath boolean expression along with a conditional interval of time, in minutes, that must elapse between updates if the expression evaluates to true when evaluated against the page being summarized. it must be a child of the <update> element. ...
Mozilla Application Framework in Detail - Archive of obsolete content
we provide an xml-based language called xul for defining the user interface of your application. css is used to style these ui's and dtd's are used to localize the textual information - making your application extremely flexible and able to be utilized across the globe. ...
... xul provides an excellent answer for organizations with heterogeneous computing environments. customized xul applications with significant business logic can be written once, and used on the range of platforms that exist within the organization. in addition, if the organization maintains sophisticated, interactive websites, it will already possess a wealth of technical expertise that will be
relevant for creating xul applications. in addition to the technologies already mentioned, we go even further by allowing you to even create your own custom interface widgets. don't feel limited by the widgets that the framework already contains! xbl (extensible binding language) allows you to expand your library of interface elements, and even construct your own xml language for defining your ui. fo...
...ecko easily embeddable into applications and devices. full browser functionality: gecko allows any desktop application as well as new devices, products and appliances to be web-enabled, with complete browser functionality. supported standards and features include data transport protocols, multilingual character data, image data, java and plugins. open source: gecko represents the first software
release from netscape and mozilla.org's open source initiative. by harnessing the talent of thousands of developers worldwide, mozilla.org has accelerated internet software development and increased the quality of the final product, delivering unmatched support for web standards. in addition, independent software developers and corporate information technology departments now have complete access to ...
RDF Datasource How-To - Archive of obsolete content
an 'important friend'." statements from one datasource can be combined with statements from another datasource using a composite datasource. by combining statements from the imap datasource and address book datasource, above, we'd be able to identify the sender of "message 126" as an "important friend". deciding on a vocabulary the vocabulary is the set of properties that you will use to express
relationships between elements (resources and literals) in your data model. the first question that you must answer is "should i use an existing vocabulary, or invent my own?" a reasonable answer is, "use an existing vocabulary unless you absolutely must invent your own." this will allow your datasource to be integrated with other datasources with a minimum of effort. there are several existing vocab...
...r example, you may choose to delegate to the in-memory datasource, which is a generic datasource that implements nsirdfdatasource. typically, you provide a parser for reading in some sort of static storage (e.g., a data file); the parser translates the datafile into a series of calls to assert() to set up the in-memory datasource. when flush() is called, or the last reference to the datasource is
released, a routine walks the in-memory datasource and re-serializes the graph back to the original file format. for examples of an implementation like this, look at the rdf/xml datasource or the bookmarks datasource. you may want to choose this implementation if your primary goal is to "wrap" a legacy data store. this implementation may cause problems if your data store can be modified "on the fly" ...
...rce would be accessable as follows: nsirdfservice* rdf; rv = nsservicemanager::getservice(krdfservicecid, kirdfserviceiid, (nsisupports**) &rdf); if (ns_succeeded(rv)) { nsirdfdatasource* mydatasource; rv = rdf->getdatasource("rdf:my-datasource", &mydatasource); if (ns_succeeded(rv)) { // ...do something to mydatasource here... ns_
release(mydatasource); } nsservicemanager::
releaseservice(krdfservicecid, rdf); } displaying rdf as content now that you've gone through all this pain to expose your information as a datasource, you probably want to see it. using xul, you can display the contents of your datasource in a tree control, a menu, or a toolbar. in fact, you can convert rdf to an arbitrary content model using xul t...
Frequently Asked Questions - Archive of obsolete content
filters and smil based animation that have still to be implemented in mozilla. however, mozilla's implementation already supports some things that adobe's lacks, particularly parts of the xml and svg doms. for example we support svg exceptions and svgtransform objects. ...
...see this document for information on how to install it. can you have both native svg support and an svg plug-in installed? yes. if the plug-in works with the equivalent non-svg version of mozilla, then it should also work in the svg enabled version. ...
...filter> and working on items that need to be done before turning on svg by default. after recently implementing gradients, scooter is working on fixing some issues that remain outstanding and fixing <switch>. jonathan is working on various bugs, especially those that need to be fixed before svg can be enabled in the official builds. david continues to create svg enabled nightlies and answer build
related questions as he has done for some time. finally, occasional fixes are provided by other mozilla hackers. how can i get in contact with you? the best way to get in contact with us is to join the #svg channel on mozilla.org's irc server. this is where most of us hang out to discuss issues
relating to the svg implementation. if you don't have an irc client then install chatzilla into mozilla/m...
Table Cellmap - Archive of obsolete content
tained in nscellmap.cpp and nscellmap.h this document does currently describe only the quick lookup part of the game, border collapse is still far away cellmap data - overview the entries in the cellmap contain information about the table cell frame corresponding to a given row and column number (celldata.h). further it contains info whether this entry is a row- or colspan. 79 // this union
relies on the assumption that an object (not primitive type) does 80 // not start on an odd bit boundary. if mspan is 0 then morigcell is in effect 81 // and the data does not represent a span. if mspan is 1, then mbits is in 82 // effect and the data represents a span. 83 union { 84 nstablecellframe* morigcell; 85 long mbits; 86 }; the idea behind this construction is...
... mbits; 86 }; the idea behind this construction is a entry in the cellmap can be either the origin of a row- or colspan (a cell cell without a defined row- or colspan attribute assumes 1 as a default value), or a entry which is only covered by a row- or colspan. entries which are a origin have a direct corresponding tablecellframe. entries which are only spanned don't have that direct
relationship. they belong to a entry which has a direct
relationship to a tablecellframe. now that union uses the fact all addresses of real tablecellframes are aligned at even boundaries, or in other words they cant have an odd address. if the address is odd then it holds some other info (mbits). easy table cellmap just imagine a 2x2 table. <table> <tr><td>cell 1</td><td>cell 2</td></tr> <tr><...
...place in the cellmap. this can produce enormous costs once the cellmap contains large holes that are not caused by zero spans, this is at least a o2(n) algorithm. the following routines seem to be hot spots performance wise: nscellmap::colhasspanningcells nscellmap::rowhasspanningcells nscellmap::rowisspannedinto users of nscellmap::getdataat outside nscellmap.cpp the border collapse code
relies on the cellmap. the collapsing of rows and columns uses the cellmap. and finally the line iterator methods which are used for arrow navigation through a table. original document information author(s): bernd mielke last updated date: september 27, 2003 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a cr...
Tamarin - Archive of obsolete content
s a javascript engine written in c++. it currently implements adobe actionscript™ 3 (a superset of ecmascript edition 3) and is embedded within the adobe® flash® player versions 9 and later. tamarin's jit-compiler, nanojit, is also used in tracemonkey ergo spidermonkey, which is mozilla’s javascript engine in firefox. tamarin is available under the mpl/gpl/lgpl tri-license.
releases
release tracking information on current, past, and upcoming
releases of tamarin. documentation adobe actionscript virtual machine 2 (avm2) overview (pdf, 400k) the instructions, architecture, and file format supported by the avm2. see also the possible errata. tamarin build documentation how to get, build, and use tamarin. ...
... collector. nanojit lir in nanojit, lir is the source language for compilation to machine code. tamarin strings documentation the implementation of tamarin strings has changed. this page is a how-to about the changes, and what can be done to adapt source code to the changes. ...
...s page is a how-to about the changes, and what can be done to adapt source code to the changes. tamarin doxygen documentation documentation for the latest
release. ...
Treehydra Manual - Archive of obsolete content
treehydra simply reflects the gcc internals structures into javascript. for now, the best way to learn gimple is to look at existing code as there is little newbie documentation to be had. callbacks and gcc intermediate representations like dehydra, treehydra sends program representations to the user javascript via callbacks. ...
...states. if the state is bottom at a certain program point, that means that program point is unreachable. in esp, this is esp.not_reached. top. this is a special abstract state that represents all possible states. top is also used to name a special abstract value that represents all possible concrete values. thus, top means the analysis has no information about that value or state. meet. meet is a
relation on abstract values used to filter states at conditional statements. for example, if the current abstract value of a variable x is nonzero, and the analysis goes inside an if statement with the condition x == 1, then in the new abstract value of x will be nonzero meet 1. esp uses a user-defined meet function supplied to the analysis constructor that should return the intersection of two abstr...
...on x == 1, then in the new abstract value of x will be nonzero meet 1. esp uses a user-defined meet function supplied to the analysis constructor that should return the intersection of two abstract values. it is also acceptable for meet to return a value that contains the intersection--this may cause the analysis to have more false positives but will not introduce false negatives. join. join is a
relation on abstract values used to merge states at control flow merge points. for example, if esp reaches a point where two control flow paths merge, and on one side the abstract value of x is 1, and on the other side, the abstract value of x is 2, then the new abstract value of x will be 1 join 2. esp uses a built-in join function where join(a,a) -> a and join(a,b) -> top for a != b. ...
Venkman - Archive of obsolete content
examine breakpoints. learning the javascript debugger venkman written by svend tofte to the javascript programmers who are not familiar with other debugging tools. venkman faq answers to common questions on venkman. venkman internals notes on venkman source code. venkman development page older news and
releases. view all... brief history in 1998, john bandhauer was in charge of creating the netscape 4.x javascript debugger. in order to keep things modular, he began by creating a mid-level javascript debugging api known as js/jsd. this api augments the existing javascript api, providing clients with a useful set of debugger functionality implemented in c. bandhauer then went on to ...
...xul, which allows venkman to be fully cross-platform. venkman is named after the character dr. peter venkman, played by bill murray in the movies ghostbusters and ghostbusters ii. getting venkman firefox and thunderbird the latest version of javascript debugger is available from firefox add-ons. mozilla suite and seamonkey these
releases come with venkman pre-installed. on windows, it is an install option; choose advanced install. also available from firefox add-ons as an extension. nvu and kompozer javascript debugger extension version 0.9.84 is available from nvu's downloads page. we encourage you to use the latest available version 0.9.87.1 (or higher) with firefox instead. source code ...
...llowing url: http://hg.mozilla.org/venkman/summary community view mozilla forums... 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.
related topics javascript, web development, developing mozilla original document information author(s): robert ginda other contributors: doctor unclear last updated date: july 13, 2007 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...
XML in Mozilla - Archive of obsolete content
this page is outdated. please help updating it with current information. supported core xml w3c recommendations the core xml support includes parsing xml without validation (we use the expat parser), displaying xml with css, manipulating xml documents with scripts via dom, associating stylesheets with xml documents, and namespaces in xml. the core support is very good with few bugs. dtds and other external entities mozilla does not load external entities from the web. mozilla can load external entities whose system identifier uses the chrome protocol. ...
... the core support is very good with few bugs. dtds and other external entities mozilla does not load external entities from the web. mozilla can load external entities whose system identifier uses the chrome protocol. this feature is used mainly to localize mozilla to different languages (the ui strings are stored in external dtd files). another exception is an entity whose system identifier is a
relative path, and the xml declaration states that the document is not standalone (default), in which case mozilla will try to look for the entity under <bin>/res/dtd directory. mozilla may also make an exception with xhtml documents, see below. mozilla will read internal (dtd) subsets, and in special circumstances external dtds as explained above and will use this information to recognize id type at...
...s to xml. likewise, the cascading style sheets (css, w3c recommendations and drafts) style language can be used to style xml documents. the code for most the core xml can be found in the following directories on the mozilla mercurial repository: content/xml/, parser/expat/ and parser/htmlparser/. the newsgroup to discuss xml in mozilla depends a bit on the nature of the question. for example, dom
related questions should probably be discussed in the mozilla.dev.tech.dom newsgroup, while style issues should be discussed on mozilla.dev.tech.css and so on. the catch-all newsgroup for xml discussion is mozilla.dev.tech.xml. specification or technology status and/or further documentation xml 1.0 w3c recommendation namespaces in xml w...
patch - Archive of obsolete content
summary updates an existing component. method of install object syntax int patch ( string registryname, string xpisourcepath, object localdirspec, string
relativelocalpath); int patch ( string registryname, installversion version, string xpisourcepath, object localdirspec, string
relativelocalpath); int patch ( string registryname, string version, string xpisourcepath, object localdirspec, string
relativelocalpath); parameters the patch method has the following parameters: registryname the pathname in the client version registry for the component that is to be patched.this parameter can be an absolute pathname, such as /royalairways/royalsw/executable or a
relative pathname, such as executable. typically, absolute...
...me the pathname in the client version registry for the component that is to be patched.this parameter can be an absolute pathname, such as /royalairways/royalsw/executable or a
relative pathname, such as executable. typically, absolute pathnames are only used for shared components, or components that come from another vendor, such as /microsoft/shared/msvcrt40.dll. typically,
relative pathnames are
relative to the main pathname specified in the initinstall method. this parameter can also be null, in which case the xpisourcepath parameter is used as a
relative pathname. note that the registry pathname is not the location of the software on the computer; it is the location of information about the software inside the client version registry. version an ...
...od without a version argument the value from initinstall will be used. xpisourcepath a string specifying the location of the differences file within the xpi file. localdirspec an object representing the directory in which the subcomponent that is to be patched resides. you create this object by passing a string representing the directory to the getfolder method.
relativelocalpath a pathname
relative to the localdirspec parameter that identifies the subcomponent that is to be patched. you must always use forward slashes (/) in this pathname, regardless of the convention of the underlying operating system. if this parameter is blank or null, xpisourcepath is used. returns an integer error code. for a list of possible values, see return codes. descri...
A XUL Bestiary - Archive of obsolete content
platform-specific files are part of that xul interface. by contrast, the skin is just the css and referenced graphics for a xul file, the localization strings are just a dtd, and the content is just the xul. the chrome url this concept of a chrome as an integrated, dynamic thing in some way divorced from the "appcore" is realized in the use of the chrome url to point to chunks of xul and their
related files. the chrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine. in the example above, the chrome is simply a skin file to be loaded into the xul file, but the chrome can also be used to load whole chr...
...ierarchy of xul widgets: browser, menu, menuitem, and so on. the dom and the aom form a kind of continuum, the whole of which is manipulable from the standards upon which xul is based. near synonyms for xul there is much confusion about the words that begin with "x" in the mozilla open source project. the mozilla xparchitecture section below describes xpcom, xpidl, and xpconnect, three somewhat
related technologies for getting access to application code from the interface. this section describes xul, xptoolkit, and xpfe, which are in some respects synonymous and in others quite different. in briefest terms, xul is the xml-based language used for creating interfaces, xptoolkit is the set of xul widgets (menus, toolbar, etc.) actually assembed for this purpose -- the building blocks of the i...
...the xml-based language used for creating interfaces, xptoolkit is the set of xul widgets (menus, toolbar, etc.) actually assembed for this purpose -- the building blocks of the interface, as it were -- and xpfe, the cross platform front end, is the front end that has been created from xptoolkit. the differences here are significant: xul is the universe of elements, attributes, syntax, rules, and
relationships, while xptoolkit is really the finite set of interface-specific elements created in xul. the xpfe is what's been created out of the xptoolkit. a loosely analogous
relationship might be that xul, xptoolkit, and xpfe are to one another what html, the actual html tags, and an html web page are to one another, respectively. xul parts people sometimes get confused about the syntax for desc...
OpenClose - Archive of obsolete content
for any type of popup, either a menupopup, a panel, or a tooltip, including ones that can be opened via other means, for instance, a popup attached via the context attribute. the openpopup method takes six arguments which are used to specify how and where the popup should be positioned. these will be described below. the openpopup method is defined as follows: void openpopup(in domelement ancho
relement, in string position, in long x, in long y, in boolean iscontextmenu, in boolean attributesoverride); first an example: somepopup.openpopup(anchor, "after_start", 0, 0, false, false); this example will open a popup located just underneath another element referenced by 'anchor'. this emulates how a menu is opened, ...
...upopup for you. note that while the open attribute applies to the parent menu or button, the openpopup method applies to the menupopup element. the anchor of a popup is the element node that the popup is displayed next to. for instance, to have a popup appear next to a button, pass a reference to this button as the first argument to the openpopup method. in this next example, the popup is opened
relative to the document element. somepopup.openpopup(document.documentelement, "end_before", 0, 0, false, false); the second argument to openpopup is the anchor position, which specifies which side of the anchor the popup is positioned on. for instance, the value 'end_before' as used in the above example, indicates to place the left edge of the popup along the right edge of the the anchor element...
...argument to the openpopup method is null, this creates an unanchored popup. in this case, the second argument, the position, is not used, so an empty string can be used. here is an example: somepopup.openpopup(null, "", 60, 50, false, false); an unanchored popup uses the x and y offsets, in this case 60 and 50 as offsets from the edge of the window or frame. this way, a popup can be positioned
relative to the window, rather than
relative to a specific node. for example, you might wish to open a popup at the current mouse position when the mouse is clicked. 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...
Popup Guide - Archive of obsolete content
want to use the extra space for a button for each command. a menu is normally hidden, and when activated, a popup appears containing the list of commands. the user may select a command and the menu disappears again. a menu is created using the menupopup element. it displays items in a list, can display submenus, and provides keyboard navigation between the items. a menu should only contain menu
related elements. context menus a context menu is like a regular menu except that the commands it contains apply to what the user had clicked on to open the context menu. often, depending on what was clicked on, certain commands may be hidden if not applicable to that element. panels a panel can contain any type of content. it is useful when you wish to display some controls temporarily over the ...
... content. it is useful when you wish to display some controls temporarily over the existing ui. for example, a popup search field could be used to allow searching and will disappear when a search term has been entered. a panel is created using the panel element. floating panels a floating popup is a type of panel with a titlebar and acts like an auxiliary window. usually it would contain tools
related to the main window, or an inspector which displays properties of a selected element. tooltips when the mouse is positioned over a ui control, a tooltip provides a small box with descriptive help about that control. when the mouse is moved away from the control, the tooltip automatically disappears. a tooltip can be created by setting the tooltiptext attribute on an element or by using the ...
...ndling keys within popups. platform specific menu considerations see special per-platform menu considerations for some notes about handling menus on certain platforms, for instance creating the application menu on a macintosh. using popups in extensions extensions may add additional menuitems either to a menu on the menu bar or to the context menu. in addition, an extension may add an enti
rely new menu. for example, an extension might wish to add a new command on the tools menu to open a dialog specific to the extension. another common task is to create an extension which adds an item to the browser's context menu. see using menus and popups in extensions for details. ...
Containment Properties - Archive of obsolete content
er. however, the simple query syntax may also iterate over a single predicate pointing out of a resource, rather than use the children. this allows you to iterate over a non-container. to do this, use the containment attribute on the root node, set to the predicate to iterate over. let's look back at the very first example again. ...
...e, set to the predicate to iterate over. let's look back at the very first example again. it doesn't have any containers, but we may want to iterate over the
relateditem predicate using the simple query syntax. we can add the containment attribute to do this. <vbox datasources="template-guide-ex1.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/
relateditem"> <template> <rule> <label uri="rdf:*" value="rdf:*"/> </rule> </template> </vbox> instead of iterating over a container, this example iterates over a specific predicate. this attribute is useful when the rdf data is structured in such a way that an rdf container isn't used. the builder treats the predicate in the containment attribute as an indicator that an element is...
...xtended template syntax. that is, in addition to iterating over the children, it will iterate over the predicates listed in the containment attribute. for example, the following is equivalent to the previous example, except that the full query syntax is used. <vbox datasources="template-guide-ex3.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/
relateditem"> <template> <query> <content uri="?start"/> <member container="?start" child="?child"/> </query> <action> <label uri="?child" value="?child"/> </action> </template> </vbox> try this example. what happens is that the builder generates additional possible values for the ?child variable, so it creates an additional result for each one. « previous...
RDF Modifications - Archive of obsolete content
cription"); var target = rdf.getliteral("one of the thirty or so egyptian obelisks"); datasource.assert(source, predicate, target, true); the assert call adds a new triple to the rdf datasource. when this happens, any templates observing the datasource will be notified via the rdf observer's onassert method. the second situation when notifications are made is when a datasource is being loaded or
reloaded. actually, internally, this isn't any different than the other notifications, but it is worth discussing separately. when the rdf parser loads rdf/xml, it starts with a new empty datasource, and as the parser parses the input data, it calls the datasource's assert function to add each found triple. in effect, this isn't any different than adding the same set of triples yourself using the ass...
...internally, this isn't any different than the other notifications, but it is worth discussing separately. when the rdf parser loads rdf/xml, it starts with a new empty datasource, and as the parser parses the input data, it calls the datasource's assert function to add each found triple. in effect, this isn't any different than adding the same set of triples yourself using the assert method. when
reloading a datasource, you might think that the rdf parser removes all the existing data, loads the new data, and adds it to the datasource. or, you might think that it creates a fresh datasource with the new data. actually, the parser does something smarter. when
reloading a datasource, it keeps the existing rdf triples intact, and only modifies the datasource based on what has changed. when parsin...
...riples intact, and only modifies the datasource based on what has changed. when parsing, any triples that already exist are not added again. if a triple does not exist yet, it will be added. any triples that don't exist in the new data but were there before are removed. this means that the observer will be called only for the triples that differ between the new and old version of the data. if the
reloaded datasource hasn't changed, the builder won't receive any notifications. this saves a lot of extra work. the rdf observer also has two methods onbeginupdatebatch and onendupdatebatch. these are called when performing a lot of operations on a datasource. when changing the datasource, the changes are surrounded by begin and end batch calls. then, rather than notify on every change, the datasour...
Sorting Results - Archive of obsolete content
en the reference node is an rdf seq container and the results are in that container, however, the template builder orders the results in the order the items appear in the seq. for instance, the photos are listed in the same order in this example as they appear in the seq in the datasource. this method of sorting a seq works best for the simple query syntax since it is obvious how the starting ref
relates to the end member results (they are just the children), or for extended syntax queries that follow a similar pattern. for more complex queries, this natural sorting will not work, because the sort service assumes that the starting ref resource is the container and the end results are the children. in this case, the natural order of the results will just be the order that the template builder ...
...the description variable for each row. in almost all situations however, you would normally sort using the same variable used for the label value. however, one situation where this is not desirable is if the displayed values would not generate the correct order as there is a different representation that is more accurate. for example, the date 'may 15' would appear after 'august 24' when sorted pu
rely alphabetically but before it when sorted chronologically. for rdf datasources, another way to sort by dates is to use the the parsetype="date" construct in the rdf datasource. this marks a literal as being a date value rather than a string. the builder will recognize this and sort chronologically instead. this also has the advantage that the dates will be displayed according to the user's curren...
...will be sorted by title. when sorting, the predicate specified in the sort attribute for the result is used to determine where in the content the generated output should be inserted. the is similar to using a variable but any predicate may be used, not just one that is used in the template. changing the sort to change the sorting for a template's generated contents, you can either change the sort
related attributes and rebuild the template, or you can call the sort method of the sort service: var listbox = document.getelementbyid("alistbox"); var sortservice = components.classes["@mozilla.org/xul/xul-sort-service;1"]. getservice(components.interfaces.nsixulsortservice); sortservice.sort(listbox, "?gender", "descending"); this code will sort a listbox by title in a descen...
Template Builder Interface - Archive of obsolete content
e rules and regenerates the content. essentially, the rebuild method instructs the builder to remove any existing information and reconstruct it from the beginning. the only difference is that the datasource has already loaded so the data will be the same. however, this is often used if you modify the datasource or modify the rules. for rdf datasources, the builder's refresh method, however, will
reload the datasources. it will not rebuild the template, but we'll see in a later section why this is not usually necessary. to summarize, the refresh method
reloads the data, whereas the rebuild method reconstructs the content. the builder is accessible to unprivileged code, so the rebuild and refresh methods may be called by remote code. changing the datasource you can modify the datasource that i...
...h the ref attribute (or the ref property) and the template will be rebuilt automatically. in the example above, there will be two datasources attached to the tree. they will both be loaded and the template reconstructed. note that if one of the datasources is already loaded it will not be loaded again. this is convenient when you want to simply add a new datasource to an existing template without
reloading existing data. if you do want to
reload the data, you can call the builder's refresh method: tree.builder.refresh(); this will
reload the datasource attached to the template. if there is more than one datasource, as above, all of them will be
reloaded. due to the nature of the way templates are updated, you don't usually need to rebuild a template after a refresh call, although there may s...
...you wouldn't be able to specify a value for the datasources attribute, and a template builder would not be attached to the element. in a chrome context, the datasource 'rdf:local-store' is always included even if you don't specify it. this is something to watch out for if you are going to be manipulating the composite datasource. one more note: the datasources attribute may use either absolute or
relative urls.
relative urls are
relative to the xul document the corresponding element is in. the rdf service's getdatasource method however, only accepts absolute urls. so you will need to use the full path in this situation. « previousnext » ...
Box Objects - Archive of obsolete content
« previousnext » this section describes the box object, which holds display and layout
related information about a xul box as well as some details about xul layout. about mozilla layout mozilla divides things into two sets of trees, the content tree and the layout tree. the content tree stores the nodes as they are found in the source code. the layout tree holds a different tree of nodes for each individual component that can be displayed. the layout tree holds the structure as the nodes are expected to be displayed there is not necessarily a one to one
relationship between content and layout nodes. some content nodes may have several layout objects, for example, each line of a paragraph has a separate layout object. conversely, some content nodes have no layout objects at al...
...raph has a separate layout object. conversely, some content nodes have no layout objects at all. for instance, the key element doesn't have any layout objects since it isn't displayed in any way. similarly, any element that has been hidden will not have a layout object either. the dom is generally used only to get and modify information pertaining to the content or structure of the document. it's
relatively simple to determine what kind of content tree node will be created for a given element. a xul element, for example, will have a xulelement type of content node. the layout objects that will be created are determined in a more complex manner. various pieces of information are used such as the tag name, the attributes on an element, various css properties, the elements and layout objects aro...
...the layout objects are constructed but it is quite useful to at least have at least the knowledge of what is described above of xul layout for more advanced xul development. box objects the layout objects are not accessible to the developer for manipulating. they are internal to the xul layout components. however, xul provides some helper objects, called box objects, which can provide some layout
related information. as the name implies, they are available for all box-based elements. there are several subtypes of box object, although only a couple of them are generally used. the others have functions which are more easily accessible by methods mapped directly onto the element, since those types are generally only used with one particular element. the base box object, or the interface nsiboxob...
XUL Structure - Archive of obsolete content
likewise, xul specific features such as overlays and templates are only available in xul documents. this distinction between documents is important. it is possible to use many xul features in html or xml documents since they aren't document type specific; however other features require the right kind of document. for instance, you can use the xul layout types in other documents since they don't
rely on the xul document type to function. to summarize the points made above: mozilla renders both html and xul using the same underlying engine and uses css to specify their presentation. xul may be loaded from a remote site, from the local file system, or installed as a package and accessed using a chrome url. this last option is what browser extensions do. chrome urls may be used to access ...
...amined using a zip utility. for instance, you can open the jar files in mozilla's chrome directory to see the basic structure of a package. although it's normal to combine the files into a jar file, packages may also be accessed in expanded form into a directory. although you don't normally distribute a package this way, it is handy during development since you can edit the file directly and then
reload the xul file without having to repackage or reinstall the files. by default, mozilla applications parse xul files and scripts, and store a pre-compiled version in memory for the remainder of the application session. this improves performance. however, because of this, the xul will be not be
reloaded even when the source files are changed. to disable this mechanism, it is necessary to change t...
...files go here -- global -- global skin files go here -- . . . again, this directory structure isn't necessary and is used for convenience. you can actually put all the files in one directory at the top level and not use subdirectories. however, for larger applications, subdirectories are used to separate the different components. in the example above, a directory exists for theme
related files for the browser and another for global theme
related files. the global directory contains skin files that are general to all packages. these files will apply to all components and will be included with your own standalone applications. the global part defines the appearance of all of the common xul widgets, whereas the other directories have files that are specific to those applications...
Using Remote XUL - Archive of obsolete content
ds into the iframe when we first load the xul document. the iframe's flex attribute tells the browser to stretch the iframe to fill the space available to it. without it, the iframe's size would be a fixed default and wouldn't change when the user resized their window. [optionally show what this looks like] the value of the flex attribute determines the extent to which the element will stretch
relative to other flexible elements. an element with a flex of "2" is twice as flexible as an element with a flex of "1", so the first element might show up as twice as wide as the second. in our case, the iframe will be the only flexible element in our document, so we don't have to worry about its value and give it a standard value of 1. [optionally add something about how flex only applies to one ...
... as an element with a flex of "1", so the first element might show up as twice as wide as the second. in our case, the iframe will be the only flexible element in our document, so we don't have to worry about its value and give it a standard value of 1. [optionally add something about how flex only applies to one axis] note that for remote xul documents you can see changes you make to the ui by
reloading the document with your browser's "
reload" function, just as with a typical html page. source | rendered step 3: menus and buttons the mozilla.org web site uses an html navigation bar on the left-hand side of its pages to provide site navigation. the bar consists of a set of links organized into four main categories: the mozilla organization, developer docs, testing, and tools. the bar ...
...<menuitem label="hacking" value="https://www.mozilla.org/hacking/" /> <menuitem label="get the source" value="https://www.mozilla.org/source.html" /> <menuitem label="build it" value="https://www.mozilla.org/build/" /> </menupopup> </menu> <menu label="testing"> <menupopup> <menuitem label="download" value="https://www.mozilla.org/
releases/" /> <menuitem label="report a bug" value="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided" /> <menuitem label="bugzilla" value="https://www.mozilla.org/bugs/" /> <menuitem label="bug writing" value="https://www.mozilla.org/quality/bug-writing-guidelines.html" /> </menupopup> </menu> <menu label="tools"> <menupopup> <...
button - Archive of obsolete content
event handlers can be used to trap mouse, keyboard and other events. it is typically rendered as a grey outset rectangle. you can specify the label of the button using the label attribute or by placing content inside the button. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. dlgtype type: one of the values below the dialog type of the button, used only when the button is in a dialog box. you can use this feature to replace the standard dialog box buttons with custom buttons, yet the ...
...ributes(), 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 ...
checkbox - Archive of obsolete content
this is most commonly rendered as a box when the element is off and a box with a check when the element is on. the user can switch the state of the check box by selecting it with the mouse. a label, specified with the label attribute, may be added beside the check box. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. src type: uri set this to an uri pointing to an image to appear in the checkbox. if this attribute is left out, no image appears. you can have both an image and a label. label type: string the label th...
...ributes(), 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 ...
colorpicker - Archive of obsolete content
attributes disabled, color, onchange, preference, tabindex, type properties accessibletype, color, disabled, open, tabindex, value examples <colorpicker/> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. color type: color string the currently selected color. this is modified when the user selects a color. you can assign a string of the form #rrggbb to this property to change the selected color. overview an ...
...you may use onclick when you are working with a plain colorpicker and need the currently selected color for example to display in a <textbox>. ...
datepicker - Archive of obsolete content
three types are available, which can be specified using the type attribute. normal - a datepicker with three fields for entering the year, month and date. grid - a datepicker with a calendar grid for selecting a date. popup - a normal datepicker with three fields, but with an additional dropdown button to display a popup grid. there are several ways to set the selected day. in xul, the value attribute may be set to a value of the form yyyy-mm-dd to initialize the datepicker to a certain date. if not specified, the datepicker defaults to the current day. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. firstdayofweek type: integer which day of the week to display as the first day in the grid. the values range from 0 to 6, where 0 is sunday and 6 is saturday. the default value is determined by the locale, so onl...
...ributes(), 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 ...
editor - Archive of obsolete content
set the value of the editortype attribute to html to create an editor document. mozilla provides two types of editors, the html editor and the plaintext editor. the editor does not provide any editing user interface; you would supply that yourself. however, text editing, image resizing, and table row and cell editing capabilities are provided. if you do not set the editortype attribute on an editor, you must enable editing using the makeeditable method. to specify the document to load in the editor use the src attribute. ...
... this read-only property contains an nsiwebbrowserfind object which can be used to search for text in the document. webnavigation type: nsiwebnavigation this read-only property contains the nsiwebnavigation object for the document. most of its methods are callable directly on the element itself, such as goback and goforward. it also contains the load constants used by
reloadwithflags and loaduriwithflags. methods geteditor( window ) return type: nsieditor returns the editing interface for the editor which contains numerous methods for manipulating the document. pass the editor's contentwindow as the argument. gethtmleditor( window ) return type: nsihtmleditor returns the html editing interface for the editor which contains methods for manipulating an ht...
...ributes(), 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 ...
iframe - Archive of obsolete content
the src attribute can be used to specify the content of the frame. this content is a separate document. the children of the iframe are ignored. currently, xul iframes running in remote processes are not supported. if you want to run content in a remote process, use a xul browser element. warning: when used in chrome-privileged documents (either html or xul) such as firefox addons, the contents of the frame may have the same permissions as firefox itself. this can be a serious security vulnerability, for example if you use src="http://...". ...
... docshell type: nsidocshell this read-only property contains the nsidocshell object for the document. webnavigation type: nsiwebnavigation this read-only property contains the nsiwebnavigation object for the document. most of its methods are callable directly on the element itself, such as goback and goforward. it also contains the load constants used by
reloadwithflags and loaduriwithflags. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytag...
...ributes(), 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
the src attribute can be used to specify the url of the image. more information is available in the xul tutorial. note: prior to gecko 8.0, images did not shrink down with the same ratio in both directions when specifying maximum sizes using maxheight or maxwidth. the new behavior aligns more with the html <img> element and shrinks both the width and height down proportionally. ...
...p the element tree. src type: uri the uri of the content to appear in the element. validate type: one of the values below this attribute indicates whether to load the image from the cache or not. this would be useful if the images are stored remotely or you plan on swapping the image frequently. the following values are accepted, or leave out the attribute enti
rely for default handling: always the image is always checked to see whether it should be
reloaded. never the image will be loaded from the cache if possible. properties accessibletype type: integer a value indicating the type of accessibility object for the element. src type: url gets and sets the value of the src attribute. inherited propertie...
...an alert icon. this typically looks like an exclamation mark. this and the other icon classes may be used by image elements or other elements which can have an image. error-icon class that adds an error icon. this will typically be a red "x" icon. message-icon class that adds a message box icon. question-icon class that adds a question icon, which usually looks like a question mark.
related see also the image and icon attributes. interfaces nsiaccessibleprovider nsidomxulimageelement ...
label - Archive of obsolete content
if the user clicks the label, it will move the focus to the associated control, specified with the control attribute. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. href type: string defines a url to open when this element is clicked. requires the class attribute to include text-link. value type: string the text to be used for the label. properties a...
...in a monospace font. plain this class causes the element to be displayed with no border or margin. small-margin this class causes the text to be displayed with a smaller margin. text-link labels with this class may be focused and the click handler run or the address in the href attribute opened on a mouse click or enter key press. labels will appear like a link (blue and underlined).
related elements description attributes label interfaces nsiaccessibleprovider, nsidomxullabelelement notes labels are not focusable note: starting in gecko 2.0, labels are properly not focusable. they used to incorrectly inherit from nsidomxulcontrolelement. the caption is in the "value" attribute remember that the label element has a "value" attribute, unlike value in h...
listcell - Archive of obsolete content
by default it only contains text but iconic and checkbox listcells are also available. attributes crop, disabled, image, label, type properties disabled style classes listcell-iconic, examples (example needed) attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label...
...abel are added when this style is set. the label will take up extra space even when no label text is set. ...
listhead - Archive of obsolete content
it is usual to place listheader elements inside the listhead, one for each column. attributes disabled properties acesssibletype, disabled examples (example needed) attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height,...
...ributes(), 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 ...
listheader - Archive of obsolete content
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. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user ...
...ributes(), 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, listhead, listitem ...
menubar - Archive of obsolete content
to look native (at least on windows), the menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. ...
...to look native (at least on windows), the menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. ...
...ributes(), 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 ...
notification - Archive of obsolete content
it will normally be used as part of a notificationbox. the box includes a button which the user can use to close the box. attributes image, label, priority, persistence, type, value properties accessibletype, control, image, label, priority, persistence, type, value methods close examples <notification label="this is a warning"/> attributes image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. ...
...importance. warning a normal warning notification. critical a critical notification. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
...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.
related elements notificationbox ...
preference - Archive of obsolete content
this element must be placed inside a preferences element. each preference element corresponds to a preference which is stored in the user's preferences file. you can connect a user interface element such as a checkbox to a preference element using the user interface element's preference attribute. more information is available in the preferences system article. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. instantapply type: boolean if true, the preference will be changed as soon as the user interface is modified. inverted type: boolean for boolean preferences, if this attribute is set to true, it indicate...
... queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata events change when a preference value changes, an onchange/change event is fired on the <preference> element. you can handle this if you wish to.
related preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
tabs - Archive of obsolete content
a tabs element should be placed inside a tabbox and should contain tab elements. nb: you can add some other elements to tabs such as button, but they will receive an index. activating them will not change the selectedindex. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. onclosetab type: script code this script will be called when the close tab button is clicked. onnewtab not in firefox type: script code this script will be called when the new tab button is clicked. ...
...cified index. insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position. you may optionally set a value. the new item element is returned. removeitemat( index ) return type: element removes the child item in the element at the specified index. the method returns the removed item.
related elements tabbox, tab, tabpanels, tabpanel. interfaces nsiaccessibleprovider, nsidomxulselectcontrolelement ...
textbox - Archive of obsolete content
it is similar to the html input element. only one line of text is displayed by default. the multiline attribute can be specified to display a field with multiple rows. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. focused type: boolean this attribute is true if the element is focused. emptytext deprecated since gecko 2 type: string a string that appears in the textbox when it has no value. this is superseded by the...
...on. ...
timepicker - Archive of obsolete content
it contains three fields to enter the hour, minute and second. arrow buttons next to the fields allow the values to be adjusted with the mouse. a fourth textbox appears for 12 hour clocks which allows selection of am or pm. to specify the initial, use the value attribute set to a value of either the form hh:mm:ss or hh:mm. the value may be retrieved and changed using the value property or the datevalue property. the former specifies the time as a string of the form hh:mm:ss whereas the latter specifies the time as a date object. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. hideseconds type: boolean indicates whether to show the seconds field. readonly type: boolean if set to true, then the user cannot change the value of the element. however, the value may...
...ributes(), 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 ...
toolbox - Archive of obsolete content
it is a type of box but defaults to vertical orientation. if a toolbar is placed inside a toolbox, a grippy is displayed on its left or upper edge. the user may click the grippy to collapse the toolbar. if multiple toolbars are placed in the same toolbox, they will all collapse into the same row. the firefox browser does not have grippies so toolbars cannot be collapsed and expanded. note: gecko 2.0 adds support for external toolbars. these are toolbars that are not children of a toolbox. ...
...rome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="toolbox example" width="300"> <toolbox> <toolbar> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton label="stop"/> <toolbarbutton label="
reload"/> </toolbar> </toolbox> <textbox multiline="true" value="we have two toolbars inside of one toolbox above." width="20"/> </window> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafte...
...second argument to add some items by default. the method returns the dom element for the created toolbar. ...
treecell - Archive of obsolete content
this element should be placed inside a treerow. you can set the text for the cell using the label attribute. more information is available in the xul tutorial. attributes editable, label, mode, properties, ref, src, value attributes editable type: boolean allows the contents of individual cells in the column to be changed, especially useful when <treecol type="checkbox">. also useful for disabling editing of individual treecells. when the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell. ...
...cell. if this attribute is left out, no image appears. you can have both an image and a label. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, th...
... ...
treecol - Archive of obsolete content
it displays the column header and holds the size and other information about the column. you can also place splitter elements between the columns to allow column resizing. you should always place an id attribute on a treecol element to ensure that the column positioning is handled properly. more information is available in the xul tutorial. ...
...eechildren::-moz-tree-checkbox(checked){ /* css for checked cells. cbox-check.gif isn't available in firefox 1, 2, and 3 on mac os x, so you should specify a url to an image in your extension or elsewhere. */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } for example: create a css file. copy and paste the code above and link the css file to your xul file.
reload the page to see the checkbox. if you want, you can also style the tree using css. 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. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is...
...nodens(), setattributens(), setuserdata style classes the following class may be used to style the element. this class should be used instead of changing the style of the element directly since it will fit more naturally with the user's selected theme. treecol-image use this class to have an image appear on the tree column header. specify the image using the src attribute.
related elements tree, treecols, treechildren, treeitem, treerow, treecell and treeseparator. interfaces nsiaccessibleprovider ...
where - Archive of obsolete content
otherwise, the default value is false, to indicate that the value should match with the same case. ...
...otherwise, the default value is false, to indicate that the value should match with the same case. ...
...e case. multiple type: boolean set to true to indicate that the value contains multiple values separated by commas. any of the values may match. otherwise, the entire value string is compared. negate type: boolean set to true to indicate that the comparison should be reversed. the where clause matches if the condition is false, and does not match if the condition is true.
rel type: one of the values below the type of comparison to perform. equals the subject and value must match exactly. less the numeric value of the subject must be less than the value greater the numeric value of the subject must be greater than the value before the string value of subject must come before value alphabetically after the string value of subject must come afte...
wizard - Archive of obsolete content
it is used for a window with several steps contained on several pages. this element provides the header and buttons along the bottom, and also handles navigation between the pages. each page should be constructed using a wizardpage. the pages are displayed in the order that they are placed in the wizard, unless you use the next and pageid attributes on the pages to change the sequence. the wizard will rendered in a manner suitable for the user's selected theme and platform. ...
... title bar of the window. windowtype type: string set to a string which can be used to identify the type of window. this might be used, for example, to distinguish between a browser window and an editor window. some of mozilla's window handling functions use this attribute to group windows of the same type together. values for window type as found on mxr: http://mxr.mozilla.org/mozilla-
release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows properties canadvance type: boolean this property is set to true if the user can press the next button to go to the next page. if this property is false, the user cannot navigate to the...
...n type: no return value this method is used to change which page is currently displayed, specified by the pageid argument. the page will be changed regardless of the value of canadvance or canrewind. rewind() return type: no return value call this method to go back a page. it is equivalent to pressing the back button. the canrewind property must be set to true for the page to be changed.
related wizardpage ...
Dialogs in XULRunner - Archive of obsolete content
dow elements have a special method to open dialogs, called window.opendialog(). here is the code needed to open a dialog: function opendialog() { window.opendialog("chrome://basicapp/content/dialog.xul", "newdlg", "modal"); } the resulting dialog looks like this on windows 2000, and will look similar on other operating systems: the first thing that caught my eye about dialog is the button-
related attributes on the element. in an effort to make things easier for developers and more consistent for users, xul has a mechanism to automatically create and position the core dialog buttons ("ok," "cancel," and "help" for example). the developer just declares the need for the button, the button's caption, and the access key for the button, as well as the javascript function to call if the but...
...and saving files. for instance, windows has supported built-in file open and file save dialogs for many years, and the macintosh has always had them. it makes creating an application easier for developers; in addition, the consistent user experience also makes applications easier to use. xul supports native implementations of filepickers (mozilla terminology for file open and save dialogs). newer
releases will allow using preferences to switch to a xul emulation filepicker, if you want to. the xul filepickers are xpcom components and must be instantiated before using, like this: function dofileopen() { /* see: http://developer.mozilla.org/en/docs/xul_tutorial:open_and_save_dialogs */ var nsifilepicker = components.interfaces.nsifilepicker; var fp = components.classes["@mozilla.org/fil...
...ilepicker); fp.init(window, "open file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filtertext | nsifilepicker.filterall); var res = fp.show(); if (res == nsifilepicker.returnok) { var thefile = fp.file; alert(thefile.leafname); // --- do something with the file here --- } } xul does not currently support any other common dialogs. that could change in future
releases. firefox and thunderbird both support nearly native page setup and print dialogs. however, xul does support elements to make creating wizards a simple task as well. future articles in this series will look at input controls, printing, the clipboard, and xpcom. see also dialog xul tutorial:creating dialogs nsifilepicker xul tutorial:open and save dialogs « previous original...
2006-10-20 - Archive of obsolete content
on october 18th marcus responded to his original post and expanded on the original content of his question. marcus claims that when he builds firefox using centos he encounters crashes (segmentation faults) under linux distributions such as gentoo, suse and fedora. ...
...ike to hear from anyone who is against this decision. he can be contacted via: email: preed@mozilla.com irc: preed on irc.mozilla.org phone: 650.903.0800 x256 uploading language packs to amo on october 17th benjamin smedberg brought the following to the attention of the localizers and the build team: that he is planning to upload the firefox 2 language packages currently located at http://
releases.mozilla.org/pub/mozi...rc3/win32/xpi/ to addons.mozilla.org in the next few days. this will make the language packages available to everyone. if you anyone has questions please feel free to ask benjamin smedberg. you can do this by replying to the following post. discussions sparky and comet going away on friday on october 19th j. paul reed posted the following discussion: j. paul ree...
... still being built". boris zbarsky's said: the reason why gtk1 builds are still being performed is because: when requests are made to change build boxes to newer versions the people responsible for making the change reply with "that would require an os upgrade". on october 20th j. paul reed responded to boris zbarsky's post: j. paul reed restates his overall goal that are "getting us to not
rely on hardware that you have to have in a certain position for it to boot" to use standard known configuration for every nightly build that is produced. he also points out that there is a wiki page where the standard reference platform for linux has been defined (for trunk builds). on october 20th boris zbarsky responded to j. paul reed previous post: in his post, boris zbarsky acknoleges th...
2006-10-06 - Archive of obsolete content
preed followed up and said that the checker was run and "build is go for launch". re: sunbird and lightning 0.3rc1 available sunbird and lightning 0.3rc1 is announced. this launches a (misguided?) discussion and comparison of sunbird and lightning to outlook. extension compatibility for firefox 2 chris hofmann reminds about the push to have extensions work with ff2. also invites people to file bugs about extensions that don't work. ...
...guided?) discussion and comparison of sunbird and lightning to outlook. extension compatibility for firefox 2 chris hofmann reminds about the push to have extensions work with ff2. also invites people to file bugs about extensions that don't work. also invites people to help extension developers test for compatibility (link to a bunch of extension compatability bugs) discussions reining in the
release process a discussion of what can be done to speed up the
release process. the new roadmap - will there be something sometime? simon paquet asked for an update of the road map and either update or removal of the planning blog. adam gutherie replied that cbeard's blog post from nov 2005 is as close to a roadmap as exists right now and agrees that needs to be done about this. re: plan to hol...
...fers a solution to bug 354835. dbaron then follows up that bug 354835 is solved so there is no need to close the tree waiting for it. thunderbird 2 - beta/rc? johannes koch asks where is the thunderbird roadmap? ziga sancin replies with a link and regrets about it being a bit out of date. firefox 1.5.0.8 andrew schultz asks about the gecko 1.8.0.8 schedule. dbaron and chris ilias respond with
relative dates but still no schedule. rc2 status schrep asks for any final things standing in the way of rc2. rc2 starts spinning and en-us builds are annoucned. beltzner says that (as per bon echo status meeting) that rc2 is going to be re-spun to fix some final bugs that were regressed and patches that were just landed. reminder - ff2 rc2 code freeze 9/29/2006 at 9am pdt schrep started a discus...
2006-10-13 - Archive of obsolete content
test importing and exporting sunbird calendars to/from other calendar applications. discussions how to change between lightning and mail discussion about how to view folder pane and lightning pane again after you closed them. ...
...test importing and exporting sunbird calendars to/from other calendar applications. discussions how to change between lightning and mail discussion about how to view folder pane and lightning pane again after you closed them. ...
...test importing and exporting sunbird calendars to/from other calendar applications. discussions how to change between lightning and mail discussion about how to view folder pane and lightning pane again after you closed them. ...
Version - Archive of obsolete content
rss versions rss has a sordid history. different people and groups have largely unilaterally created specifications that they called rss. some rss formats are xml-based formats. and some rss formats are rdf-based formats. 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. ...
... 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. note: there are 3 different versions of rss 0.91. netscape's rss 0.91 (revision 1), netscape's rss 0.91 revision 3 and userland's rss 0.91. note: rss 0.93 and rss 0.94 were only ever
released as "drafts" and never became "final" and thus were not meant to actually be used. ...
...h rss 1.0 seems to be out of place, it is actually in the correct place chronologically. note: there are 3 different versions of rss 0.91. netscape's rss 0.91 (revision 1), netscape's rss 0.91 revision 3 and userland's rss 0.91. note: rss 0.93 and rss 0.94 were only ever
released as "drafts" and never became "final" and thus were not meant to actually be used. ...
TCP/IP Security - Archive of obsolete content
elow. application layer. this layer sends and receives data for particular applications, such as domain name system (dns), hypertext transfer protocol (http), and simple mail transfer protocol (smtp). transport layer. this layer provides connection-oriented or connectionless services for transporting application layer services between networks. the transport layer can optionally assure the
reliability of communications. transmission control protocol (tcp) and user datagram protocol (udp) are commonly used transport layer protocols. network layer. this layer routes packets across networks. internet protocol (ip) is the fundamental network layer protocol for tcp/ip. other commonly used protocols at the network layer are internet control message protocol (icmp) and internet group man...
...ls, which typically involve extensive customization of the application, transport layer controls such as tls are much less intrusive because they do not need to understand the application’s functions or characteristics. although using tls may require modifying some applications, tls is a well-tested protocol that has several implementations that have been added to many applications, so it is a
relatively low-risk option compared to adding protection at the application layer. traditionally tls has been used to protect http-based communications and can be used with ssl portal vpns. network layer. controls at this layer can be applied to all applications; thus, they are not application-specific. for example, all network communications between two hosts or networks can be protected at this...
...provided by specialized hardware devices known as data link encryptors; data link layer controls for other types of connections, such as dial-up modem communications, are usually provided through software. because the data link layer is below the network layer, controls at this layer can protect both data and ip information. compared to controls at the other layers, data link layer controls are
relatively simple, which makes them easier to implement; also, they support other network layer protocols besides ip. because data link layer controls are specific to a particular physical link, they cannot protect connections with multiple links, such as establishing a vpn over the internet. an internet-based connection is typically composed of several physical links chained together; protecting s...
Security - Archive of obsolete content
relying on these obsolete security articles is highly discouraged. doing so may put your systems at risk. digital signaturesencryption and decryption address the problem of eavesdropping, one of the three internet security issues mentioned at the beginning of this document. but encryption and decryption, by themselves, do not address another problem: tampering.encryption and decryptionencryption is the process of transforming information so it is unintelligible to anyone but the intended recipient. ...
...ument. but encryption and decryption, by themselves, do not address another problem: tampering.encryption and decryptionencryption is the process of transforming information so it is unintelligible to anyone but the intended recipient. decryption is the process of transforming encrypted information so that it is intelligible again.introduction to public-key cryptographypublic-key cryptography and
related standards and techniques underlie the security features of many products such as signed and encrypted email, single sign-on, and secure sockets layer (ssl) communications. this document introduces the basic concepts of public-key cryptography. for an overview of ssl, see "introduction to ssl." for an overview of encryption and decryption, see "encryption and decryption." information on digita...
..."introduction to ssl." for an overview of encryption and decryption, see "encryption and decryption." information on digital signatures is available from "digital signatures." introduction to sslthis document introduces the secure sockets layer (ssl) protocol. ssl has been universally accepted on the world wide web for authenticated and encrypted communication between clients and servers.nspr
release engineering guidethis paper is for engineers performing formal
release for the netscape portable runtime (nspr) across all platforms.ssl and tlsthe secure sockets layer (ssl) and transport layer security (tls) protocols are universally accepted standards for authenticated and encrypted communication between clients and servers. both client and server authentication occur over ssl/tls. ...
Sunbird Theme Tutorial - Archive of obsolete content
t looks exactly the same as sunbird's classic theme. modifying your theme to modify your theme, change the css and image files in any way you like. for testing purposes, go to the <tt>calendar</tt> directory that you have just pasted. edit the file <tt>calendar.css</tt> there. add this line at the end: label {color: red;} save the file. fixing bug 320823 if you are using the sunbird 0.3a1
release, or a test build before 2005-12-21, then you must apply a fix for bug 320823 to allow sunbird to use themes. go to sunbird's program directory, then to the <tt>defaults</tt> directory there. in the <tt>pref</tt> directory, edit the file <tt>sunbird.js</tt> and search for the <tt>pref("extensions</tt> entries. add the line: pref("extensions.dss.enabled", false); save the file. using your t...
...he interface, you can also use the dom inspector tool in firefox. install a compatible test build of the calendar extension in firefox 1.5, and examine its interface. the details are mostly the same as in sunbird. note: sunbird's views changed at the end of december 2005. so do not waste time styling the old views. work with a recent test build so that your theme will be compatible with the next
release. testing further changes when you make further changes to your theme, test them by restarting sunbird. to detect errors, choose tools – javascript console... the javascript console window displays css errors, not just javascript errors. making an icon and preview the themes window can display an icon and a preview graphic. you normally make these after you have designed the rest of yo...
...nd make it available on a web site for other users to download and install. there are two methods: a simple method, and the normal method. simple packaging note: if you use this simple method to package your theme, then it can take up much more disk space than it really needs. you might prefer to use this method only while you are developing your theme, and to use the normal method for public
releases. in sunbird, use the default theme or some other theme. move your theme directory to a temporary location. this uninstalls it from sunbird. use a jar tool or zip tool to pack the contents of your theme directory. it is usual to turn off compression so that your theme's speed is maximized. make sure that the tool packs all the directories and files that make up your theme. name the packed fil...
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
s the mozilla team that's at the core of this latest evolution of the web. in fact, the next javascript engine from mozilla, tracemonkey, is poised to boost javascript performance by factors of 20 to 40 times according to brendan eich, mozilla cto and the creator of javascript. in recent developments we also see the advent of other performant engines for javascript such as v8 from google and squir
relfish for webkit, these engines are raising the bar on performance and help to maintain a competitive environment that will hopefully direct competitive focus on the performance aspect of all the major javascript implementations. there are currently two main javascript engines used server-side and both are from the minds at mozilla: mozilla rhino and mozilla spidermonkey. r...
..., it's very possible to produce a single page application which could also include any number of external assets such as a popular third party framework. listing 6 shows the beginning of our application which takes advantage of some of these concepts. ...
...ion which takes advantage of some of these concepts. ...
Standards-Compliant Authoring Tools - Archive of obsolete content
currently the work done on nvu is being ported back to mozilla source code. ...
...an verify standards compliance. macromedia™ dreamweaver™ cs6 style master and layout master by western civilisation some caveats: it appears that tools currently available from namo generate ie-specific or netscape 4-specific code that may require extra debugging for compatibility with standards-based browsers. ...
...ge™ have improved, however be sure not to
rely on frontpage-specific extensions for critical website content or functionality. some versions of microsoft word create invalid html code that only works with internet explorer. always be sure to validate your web pages. original document information last updated date: january 30th, 2003 copyright © 2001-2003 netscape. all rights reserved. ...
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
the user's default settings, regardless of the css assigned to ancestor elements such as body. this represented a violation of css inheritance rules, and led many authors to create workarounds such as: <style type="text/css"> body, table, td {font-size: 11px;} </style> recreating legacy behavior to avoid "breaking" older pages that were authored with old-browser behaviors in mind, mozilla and
related browsers will mimic old browsers when in "quirks" mode. to do this, the gecko rendering engine uses the following rule in the quirk.css user agent file: /* quirk: cut off all font inheritance in tables and captions except for family. */ table, caption { font-size: -moz-initial; font-weight: -moz-initial; font-style: -moz-initial; font-variant: -moz-initial; } this rule sets all aspe...
...-moz-initial values with the css2 value inherit. this value is used to force an element to use the same value as its parent element for a given property. ...
...meyer, netscape communications last updated date: published 26 nov 2002 copyright information: copyright © 2001-2003 netscape. all rights reserved. ...
The Business Benefits of Web Standards - Archive of obsolete content
h as xml, xslt (transforming data), svg (animated graphics), mathml (describing mathematic expressions)... such technologies have been designed to be interoperable, are the base of web services. this goes much further than just web authoring. reduce costs of maintenance and site operations what is maintenance anyway? one of the most important features of a successful site is constantly evolving
relevant content which in turn can act as fuel for social media dialogue with the user community. from this it follows that there needs to be a framework and a process for content contributors to post articles, to upload videos, sound or any other media. a web site is only a vehicle for carrying, navigating and displaying that content. content management systems attempt with some success to supply th...
...es to government-funded projects and agencies. coding with standards (particularly css for positioning, and strict html) makes accessibility an easier goal to achieve, as standards have been created with accessibility in mind. taking care of accessibility means being able to serve web content to a larger audience, increasing web site usability, even for non-disabled people. comporting with the
relevant legislation in the jurisdiction is an important driver particularly for developers who wish to access public funds, or who work with charities and other socially responsible organisations. just as important as the obvious necessity to comply with the law; an enthusiastic adoption of web standards is an important indicator of a sense of community social responsibility. many industry leaders a...
...ing to everything they do. sites which satisfy the ego of the designer - and very few other people are going to have an increasingly difficult commercial future. the development process: working in teams a common challenge for web developers when assuming management of existing sites is the code written by other developers. in many cases, they are faced with poor html code quality that may also
rely on undocumented features or hacks and specific coding practices. lack of documentation is also often problematic. following standards-compliance in requirements documents is a very effective way to ensure measurable quality of the final product, the w3c being an impartial judge. because standards are very well documented, another person taking over some standard-compliant code can hit the grou...
Game monetization - Game development
access to the next stages of the game unless the players paid. the term "pay to win" was coined and this approach is disliked by many players and devs. if you want to implement iaps try to add value to the game with something players will enjoy instead of taking it out and then charging for it. add-ons and dlcs add-ons and downloadable content are a good way to provide extra value to an already
released game, but remember that you'll have to offer decent, entertaining content to attract people to buy it. a totally new set of levels with new characters, weapons and story is a good material for dlc, but to have enough sales the game itself has to be popular, or else there won't be any players interested in spending their hard earned money on it. advertisements instead of actively selling th...
... attract people to buy it. a totally new set of levels with new characters, weapons and story is a good material for dlc, but to have enough sales the game itself has to be popular, or else there won't be any players interested in spending their hard earned money on it. advertisements instead of actively selling the games you can also try to get yourself a passive income — showing adverts and
relying on previous activities
related to promoting your game may benefit, but your game has to be addictive, which isn't as easy as it sounds. you still need to plan it out, and at some point you'll need a bit of luck too. if your game goes viral and people start sharing it, you can get a lot of downloads and money out of adverts. there are many companies offering advert systems — you sign up and...
...ou. as an example if you've got a game where a player taps items of food, you could change the food to the client's products to give them advertising. prices in this model vary greatly depending on the brand, client, and amount of work you put in. other non-game focused monetization strategies there are other ways you can earn money when building html5 games, and it doesn't even have to be game-
related. selling resources if you're a graphic designer, you can sell the assets from the games you've created, or something brand new exclusively for that purpose at online shops like envato market. it's not much, but if you're a known designer it can be an extra passive stream of income. writing articles and tutorials it is possible to write articles about your games and even get paid for them.
Mobile touch controls - Game development
y it is to implement mobile controls in an html5 game, and enjoy playing on a mobile touch-enabled device. note: the game captain rogers: battle at andromeda is built with phaser and managing the controls is phaser-based, but it could also be done in pure javascript. ...
...s built with phaser and managing the controls is phaser-based, but it could also be done in pure javascript. the good thing about using phaser is that it offers helper variables and functions for easier and faster development, but it's enti
rely up to you which approach you to choose. ...
... a design point of view, it is better to make the field of activity bigger without covering half of the screen with button images. for example, tapping on the right side of the screen will fire the weapon: this.buttonshoot = this.add.button(this.world.width*0.5, 0, 'button-alpha', null, this); this.buttonshoot.oninputdown.add(this.goshootpressed, this); this.buttonshoot.oninputup.add(this.goshoot
released, this); the code above will create a new button using a transparent image that covers the right half of the screen. you can assign functions on input down and input up separately if you'd like to perform more complicated actions, but in this game touching the right side of the screen will simply fire the bullets to the right — this is all we need in this case. moving the player could be ...
Implementing controls using the Gamepad API - Game development
360, xbox one, ps3 and ps4 — they have been heavily tested and work well with the gamepad api implementation in browsers across windows and mac os x. there's also a number of other devices with various different button layouts that more or less work across browser implementations. the code discussed in this article was tested with a few gamepads, but the author's favorite configuration is a wi
reless xbox 360 controller and the firefox browser on mac os x. case study: hungry fridge the github game off ii competition ran in november 2013 and enclave games decided to take part in it. the theme for the competition was "change", so they submitted a game where you have to feed the hungry fridge by tapping the healthy food (apples, carrots, lettuces) and avoid the "bad" food (beer, burgers, pi...
...or movement. implementation there are two important events to use along with the gamepad api — gamepadconnected and gamepaddisconnected. ...
...from the gamepadapi.controller object. then it loops through buttons and axes to get their actual states and values. 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. without it you'd have to
release the button and press it again to have the desired effect. buttonpressed: function(button, hold) { var newpress = false; // loop through pressed buttons for(var i=0,s=gamepadapi.buttonsstatus.length; i<s; i++) { // if we found the button we're looking for... if(gamepadapi.buttonsstatus[i] == button) { // set the boolean variable to true newpress = true; // if w...
Game over - Game development
-dy; } instead of allowing the ball to bounce off all four walls, let's only allow three now — left, top and right. hitting the bottom wall will end the game. we'll edit the second if block so it's an if else block that will trigger our "game over" state upon the ball colliding with the bottom edge of the canvas. ...
... showing an alert message and restarting the game by
reloading the page. first, replace where you initially called setinterval() setinterval(draw, 10); with: var interval = setinterval(draw, 10); then replace the second if statement with the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { alert("game over"); document.location.
reload(); clearinterval(interval); // needed for chrome to end game } letting the paddle hit the ball the last thing to do in this lesson is to create some kind of collision detection between the ball and the paddle, so it can bounce off it and get back into the play area. the easiest thing to do is to check whether the center of the ball is between the left and right edges of the paddle. upda...
...thing to do is to check whether the center of the ball is between the left and right edges of the paddle. update the last bit of code you modified again, to the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { if(x > paddlex && x < paddlex + paddlewidth) { dy = -dy; } else { alert("game over"); document.location.
reload(); clearinterval(interval); } } if the ball hits the bottom edge of the canvas we need to check whether it hits the paddle . if yes, then it bounces off just like you'd expect; if not then the game is over as before. compare your code here's the working code for you to compare yours against: exercise: make the ball move faster when it hits the paddle. next steps we're doi...
Player paddle and controls - Game development
/demos/lesson07.html. we have the ball moving and bouncing off the walls, but it quickly gets boring — there's no interactivity! we need a way to introduce gameplay, so in this article we'll create a paddle to move around and hit the ball with. rendering the paddle from the framework point of view the paddle is very similar to the ball — we need to add a variable to represent it, load the
relevant image asset, and then do the magic. loading the paddle first, add the paddle variable we will be using in our game, right after the ball variable: var paddle; then, in the p
reload function, load the paddle image by adding the following new load.image() call: function p
reload() { // ... game.load.image('ball', 'img/ball.png'); game.load.image('paddle', 'img/paddle.png'); } ...
..., 'paddle'); we can use the world.width and world.height values to position the paddle exactly where we want it: game.world.width*0.5 will be right in the middle of the screen. in our case the world is the same as the canvas, but for other types of games, like side-scrollers for example, the world will be bigger, and you can tinker with it to create interesting effects. as you'll notice if you
reload your index.html at this point, the paddle is currently not exactly in the middle. why? because the anchor from which the position is calculated always starts from the top left edge of the object. we can change that to have the anchor in the middle of the paddle's width and at the bottom of it's height, so it's easier to position it against the bottom edge. add the following line below the prev...
... to the input's x position, however when we start the game, the position of the paddle is not in the middle. it's because the input position is not yet defined. to fix that we can set the default position (if an input position is not yet defined) to be the middle of the screen. update the previous line as follows: paddle.x = game.input.x || game.world.width*0.5; if you haven't already done so,
reload your index.html and try it out! position the ball we have the paddle working as expected, so let's position the ball on it. it's very similar to positioning the paddle — we need to have it placed in the middle of the screen horizontally and at the bottom vertically with a little offset from the bottom. to place it exactly as we want it we will set the anchor to the exact middle of the ball...
Scaling - Game development
« previousnext » this is the 2nd step out of 16 of the gamedev phaser tutorial. you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson02.html. scaling refers to how the game canvas will scale on different screen sizes. ...
...ser-content-kit/demos/lesson02.html. scaling refers to how the game canvas will scale on different screen sizes. we can make the game scale to fit on any screen size automatically during the p
reload stage, so we don't have to worry about it later. the phaser scale object there's a special scale object available in phaser with a few handy methods and properties available. update your existing p
reload() function as follows: function p
reload() { game.scale.scalemode = phaser.scalemanager.show_all; game.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; } scalemode has a few different options available for how the canvas can be scaled: no_scale — nothing is scaled. exact_fit — scale the canvas to fill all the available space both vertically and h...
...n, but we can live with that. resize — creates the canvas with the same size as the available width and height, so you have to place the objects inside your game dynamically; this is more of an advanced mode. user_scale — allows you to have custom dynamic scaling, calculating the size, scale and ratio on your own; again, this is more of an advanced mode the other two lines of code in the p
reload() function are responsible for aligning the canvas element horizontally and vertically, so it is always centered on screen regardless of size. adding a custom canvas background colour we can also add a custom background color to our canvas, so it won't stay black. the stage object has a backgroundcolor property for this purpose, which we can set using css color definition syntax. add the fol...
Backgrounds and borders - Learn web development
ing text on top of a background image or color, you should take care that you have enough contrast for the text to be legible for your visitors. if specifying an image, and text will be placed on top of that image, you should also specify a background-color that will allow the text to be legible if the image does not load. screen readers cannot parse background images, therefore they should be pu
rely decoration; any important content should be part of the html page and not contained in a background. borders when learning about the box model, we discovered how borders affect the size of our box. in this lesson we will look at how to use borders creatively. typically when we add borders to an element with css we use a shorthand property that sets the color, width, and style of the border in ...
...left-to-right or right-to-left text, or top-to-bottom). we'll be exploring these in the next lesson, which covers handling different text directions. there are a variety of styles that you can use for borders. in the example below we have used a different border style for the four sides of my box. play with the border style, width, and color to see h...
...son, which covers handling different text directions. there are a variety of styles that you can use for borders. in the example below we have used a different border style for the four sides of my box. play with the border style, width, and color to see how borders work. rounded corners rounding corners on a box is achieved by using the border-radius property and associated longhands which
relate to each corner of the box. two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. in a lot of cases, you will only pass in one value, which will be used for both. for example, to make all four corners of a box have a 10px radius: .box { border-radius: 10px; } or to make the top right corner have a horizontal ...
Cascade and inheritance - Learn web development
overview: building blocks next the aim of this lesson is to develop your understanding of some of the most fundamental concepts of css — the cascade, specificity, and inheritance — which control how css is applied to html and how conflicts are resolved. while working through this lesson may seem less immediately
relevant and a little more academic than some other parts of the course, an understanding of these things will save you much pain later on! we encourage you to work through this section carefully, and check that you understand the concepts before moving on. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first step...
...first word cascading is incredibly important to understand — the way that the cascade behaves is key to understanding css. at some point, you will be working on a project and you will find that the css you thought should be applied to an element is not working. usually the problem is that you have created two rules which could potentially apply to the same element. the cascade, and the closely-
related concept of specificity, are mechanisms that control which rule applies when there is such a conflict. which rule is styling your element may not be the one you expect, so you need to understand how these mechanisms work. also significant here is the concept of inheritance, which means that some css properties by default inherit values set on the current element's parent element, and some don...
...es of the cascade. take a look at this example where we have two paragraphs, one of which has an id. let's walk through this to see what's happening — try removing some of the properties to see what happens if you are finding it hard to understand: you'll see that the third rule's color and padding values have been applied, but the background-color hasn't. why? really all three should su
rely apply, because rules later in the source order generally override earlier rules. however, the rules above it win, because class selectors have higher specificity than element selectors. both elements have a class of better, but the 2nd one has an id of winning too. since ids have an even higher specificity than classes (you can only have one element with each unique id on a page, but many elem...
Styling tables - Learn web development
to start with, make a local copy of the sample markup, download both images (noise and leopardskin), and put the three resulting files in a working directory somewhere on your local computer. next, create a new file called style.css and save it in the same directory as your other files. ...
...s that is suitable for a table about punk bands. you can go there and find a different one if you like; you'll just have to replace our provided <link> element and custom font-family declaration with the ones google fonts gives you. ...
...we've also set our custom font on the headings inside the <thead> and <tfoot> elements, for a nice grungy, punky look. we've set some letter-spacing on the headings and cells, as we feel it aids readability. again, mostly a stylistic choice. we've center-aligned the text in the table cells inside the <tbody> so that they line up with the headings. by default, cells are give...
Grids - Learn web development
ntinue to display one below the other as they do in normal flow. to see something that looks more grid-like, we will need to add some columns to the grid. let's add three 200-pixel columns here. you can use any length unit, or percentages to create these column tracks. .container { display: grid; grid-template-columns: 200px 200px 200px; } add the 2nd declaration to your css rule, then
reload the page, and you should see that the items have rearranged themselves one into each cell of the created grid. simple grid example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div...
... this works because grid is creating as many 200 pixel columns as will fit into the container, then sharing whatever space is leftover between all of the columns — the maximum is 1fr which, as we already know, distributes space evenly between tracks. line-based placement we now move on from creating a grid, to placing things on the grid. our grid always has lines, which lines start at 1 and
relate to the writing mode of the document. therefore in english, column line 1 is on the left hand side of the grid and row line 1 at the top. in arabic column line 1 would be on the right hand side, as arabic is written right to left. we can place things according to these lines by specifying the start and end line. we do this using the following properties: grid-column-start grid-column-end ...
...le (or re-download the file to have a fresh starting point), and add the following css. ...
Legacy layout methods - Learn web development
of columns spanned plus 2.08333333% multiplied by the number of gutters (which will always be the number of columns minus 1). ...
...rted visit the skeleton website, and choose "download" to download the zip file. unzip this and copy the skeleton.css and normalize.css files into a new directory. make a copy of our html-skeleton.html file and save it in the same directory as the skeleton and normalize css. include the skeleton and normalize css in the html page, by adding the following to its head: <link href="normalize.css"
rel="stylesheet"> <link href="skeleton.css"
rel="stylesheet"> skeleton includes more than a grid system — it also contains css for typography and other page elements that you can use as a starting point. we’ll leave these at the defaults for now, however — it’s the grid we are really interested in here. note: normalize is a really useful little css library written by nicolas gallagher, whi...
...els. you can take a look in the skeleton.css file to see the css that is used when we apply this class. the <div> is centered using auto left and right margins, and a padding of 20 pixels is applied left and right. skeleton also sets the box-sizing property to border-box like we did earlier, so the padding and borders of this element will be included in the total width. .container { position:
relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } elements can only be part of the grid if they are inside a row, so as with our earlier example we need an additional <div> or other element with a class of row nested between the content <div> and our actual content container <div>s. we've done this already as well. now let's lay out the co...
Getting started with CSS - Learn web development
you'll commonly come across, however, for now, we will look at the most usual and useful way of doing so — linking css from the head of your document. create a file in the same folder as your html document and save it as styles.css. the .css extension shows that this is a css file. ...
......
... full stop character. add the following to your css file: .special { color: orange; font-weight: bold; } save and refresh to see what the result is. you can apply the class of special to any element on your page that you want to have the same look as this list item. for example, you might want the <span> in the paragraph to also be orange and bold. try adding a class of special to it, then
reload your page and see what happens. sometimes you will see rules with a selector that lists the html element selector along with the class: li.special { color: orange; font-weight: bold; } this syntax means "target any li element that has a class of special". if you were to do this then you would no longer be able to apply the class to a <span> or another element by simply adding the class ...
CSS FAQ - Learn web development
ace to separate them. <style type="text/css"> .news { background: black; color: white; } .today { font-weight: bold; } </style> <div class="news today"> ... content of today's news ... </div> if the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the css declarations. the order of classes in the class attribute is not
relevant. why don't my style rules work properly? style rules that are syntactically correct may not apply in certain situations. 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. html elements hierarchy the way css styles are applied to html elements depends also on the elements hierarchy. it ...
...g the regular namespace, preventing future incompatibilities to arise when the standard is extended. the use of such properties on production websites is not recommended — they have already created a huge web compatibility mess. for example, many developers only using the -webkit- prefixed version of a property when the non-prefixed version is supported across all browsers meant that a feature
relying on that property would break in non-webkit-based browsers, completely needlessly. this problem got so bad that other browsers started to implement -webkit- prefixed aliases to improve web compatibility, as specified in the compatibility living standard. in fact most browsers now do not use css prefixes when implementing experimental features, instead implementing those features only on night...
...r example: -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); note: for more information on dealing with prefixed properties, see handling common html and css problems — handling css prefixes from our cross-browser testing module. note: see the mozilla css extensions page for more information on the mozilla-prefixed css properties. how does z-index
relate to positioning? the z-index property specifies the stack order of elements. an element with a higher z-index/stack order is always rendered in front of an element with a lower z-index/stack order on the screen. z-index will only work on elements that have a specified position (position:absolute, position:
relative, or position:fixed). note: for more information, see our positioning learning...
create fancy boxes - Learn web development
o-elements. a cloud <div class="fancy">hi! i want to be fancy.</div> let's have an example by turning our box into a cloud: .fancy { text-align: center; /* same trick as previsouly used to make circles */ box-sizing: border-box; width : 150px; height : 150px; padding : 80px 1em 0 1em; /* we make room for the "ears" of our cloud */ margin : 0 100px; position:
relative; background-color: #a4c9cf; /* well, actually we are not making a full circle as we want the bottom of our cloud to be flat. feel free to tweak this example to make a cloud that isn't flat at the bottom ;) */ border-radius: 100% 100% 0 0; } /* those are common style that apply to both our ::before and ::after pseudo elements. */ .fancy::before, .fancy::after { /*...
...: <blockquote>people who think they know everything are a great annoyance to those of us who do. <i>isaac asimov</i></blockquote> <blockquote lang="fr">l'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. ...
...that can bring your boxes alive like in this example: <div class="fancy">hi! i want to be fancy.</div> let's create some partial drop shadow effect. the box-shadow property allow us to create inner light and a flat drop shadow effect, but with some little extra work it becomes possible to create a more natural geometry by using pseudo-element and the transform property. ...
Styling lists - Learn web development
part, but there are some css properties specific to lists that you need to know about, and some best practices to consider. this article explains all. prerequisites: basic computer literacy, html basics (study introduction to html), css basics (study introduction to css), css text and font fundamentals. 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. throughout this article, we'll look at unordered, ordered, and description lists — all have styling features that are similar, and some that are particular to their type of list. the unstyled example is available on github (check out the source code too.) the html for our list example looks ...
...tml { font-family: helvetica, arial, sans-serif; font-size: 10px; } h2 { font-size: 2rem; } ul,ol,dl,p { font-size: 1.5rem; } li, p { line-height: 1.5; } /* description list styles */ dd, dt { line-height: 1.5; } dt { font-weight: bold; } the first rule sets a sitewide font and a baseline font size of 10px. these are inherited by everything on the page. rules 2 and 3 set
relative font sizes for the headings, different list types (the children of the list elements inherit these), and paragraphs. this means that each paragraph and list will have the same font size and top and bottom spacing, helping to keep the vertical rhythm consistent. rule 4 sets the same line-height on the paragraphs and list items — so the paragraphs and each individual list item will have the...
...st descriptions, but the list items have some padding for the background images to sit inside. if we didn't do this, the background images would overlap with the list item text, which would look messy. set the list-style-type to none, so that no bullet appears by default. we're going to use background properties to handle the bullets instead. inserted a bullet onto each unordered list item. the
relevant properties are as follows: background-image: this references the path to the image file you want to use as the bullet. background-position: this defines where in the background of the selected element the image will appear — in this case we are saying 0 0, which means the bullet will appear in the very top left of each list item. background-size: this sets the size of the backg...
How do you make sure your website works properly? - Learn web development
dig deeper test in your browser if you want to know whether your website works correctly, the first thing to do is fire up your browser and go to the page you want to test. uh-oh, where's the image? let's look at our personal website, http://demozilla.examplehostingprovider.net/. it's not showing the image we expected! open firefox's network tool (tools ➤ web developer ➤ network) and
reload the page: there's the problem, that "404" at the bottom. "404" means "resource not found", and that's why we didn't see the image. http statuses servers respond with a status message whenever they receive a request. here are the most common statuses: 200: ok the resource you asked for was delivered. 301: moved permanently the resource has moved to a new location. you won't see this...
...st often with 200, 304, 403, and 404. fixing the 404 so what went wrong? at first glance, the image we asked for seems to be in the right place... but the network tool reported a "404". it turns out that we made a typo in our html code: unicorn_pics.png rather than unicorn_pic.png. so correct the typo in your code editor by changing the image's src attribute: save, push to the server, and
reload the page in your browser: there you go! let's look at the http statuses again: 200 for / and for unicorn_pic.png means that we succeeded in
reloading the page and the image. 304 for basic.css means that this file has not changed since the last request, so the browser can use the file in its cache rather than receiving a fresh copy. so we fixed the error and learned a few http statuses...
...our resources. first check the spelling and accuracy of the file path, and if there's still a problem, upload your files again. that will likely fix the problem. javascript errors someone (possibly you) added a script to the page and made a mistake. this will not prevent the page from loading but you will feel something went wrong. open the console (tools ➤ web developer ➤ web console) and
reload the page: in this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover javascript in another series of articles). 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. you can also test if your page meets these criteria: how's the perfor...
What do common web layouts contain? - Learn web development
many directions. and if you don't have much experience, starting out with a blank page might be a bit scary. we have over 25 years' experience and we'll give you some common rules of thumb to help you design your site. even now with the new focus on mobile web, almost all mainstream webpages are built from these parts: header visible at the top of every page on the site. contains information
relevant to all pages (like site name or logo) and an easy-to-use navigation system. main content the biggest region, containing content unique to the current page. stuff on the side 1) information complementing the main content; 2) information shared among a subset of pages; 3) alternative navigation system. in fact, everything not absolutely required by the page's main content. footer visible...
...many people will still browse your site from desktops, so make your content usable/readable there as well. two-column layout. abduzeedo, a simple blog layout. blogs usually have two columns, a fat one for the main content and a thin one for stuff on the side (like widgets, secondary navigation levels, and ads). in this example, look at the image (b1) right underneath the header. it's
related to the main content, but the main content makes sense without it, so you could think of the image either as main content or as side content. it doesn't really matter. what does matter is, if you put something right under the header, it should either be main content or directly
related to the main content. it's a trap mica. this is a bit trickier. it looks like a three-column layout... ...
...y break up the layout. especially, the header overlaps the image of the main content. the way the curve of the header's menu ties in with the curve at the bottom of the image, the header and main content look like one thing even though they're technically completely different. the opera example looks more complex than the mica example, but it's actually easier to implement (all right, "easy" is a
relative concept). as you see, you can craft stunning websites even with just basic layouts. have a look at your own favorite websites and ask yourself, where's the header, the footer, the main content, and the side content? that will inspire you for your own design and give you good hints for which designs work and which ones don't. ...
What is the difference between webpage, website, web server, and search engine? - Learn web development
these terms are often confused by newcomers to the web or are incorrectly used. let's learn what they each mean! prerequisites: you should know how the internet works. objective: be able to describe the differences between a web page, a website, a web server, and a search engine. summary as with any area of knowledge, the web comes with a lot of jargon. don't worry, we won't overwhelm you with all of it (we have a glossary if you're curious). however, there are a few basic terms you need to understand at the outset, since you'll hear these expressions all the time as you read on. ...
..., and a search engine. summary as with any area of knowledge, the web comes with a lot of jargon. don't worry, we won't overwhelm you with all of it (we have a glossary if you're curious). however, there are a few basic terms you need to understand at the outset, since you'll hear these expressions all the time as you read on. it's easy to confuse these terms sometimes since they refer to
related but different functionalities. in fact, you'll sometimes see these terms misused in news reports and elsewhere, so getting them mixed up is understandable! we'll cover these terms and technologies in more detail as we explore further, but these quick definitions will be a great start for you: web page a document which can be displayed in a web browser such as firefox, google chrome, oper...
...s, statics, etc. (the webpages). webpages can each be found at a unique location (url). the search index is like the search engine. each book has its own unique location in the library (two books cannot be kept at the same place) which is specified by the catalog number. active learning there is no active learning available yet. deeper dive so, let's dig deeper into how those four terms are
related and why they are sometimes confused with each other. web page a web page is a simple document displayable by a browser. such documents are written in the html language (which we look into in more detail in other articles). a web page can embed a variety of different types of resources such as: style information — controlling a page's look-and-feel scripts — which add interactivity t...
Basic native form controls - Learn web development
ield one of the original input types was the password text field type: <input type="password" id="pwd" name="pwd"> the password value doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be easily read by others. keep in mind this is just a user interface feature; unless you submit your form secu
rely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. the best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https:// ... address), so the data is encrypted before it is sent. browsers recognize the security ...
...e case of checkable items, their values are sent only if they are checked. if they are not checked, nothing is sent, not even their name. if they are checked but have no value, the name is sent with a value of on. note: you can find the examples from this section on github as checkable-items.html (see it live also). 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). the associated <label> is generally placed immediately after the radio button or checkbox, with the instructions for the group of radio button or checkboxes generally being the content of the <legend>. see...
... this element supports exactly the same set of attributes as the <img> element, plus all the attributes supported by other form buttons. <input type="image" alt="click me!" src="my-img.png" width="80" height="30"> if the image button is used to submit the form, this control doesn't submit its value — instead, the x and y coordinates of the click on the image are submitted (the coordinates are
relative to the image, meaning that the upper-left corner of the image represents the coordinate (0, 0)). the coordinates are sent as two key/value pairs: the x value key is the value of the name attribute followed by the string ".x". the y value key is the value of the name attribute followed by the string ".y". so for example when you click on the image at coordinate (123, 456) and it submits...
Example 1 - Learn web development
dget. ...
...ctive 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 */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, ari...
...en state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist"> <li class="option highlight">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 */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, ari...
Tips for authoring fast-loading HTML pages - Learn web development
choose your user-agent requirements wisely to achieve the greatest improvements in page design, make sure that reasonable user-agent requirements are specified for projects. do not require your content to appear pixel-perfect in all browsers, especially not in down-version browsers. ideally, your basic minimum requirements should be based on the consideration of modern browsers that support the
relevant standards. this can include recent versions of firefox, internet explorer, google chrome, opera, and safari. 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 async and defer, if possible make the javascript scripts such that they are com...
...ugh these attributes do help a lot the first time a page is loaded, you should use them but not assume they will work in all browsers. if you already follow all javascript best practices, there is no need to change your code. example page structure · <html> · <head> · <link> ... css files required for page appearance. minimize the number of files for performance while keeping un
related css in separate files for maintenance. · <script> ... javascript files for functions required during the loading of the page, but not any interaction
related javascript that can only run after page loads. minimize the number of files for performance while keeping un
related javascript in separate files for maintenance. · <body> · user visible page content in small ...
... · <script> ... any scripts which will be used to perform interactivity. interaction scripts typically can only run after the page has completely loaded and all necessary objects have been initialized. there is no need to load these scripts before the page content. that only slows down the initial appearance of the page load. minimize the number of files for performance while keeping un
related javascript in separate files for maintenance. if any images are used for rollover effects, you should p
reload them here after the page content has downloaded. ...
Responsive images - Learn web development
were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction). note: the new features discussed in this article — srcset/sizes/<picture> — are all supported in
release versions of modern desktop and mobile browsers (including microsoft's edge browser, although not internet explorer.) how do you create responsive images? in this section, we'll look at the two problems illustrated above and show how to solve them using html's responsive image features. you should note that we will be focusing on the html <img>s for this section, as seen in the content are...
...learn more about these in the css topic, but for now let's just say that a media condition describes a possible state that the screen can be in. in this case, we are saying "when the viewport width is 600 pixels or less". a space the width of the slot the image will fill when the media condition is true (480px) note: for the slot width, you may provide an absolute length (px, em) or a length
relative to the viewport (vw), but not percentages. you may have noticed that the last slot width has no media condition (this is the default that is chosen when none of the media conditions are true). the browser ignores everything after the first matching condition, so be careful how you order the media conditions. so, with these attributes in place, the browser will: look at its device width.
...ent. this code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below: note: you should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute. why can't we just do this using css or javascript? when the browser starts to load a page, it starts to download (p
reload) any images before the main parser has started to load and interpret the page's css and javascript. that mechanism is useful in general for reducing page load times, but it is not helpful for responsive images — hence the need to implement solutions like srcset. for example, you couldn't load the <img> element, then detect the viewport width with javascript, and then dynamically change the s...
General asynchronous programming concepts - Learn web development
normally, a given program's code runs straight along, with only one thing happening at once. ...
...cles in the module. prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals. objective: to understand the basic concepts behind asynchronous programming, and how they manifest in web browsers and javascript. asynchronous? normally, a given program's code runs straight along, with only one thing happening at once. if a function
relies on the result of another function, it has to wait for the other function to finish and return, and until that happens, the entire program is essentially stopped from the perspective of the user. mac users, for example, sometimes experience this as the spinning rainbow-colored cursor (or "beachball" as it is often called). this cursor is how the operating system says "the current program you'r...
...their limitations. a major one is they are not able to access the dom — you can't get a worker to directly do anything to update the ui. we couldn't render our 1 million blue circles inside our worker; it can basically just do the number crunching. the second problem is that although code run in a worker is not blocking, it is still basically synchronous. this becomes a problem when a function
relies on the results of multiple previous processes to function. consider the following thread diagrams: main thread: task a --> task b in this case, let's say task a is doing something like fetching an image from the server and task b then does something to the image like applying a filter to it. if you start task a running and then immediately try to run task b, you'll get an error, because the ...
Introducing asynchronous JavaScript - Learn web development
clicked the button the paragraph won't appear until after the ok button is pressed in the alert box. you can try it for yourself: <button>click me</button> note: it is important to remember that alert(), while being very useful for demonstrating a synchronous blocking operation, is terrible for use in real world applications. asynchronous javascript for reasons illustrated earlier (e.g.
related to blocking), many web api features now use asynchronous code to run, especially those that access or fetch some kind of resource from an external device, such as fetching a file from the network, accessing a database and returning data from it, accessing a video stream from a web cam, or broadcasting the display to a vr headset. why is this difficult to get to work using synchronous code? l...
... your fetch operation: ' + error.message); }); console.log ('all done!'); the browser will begin executing the code, see the first console.log() statement (starting) and execute it, and then create the image variable. it will then move to the next line and begin executing the fetch() block but, because fetch() executes asynchronously without blocking, code execution continues after the promise-
related code, thereby reaching the final console.log() statement (all done!) and outputting it to the console. only once the fetch() block has completely finished running and delivering its result through the .then() blocks will we finally see the second console.log() message (it worked :)) appear. so the messages have appeared in a different order to what you might expect: starting all done! i...
...ed from running until someone clicks the mouse button. the previous example works in the same way, except that in that case the second message is blocked on the promise chain fetching a resource then displaying it on screen, rather than a click. in a less trivial code example, this kind of setup could cause a problem — you can't include an async code block that returns a result, which you then
rely on later in a sync code block. you just can't guarantee that the async function will return before the browser has processed the sync block. to see this in action, try taking a local copy of our example, and changing the fourth console.log() call to the following: console.log ('all done! ' + image.src + 'displayed.'); you should now get an error in your console instead of the third message: ...
Fetching data from the server - Learn web development
because it tended to use xmlhttprequest to request xml data. this is normally not the case these days (you'd be more likely to use xmlhttprequest or fetch to request json), but the result is still the same, and the term "ajax" is still often used to describe the technique. the ajax model involves using a web api as a proxy to more intelligently request data rather than just having the browser
reload the entire page. let's think about the significance of this: go to one of your favorite information-rich sites, like amazon, youtube, cnn, etc., and load it. now search for something, like a new product. the main content will change, but most of the surrounding information, like the header, footer, navigation menu, etc., will stay the same. this is a really good thing because: page up...
...ion, but it's a major issue on mobile devices and in developing countries that don't have ubiquitous fast internet service. to speed things up even further, some sites also store assets and data on the user's computer when they are first requested, meaning that on subsequent visits they use the local versions instead of downloading fresh copies when the page is first loaded. the content is only
reloaded from the server when it has been updated. a basic ajax request let's look at how such a request is handled, using both xmlhttprequest and fetch. for these examples, we'll request data out of a few different text files and use them to populate a content area. this series of files will act as our fake database; in a real application, we'd be more likely to use a server-side language like ...
...hoose.onchange = function() { const verse = versechoose.value; updatedisplay(verse); }; let's define our updatedisplay() function. first of all, put the following beneath your previous code block — this is the empty shell of the function. note: steps 4 - 9 will all be performed within this function. function updatedisplay(verse) { } we'll start our function by constructing a
relative url pointing to the text file we want to load, as we'll need it later. the value of the <select> element at any time is the same as the text inside the selected <option> (unless you specify a different value in a value attribute) — so for example "verse 1". the corresponding verse text file is "verse1.txt", and is in the same directory as the html file, therefore just the file name will do...
Manipulating documents - Learn web development
p> </section> </body> </html> the dom on the other hand looks like this: note: this dom tree diagram was created using ian hickson's live dom viewer. you can see here that each element and bit of text in the document has its own entry in the tree — each one is called a node. you will also encounter various terms used to describe the type of node, and their position in the tree in
relation to one another: element node: an element, as it exists in the dom. root node: the top node in the tree, which in the case of html is always the html node (other markup vocabularies like svg and custom xml will have different root elements). child node: a node directly inside another node. for example, img is a child of section in the above example. descendant node: a node anywhere insi...
... tag. to manipulate an element inside the dom, you first need to select it and store a reference to it inside a variable. inside your script element, add the following line: const link = document.queryselector('a'); now we have the element reference stored in a variable, we can start to manipulate it using properties and methods available to it (these are defined on interfaces like htmlancho
relement in the case of <a> element, its more general parent interface htmlelement, and node — which represents all nodes in a dom). first of all, let's change the text inside the link by updating the value of the node.textcontent property. add the following line below the previous one: link.textcontent = 'mozilla developer network'; we should also change the url the link is pointing to, so th...
...lelement.style property, which contains inline styling information for each element in the document. you can set properties of this object to directly update element styles. as an example, try adding these lines to our ongoing example: para.style.color = 'white'; para.style.backgroundcolor = 'black'; para.style.padding = '10px'; para.style.width = '250px'; para.style.textalign = 'center';
reload the page and you'll see that the styles have been applied to the paragraph. if you look at that paragraph in your browser's page inspector/dom inspector, you'll see that these lines are indeed adding inline styles to the document: <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">we hope you enjoyed the ride.</p> note: notice how the java...
What is JavaScript? - Learn web development
. server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side javascript dynamically generates new content inside the browser on the client, e.g. creating a new html table, filling it with data requested from the server, then displaying the table in a web page shown to the user. the meaning is slightly different in the two contexts, but
related, and both approaches (server-side and client-side) usually work together. a web page with no dynamically updating content is referred to as static — it just shows the same content all the time. how do you add javascript to your page? javascript is applied to your html page in a similar manner to css. whereas css uses <link> elements to apply external stylesheets and <style> elements to a...
...buttons.length ; i++) { buttons[i].addeventlistener('click', createparagraph); } this might be a bit longer than the onclick attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. the javascript does not need to be changed. note: try editing your version of apply-javascript.html and add a few more buttons into the file. when you
reload, you should find that all of the buttons when clicked will create a paragraph. neat, huh? script loading strategies there are a number of issues involved with getting scripts to load at the right time. nothing is as simple as it seems! a common problem is that all the html on a page is loaded in the order in which it appears. if you are using javascript to manipulate elements on the page (o...
...hat they will not stop the rest of the page from displaying. it is best to use async when the scripts in the page run independently from each other and depend on no other script on the page. for example, if you have the following script elements: <script async src="js/vendor/jquery.js"></script> <script async src="js/script2.js"></script> <script async src="js/script3.js"></script> you can't
rely on the order the scripts will load in. jquery.js may load before or after script2.js and script3.js and if this is the case, any functions in those scripts depending on jquery will produce an error because jquery will not be defined at the time the script runs. async should be used when you have a bunch of background scripts to load in, and you just want to get them in place as soon as possible...
JavaScript object basics - Learn web development
s that we've already seen earlier in the course, reiterating the fact that many of the features you've already dealt with are objects. prerequisites: basic computer literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks). objective: to understand the basic theory behind object-oriented programming, how this
relates to javascript ("most things are objects"), and how to start working with javascript objects. object basics an object is a collection of
related data and/or functionality (which usually consists of several variables and functions — which are called properties and methods when they are inside objects.) let's work through an example to understand what they look like. to begin with, ma...
... with that data, and are referred to as the object's methods. an object like this is referred to as an object literal — we've literally written out the object contents as we've come to create it. this is in contrast to objects instantiated from classes, which we'll look at later on. it is very common to create an object using an object literal when you want to transfer a series of structured,
related data items in some manner, for example sending a request to the server to be put into a database. sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name. dot notation above, you accessed the object's properties and methods using dot notation. the object name (pers...
...s to verify that you've retained this information before you move on — see test your skills: object basics. summary congratulations, you've reached the end of our first js objects article — you should now have a good idea of how to work with objects in javascript — including creating your own simple objects. you should also appreciate that objects are very useful as structures for storing
related data and functionality — if you tried to keep track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. objects let us keep the information safely locked away in their own package, out of harm's way. in the next arti...
Aprender y obtener ayuda - Learn web development
mobile phone out of the room — most people we have are distracted by their phone a lot, so you should leave it somewhere else. take regular breaks. it is not good for your motivation to keep working away for hours with no break, especially if you are finding it hard or getting stuck on a problem. that just leads to frustration — it is often better to take a break, move around for a bit, then
relax with a drink before getting back to work, and as we said earlier, the diffuse learning you do in that time can often help you to figure out a solution to the problem you were facing. it is also physically bad to work for too long without a break — looking at a monitor for too long can hurt your eyes, and sitting still for too long can be bad for your back or legs. we'd recommend taking a 15 m...
...g up, it is often a good idea to just copy the error message into your search engine and use it as the search term. if other people have had the same problem, there'll likely be some articles or blog posts about it in places like mdn or stack overflow. note: stack overflow is a really useful website — it is basically a huge database of curated questions and answers on various technologies and
related techniques. you'll probably find an answer that answers your question. if not, you can ask a question and see if anyone can help you. browser testing it is often a good idea to see if your problem is affecting all browsers, or whether it only occurs in one or a small number of browsers. if it is only affecting one browser, for example, you can use that browser to narrow down the search. ex...
... — both reference material for looking up code syntax, and guides/tutorials for learning techniques. we've provided most of the answers to the questions you'll have about web development fundamentals in this part of mdn. if you are stuck, then it is good to re-read the associated articles to see if you missed anything. if you are not sure which article to read, then try searching mdn for some
related keywords (as indicated above), or try a general web search. to search on mdn, you can either use the site's in-built search functionality or better still, use your favorite search engine and put "mdn" in front of the search term, for example, "mdn responsive web design" or "mdn background-color". other online resources we already mentioned stack overflow, but there are other online resource...
Web performance resources - Learn web development
there are many reasons why your website should perform as well as possible. below is a quick review of best practices, tools, apis with links to provide more information about each topic. best practices start with learning the critical rendering path of the browser. knowing this will help you understand how to improve the performance of the site. using resource hints such as
rel=preconnect,
rel=dns-prefetch,
rel=prefetch, and
rel=p
reload keep the size of javascript to a minimum. only use as much javascript as needed for the current page. css performance factors use http/2 on your server (or cdn). use a cdn for resources which can reduce load times significantly. compress your resources using gzip, brotli, and zopfli. image optimization (use css animation, or svg if possible). la...
...ge for bot traffic); for example, by using the loading attribute on the <img> element it is also crucial to realize what is really important to your users. it might not be absolute timing, but user perception. quick wins css web performance is all about user experience and perceived performance. ...
...radional link tag with
rel="stylesheet" is synchronous and blocks rendering. optimize the rendering of your page by removing blocking css. to load css asynchronously one can simpy set the media type to print and then change to all once loaded. the following snippet includes an onload attribute, requiring javascript, so it is important to include a noscript tag with a traditional fallback. <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. these ...
What is web performance? - Learn web development
load time: how long does it take the files required to render the web site to download on to the user's computer? this tends to be affected by latency, how big your files are, how many files there are, and other factors besides. a general strategy is to make your files as small as possible, reduce the number of http requests made as much as possible, and employ clever loading techniques (such as p
reload) to make files available sooner. making the site usable as soon as possible: this basically means loading your web site assets in a sensible order so that the user can start to actually use it really quickly. any other assets can continue to load in the background while the user gets on with primary tasks, and sometimes we only load assets when they are actually needed (this is called lazy lo...
...t really quickly. any other assets can continue to load in the background while the user gets on with primary tasks, and sometimes we only load assets when they are actually needed (this is called lazy loading). the measurement of how long it takes the site to get to a usable start after it has started loading is called time to interactive. smoothness and interactivity: does the application feel
reliable and pleasurable to use? is the scrolling smooth? are buttons clickable? are pop-ups quick to open up, and do they animate smoothly as they do so? there are a lot of best practices to consider in making apps feel smooth, for example using css animations rather than javascript for animation, and minimizing the number of repaints the ui requires due to changes in the dom. perceived performance...
...itely be optimized, realizing that some resources block additional downloads until their content is parsed and executed. the critical path. this is the process that the browser uses to construct the web document once the files have been downloaded from the server. the browser follows a well-defined set of steps, and optimizing the critical rendering path to prioritize the display of content that
relates to the current user action will lead to significant improvements in content rendering time. see critical rendering path for more information. the document object model. the document object model, or dom, is a tree structure that represents the content and elements of your html as a tree of nodes. this includes all the html attributes and the
relationships between the nodes. extensive dom man...
The business case for web performance - Learn web development
to gain confidence in working with clients and management to get them to make web performance a priority. making performance a business priority we've discussed how prioritizing performance can improve user experience and therefore revenue. we know that not prioritizing web performance can result in a loss of business revenue. this article discusses how certain business metrics directly
relate to a user's web performance experience and how to apply service design to boost the user's experiences of web performance. it highlights the importance of understanding how cumulative experiences impact conversion and retention rates. performance budgets setting a web performance budget can help you make sure the team stays on track in keeping the site and help prevent regressions. a perf...
... of your traffic that takes an intended action, such as completing a purchase or signing up for a newsletter. when a business site is slow, it can prevent users from completing their intended task. this can lead to low conversion rates. time on site the average time that your users in aggregate spend on your site. when a site performance slowly, users are more likely to abandon the site prematu
rely which can lead to low time on site metrics. net promotion score the net promoter score (nps) is a metric for assessing customer loyalty for a company’s brand, product, or service. poor user performance experiences can equation to poor brand reputation. setting converstion rate, time on site, and/or net promotion scores as kpis give financial and other business goal value to the web perform...
...user performance experiences can equation to poor brand reputation. setting converstion rate, time on site, and/or net promotion scores as kpis give financial and other business goal value to the web performance efforts, and get help boost buy in, with metrics to prove the efforts worth. expectation versus reality in performance business performance (in revenue, operations, etc.) is directly
related to how to web performance. (source needed). area of conflict - not prioritizing web performance, but expecting good business metrics (see the three above). previous overview: performance in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia: images multimedia: video javascript performance bes...
The "why" of web performance - Learn web development
ility. with performance as with accessibility, you consider what device a site visitor is using to access the site and the device connection speed. as an example, consider the loading experience of cnn.com, which at the time of this writing had over 400 http requests with a file size of over 22.6mb. imagine loading this on a desktop computer connected to a fibre optic network. this would seem
relatively fast, and the file size would be largely ir
relevant. imagine loading that same site using tethered mobile data on a 9 year-old ipad while commuting home on public transportation. the same site will be slow to load, possibly verging on unusable depending on cell coverage. you might give up before it finishes loading. imagine loading that same site on a $35 huawei device in a rural india w...
...wers the costs to all parties. reducing html/css/javascript and media file sizes reduces both the time to load and a site's power consumption (see performance budgets). tracking performance is important. multiple factors, including network speed and device capabilities affect performance. ...
...this is why you should care about web performance. ...
Client-Server Overview - Learn web development
ites: basic computer literacy. a basic understanding of what a web server is. objective: to understand client-server interactions in a dynamic website, and in particular what operations need to be performed by server-side code. there is no real code in the discussion because we haven't yet chosen a web framework to use to write our code! this discussion is however still very
relevant, because the described behaviour must be implemented by your server-side code, irrespective of which programming language or web framework you select. web servers and http (a primer) web browsers communicate with web servers using the hypertext transfer protocol (http). when you click a link on a web page, submit a form, or run a search, the browser sends an http request to the server. th...
...y user. if you add another similar product to your site you will need to add another page (e.g. myproduct2.html) and so on. this can start to get really inefficient — what happens when you get to thousands of product pages? you would repeat a lot of code across each page (the basic page template, structure, etc.), and if you wanted to change anything about the page structure — like add a new "
related products" section for example — then you'd have to change every page individually. note: static sites are excellent when you have a small number of pages and you want to send the same content to every user. however they can have a significant cost to maintain as the number of pages becomes larger. let's recap on how this works, by looking again at the static site architecture diagram w...
...lements of the "team coach" website, along with numbered labels for the sequence of operations when the coach accesses their "best team" list. the parts of the site that make it dynamic are the web application (this is how we will refer to the server-side code that processes http requests and returns http responses), the database, which contains information about players, teams, coaches and their
relationships, and the html templates. after the coach submits the form with the team name and number of players, the sequence of operations is: the web browser creates an http get request to the server using the base url for the resource (/best) and encoding the team and player number either as url parameters (e.g. /best?team=my_team_name&show=11) or as part of the url pattern (e.g. /best/my_t...
Server-side web frameworks - Learn web development
url by defining "capture patterns" in the url mapper (see the last code fragment in the section above). abstract and simplify database access websites use databases to store information both to be shared with users, and about users. web frameworks often provide a database layer that abstracts database read, write, query, and delete operations. this abstraction layer is referred to as an object-
relational mapper (orm). using an orm has two benefits: you can replace the underlying database without necessarily needing to change the code that uses it. this allows developers to optimize for the characteristics of different databases based on their usage. basic validation of data can be implemented within the framework. this makes it easier and safer to check that data is stored in the corr...
...that encourages a model-view-controller architecture to separate code into logical functions will result in more maintainable code than one that has no expectations on developers. similarly, framework design can have a large impact on how easy it is to test and re-use code. performance of the framework/programming language: usually "speed" is not the biggest factor in selection because even
relatively slow runtimes like python are more than "good enough" for mid-sized sites running on moderate hardware. the perceived speed benefits of another language, e.g. c++ or javascript, may well be offset by the costs of learning and maintenance. caching support: as your website becomes more successful then you may find that it can no longer cope with the number of requests it is receiving as use...
... allows to start with minimum fuss and configuration. it can be used for small problems but its strength is building larger scale applications that use a cloud approach. usually multiple applications run in parallel talking to each other, with some providing user interaction and others doing back end work (e.g. accessing databases or other services). load balancers help to ensure redundancy and
reliability or allow geolocated handling of user requests to ensure responsiveness. summary this article has shown that web frameworks can make it easier to develop and maintain server-side code. it has also provided a high level overview of a few popular frameworks, and discussed criteria for choosing a web application framework. you should now have at least an idea of how to choose a web framewor...
Getting started with Ember - Learn web development
fficiency of developers at the cost of having to learn those conventions. as conventions are defined and shared, the opinions that back those conventions help reduce the menial differences between apps — a common goal among all opinionated frameworks, across any language and ecosystem. ...
...a common goal among all opinionated frameworks, across any language and ecosystem. developers are then more easily able to switch between projects and applications without having to completely
relearn the architecture, patterns, conventions, etc. as you work through this series of tutorials, you'll notice ember's opinions — such as strict naming conventions of component files. how does ember
relate to vanilla javascript? ember is built on javascript technologies and is a thin layer on top of traditional object-oriented programming, while still allowing developers to utilize functional programming techniques. ember makes use of two main syntaxes: javascript (or optionally, typescript) ember's own templating language, which is loosely based on handlebars. the templating language is...
...ke sure you navigate to somewhere appropriate in the terminal before you run it. (good suggestions are your "desktop" or "documents" directories, so that it is easy to find): ember new todomvc or, on windows: npx ember-cli new todomvc this generates a production-ready application development environment that includes the following features by default: development server with live
reload. plugin-architecture that allows for third-party packages to richly enhance your application. the latest javascript via babel and webpack integration. automated testing environment that runs your tests in the browser, allowing you to test like a user. transpilation, and minification, of both css and javascript for production builds. conventions for minimizing the differences between ...
React interactivity: Events and state - Learn web development
the value of that attribute is a function that triggers a simple alert. the onclick attribute has special meaning here: it tells react to run a given function when the user clicks on the button. there are a couple of other things to note: the camel-cased nature of onclick is important — jsx will not recognize onclick (again, it is already used in javascript for a specific purpose, which is
related but different — standard onclick handler properties). all browser events follow this format in jsx – on, followed by the name of the event. let's apply this to our app, starting in the form.js component. handling form submission at the top of the form() component function, create a function named handlesubmit(). this function should prevent the default behavior of the submit event. a...
...; } to use this function, add an onsubmit attribute to the <form> element, and set its value to the handlesubmit function: <form onsubmit={handlesubmit}> now if you head back to your browser and click on the "add" button, your browser will show you an alert dialog with the words "hello, world!" — or whatever you chose to write there. callback props in react applications, interactivity is ra
rely confined to just one component: events that happen in one component will affect other parts of the app. 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 />. we want our handlesubmit() function to ultimately help us create a new task, so we need a way to pass information from <form /> to <app />. we can...
... deleting tasks from state and ui now that we know deletetask() is invoked correctly, we can call our settasks() hook in deletetask() to actually delete that task from the app’s state as well as visually in the app ui. since settasks() expects an array as an argument, we should provide it with a new array that copies the existing tasks, excluding the task whose id matches the one pas...
React resources - Learn web development
e modules like this: import form from './form'; import './form.css' this approach makes it easy to identify and manage the css that belongs to a specific component. however, it also fragments your stylesheet across your codebase, and this fragmentation might not be worthwhile. for larger applications with hundreds of unique views and lots of moving parts, it makes sense to limit the amount of ir
relevant code that's sent to your user. you'll likely have app-wide styles and specific component styles that built on top of those. you can read more about component stylesheets in the create-react-app docs. react devtools we used console.log() to check on the state and props of our application in this tutorial, and you'll also have seen some of the useful warnings and error message that react gi...
...of the components that make up our application, including some unique keys for the things that are rendered from arrays. on the right, we see the props and hooks that our app component utilizes. notice, too, that the form, filterbutton, and todo components are indented to the right – this indicates that app is their parent. in more complex apps, this view is great for understanding parent/child
relationships at a glance. react devtools is available in a number of forms: a chrome browser extension. a firefox browser extension. a chromium edge browser extension (available soon). a stand-alone application you can install with npm or yarn. try installing one of these, then using it to inspect the app you’ve just built! you can read more about react devtools on the react blog. the c...
...e certain other, more edge-case features, and they’re very common in legacy react projects. the official react docs are a great place to start learning about them. state and lifecycle in the react docs intro to react in the react docs read about javascript classes at mdn testing create-react-app provides some tools for testing your application out of the box — you may have deleted the
relevant files earlier in the tutorial. the documentation for create-react-app covers some basics for testing. routing while routing is traditionally handled by a server and not an application on the user's computer, it is possible to configure a web application to read and update the browser's location, and render certain user interfaces. this is called client-side routing. it's possible to create...
Beginning our React todo list - Learn web development
s and inputs in our list items have some attributes unique to jsx: <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> the defaultchecked attribute in the <input/ > tag tells react to check this checkbox initially. if we were to use checked, as we would in regular html, react would log some warnings into our browser console
relating to handling events on the checkbox, which we want to avoid. don't worry too much about this for now — we will cover this later on when we get to using events. the htmlfor attribute corresponds to the for attribute used in html. we cannot use for as an attribute in jsx because for is a reserved word, so react uses htmlfor instead. notes: to use boolean values (true and false) in jsx a...
... 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position:
relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width: 100%; } .todoapp > h1 { display: block; max-width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } ...
... flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position:
relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-size: inherit...
Starting our Svelte Todo list app - Learn web development
<!-- moreactions --> <div class="btn-group"> <button type="button" class="btn btn__primary">check all</button> <button type="button" class="btn btn__primary">remove completed</button> </div> </div> check the rendered out again, and you'll see something like this: it's current not very nicely styled, and also functionally useless. but let's have a look at the markup and see how it
relates to our desired features: a label and a text box for entering new tasks. three buttons to filter by task status. a label showing the total number of tasks and the completed tasks. an unordered list, which holds a list item for each task. when the task is being edited, the list item has an input and two button to cancel or save modifications. if the task is not being edited, there's a c...
...0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position:
relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width: 100%; } .todoapp > h1 { display: block; max-width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } ...
... flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position:
relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-size: inherit...
Getting started with Svelte - Learn web development
ent and stores the result in public/build/bundle.js. it also adds the code in src/main.js to reference the features of each component. ...
...lso adds the code in src/main.js to reference the features of each component. finally the file public/index.html includes the generated bundle.css and bundle.js files: <!doctype html> <html lang="en"> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>svelte app</title> <link
rel='icon' type='image/png' href='/favicon.png'> <link
rel='stylesheet' href='/global.css'> <link
rel='stylesheet' href='/build/bundle.css'> <script defer src='/build/bundle.js'></script> </head> <body> </body> </html> the minified version of bundle.js weighs a little more than 3kb, which includes the "svelte runtime" (just 300 lines of javascript code) and the app.svelte compiled component. as you can see, bundle.js is the only javascript file re...
...g your saved apps. whenever you change any file on the repl, svelte will recompile the app and update the result tab. to share your app simply share the url. for example, here's the link for a repl running our complete app: https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2. note: notice how you can specify svelte's version in the url. this is useful when reporting issues
related to a specific version of svelte. we will provide a repl at the beginning and end of each article so that you can start coding with us right away. note: at the moment the repl can't handle folder names properly. if you are following the tutorial on the repl, just create all your components inside the root folder. then when you see a path in the code, for example import todos from './compon...
Getting started with Vue - Learn web development
a clearer vue vue is a modern javascript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use vue to enhance existing html. this lets you use vue as a drop-in replacement for a library like jquery. that being said, you can also use vue to write entire single page applications (spas). this allows you to create markup managed enti
rely by vue, which can improve developer experience and performance when dealing with complex applications. it also allows you to take advantage of libraries for client-side routing and state management when you need to. additionally, vue takes a "middle ground" approach to tooling like client-side routing and state management. while the vue core team maintains suggested libraries for these functions...
... your config files to be managed. "in dedicated config files" will put your config settings for things like eslint into their own, dedicated files. the other option, "in package.json", will put all of your config settings into the app's package.json file. select "in dedicated config files" and push enter. finally, you are asked if you want to save this as a preset for future options. this is enti
rely up to you. if you like these settings over the existing presets and want to use them again, type y , otherwise type n. the cli will now begin scaffolding out your project, and installing all of your dependencies. if you've never run the vue cli before, you'll get one more question — you'll be asked to choose a package manager. you can use the arrow keys to select which one you prefer. the v...
... creating a todo list app below, let's set our header text to "to-do list". add it like so: <template> <div id="app"> <h1>to-do list</h1> </div> </template> app.vue will now show our heading, as you'd expect. summary let's leave this here for now. we've learnt about some of the ideas behind vue, created some scaffolding for our example app to live inside, inspected it, and made a few p
reliminary changes. with a basic introduction out of the way, we'll now go further and build up our sample app, a basic todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos. in the next article we'll build our first custom component, and look at some important concepts such as passing props into it and sa...
Understanding client-side JavaScript frameworks - Learn web development
already. instead, we want to back up and first answer more fundamental questions such as: why should i use a framework? what problems do they solve for me? what questions should i ask when trying to choose a framework? do i even need to use a framework? what features do frameworks have? how do they work in general, and how do frameworks' implementations of these features differ? how do they
relate to "vanilla" javascript or html? after that, we'll provide some tutorials covering the essentials of some of the different framework choices, to provide you with enough context and familiarity to start going into greater depth yourself. we want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibili...
...icle is to look at how to break our app into manageable components and share information between them. we'll componentize our app, then add more functionality to allow users to update existing components. 5. advanced svelte: reactivity, lifecycle, accessibility in this article we will add the app's final features and further componentize our app. we will learn how to deal with reactivity issues
related to updating objects and arrays. to avoid common pitfalls, we'll have to dig a little deeper into svelte's reactivity system. we'll also look at solving some accessibility focus issues, and more besides. 6. working with svelte stores in this article we will show another way to handle state management in svelte — stores. stores are global global data repositories that hold values. component...
...es available is a very real problem. keeping the list short is therefore helpful. we want to say this upfront — we've not chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. we just think they score highly on the above criteria. note that we were hoping to have more frameworks included upon initial publication, but we decided to
release the content and then add more framework guides later, rather than delay it longer. if your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! get in touch with us via matrix, or discourse, or drop us a mail on the mdn-admins list. ...
Implementing feature detection - Learn web development
480px)").matches) { // run javascript in here. } as an example, our snapshot demo makes use of it to selectively apply the brick javascript library and use it to handle the ui layout, but only for the small screen layout (480px wide or less). we first use the media attribute to only apply the brick css to the page if the page width is 480px or less: <link href="dist/brick.css" type="text/css"
rel="stylesheet" media="all and (max-width: 480px)"> we then use matchmedia() in the javascript several times, to only run brick navigation functions if we are on the small screen layout (in wider screen layouts, everything can be seen at once, so we don't need to navigate between different views). if (window.matchmedia("(max-width: 480px)").matches) { deck.shuffleto(1); } using modernizr to imp...
...let's have a look at how modernizr works in terms of selectively applying css. first, make a copy of supports-feature-detect.html and supports-styling.css. save them as modernizr-css.html and modernizr-css.css. update your <link> element in your html so it points to the correct css file (you should also update your <title> element to something more suitable!): <link href="modernizr-css.css"
rel="stylesheet"> above this <link> element, add a <script> element to apply the modernizr library to the page, as shown below. this needs to be applied to the page before any css (or javascript) that might make use of it. <script src="modernizr-custom.js"></script> now edit your opening <html> tag, so that it looks like this: <html class="no-js"> at this point, try loading your page, a...
...uctor cookies cors ...and loads more values!> it now contains a large number of classes that indicate the support status of different technology features. as an example, if the browser didn't support flexbox at all, <html> would be given a class name of no-flexbox. if it did support modern flexbox, it would get a class name of flexbox. if you search through the class list, you'll also see others
relating to flexbox, like: flexboxlegacy for the old flexbox spec (2009). flexboxtweener for 2011 in between syntax supported by ie10. flexwrap for the flex-wrap property, which isn't present in some implementations. note: you can find a list of what all the class names mean — see features detected by modernizr. moving on, let's update our css to use modernizr rather than @supports. go in...
Setting up your own test automation environment - Learn web development
atch.js are also good choices. to install selenium-webdriver, run the following command, making sure you are inside your project folder: npm install selenium-webdriver note: it is still a good idea to follow these steps even if you previously installed selenium-webdriver and downloaded the browser drivers. you should make sure that everything is up-to-date. next, you need to download the
relevant drivers to allow webdriver to control the browsers you want to test. you can find details of where to get them from on the selenium-webdriver page (see the table in the first section.) obviously, some of the browsers are os-specific, but we're going to stick with firefox and chrome, as they are available across all the main oses. download the latest geckodriver (for firefox) and chromedri...
...t driver = new webdriver.builder() .forbrowser('firefox') .usingserver('http://localhost:4444/wd/hub') .build(); run your test, and you should see it run as expected; this time however you will be runing it on the standalone server: node google_test_remote.js so this is pretty cool. ...
...ill be runing it on the standalone server: node google_test_remote.js so this is pretty cool. we have tested this locally, but you could set this up on just about any server along with the
relevant browser drivers, and then connect your scripts to it using the url you choose to expose it at. integrating selenium with ci tools as another point, it is also possible to integrate selenium and
related tools like lambdatest, and sauce labs with continuous integration (ci) tools — this is useful, as it means you can run your tests via a ci tool, and only commit new changes to your code repository if the tests pass. it is out of scope to look at this area in detail in this article, but we'd suggest getting started with travis ci — this is probably the easiest ci tool to get started with ...
Deploying our app - Learn web development
o view your project online and to share it with your friends, family, and colleagues. deploying to hosting tends to be at the tail-end of the project life cycle, but with services such as netlify bringing down the cost of deployments (both in financial terms and also the time required to actually deploy) it's possible to deploy during development to either share work in progress or to have a pre-
release for some other purpose. netlify, amongst other things, also allows you to run pre-deployment tasks, which in our case means that all the production code build processes can be performed inside of netlify and if the build is successful, the website changes will be deployed. although netlify offers a drag and drop deployment service, we are intending to trigger a new deployment to netlify eac...
...doing this step manually isn't our final aim — what we want is for the build to happen automatically and the result of the dist directory to be deployed live on our website. ...
... open the package.json file in your project's root directory, and find the scripts property. we'll add a build command that we can run to build our code. ...
Accessibility/LiveRegionDevGuide
le for queuing messages derived from live region events, where priority is determined by chronological order and the live politeness properties. in addition to the standard priority queue methods, additional methods will need to be implemented that purge the queue based on one of the priority criterion. the "purge by timestamp" method will be used to remove old messages that are no longer deemed
relevant while "purge by politeness" is used to satisfy the aria live politeness specification. the later method will be explained in detail below. 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. both will be discussed in detail below. object changed the object changed events ar...
...operty defines two channels - 'main' and 'alert'. it was originally intended to give web developers a means to force a live region message to go to a separate output device. for instance, a 'main' channel message might go to the speech generator while an 'alert' channel message might be sent to a braille device. ...
...erty is also significant for single output applications that
rely on speech output only. in this case, 'main' channel messages are queued according to the 'live' property and 'alert' channel messages bypass the queue and are output immediately. the rationale being that alerts are meant to quickly grab the user's attention in the event of a major issue, such as a system/server failure. ...
Mozilla accessibility architecture
-specific classes then use these xpcom interfaces to gather information about the objects they want to expose, make any necessary changes, and then expose the information using microsoft com on windows, or through gtk2's atk api's on linux and unix. the assistive technology can then use this information in a number of ways. it can read in an entire document at once, look only pieces of a document
related to recent events, or traverse the accessibility object model based on screen position. accessible tree contains only a subset of nodes from the dom tree not all dom nodes are exposed through accessibility api toolkits -- only those objects deemed important by the developers of the toolkit. mozilla keeps around its own tree of accessibility objects, which parallels the dom tree, but is not a f...
...eams want to avoid memory bloat where necessary, we could not afford to use 4 bytes on dom or layout nodes to point back to accessible objects. therefore, ownership is reversed -- accessible nodes own their dom objects. however, this creates instability when mozilla wants to shut down but an assistive technology client still holds onto accessibles. these crashes occur when the assistive techology
releases after some gecko modules have already been unloaded, when the necessary destructors no longer exist in memory. performance: by caching the accessible node for each dom node in a hash table, we can hand back accessibles extremely quickly, and avoid recalculating and creating new accessibles every time one is requested for a certain dom node. we also avoid calculating the children of an acce...
...ode for each dom node in a hash table, we can hand back accessibles extremely quickly, and avoid recalculating and creating new accessibles every time one is requested for a certain dom node. we also avoid calculating the children of an accessible twice, once for getaccchildcount() and again when the specific children are requested. events: we must ensure that the accessible for an event is not
released before the accessible client has a chance to review its data. also, msaa clients need to access the event accessibles using the unique child id we give it. when we get the child id back, we can recreate the hash key needed to retrieve the accessible. finally, because the msaa client gets the same accessible for the event and for tree traversal each time, it can do comparisons with its own in...
Multiprocess on Windows
o just use refptr. on the other hand, some apis in the mscom library require you to use smart pointers that are able to cross apartment boundaries. as you should already know, you can't directly touch a com object's reference count unless you're already inside the apartment which contains that object. this is a problem for smart pointers that are not apartment aware; they will try to addref() and
release() on whichever thread they happen to be running. the mscom library provides a set of smart pointers that are aware of com apartments: mscom smart pointer types pointer type
release semantics stauniqueptr<t> forces reference to be
released on the main thread. mtauniqueptr<t> forces reference to be
released on an mta thread. proxyuniqueptr<t> ...
... interceptortargetptr<t> no-op deleter: used to annotate pointers whose reference counts must never be touched. ...
... interceptortargetptr<t> no-op deleter: used to annotate pointers whose reference counts must never be touched. these pointers all use mozilla::uniqueptr under the hood. use the mozilla::mscom::to*uniqueptr functions in ipc/mscom/ptr.h to create new instances of these. ...
Mozilla’s UAAG evaluation report
longdesc for frame: not supported, see bug 3658 noframe for frame: must use user style sheets to render this. a ui for this would be good. noscript for script: must use user style sheets to render this. a ui for this would be good. 2.4 allow time-independent interaction. (p1) nr need to look into this 2.5 make captions, transcripts available. (p1) na this
relates to multimedia players 2.6 respect synchronization cues. (p1) na this
relates to multimedia players 2.7 repair missing content. (p2) p no alt repair strategies in place. reasons: the title attribute is almost never present when the alt isn't. in the rare cases where it is, it is of no help (typically it's just the filename, maybe with a file size). also, in th...
....display.use_focus_colors", usefocuscolors); /* true or false */ setcharpref("browser.display.focus_background_color", colorstring); /* for example #ffeedd or the name of a color */ setcharpref("browser.display.focus_text_color", colorstring); setcharpref("browser.display.focus_ring_width", numpixels); /* integer 0-4 */ 10.3 distinct default highlight styles. (p1) vg we
rely on color alone when showing which links have been recently visited. should implement a pref for dotted underline on visited links, similar to the way opera does it. 10.4 highlight special elements. (p2) g use system colors by default (classic theme) underlines links by default does not have ui to highlight non-link and non-form elements that have event handlers can hav...
...d coded. needs work. bug#? 11.4 single key access. (p2) ni bug 953707 is our open bug for this. help wanted. 11.5 default binding requirements. (p2) c provides stated functions 11.6 user profiles. (p2) vg user profiles are fully supported for all configuration options. unfortunately, switching profiles requires the entire application to be
relaunched. there is still very little end-user documentation for editing profiles by hand. 11.7 configure tool bars. (p3) p can turn on and off toolbars under show/hide can customize personal bookmarks toolbar bug 15144 is for the ability to add/remove toolbar icons bug 47418 is for the ability to rearrange toolbars guideline 12. provide access...
What to do and what not to do in Bugzilla
eople with a similar/the same setup can't reproduce the bug and the bug is only seen by the bug reporter. in this case you shouldn't just mark it wfm instantly, but ask the reporter for more details first. when marking it wfm you should tell the bug reporter that they should reopen the bug if they can still see it with a recent build. the build the bug is reported against is more than one stable
release old and the bug can't be reproduced with a current build. the bug reporter has not responded to questions for one month and the bug can't be reproduced with a current build. the bug reporter reports that they can no longer see the bug and no other people report that they are still seeing the bug. resolving bugs as incomplete the problem is vaguely described with no steps to reproduce, or...
..., qa_contact, or in the 'editbugs' permission group. you should verify a bug if it has been proven that the resolution of the bug was correct. when verifying a bug, you should remember the following: verifying duplicates is the easiest task, so start with that. note that in general it's impossible to verify a duplicate until the original has been resolved. verifying wontfix or invalid bugs is
relatively easy if a developer or a trusted qa person has wontfixed or invalidated them. bugs that were invalidated or wontfixed by someone else must be verified by a module owner or module peer or someone who has been explicitly told by a module owner or module peer that they are able to do so for that module. before verifying fixed bugs, make sure that you can verify them on every hardware/os they...
...ducts, if the bug also exists in the application suite. if you don't know where a bug belongs, don't touch it! for example, don't move bugs into the js engine component unless you really know they are js engine bugs, and don't leave bugs in the js engine component if you know that the malfunction being described is a dom problem. bug flags mozilla drivers use flags to identify bugs blocking a
release. you may only use the blocking? flag to nominate bugs for blocking status. the use of the blocking- flag and the blocking+ flag is prohibited. continued abuse will result in revocation of your bugzilla privileges. mass changes mass changes (changes to more than one bug simultaneously) are discouraged. don't do it! ...
Simple Instantbird build
tch the complete repo. in this case, you need a bundle for comm-central, and a bundle for mozilla-central. unbundle mozilla-central into a "mozilla" subdirectory of your comm-central repo after unbundling comm-central. then run python client.py checkout to ensure you are up-to-date. the source code requires 1.5gb of free space or more. build configuration by default, the build system creates a
release build of instantbird roughly equivalent to the official instantbird
release builds. if that's not exactly what you want, there are many build configuration options to choose from, although it's strongly recommended that you only use options that you fully understand. the normal way to specify build options is to place them in a file called '.mozconfig' at the root of your mozilla source tree,...
... builds. if that's not exactly what you want, there are many build configuration options to choose from, although it's strongly recommended that you only use options that you fully understand. the normal way to specify build options is to place them in a file called '.mozconfig' at the root of your mozilla source tree, i.e. your comm-central repo. for example, to create a debug build instead of a
release build, that file would contain: ac_add_options --enable-debug for more on configuration options, see the page configuring build options. note that if you use an moz_objdir it cannot be a sibling folder to your source directory. use an absolute path to be sure! building instantbird what you need to do to build instantbird rather than firefox is: echo 'ac_add_options --enable-application=...
...nown failures at the time you pulled the code? if the trunk is broken, you may wish to consider building one of the branches (to pull the source code from a branch, just replace the url to the repository in the hg clone instruction). checked to make sure that the path in which you placed the source code has no spaces, and is not too long? have you searched the bug database for issues
relating to your problem (e.g., platform-specific issues)? try asking in mozilla.dev.chat - don't forget to include details of what is in your mozconfig, and what the actual error is. references general build documentation comm-central simple thunderbird build ...
Updating NSPR or NSS in mozilla-central
the nspr and nss sources in mozilla-central are maintained by the nspr and nss teams and always taken from exports of hg tags. do not check in individual changes. if you check in an individual change by mistake, your change will be lost when the nspr and nss teams push a new hg tag to mozilla-central. ...
....16.1" would be replaced with the new nss version. ...
... too old])]) fi commit the update: $ hg commit -a in order to eliminate any problems
related to how nss and nspr are built differently in firefox than they are standalone, you should push your commit to try first. if your update fails linking because of missing nss or nspr symbols, add the missing symbols to config/external/nss/nspr-dummy.def or config/external/nss/nss.def, whichever is
relevant. in your commit message, include the required keywords, upgrade_nspr_
release and/or upgrade_nss_
release. push the update: $ hg push ...
Developer guide
es which are particularly helpful for new mozilla developers. working with mozilla source code a code overview, how to get the code, and the coding style guide. build instructions how to build firefox, thunderbird, seamonkey, or other mozilla applications. development process overview an overview of the entire mozilla development process. managing multiple profiles when working with pre
release versions of firefox, it's often helpful to have multiple firefox profiles, such as one for each channel, or for different kinds of testing. getting documentation updated how to ensure that documentation is kept up to date as you develop. mozilla modules and module ownership this article provides information about mozilla's modules, what the role of a module owner is, and how module owners...
...vigator object with additional apis. interface compatibility guidelines for modifying scriptable and binary apis in mozilla. customizing firefox information about creating customized versions of firefox. task-graph generation what controls the jobs that run on a push to version control? how can you change that? obsolete build caveats and tips a place to put build tips which are no longer
relevant to building the latest version of the code from main but are
relevant when building old codebases. firefox source docs web-hosted documentation built from the mozilla-central source code. tools bugzilla the bugzilla database used to track issues for mozilla projects. dxr next generation of searching mozilla's source code. in active development. searchfox another option for mozi...
...ode. in active development. searchfox another option for mozilla code searching. indexes js as well as c++, includes blame capabilities. in active development. mozilla build vm a virtualbox compatible virtual machine configured with all the software needed to build and work on firefox. taskcluster taskcluster is the task execution framework that supports mozilla's continuous integration and
release processes. treeherder treeherder shows the status of the tree (whether or not it currently builds successfully). check this before checking in and out, to be sure you're working with a working tree. perfherder perfherder is used to aggregate the results of automated performance tests against the tree. crash tracking information about the socorro crash reporting system. callgraph a to...
Linux compatibility matrix
the following table lists the available library versions for the mozilla.org-distributed firefox builds dependencies, and/or to build firefox. ...
...) suse sle-15 4.12 2.26 2.54 2.24 3.22 0.34 7.3 7.5, 8.2, 9.2 5.0 3.6 jul 2018 dec 2019 / dec 2022 (lts) suse sle-15-sp1 4.12 2.26 2.54 2.24 3.22 0.34 8.2 7.5, 8.2, 9.2 5.0, 7.0 3.6 jun 2019 ? ...
...ribution kernel glibc glib gtk+2 gtk+3 pixman stdc++ gcc clang python3
released eol notes red backgrounds denote lack of compatibility with current versions of firefox. in the eol column, they denote distribution versions past their end of life. yellow backgrounds denote compatibility with esr78 green backgrounds denote compatibility with the current
release (as of writing, 78) greener backgrounds denote compatibility with the current mozilla-central (as of writing, 80). the table is generated with the script and data in https://github.com/glandium/firefox-linux-compat-matrix ...
Performance best practices for Firefox front-end engineers
s, then synchronously calls the function that you want to test, and immediately after checks the styleflushes attribute again. if the value went up, your code caused synchronous style flushes to occur. note that your test and function must be called synchronously in order for this test to be accurate. if you ever go back to the event loop (by yielding, waiting for an event, etc), style flushes un
related to your code are likely to run, and your test will give you a false positive. detecting and avoiding synchronous reflow this is also sometimes called “sync layout”, "sync layout flushes" or “sync layout calculations” sync reflow is a term bandied about a lot, and has negative connotations. it's not unusual for an engineer to have only the vaguest sense of what it is—and to only...
...ven several properties that do so. if you require size or position information, you have a few options. bug 1434376 has recently landed a helper in the window binding to make it easier for priviledged code to queue up javascript to run when we know that the dom is not dirty, and size, position, and style information is cheap to query for. ...
...run when we know that the dom is not dirty, and size, position, and style information is cheap to query for. here's an example: async function matchwidth(elem, othe
relem) { let width = await window.promisedocumentflushed(() => { // do _not_ under any circumstances write to the dom in one of these // callbacks! return elem.clientwidth; }); requestanimationframe(() => { othe
relem.style.width = `${width}px`; }); } please see the section on promisedocumentflushed in detecting and avoiding synchronous style flushes for more information on how to use the api. note that queries for size and position information are only expensive if the dom has been written to. otherwise, we're doing a cheap look-up of cached information. if we work hard to move all dom writes into reque...
Getting Started with Chat
about thunderbird issues in #firefox. mozilla's channels are most active between 9am and 7pm pst monday to friday, excluding us holidays. when asking a question, be patient. sometimes, it can take a few minutes for people to respond. posting a message like "help!" is not particularly helpful. asking a good question will result in a better experience for both you and the person trying to help.
relax and have fun! software there are several different applications which allow you to connect to irc networks. you will need to use the following information to configure the server connection: server: irc.mozilla.org port: 6667 (default) or 6697 (ssl) desktop clients desktop clients tens to allow the most detailed configuration. for example, you can connect using ssl or a non-secure con...
...if this happens, you can type this command to resolve this issue. /server server-name manually connect to a server /topic topic changes the topic of the channel. the topic is a message that displays first when you join a channel. /whois nickname di...
... which can be used with chanserv /msg chanserv identify #channel password allows you to edit the aspects of the specified channel given the correct password /msg chanserv register #channel password topic registers a channel given the correct password and sets the topic for more information about chanserv go here. firebot firebot is a bot which assists with mozilla
related activities on irc. for instance, firebot automatically posts messages to #developers about the status of automated tests. the following are some helpful commands which can be used by firebot: bug ###### when a bug number is mentioned in a message, firebot automatically displays the link and summary from bugzilla for that bug. /msg firebot uuid displays a unique identi...
HTTP Cache
ote: here is a potential for endless looping when recheck_after_write_finished is abused result == entry_needs_revalidation: state = revalidating, this prevents invocation of any callback until cacheentry::setvalid is called continue as in state entry_wanted (just bellow) result == entry_wanted: consumer reference ++ (dropped back when the consumer
releases the entry) oncacheentryavailable is invoked on the opener with anew = false and the entry opener is removed from the fifo result == entry_not_wanted: oncacheentryavailable is invoked on the opener with null for the entry opener is removed from the fifo state == writing or revalidating: do nothing and exit any other value of stat...
...disk cache memory pool) this is a description of this feature status that is curr...
...- state = empty state == revalidating: the writer failed the re-validation process and failed to call setvalid on the entry - state = ready call to cacheentry::invokecallbacks all consumers
release the reference: the entry may now be purged (removed) from memory when found expired or least used on overrun of the memory pool limit when this is a disk cache entry, its cached data chunks are
released from memory and only meta data is kept intermediate memory caching of frequently used metadata (a.k.a. disk cache memory pool) this is a description of this feature status that is currently only a patch in bug 986179. current behavior is simpler and causes a serious memory consumption regression (bug 975367). for the disk cache entries we keep some of the most recent and most used cach...
How to get a stacktrace with WinDbg
e following software: debugging tools for windows microsoft distributes the debugging tools for windows for free, those include windbg which you will need here. download it from install debugging tools for windows. (you'll want the 32-bit version, even if you are using a 64-bit version of windows) then install it, the standard settings in the installation process are fine. a firefox nightly or
release you need a firefox version for which symbols are availables from the mozilla symbol server to use with windbg. you can use any official nightly build or
released version of firefox from mozilla. you can find the latest trunk nightly builds under http://ftp.mozilla.org/pub/mozilla.o.../latest-trunk/. debugging to begin debugging, ensure that firefox is not already running and open windbg fr...
...s opened in the debugger, you need to configure your windbg to download symbols from the mozilla symbol server. to load the symbols, enter the three commands below, pressing enter after each one. (more details are available at using the mozilla symbol server.) .sympath srv*c:\symbols*http://symbols.mozilla.org/firefox;srv*c:\symbols*http://msdl.microsoft.com/download/symbols .symfix+ c:\symbols .
reload /f now wait for the symbols to download. this may take some time depending on your connection speed; the total size of the mozilla and microsoft symbols download is around 1.4gb. windbg will show "busy" at the bottom of the application window until the download is complete. once the download is complete, you need to configure windbg to examine child processes, ignore a specific event caused...
...er these three commands, one at a time, to get the stacktrace, crash/hang analysis and log of loaded modules. (again, press enter after each command.) ~* kp !analyze -v -f lm after these steps are completed, find the file c:\temp\firefox-debug-(today's date).txt on your hard drive. to provide the information to the development community, submit this file with a support request or attach it to a
related bug on bugzilla. producing a minidump sometimes the stacktrace alone is not enough information for a developer to figure out what went wrong. a developer may ask you for a "minidump" or a "full memory dump", which are files containing more information about the process. you can easily produce minidumps from windbg and provide them to developers. faq q: i am running windows 7 (32-bit or 64...
Extending a Protocol
nerally want the parent to let a child know when some work is done - and send some confirmation or result data back to the child. sometimes, the parent will want to notify all its children of something. so communication can go in both directions. in this tutorial, we are just going to cover a child talking to a parent, and the parent responding with some data. in order to manage parent-child
relationships, ipdl uses a tree herirachy to manage the creation of children. as dom apis have access to the window object, we generally want to use the "pwindowglobal" protocol to manage things for us: this protocol is convinient because we can easily access it from the window object... so as long as we can get a hold of a window object, we can get it to do useful things for us (as we shall soon see...
...parent. and the inverse is also true, as you will soon see: pecho.idpl will need explicitly state that pwindowglobal.ipdl is managing it. includes: this is kinda like "#includes" in c++, except it's not a preprocessor directive. it just includes the defintion and makes it available to pwindowglobal.ipdl. constructs: by which we mean, pwindowglobal is in charge of contructing the parent/child
relationship. without this, we can't send messages. anyway, let's put the above into practice by creating our custom protocol: pecho.ipdl. custom protocol - pecho.ipdl this next part requires us to both specify the protocol and actually implement everything in c++. it's quite involved and, unfortunately, all steps need to be done before we can successfully recompile. we will try to compile ou...
...ings in bold is what we added). // stuff.. include protocol pecho; async protocol pwindowglobal { // stuff... manages pecho; child: // stuff... parent: async pecho(); // more stuff... } if the above additions are unclear, please see the final implementation of pecho as a diff in phabricator - search for "pwindowglobal.ipdl". congrats! we've now set up the bi-directional
relationship between pwindowglobal and pecho at the protocol level. we've told gecko who manages who, and what messages we want to send. now we actually need to implement the "echochild" and "echoparent" actors to handle sending and receiving messages. and we also need to implement the actual management of these objects by dom/ipc/windowglobalchild.{h|cpp} and dom/ipc/windowglobalparent.{h|cpp}. i...
IPDL Tutorial
t be allowed to call the parent actor's "callyou()" method while servicing the "callmecallyou()" message. (the child actor would be terminated with extreme prejudice.) preferred semantics use async semantics whenever possible. blocking on replies to messages is discouraged. if you absolutely need to block on a reply, use sync semantics very carefully. it is possible to get into trouble with ca
reless uses of synchronous messages; while ipdl can check and/or guarantee that your code does not deadlock, it is easy to cause nasty performance problems by blocking. please don't use rpc semantics. rpc semantics exists mainly to support remoting plugins (npapi), where we have no choice. chrome to content calls (for ipc tabs) must only use async semantics. in order to preserve responsiveness, the...
...e strategies. in this case, the alloc/dealloc pairs can perform different actions. here is an example of refcounting: class examplechild : public nsiobserver, public pexamplechild { ... ...
...s intentional */ pexampleparent::deallocpsubexample() psubexamplechild::recv__delete__() psubexamplechild::actordestroy(deletion) pexamplechild::deallocpsubexample() actordestroy is a generated function that allows code to run with the knowledge that actor deallocation is imminent. this is useful for actors with lifetimes outside of ipdl - for instance, a flag could be set indicating that ipdl-
related functions are no longer safe to use. accessing the protocol tree from c++ the ipdl compiler generates methods that allow actors to access their manager (if the actor isn't top-level) and their managees (if any) from c++. for a protocol pfoo managed by pmanager, that manages pmanagee, the methods are pmanager* pfoo::manager() const infallibletarray<pmanagee*> pfoo::managedpmanagee(); void ...
Downloads.jsm
the downloads.jsm javascript code module provides a single entry point to interact with the downloading capabilities of the platform, including starting new downloads, controlling ongoing downloads, and retrieving download-
related configuration. 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. p...
...s finished successfully and you can access the target file. promise can be rejected with downloaderror if the download failed. 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. calling this function may cause the download list to be
reloaded from the previous session, if it wasn't loaded already. promise<downloadlist> getlist(atype); parameters atype this can be downloads.public, downloads.private, or downloads.all. downloads added to the downloads.public and downloads.private lists are reflected in the downloads.all list, and downloads added to the downloads.all list are also added to either the downloads.public or the d...
...ds.private list based on their properties. promise resolves to the requested downloadlist object. getsummary() retrieves the specified type of downloadsummary object. there is one download summary for each type, and this method always retrieves a reference to the same download summary when called with the same argument. calling this function does not cause the list of public downloads to be
reloaded from the previous session. the summary will behave as if no downloads are present until the getlist() method is called. promise<downloadsummary> getsummary(atype); parameters atype this can be downloads.public, downloads.private, or downloads.all. promise resolves to the requested downloadsummary object. examples downloading to a local file this example downloads an html file wi...
PopupNotifications.jsm
to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/popupnotifications.jsm"); once you've imported the module, you can then use the popupnotifications object it exports; this object provides methods for creating and displaying popup notification panels. note: this code module is imported by firefox chrome windows, so you don't have to do it yourself in most extensions. ...
... browser, id, message, anchorid, mainaction, secondaryactions, options ); parameters browser the xul <xul:browser> element with which the notification is associated. this must not be null; you can, however, simply specify gbrowser.selectedbrowser to associate it with the current tab. id a unique id string for the type of notification being displayed. for example, geolocation
related notifications have the id "geolocation". only one notification for each id can be visible at a time; if one with the specified id already exists, it will be replaced with the newer notification. message a string to display in the notification panel. anchorid the id of the element that should serve as the anchor for the notification popup (that is, the element the arrow on the popup should...
... the notification message/actions if necessary during this notification. "shown" the notification has become visible. this can be fired multiple times as notifications are dismissed and redisplayed. the notification object each notification is represented by a notification object. this object contains all the data necessary to present and manage the notification, and has one method. the ancho
relement property returns the notification's anchor element. the remove()method removes the notification. ...
SourceMap.jsm
ng which can be json.parse'd, or an object). according to the spec, source maps have the following attributes: version: which version of the source map spec this map is following. sources: an array of urls to the original source files. names: an array of identifiers that can be referenced by individual mappings. sourceroot: optional. the url root from which all sources are
relative. mappings: a string of base64 vlqs which contain the actual mappings. file: the generated filename this source map is associated with. sourcemapconsumer.prototype.originalpositionfor(generatedposition) returns the original source, line, and column information for the generated source's line and column positions provided. the only argument is an object with the following prop...
...rmation is not available. sourcemapgenerator an instance of the sourcemapgenerator represents a source map which is being built incrementally. new sourcemapgenerator(startofsourcemap) to create a new one, you must pass an object with the following properties: file: the filename of the generated source that this source map is associated with. sourceroot: an optional root for all
relative urls in this source map. sourcemapgenerator.prototype.addmapping(mapping) add a single mapping from original source line and column to the generated source's line and column for this source map being created. the mapping object should have the following properties: generated: an object with the generated line and column positions. original: an object with the original line a...
...pe.addmapping(mapping) add a single mapping from original source line and column to the generated source's line and column for this source map being created. the mapping object should have the following properties: generated: an object with the generated line and column positions. original: an object with the original line and column positions. source: the original source file (
relative to the sourceroot). name: an optional original token name for this mapping. sourcemapgenerator.prototype.tostring() renders the source map being generated to a string. sourcenode sourcenodes provide a way to abstract over interpolating and/or concatenating snippets of generated javascript source code, while maintaining the line and column information associated between those sni...
Application Translation with Mercurial
mozilla-aurora.hg this can take some time, mostly depending on the performance of the hard drive. extract the files: hg update obtaining the texts of your localization go back to the parent folder of mozilla-aurora: cd .. find the localization repository for your branch and language on http://hg.mozilla.org/ e.g. for aurora and german (language code 'de'), it is http://hg.mozilla.org/
releases/l10n/mozilla-aurora/de/ copy that url to the clipboard. copy the repository to your computer by running the following command: hg clone http://hg.mozilla.org/
releases/l10n/mozilla-aurora/de/ de-mozilla-aurora this should proceed pretty fast. on windows, you can paste the url by calling the paste command from the window menu in the upper left corner of the window. configuring your me...
...xample, the absolute file path is c:\mozilla\mozilla-aurora\browser\locales\en-us. enable read-only mode for the left directory. for the file path of the right directory, go to the downloaded translation directory de-mozilla-aurora and then into its browser folder. in this example, the absolute file path is c:\mozilla\de-mozilla-aurora\browser. save this comparison as project so you can easily
relaunch this comparision without selecting the directories again. a good name is e.g. translation-mozilla-aurora-browser.winmerge open the comparison you just saved. the translation bring the console with mercurial to the front. start tracking changes you make against the localization repository by telling it that with the qnew subcommand to save these changes as patch in a mercurial ...
... "text which will be shown in firefox"> as you can see there is a bigger block of text not recognized. this is due to the texts which have in the english versionmoved from below the string with the id privatebrowsingpage.howtostart3 to a position above it. cut and paste these strings in the localized file so their position corresponds to the on in the english file. press the f5 key or click the
reload button in winmerge's toolbar to re-compare the files. now copy the empty lines below privatebrowsingpage.learnmore and the line <!-- to be removed post-australis --> to the localized file. this text is a comment (which in .dtd files always can be found between <!-- and -->). there is no need to translate this text. now we copy the two missing lines from the english file and insert them in th...
Index
ocalization after all of your hard work localizing we're sure that you not only want to see your work but you want to make sure it's accurate! if you don't have a lot of experience with code, you might even be concerned that you've broken something (oops!). now we'll walk you through performing some quality assurance testing on your work to make sure you're on the right track. 15
release phase localization you've made it! you've setup up your local and remote environments, you've selected your l10n tools and projects, done some localization and even some testing! now you're ready for the final phase: becoming an official l10n
release. here, we'll continue to stay true to the original intent of this guide and only present you with the technical information you need t...
...zation you've made it! you've setup up your local and remote environments, you've selected your l10n tools and projects, done some localization and even some testing! now you're ready for the final phase: becoming an official l10n
release. here, we'll continue to stay true to the original intent of this guide and only present you with the technical information you need to become an official
release. we'll primarily focus on getting your
release repository setup and the mercurial commands you'll need to know to use that repository. 16 translation phase localization, localization:tools congratulations on completing the initial setup! as a reward for your efforts, you get to move on to the very reason you've come here: to localize mozilla projects. 17 locali...
...the localization team for your language agrees. all we ask is that you name this page according to this example, "mozilla content in spanish (es-mx)" and add your locale code tag at the bottom. enjoy developing your style guide! 31 patching a localization localization say you have found a problem with an existing localization. more specifically, it's a problem with an already
released localization. what do you do now? well, you have come to the right place! this page will walk you through creating a patch for an existing localization. the steps below are fairly generic; for the most part they apply to creating l10n patches for firefox, thunderbird, seamonkey, or calendar. 32 svn for localizers intro, localization, svn, opensource welcome to the svn tu...
Localizing without a specialized tool
two string that need to be translated: add "mdc search" manage search engines... there is also a tooltip that appears when you hover over the magnifying glass icon on the right side of the bar. folder structure throughout this document, we will be using the following folder structure in all examples: your working directory (root) mozilla-1.9.2 (en-us source, pulled from http://hg.mozilla.org/
releases/mozilla-1.9.2) l10n-mozilla-1.9.2 (a directory containing localization directories, one dir per localization; often referred to as "l10n base") x-testing (a directory with your localization files) please either follow this structure closely or adjust all commands in the documentation as needed by your custom set-up. get the source change your current directory to your working directory...
...mmands in the documentation as needed by your custom set-up. get the source change your current directory to your working directory with the following command: $ cd /path/to/your/working/directory first, you will need to check out the sources of mozilla-1.9.2 together with the en-us strings. assuming that you have installed mercurial, issue the following command: $ hg clone http://hg.mozilla.org/
releases/mozilla-1.9.2 this will pull the mozilla 1.9.2 sources from the remote repository and create a mercurial clone in mozilla-1.9.2 inside your working directory. next, again in your working dir, create a directory that will serve as localization base: $ mkdir l10n-mozilla-1.9.2 $ cd l10n-mozilla-1.9.2 inside this directory you will put all the localization files in a folder named after your lo...
...g $ hg init if there is a bitbucket repository with localization files, you can pull from it. this will automatically create an "x-testing" directory in your current directory (you should be in l10n-mozilla-1.9.2). $ hg clone http://bitbucket.org/mozillal10n/x-testing if there is an hg.mozilla.org repository with localization files, you can pull from it too: $ hg clone http://hg.mozilla.org/
releases/l10n-mozilla-1.9.2/x-testing eventually, you should end up with a folder hierarchy described above in the folder structure section. you are now ready to start translating! getting started with compare-locales you are going to need to create the structure of your localization, where, one-by-one, each of the files needing localization will be copied. this directory structure needs to mimic t...
Patching a Localization
what do you do now? well, you have come to the right place! this page will walk you through creating a patch for an existing localization. the steps below are fairly generic; for the most part they apply to creating l10n patches for firefox, thunderbird, seamonkey, or calendar. i'll use firefox in the example below to help you understand the general steps to creating a l10n patch. ...
...u need to get the source for the localization in question using its two or three character iso language code. for our example, i'll use gl (galician). whenever you see gl in blue text, replace it with the locale code for your language. next thing you need to know is which localization version you want to patch. all of our localizations work on the aurora branch. the repository for this version is
releases/l10n/mozilla-aurora. for more information about branches see l10n:branches. now let's get a little more detailed. start bash and do the following: create a clean directory for your work. for example, create a directory like localization-workdir (in this example it is located in your home directory): mkdir ~/localization-workdir navigate to the directory you just created. cd ...
...wing: create a clean directory for your work. for example, create a directory like localization-workdir (in this example it is located in your home directory): mkdir ~/localization-workdir navigate to the directory you just created. cd ~/localization-workdir clone the localization repository for your locale and for the version you want to patch: hg clone http://hg.mozilla.org/
releases/l10n/mozilla-aurora/gl now that you have the code and your working directory, edit the dtd and properties files to make your necessary changes. creating a l10n patch you've made your changes, now create your patch. navigate to your working localization directory. cd ~/localization-workdir/gl create a patch (also known as a diff) using the diff command. hg diff this command cre...
What every Mozilla translator should know
useful tools the l10n dashboard pontoon narro translate toolkit koala 0.1 mozillatranslator mercurial the hg is organized into several repositories, sometimes called branches. we have the main repository called mozilla-central (or trunk) where the day to day developing work is done. ...
... for an specific version, a new repository is created under hg.mozilla.org/
releases/. all the content of the trunk is copied to this new branch so that the developing work is done in two (or more) parallel places: the generic trunk and the version oriented branch(es). for every branch and every locale, there is a separate repository for localization files committed by the localizers. ...
... 2.0 branch mozilla cross-reference mozilla cross-reference is a web site mirroring the content of the hg server. here we can easily have a look into other languages translations. bugzilla, the bug-tracking system you do need an account in bugzilla you should configure the account to watch the following addresses: firefoxl10n@hotmail.com calendar-l10n@mozilla.bugs (specific for calendar
related bugs) this way you will receive mail for bugs affecting many or even all locales. when you create a bug, if you want the person in charge of the l10n to follow up your bug you should cc: l10n@mozilla.com if you choose to make changes to your localization, you should make the changes local to your disk, push them to your hg repository on merucial, test the changes on a nightly/tinderbox bu...
Fonts for Mozilla's MathML engine
open the zip archive, move inside the /stixv2.0.0/fonts/otf/ directory. you will find the stixmath-regular, stix-regular, stix-bold, stix-italic, stix-bolditalic font files. open the stixmath-regular font file and click the install button. if desired, you may also do the same for the other font files. note:cambria math is installed by default on windows 7 and later versions and should ensure
relatively good mathml rendering. an enhancement request has been submitted to microsoft to install latin modern math and stix by default. os x install the latin modern math and stix fonts as follows: download latinmodern-math-1959.zip. extract the zip archive, move inside the latinmodern-math-1959 directory and then inside the otf directory. you will find a latinmodern-math font file. double...
.../stixv2.0.0/fonts/otf/ directory. you will find the stixmath-regular, stix-regular, stix-bold, stix-italic, stix-bolditalic font files. open the stixmath-regular font file and click the "install the font" button from the window that opens. if desired, you may also do the same for the other font files. note: a deprecated version of stix is preinstalled starting with os x lion and should ensure
relatively good mathml rendering. enhancement requests have been submitted to apple to ship opentype math fonts in the default installation. if you have a developer account, these are problems 16841023 and 17021145. linux install the latin modern math, stix or xits fonts, which are generally available from your package manager. on debian/ubuntu/mint and other debian-based distributions, use the f...
... visit as well as web math fonts on all pages with mathml content. a better alternative on unix systems is to install the otf files for latin modern math and stix into some local font folder and (if necessary) to run fc-cache on it. on os x and linux, the standard paths are ~/library/fonts/ and ~/.fonts. fonts with a math table you can actually render mathml using any font with a math table and
related open font format features. a list of such math fonts is provided below. you can use the advanced font preference menu to configure the default font for mathematics. alternatively, you can try the mathml-fontsettings add-on. asana math cambria math dejavu math tex gyre garamond math (under development) latin modern math libertinus math lucida bright math minion math stix math tex g...
Mozilla Web Developer FAQ
e this doctype declaration: <!doctype html> the easiest way to make sure that the almost standards mode is activated for html, is to use this doctype declaration: <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> the easiest way to activate the quirks mode for html is to omit the doctype declaration. however, authoring new documents that
rely on quirks is discouraged. the almost standards mode was introduced in mozilla 1.1 beta and mozilla 1.0.1. in earlier versions the doctype declarations that now activate the almost standards mode activated the standards mode. doctype sniffing only applies to documents served as text/html. documents sent as xml always activate the standards layout mode. this includes documents sent as applicatio...
...u are seeing a bug. javascript doesn’t work! why? some proprietary document objects such as document.all and document.layers are not part of the w3c dom and are not supported in mozilla. (there is partial undetectable support for document.all, though, in newer versions of mozilla. however, that functionality only exists for compatibility with sites authored specifically for ie. you should not
rely on mozilla’s document.all support on new pages.) the method document.getelementbyid() can be used instead. in the standards mode mozilla does not generate implicit top-level javascript variable bindings for elements with the id or name attribute. the correct way to access an element by id is to call the document.getelementbyid() method with the id as a string as the argument. also, old clien...
... are supported. mathml svg (in svg-enabled builds only) xul (please note that xul is mozilla-specific and, therefore, using it on the public web causes interoperabilty problems.) xml:base is observed when following links. style sheets can be references using processing instructions. i didn’t find the answer i was looking for. where should i ask? try asking in the newsgroup
relevant to your question in the comp.infosystems.www.authoring.* hierarchy or, if your question is about javascript/ecmascript or the dom, in comp.lang.javascript (after reading the group faqs first, of course). please do not ask web authoring questions in the newsgroups intended for discussion about the development of mozilla. comp.infosystems.www.authoring.html web authoring faq comp.infosyste...
Mozilla projects on GitHub
whose code is hosted on github. this article offers a quick guide for getting started with mozilla code on github. it also lists some interesting github repositories containing mozilla project code. getting started you can look at code on github without an account. that is the first thing to know. to do more—to contribute to the code, or to fork it and start your own project based on mozilla-
related code—you need a github account. to learn more about setting up a github account, visit the github website. most mozilla project code is located in repositories within the mozilla github organization. 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. it does not include eve...
...y projects not listed below. projects this listing covers the larger-scale and more important mozilla projects on github. it does not include everything since it's hard to keep track of all the smaller projects. look to github for the most complete list of mozilla projects on github. project name description pdf.js a portable document format (pdf) reader written enti
rely in javascript. shumway shumway is a flash vm and runtime written in javascript. addon-sdk the mozilla add-on sdk. asknot the what can i do for mozilla web site, which helps you figure out how you can contribute to mozilla. bugsahoy a web page to help new mozilla contributors identify bugs to fix. bugzilla-dashboard a convenient dashboar...
...and every other js environment. dxr an intelligent tool for browsing source code. emscripten the emscripten llvm-to-javascript compiler. fxdt-adapters the firefox developer tools adapter that lets you debug various remote targets from the firefox developer tools. firefox-dev.tools a web page to help new mozilla contributors find bugs to work on that
relate to the firefox developer tools. gecko-dev a read-only mirror of the mercurial repositories used for mozilla private code. kitsune kitsune is the platform that drives the mozilla support web site, sumo. kuma the django project that powers this site (mdn). mdn code samples for the mdn web site. mozbrick the mozilla brick project. ...
BloatView
bjects rem). use this number to look for the worst offenders. (should be zero!) objects total - the total count of objects allocated of a given class. objects rem - the number of objects allocated of a given class that weren't deleted. (should be zero!) interesting things to look for: are your classes in the list? - look! if they aren't, then you're not using the ns_impl_addref and ns_impl_
release (or ns_impl_isupports which calls them) for xpcom objects, or moz_count_ctor and moz_count_dtor for non-xpcom objects. not having your classes in the list is not ok. that means no one is looking at them, and we won't be able to tell if someone introduces a leak. (see below for how to fix this.) the bytes leaked for your classes should be zero! - need i say more? if it isn't, you should use t...
...es in the list is not ok. that means no one is looking at them, and we won't be able to tell if someone introduces a leak. (see below for how to fix this.) the bytes leaked for your classes should be zero! - need i say more? if it isn't, you should use the other tools to fix it. the number of objects remaining might not be equal to the total number of objects. this could indicate a hand-written
release method (that doesn't use the ns_log_
release macro from nstracerefcnt.h), or perhaps you're just not freeing any of the instances you've allocated. these sorts of leaks are easy to fix. the total number of objects might be 1. this might indicate a global variable or service. usually this will have a large number of refcounts. if you find leaks, you can use refcount tracing and balancing to ...
...e configurations are located in testing/mozharness/configs/. 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. by default, those macros support refcnt logging directly. if your object is not an xpcom object then some manual editing is in order. the following sample code shows what must be done: mytype::mytype() { moz_count_ctor(mytype); ... } mytype::~mytype() { moz_count_dtor(mytyp...
Gecko Profiler FAQ
so can you. :-) however, if it’s really just “leaks” that are the problem, it’s possible that those profiles only show you that we spend a lot of time in gc / cc. in that case, the gecko profiler is the wrong tool to debug this. even about:memory would be more useful. overview of the changes in the last (year?) to cleopatra/etc faster, hopefully more
reliable has a timeline tab lets you hide threads with a context menu supports symbolication for local builds on windows if you run “mach buildsymbols” first profiling non-nsthreads? the current setup requires each thread that you want to profile to notify the profiler about its existence. we have this hooked up for nsthreads, and as of...
...sues in the first place. tasktracer: how to diagnose dispatch delays? (a demo) tasktracer is currently not in a usable state. sorry. tasktracer: from the above, how do we decide on prioritization on the same thread event queue? see above. do we profile memory page faults? (i.e. when we are accessing a virtual memory page that needs to
reload from disk) the gecko profiler does not know about page faults. on linux, perf does a good job at visualizing page faults, for example, they will show up as part of the same call stack as the user-space call stack for the program you are profiling. if so, how complicated is to find out the reason the page has been purged? [mstange] i don’t know. ...
...son the page has been purged? [mstange] i don’t know. [ehsan] i don’t think this is very interesting in the general situation, since oses can basically decide to swap out part of your virtual address space and you’d page fault when you access that page next and there is very little that the program can do about that. many times the reason you incur a page fault is me
rely that you are touching a memory page that hasn’t been touched in awhile. for example, we have observed that the first access to large hashtables when doing a hashtable lookup can incur a page fault in many cases, and while the specific reason behind each one of those page faults may be different, the general conclusion from that observation would be something about the overall efficiency of yo...
Leak-hunting strategies and tips
e cycle in every last case. sometimes these cycles extend through js objects (discussed further below), and since js is garbage-collected, every pointer acts like an owning pointer and the potential for fan-out is larger. see bug 106860 and bug 84136 for examples. (is this advice still accurate now that we have a cycle collector? --jesse) dropping a reference on the floor by: forgetting to
release (because you weren't using nscomptr when you should have been): see bug 99180 or bug 93087 for an example or bug 28555 for a slightly more interesting one. this is also a frequent problem around early returns when not using nscomptr. double-addref: this happens most often when assigning the result of a function that returns an addrefed pointer (bad!) into an nscomptr without using dont_add...
...r bug 28555 for a slightly more interesting one. this is also a frequent problem around early returns when not using nscomptr. double-addref: this happens most often when assigning the result of a function that returns an addrefed pointer (bad!) into an nscomptr without using dont_addref(). see bug 76091 or bug 49648 for an example. [obscure] double-assignment into the same variable: if you
release a member variable and then assign into it by calling another function that does the same thing, you can leak the object assigned into the variable by the inner function. (this can happen equally with or without nscomptr.) see bug 38586 and bug 287847 for examples. dropping a non-refcounted object on the floor (especially one that owns references to reference counted objects). see bug 10...
...ascript objects to be exposed to c++ code as normal xpcom objects. when a c++ object is exposed to javascript (the more common of the two), an xpcwrappednative object is created. this wrapper owns a reference to the native object until the corresponding javascript object is garbage-collected. this means that if there are leaked gc roots from which the wrapper is reachable, the wrapper will never
release its reference on the native object. while this can be debugged in detail, the quickest way to solve these problems is often to simply debug the leaked js roots. these roots are printed on shutdown in debug builds, and the name of the root should give the type of object it is associated with. one of the most common ways one could leak a js root is by leaking an nsxpcwrappedjs object. this is ...
Preferences
reference system. using preferences from application code firefox 6 introduced static functions for accessing preferences efficiently from within application code. this api is not available for add-ons, but if you're working on a gecko application, this api is the preferred way to access preferences. ...
...orking on a gecko application, this api is the preferred way to access preferences. mozilla networking preferences a guide to key networking-
related preferences. mozilla preferences for uber-geeks a guide to preferences that only truly elite geeks should play with. examples code snippets preference-
related code snippets. adding preferences to an extension how to add preferences to an existing extension. ...
...o key networking-
related preferences. mozilla preferences for uber-geeks a guide to preferences that only truly elite geeks should play with. examples code snippets preference-
related code snippets. adding preferences to an extension how to add preferences to an existing extension. ...
NSPR Contributor Guide
tside observer. nspr wishes to document some guidelines for those who would contribute to nspr. these guidelines should help the contributor in crafting his contribution, increasing its likelihood for acceptance. general guidelines downward compatibility because many different applications, besides the mozilla client, use the nspr api, the api must remain downward compatible across even major
releases. this means that the behavior of an existing public api item in nspr cannot change. should you need to have a similar api, with some slightly different behavior or different function prototype, then suggest a new api with a different name. c language api the nspr api is a c language api. please do not contribute java, c or other language wrappers. coding style nspr does not have a docu...
...nging. new features for purposes of this paper, a "new feature" is defined as some api addition that goes into the core nspr library, for example: libnspr4.dll nspr is mostly complete. new apis are driven mostly by the os vendors as they add new features. should you decide that there's something that nspr does not cover that should be covered, let's talk. your proposed api should encapsulate a
relatively low level capability as would be found in a system call or libc. your new feature must be implemented on all platforms supported by nspr. when you consider a new api for nspr ask yourself if your proposed feature can implement it across all platforms supported by nspr. if several platforms cannot be made to implement your api, then it is not a good candidate for inclusion in nspr. before y...
...es exist, for the most part, as "legacy" code from nspr 1.0. [note that the current nspr module owners do not now nor never have been involved with nspr 1.0.]. such is life. that said: there are some libraries that implement functions intended for use with applications using nspr, such as ...nsprpub/lib/libc/plgetopt.*. generally useful platform abstractions you agree to sustain, bug fix may
rely on the nspr api may not
rely on any other library api new platform ports all nspr api items must be implemented platform specific headers in pr/include/md/_platformname.[h!cfg] platform specific code in pr/src/md/platform/*.c make rules in config/_platform.mk documentation the files for nspr's documentation are maintained using a proprietary word processing system [don't ask]. documen...
PR_DetachThread
disassociates a prthread object from a native thread. syntax #include <pprthread.h> void pr_detachthread(void); parameters pr_detachthread has no parameters. returns the function returns nothing. description this function detaches the nspr thread from the currently executing native thread. the thread object and all
related data attached to it are destroyed. the exit process is invoked. the call returns after the nspr thread object is destroyed. ...
...arameters. returns the function returns nothing. description this function detaches the nspr thread from the currently executing native thread. the thread object and all
related data attached to it are destroyed. the exit process is invoked. the call returns after the nspr thread object is destroyed. this call is needed only if you attached the thread using pr_attachthread. note: as of nspr
release v3.0, pr_attachthread and pr_detachthread are obsolete. a native thread not created by nspr is automatically attached the first time it calls an nspr function, and automatically detached when it exits. ...
...e exit process is invoked. the call returns after the nspr thread object is destroyed. this call is needed only if you attached the thread using pr_attachthread. note: as of nspr
release v3.0, pr_attachthread and pr_detachthread are obsolete. a native thread not created by nspr is automatically attached the first time it calls an nspr function, and automatically detached when it exits. in nspr
release 19980529b and earlier, it is necessary for a native thread not created by nspr to call pr_attachthread before it calls any nspr functions, and call pr_detachthread when it is done calling nspr functions. ...
PR_Wait
e of the following values: pr_success means the thread is being resumed from the pr_wait call either because it was explicitly notified or because the time specified by the parameter ticks has expired. pr_failure means pr_wait encountered a system error (such as an invalid monitor reference) or the thread was interrupted by another thread. description a call to pr_wait causes the thread to
release the monitor's lock, just as if it had called pr_exitmonitor as many times as it had called pr_entermonitor. this has the effect of making the monitor available to other threads. when the wait is over, the thread regains control of the monitor's lock with the same entry count it had before the wait began. a thread waiting on the monitor resumes when the monitor is notified or when the timeout...
...s as it had called pr_entermonitor. this has the effect of making the monitor available to other threads. when the wait is over, the thread regains control of the monitor's lock with the same entry count it had before the wait began. a thread waiting on the monitor resumes when the monitor is notified or when the timeout specified by the ticks parameter elapses. the resumption from the wait is me
rely a hint that a change of state has occurred. it is the responsibility of the programmer to evaluate the data and act accordingly. this is usually done by evaluating a boolean expression involving the monitored data. while the boolean expression is false, the thread should wait. the thread should act on the data only when the expression is true. the boolean expression must be evaluated while in th...
...xitmonitor(&ml); a thread can be resumed from a wait for a variety of reasons. the most obvious is that it was notified by another thread. if the value of timeout is not pr_interval_no_timeout, pr_wait resumes execution after the specified interval has expired. if a timeout value is used, the boolean expression must include elapsed time as part of the monitored data. resuming from the wait is me
rely an opportunity to evaluate the expression, not an assertion that the expression is true. ...
NSS FAQ
environments are supported? this section is out of date iplanet e-commerce solutions has certified nss 3.1 on 18 platforms, including aix 4.3, hp-ux 11.0, red hat linux 6.0, solaris (2.6 or later), windows nt (4.0 or later), and windows 2000. other contributors are in the process of certifying additional platforms. the nss 3.1 api requires c or c++ development environments. for the latest nss
release notes and detailed platform information, see project information. what cryptography standards are supported? nss supports ssl v2 and v3, tls, pkcs #5, pkcs #7, pkcs #11, pkcs #12, s/mime, and x.509 v3 certificates. for complete details, see encryption technologies available in nss 3.11 what is the
relationship between nss and psm? personal security manager (psm) is built on top of nss. it...
..., nss utilizes netscape portable runtime (nspr) libraries as a portability interface and implementation that provides consistent cross-platform semantics for network i/o and threading models. you can use nspr throughout your application or only in the portion that calls into nss. mozilla strongly recommends that multithreaded applications use the nspr or native os threading model. (in recent nspr
releases, the nspr threading model is compatible with the native threading model if the os has native threads.) alternatively, you can adapt the open-source nspr implementation to be compatible with your existing application's threading models. more information about nspr may be found at netscape portable runtime. can i use nss even if my application protocol isn't http? yes, tls is independent of ...
...ntation currently available for the rest of the nss api. if your application requires sophisticated certificate management, smart card support, or hardware acceleration, your integration effort will be more extensive. where can i download the nss tools? binary builds of nss for several platforms including the command-line tools can be downloaded from http://ftp.mozilla.org/pub/mozilla.o...y/nss/
releases/. nspr, which you will need as well, can be downloaded from http://ftp.mozilla.org/pub/mozilla.org/nspr/
releases/. how can i learn more about tls? see https://developer.mozilla.org/docs/glossary/tls. licensing questions how is nss licensed? nss is available under the mozilla public license, version 2. is nss available outside the united states? this section is out of date yes; see bu...
Introduction to Network Security Services
ations using the exported apis will remain compatible with future versions of those libraries. for a complete list of public functions exported by these shared libraries in nss 3.2, see nss functions. for information on which static libraries in nss 3.1.1 are replaced by each of the above shared libraries in nss 3.2 , see migration from nss 3.1.1. ...
...placed by each of the above shared libraries in nss 3.2 , see migration from nss 3.1.1. 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. (note that nspr is a separate mozilla project; see netscape portable runtime for details.) figure 1
relationships among core nss libraries and nspr naming conventions and special libraries windows and unix use different naming conventions for static and dynamic libraries: windows unix static .lib .a dynamic .dll .so or .sl in addition, windows has "import" libraries that bind to dynamic libraries. so the nss library has the following forms...
...s. these two extra shared libraries are not supplied on any other platforms. the names of these libraries are platform-dependent, as shown in the following table. platform for 32-bit cpus for 64-bit cpus solaris/sparc libfreebl_pure32_3.so libfreebl_hybrid_3.so hpux/parisc libfreebl_pure32_3.sl libfreebl_hybrid_3.sl aix (planned for a future
release) libfreebl_pure32_3_shr.a libfreebl_hybrid_3_shr.a an application should not link against these libraries, because they are dynamically loaded by nss at run time. linking the application against one or the other of these libraries may produce an application program that can only run on one type of cpu (e.g. only on 64-bit cpus, not on 32-bit cpus) or that doesn't use the more eff...
NSS Memory allocation
ly gets a new arena from the heap if there are no arenas in the free list that are large enough to satisfy the request. there are two consequences of the use of plarenapools that affect leak analysis. they are: 1. at the end of execution of a program, all the arenas in the free list will appear to have been leaked. this makes it difficult to tell arenas that are truly leaked from those that are me
rely in the free list. there is a function named pl_arenafinish that really frees all the arenas on the free list. see the prototype at http://mxr.mozilla.org/nspr/source/n.../ds/plarenas.h a program should call that function at the very end, after having shutdown nss and nspr, to really free the contents of the free list. after that function returns, any arenas that still appear to be leaked have tr...
...function named pl_arenafinish that really frees all the arenas on the free list. see the prototype at http://mxr.mozilla.org/nspr/source/n.../ds/plarenas.h a program should call that function at the very end, after having shutdown nss and nspr, to really free the contents of the free list. after that function returns, any arenas that still appear to be leaked have truly been leaked, and are not me
rely on the free list. 2. leak analysis tools will frequently report the wrong call stack for the allocation of leaked arenas. when the arena free list is in use, the first user of an arena will allocate it from the heap, but will then free it to the free list. the second user will allocated it from the free list and return it to the free list. if and when an arena is leaked, the developer wants to s...
...enerally necessary to disable the arena free list, so that arenas are actually freed back to the heap each time they are freed, and are allocated afresh from the heap each time they are allocated. this makes nss slower, but produces accurate leak allocation stacks. to accomplish that, set an environment variable prior to the initialization of nss and nspr. this can be done outside the program enti
rely, or can be done by the program itself, in the main() function. set the environment variable nss_disable_arena_free_list to have any non-empty value, e.g. nss_disable_arena_free_list=1. ...
NSS functions
publickeynickname mxr 3.4 and later pk11_setslotpwvalues mxr 3.2 and later pk11_setsymkeynickname mxr 3.4 and later pk11_setsymkeyuserdata mxr 3.11 and later pk11_setwrapkey mxr 3.2 and later pk11_sign mxr 3.2 and later pk11_signatu
relen mxr 3.2 and later pk11_symkeyfromhandle mxr 3.2 and later pk11_tokenexists mxr 3.2 and later pk11_tokenkeygen mxr 3.6 and later pk11_tokenkeygenwithflags mxr 3.10.2 and later pk11_tokenrefresh mxr 3.7.1 and later pk11_traversecer...
...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. the mozilla cross reference (mxr) link for each function provides access to the function definiti...
... nssrwlock_unlockwrite mxr 3.2 and later nsssmime_versioncheck mxr 3.2.1 and later port_alloc mxr 3.2 and later port_arenaalloc mxr 3.2 and later port_arenagrow mxr 3.2 and later port_arenamark mxr 3.2 and later port_arena
release mxr 3.2 and later port_arenastrdup mxr 3.2 and later port_arenaunmark mxr 3.2 and later port_arenazalloc mxr 3.2 and later port_free mxr 3.2 and later port_freearena mxr 3.2 and later port_geterror mxr 3.2 and later...
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. authors: elio maldonado <emaldona@redhat.com>, deon lackey <dlackey@redhat.com>. ...
...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. authors: elio maldonado <emaldona@redhat.com>, deon lackey <dlackey@redhat.com>. ...
...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. authors: elio maldonado <emaldona@redhat.com>, deon lackey <dlackey@redhat.com>. ...
sslintro.html
this page is part of the ssl reference that we are migrating into the format described in the mdn style guide. if you are inclined to help with this migration, your help would be very much appreciated. upgraded documentation may be found in the current nss reference overview of an ssl application chapter 1 overview of an ssl application ssl and
related apis allow compliant applications to configure sockets for authenticated, tamper-proof, and encrypted communications. this chapter introduces some of the basic ssl functions. chapter 2, "getting started with ssl" illustrates their use in sample client and server applications. an ssl application typically includes five parts: initialization configuration communication functions used by callbacks ...
... cleanup although the details differ somewhat for client and server applications, the concepts and many of the functions are the same for both. warning: some of the ssl header files provided as part of nss 2.0 include both public apis documented in the nss 2.0 documentation set and private apis intended for internal use by the nss implementation of ssl. you should use only the ssl apis (and
related certificate, key, and pkcs #11 apis) that are described in this document, the ssl reference. other apis that may be exposed in the header files are not supported for application use. initialization initialization includes setting up configuration files, setting global defaults, and setting up callback functions. functions used in the initialization part of an application can include the ...
...es are permitted by policy (for example, to comply with export restrictions). cipher suites disabled by policy cannot be enabled by user preference. one of these functions must be called before any cryptographic operations can be performed with nss. ssl_cipherprefsetdefault. enables all ciphers chosen by user preference. optional. initializing caches ssl peers frequently reconnect after a
relatively short time has passed. to avoid the overhead of repeating the full ssl handshake in situations like this, the ssl protocol supports the use of a session cache, which retains information about each connection, such as the master secret generated during the ssl handshake, for a predetermined length of time. if ssl can locate the information about a previous connection in the local session ca...
NSS tools : signtool
binding as a handwritten signature. therefore, you should take great care to ensure that you can stand behind any file you sign and distribute. for example, if you are a software developer, you should test your code to make sure it is virus-free before signing it. similarly, if you are a network administrator, you should make sure, before signing any code, that it comes from a
reliable source and will run correctly with the software installed on the machines to which you are distributing it. before you can use netscape signing tool to sign files, you must have an object-signing certificate, which is a special certificate whose associated private key is used to create digital signatures. for testing purposes only, you can create an object-signing certificate...
...fies the cryptographic integrity of the digital signatures it contains and the files with which they are associated. this includes checking that the certificate for the issuer of the object-signing certificate is listed in the certificate database, that the ca's digital signature on the object-signing certificate is valid, that the
relevant certificates have not expired, and so on. --verbosity value sets the quantity of information netscape signing tool generates in operation. a value of 0 (zero) is the default and gives full information. a value of -1 suppresses most messages, but not error messages. -w archive displays the names of signers of any files in the ar...
...hic services token: communicator certificate db ----------------------------------------------- see also signver (1) the nss wiki has information on the new database design and how to configure applications to use it. o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools
related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/. the nss site
relates directly to nss code changes and
releases. 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. aut...
Pork
and tests having the prefix "xform". documentation installing pork download, installation and dependency info for pork pork tools description of rewriting tools pork tool development in progress page... ...
...orm". documentation installing pork download, installation and dependency info for pork pork tools description of rewriting tools pork tool development in progress page... ...
... pork tool development in progress page... old pork page pork details that haven't been moved to mdc renaming with pork sample pork application todos pork 1.0
release tracking bug pork
releases download pork here community view pork forums... ...
Rhino downloads archive
see also rhino downloads. you can download binary distributions of rhino from http://ftp.mozilla.org/pub/mozilla.org/js/.
release
release date change log download link rhino 1.7r4 2012-06-18 new in rhino 1.7r4 rhino1_7r4.zip rhino 1.7r3 2011-05-09 new in rhino 1.7r3 rhino1_7r3.zip rhino 1.7r2 2009-03-22 new in rhino 1.7r2 rhino1_7r2.zip rhino 1.7r1 2008-03-06 new in rhino 1.7r1 rhino1_7r1.zip rhino 1.6r7 2007-08-20 new in rhino 1.6r7 rhino1_6r7.zip rhino 1.6r6 2007-07-30 new in rhino 1.6r6 rhino1_6r6.zip rhino 1.6r5 2006-11-19 same code as 1.6r4, but
relicensed under mpl/gpl. rhino1_6r5.zip rhino 1.6r4 2006-09-10 bug 343976 ...
...(pre-java 1.5 users can use dom3 using java's endorsed standards override mechani...
...(pre-java 1.5 users can use dom3 using java's endorsed standards override mechanism if they have a dom3-capable xml parser.) if neither xmlbeans nor dom3 are present, e4x is not available. ...
Property cache
up called no resolve hooks or non-native lookup ops, and at t1 the object x has shape s, the object x' has shape s', and no shape-regenerating gc occurred, then at t1 the lookup for x.p still finds the same property on x'. ...
...up for p in x still finds the same property on x'. (informally: if another variable or property shadows x'.p, the shape of x' will change.) o this object is x, perhaps a call object. ↓ o ----> o a block object and its proto. ↓ o another call object. ↓ o ----> o ----> o ----> o ^global ^x' (----> indicates proto as before; downward arrows ↓ indicate the parent
relation) method guarantee — if at time t0 the object x has shape s; and x has an own property p that is a method property (transparently joined function); and at time t1 an object y has shape s; and no shape-regenerating gc occurred; then at time t1 y's own property p is the same method property. (the existence of this property is guaranteed by the basic layout guarantee above.) (informally:...
...but property cache entries are never populated such that .vword.isnull(). to do treat cache invalidation systematically. does the global object always have a unique shape? a branded scope? explain bug 554955. ...
SpiderMonkey Internals
ine 33 line 34 => pc 172 => line 33 line 35 => pc 172 => line 33 line 36 => pc 172 => line 33 line 37 => pc 172 => line 33 line 38 => pc 172 => line 33 line 39 => pc 172 => line 33 line 40 => pc 172 => line 33 jsconfig.h various configuration macros defined as 0 or 1 depending on how js_version is defined (as 10 for javascript 1.0, 11 for javascript 1.1, etc.). not all macros are tested around
related code yet. in particular, js 1.0 support is missing from spidermonkey. js.cpp, jsshell.msg the "js shell", a simple interpreter program that uses the js api and more than a few internal interfaces (some of these internal interfaces could be replaced by jsapi.h calls). the js program built from this source provides a test vehicle for evaluating scripts and calling functions, trying out new de...
... creating objects by class and prototype, and finalizing objects; defining, looking up, getting, setting, and deleting properties; creating and destroying properties and binding names to them. the details of a native object's map (scope) are mostly hidden in jsscope.[ch]. jsatom.cpp, jsatom.h the atom manager. contains well-known string constants, their atoms, the global atom hash table and
related state, the js_atomize() function that turns a counted string of bytes into an atom, and literal pool (jsatommap) methods. jsarena.cpp, jsarena.h last-in-first-out allocation macros that amortize malloc costs and allow for en-masse freeing. see the paper mentioned in jsarena.h's major comment. jsgc.cpp, jsgc.h the garbage collector and tracing routines. jsinterp.*, jscntxt.*, jsinvoke.cpp...
...ction that turns a counted string of bytes into an atom, and literal pool (jsatommap) methods. jsarena.cpp, jsarena.h last-in-first-out allocation macros that amortize malloc costs and allow for en-masse freeing. see the paper mentioned in jsarena.h's major comment. jsgc.cpp, jsgc.h the garbage collector and tracing routines. jsinterp.*, jscntxt.*, jsinvoke.cpp the bytecode interpreter, and
related functions such as call and allocstack, live in jsinterp.cpp. the jscontext constructor and destructor are factored out into jscntxt.cpp for minimal linking when the compiler part of js is split from the interpreter part into a separate program. jsinvoke.cpp is a build hack used on some platforms to build js_interpret under different compiler options from the rest of jsinterp.cpp. jsemit.*, ...
JIT Optimization Strategies
provide a repository of jit optimization strategy information which the jit coach tool can parse to display in its ui. 2. provide a user-browsable documentation of optimization strategies, how they work, how they are defeated, and options for how to re-enable them. spidermonkey's optimizing jit, ionmonkey, uses various strategies to optimize operations. the most commonplace operations that are
relevant for fast program execution are property accesses and function calls. optimization information is currently collected for the following operations: getproperty (obj.prop) setproperty (obj.prop = val) getelement (obj[elemname]) setelement (obj[elemname] = val) call (func(...)) at each operation site, ionmonkey tries a battery of strategies, from the most optimized but most restrictiv...
... {}; constants.n = 100; function testarray(array) { for (var i = 0; i < array.length; i++) { if (array[i] > constants.n) return true; } return false; } will have the loop compiled into the following when testarray gets hot. for (var i = 0; i < array.length; i++) { if (array[i] > 100) return true; } when this optimization is successful, property access is eliminated enti
rely and replaced with an inline constant. getprop_constant attempts to optimize reading a property that contains a uniquely-typed (or "singleton") object. with uniquely-typed objects, it is guaranteed that no other object has that same type. unique (or "singleton") types are assigned to certain kinds of objects, like global objects, top-level functions, and object literals declared at the top-leve...
... global objects, top-level functions, and object literals declared at the top-level of a script. if a property has always contained the same uniquely-typed object, then the engine can use the unique type to map back to a specific object, and eliminate the property access, replacing it with a constant reference to the object. when this optimization is successful, property access is eliminated enti
rely and replaced with an inline constant. the different success and failure conditions are documented below: getprop_staticname attempts to optimize a property access on window which refers to a property on the global object. getprop_typedobject optimizes accesses to properties on typedobjects. getprop_definiteslot optimizes access to a well-known regular property on an object. for this optimi...
JSAPI reference
the jsapi is the c++ api for the spidermonkey javascript engine. to learn how to use the jsapi, see the jsapi user guide and the jsapi cookbook. note: the foss wiki page contains a few links to other libraries and programs that can make life easier when using spidermonkey and the jsapi. ...
...++ api for the spidermonkey javascript engine. to learn how to use the jsapi, see the jsapi user guide and the jsapi cookbook. note: the foss wiki page contains a few links to other libraries and programs that can make life easier when using spidermonkey and the jsapi. a note on versioning: up until the
release of firefox 4, spidermonkey, and thus the jsapi, was versioned in an ad-hoc way, with
releases happening at times that roughly, but not really, corresponded to firefox
releases. ...
... contains a few links to other libraries and programs that can make life easier when using spidermonkey and the jsapi. a note on versioning: up until the
release of firefox 4, spidermonkey, and thus the jsapi, was versioned in an ad-hoc way, with
releases happening at times that roughly, but not really, corresponded to firefox
releases. in the fall of 2012, the spidermonkey team decided to align
releases with those of firefox. the reference applies this versioning scheme retroactively starting with firefox 5. firefox 4 is the last
release that has a corresponding spidermonkey
release with the old scheme, where the jsapi has the version 1.8.5. runtimes and contexts js_init added in spidermonkey 31 js_shutdown struct jsruntime js_newruntimeobsolete since jsapi 52 js_destroyruntime ...
SpiderMonkey 52
or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. ...
...or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. ...
...f spidermonkey 52. you can download full source code from treeherder, by going to the mozilla-esr52 repository and clicking on the first sm(pkg) link you see. that will open a small window in the bottom left with a line like "artifact uploaded:mozjs-52.x.y.tar.bz2". spidermonkey 52 is the javascript engine that shipped in firefox 52. it continues to improve performance over previous spidermonkey
releases. it also contains new language and api features described in detail below. please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. you may wish to make the bugs block bug 837921 (aliased as "sm.embedding"). platform support migrating to spid...
TPS Tests
id json, and so you can't have comments in it (sorry, i know this is annoying). one alternative is to put underscores before the "disabled" preferences, e.g. "_identity.fxaccounts.autoconfig.uri": "...". writing tps tests each tps test is run as a series of "phases". a phase runs in some firefox profile, and contains some set of actions to perform or check on that profile. phases have an n to m
relationship with profiles, where n >= m (there can never be more phases than profiles). typically there are two profiles used, but any number of profiles could be used in theory (other than 0). after the phases run, two additional "cleanup" phases are run, to unregister the devices with fxa. this is an implementation detail, but if you work with tps for any amount of time you will almost certainly ...
...n use as many profiles or phases as you need, but every phase you define later must be declared here, or it will not be run by the python test runner. any phases declared here but not implemented later will cause the test to fail when it hits that phase. 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. the format of these asset lists vary somwhat depending on asset type. bookmarks passwords history tabs form data prefs test phases the phase blocks are where the action happens! they tell tps what to do. each phase block contains the name of a phase, and a list of actions. tps iterates through the phase blocks in alphanumeric order, and for each phase, it does the followi...
...n the section on asset lists; there are also some additional built-in functions. built-in functions sync(options) initiates a sync operation. if no options are passed, a default sync operation is performed. otherwise, a special sync can be performed if one of the following are passed: sync_wipe_server, sync_wipe_client, sync_reset_client. this will cause tps to set the firstsync pref to the
relevant value before syncing, so that the described actionwill take place logger.loginfo(msg) logs the given message to the tps log. logger.asserttrue(condition, msg) asserts that condition is true, otherwise an exception is thrown and the test fails. logger.assertequal(val1, val2, msg) asserts that val1 is equal to val2, otherwise an exception is thrown and the test fails. custom functions ...
Redis Tips
bviously, calling ice cream a nowhale food doesn't give you any sense of how good the ice cream is, or what sets it apart from other kinds of food that aren't made from whale meat but that are also very unlike ice cream -- it just gives the whaling industry a way to lump together people who don't use their products. so rather than thinking about redis as a database with some kind of non-existent
relationship to sql, think of it as a data structure server with a rich set of commands for querying and manipulating those data structures over a network connection. 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 fun...
...t pubsub search reverse indexes (never use keys in production) documentation redis has fantastic documentation. yet redis is so easy to learn and use that you'll seldom feel you need to consult it. there are three reasons to look at the docs for every command you use. time complexity - each command's complexity is given in big-o notation. this is immensely helpful.
related commands - an ever-growing list of
related commands is given on the right-hand side of the page. recipes - at the bottom of many pages is a section that gives usage patterns or recipes for the command under discussion. there are many insightful ideas to be found here. getting started with redis before you go any further in this document, make sure you have played with redis for at least ...
...large part of the answer to most of life's problems. and more than that, they are just fucking awesome. fast, efficient, versatile, simple, powerful. talk to your doctor today to find out whether zsets might be right for you. you may encounter articles on the web trying to scare you away from using lots of small zsets due to their memory consumption. if they were written before redis 2.4 was
released, they are out-of-date and useless. i recommend instead reading about redis's memory optimizations for small zsets: http://oldblog.antirez.com/post/everything-about-redis-24.html. my least favorite flavor storing huge globs of json. how can i hate this? i love both redis and json; how can i not want to bring them together? it's so tempting to do so! and it's so easy! it's just a str...
Embedded Dialog API
still allow gecko to be a fully functional web browser. in any single window, gecko can be expected to play nicely within its given boundaries. but it must be allowed to create additional windows at times perhaps unexpected by the containing appliction. these new windows can be entire new browser windows opened in response to web page script, or dialogs or alerts which may arise from script or me
rely during normal operation of the browser. part of gecko's embedding api is callbacks into the embedding application for creating new windows. the complete windowing portion of the api is large and complex, but it need not be enti
rely implemented. its simplest requirements are that the app must allow gecko to create new browser windows and new simple, empty windows. gecko can use the latter to pose...
...ing portion of the api is large and complex, but it need not be enti
rely implemented. its simplest requirements are that the app must allow gecko to create new browser windows and new simple, empty windows. gecko can use the latter to pose dialogs built from xul. xul dialogs are part of the gecko package; they are the default dialog posing mechanism. many embedding applications will find them enti
rely sufficient. however while xul dialogs are very configurable, they will not behave and probably not look precisely like dialogs which the application builds for itself, independently of gecko. applications which implement me
rely the simplest, base gecko windowing api will then have a mixture of xul and native windows. applications concerned with presenting a consistent dialog appearance have the ...
...ode which runs its dialogs) into a unique interface built just for that purpose. any such code which isn't already a component needs to be. all code which actually poses dialogs, if it does this directly using window.open, wants to be changed to go through the new interface. restated, in order for a piece of code's dialogs to be overrideable, they can't be implemented directly in the code. all ui-
related code must be implemented in a registered component so that it can be swapped out by the embedding application. nsipromptservice is the canonical example. of course this is a
relatively simple example. more complex dialogs may themselves require their own interface. (examples to be added as they come online. the print dialogs should be available soon.) dialogs posed by the embedding app ("dow...
Using the Places favicon service
con service, you should do something like this: var faviconservice = components.classes["@mozilla.org/browser/favicon-service;1"] .getservice(components.interfaces.nsifaviconservice); caching the favicon service stores an expiration time for each favicon. ...
...most of the time, the favicon will be served from the browser's cache and will have minimal performance impact. this expiration time is not the time that the favicon will be deleted. ...
...the favicon will be picked up quickly. most of the time, the favicon will be served from the browser's cache and will have minimal performance impact. this expiration time is not the time that the favicon will be deleted. expiration is handled by browser/components/places/src/nsnavhistoryexpire.cpp as described in places design. the expiration time is only used to determine whether data should be
reloaded from the network (or cache) or whether the version in the database is fresh enough. getting favicon images you can use favicons in the browser ui using special annotation uris. nsifaviconservice.getfaviconimageforpage() returns an annotation uri for the favicon for a given page, and nsifaviconservice.getfaviconlinkforicon() returns an annotation uri for the given favicon. the annotation s...
XPCOM changes in Gecko 2.0
lemodule.cpp. note that nsigenericfactory.h has been removed. references to nsigenericfactory.h should be replaced with mozilla/moduleutils.h. it is possible for a binary component to be compatible with mozilla 1.9.2 and mozilla 2.0 by using the extra macro ns_impl_mozilla192_nsgetmodule. see nssamplemodule.cpp for more details. note: binary xpcom components must be recompiled for every new major
release of firefox starting with firefox 4. your life would be much easier over the long term if you switch to using js-ctypes instead. also note that extensions using binary components must now use the unpack property in the install manifest. platform-specific directories the component/chrome system used to look in platform-specific subdirectories of an extension, such as platform/winnt_x86-msvc/chr...
...e "extension manager restart") during its startup process. this was necessary in order to ensure that any components that should no longer be available are disposed of properly, and to re-register everything, loading any new components that may be needed. ...
...this gets enough of xpcom loaded and running that we can then load the extension manager and perform the necessary installing, uninstalling, and updating of any installed extensions. ...
Finishing the Component
means to obtain * global services in an application. the service manager depends * on the repository to find and instantiate factories to obtain * services. * * users of the service manager must first obtain a pointer to the * global service manager by calling ns_getservicemanager. after that, * they can request specific services by calling getservice. * when they are finished they can ns_
release() the service as usual. * * a user of a service may keep references to particular services * indefinitely and only must call
release when it shuts down. * * @status frozen */ these frozen interfaces and functions are part of the gecko sdk. the rule of thumb is that interfaces outside of the sdk are considered "experimental" or unfrozen. see the following sidebar for information about ...
...e v-table is in fact isprime(). when this method call is made, the code execution treats the isprime method as testa. needless to say, this is a bad thing. furthermore, there is no way easy way to realize this error at runtime. gecko developers could change the interface's iid, and some do. this can prevent many errors like this. but unfrozen interfaces are not supported in any formal way, and
relying upon a different iid for any change in the interface is not a good idea either. when using frozen interfaces, you are guaranteed compatibility with future versions of gecko. the only trouble occurs when the compiler itself changes its v-table layout, which can happen when the compiler changes its abi. for example, in 2002 the gnu compiler collection (gcc), version 3.2 changed the c++ abi, an...
...arse the incoming string and create an object which implements an nsiuri interface. the two nsnull parameters passed to newuri are used to specify the charset of the string and any base uri to use, respectively. we are assuming here that the charset of the url string is utf-8, and also assuming that every url string is absolute. see the intro to the html 4 specification for more information about
relative urls. here is the complete implementation of the shouldload() method: ns_imethodimp weblock::shouldload(print32 contenttype, nsiuri *contentlocation, nsisupports *ctxt, nsidomwindow *window, prbool *_retval) { if (!contentlocation) return ns_error_failure; nsembedcstring scheme; contentlocation->get...
Detailed XPCOM hashtable guide
complexities of pldhash (callback functions, the ops structure, etc). you should read xpcom/glue/nsthashtable.h. to use nsthashtable, you must declare an entry-class in a pre-defined format. this entry class contains the key and the data that you are hashing (just like pldhash, above). it also declares functions that manipulate the key. in most cases, the functions of this entry class can be enti
rely inline. for examples of entry classes, see the declarations at xpcom/glue/nshashkeys.h. the template parameter is the entry class. you must use the init() function to initalize the table properly. at this point, use the functions putentry/getentry/removeentry to alter the hashtable. the iterator class will do iteration, but beware that the iteration will occur in a seemingly-random order (no so...
...ted on the stack, as class members, or on the heap. entry pointers can and do change when items are added to or removed from the hashtable. do not keep long-lasting pointers to entries. because of this, nsthashtable is not inherently thread-safe. if you use a hashtable in a multi-thread environment, you must provide locking as appropriate. before using nsthashtable, see if nsbasehashtable and
relatives will work for you. they are much easier to use, because you do not have to declare an entry class. if you are hashing a simple key type to a simple data type, they are generally a better choice. nsbasehashtable and friends: nsdatahashtable, nsinterfacehashtable, and nsclasshashtable these c++ templates provide a high-level interface for using hashtables that hides most of the complexities...
... that hides most of the complexities of pldhash. they provide the following features: hashtable operations can be completed without using an entry class, making code easier to read; optional thread-safety: the hashtable can manage a read-write lock around the table; predefined key classes provide automatic cleanup of strings/interfaces nsinterfacehashtable and nsclasshashtable automatically
release/delete objects to avoid leaks. nsbasehashtable is not used directly; choose one of the three derivative classes based on the data type you want to store. the keyclass is taken from nshashkeys.h and is the same for all three classes: nsdatahashtable<keyclass, datatype> - datatype is a simple type such as pruint32 or prbool. nsinterfacehashtable<keyclass, interface> - interface is an xpco...
nsCountedRef
nscountedref is therefore useful for managing references to foreign objects. nscountedref<t> is derived from nsautoref<t> and so inherits its methods. ...
...nscountedref is therefore useful for managing references to foreign objects. nscountedref<t> is derived from nsautoref<t> and so inherits its methods. ...
... differs from nsautoref in that nscountedref constructors add a reference to the resource, and in that nscountedref provides copy construction< and assignment operators enabling more than one concurrent reference to the same resource. in order to use nscountedref<t> for a class t associated with a particular resource type, the type of the handle to the resource and the methods for referencing and
releasing the resource must be provided for class t. this is usually done by providing a specialization of nsautoreftraits<t>. nscountedref<t> is defined in xpcom/base/nsautoref.h. see also nsautoref, nsautoreftraits ...
XPCOM glue classes
clarationnsadoptingstringclass declarationnsastringthe nsastring abstract class represents a character string composed of double-byte storage units. ...
...nd/or nscountedref<t>.</t>nsautostringclass declarationnsautostring (external)class declarationnscautostringclass declarationnscautostring (external)class declarationnscomptrthis utility class simplifies managing xpcom interface references from c++ code.nscountedrefnscountedref<t> is a template class implementing an object that takes a strong reference to a reference-counted resource that must be
released, typically on destruction of the object.</t>nscstringclass declarationnscstring externalclass declarationnscstringcontainer (external)class declaration nscstringencodingthe nscstringencoding enumeration describes the set of character encodings understood by the ns_cstringtoutf16 and ns_utf16tocstring functions.nsdependentcstringclass declarationnsdependentcstring externalclass declaratio...
...spromiseflatstringclass declarationnsrefptrrefptr (formerly known as nsrefptr, see bug 1207245) is a general class to implement reference counting pointers for objects. it is similar to nscomptr, but does not require that the type be an xpcom interface. like with nscomptr, it is the responsibility of the object itself to implement reference counting. ...
IAccessibleHyperlink
e iaccessibleaction methods. their anchors would also reference the image object and their anchortargets would reference urls or the objects that would be activated. this use case demonstrates that in some cases there is no need for iaccessiblehyperlink to derive from iaccessibleaction. as a result it may be removed in a later version of the idl and it is suggested that implementations should not
rely on the inheritance. method overview [propget] hresult anchor([in] long index, [out] variant anchor ); [propget] hresult anchortarget([in] long index, [out] variant anchortarget ); [propget] hresult endindex([out] long index ); [propget] hresult startindex([out] long index ); [propget] hresult valid([out] boolean valid ); methods anchor() returns an object that represents the link a...
...t object to be activated when the link is activated. see the section about. return value e_invalidarg if bad [in] passed, [out] value is null. s_false if there is nothing to return, [out] value is null. s_ok. endindex() [propget] hresult endindex( [out] long index ); parameters index the 0 based character offset at which the textual representation of the hyperlink ends. ...
... return value s_ok. valid() returns whether the target object referenced by this link is still valid. this is a volatile state that may change without sending an appropriate event. ...
mozIRegistry
o be associated with the notion of a "registry." someday (i hope) this page will be properly titled so that everybody knows it is the place to come to in order to find out how they are supposed to link together the various xpcom components that together form the mozilla browser. the information below is intended to tell you everything you need to know about how to do that. summary clients will
rely on nsrepository to create instances of a given class. clients requiring dynamic "binding" of clsids will be required to use some higher-level services (tbd) to figure out the clsids they should use. the intent is that such services themselves be built on top of the new moziregistry interface. we are proposing a new "moziregistry" xpcom interface that provides the same level of function as is cur...
...hion: if and when we remove what is currently a static binding of clsids, there will be the risk that required clsids won't be present. a corollary is that the build/install process will require updates to user "registry" to enable new class implementations to be accessible. our current build/install process doesn't quite step up to these problems as of yet. there are some bootstrapping issues
related to using the service manager to access the moziregistry interface. currently, nsiservicemanager requires a clsid to access a service which hardcodes the implementation of that service. this issue needs to be resolved in order to enable alternative moziregistry implementations or to permit other service implementations to be bound at runtime. i think a simple clsid "alias" mechanism (equivalen...
...egistry") as declared in mozilla/modules/libreg/include/nsreg.h. clients will obtain this interface via the service manager (see mozilla/xpcom/public/nsiservicemanager.h). mozregistry this is the simplistic implementation of the moziregistry interface. it is built as a simple c wrapper for the functions in nsreg.h. it is intended to provide a (slightly) lighter-weight implementation that is enti
rely compatible with current libreg usage. mozrdfregistry this is an rdf-based moziregistry implementation that will provide additional capabilities. note that these additional capabilities will not be utilized by nsrepository. it is envisioned that there will be multiple flavors of underlying rdf data sources corresponding to the libreg .reg file(s), the shared libraries installed, additional comp...
nsIDOMMouseScrollEvent
read only. constants constant value description horizontal_axis 1 the horizontal (x) axis. ...
...must be one of "abort", "error", "load", "loadstart", or "progress". canbubblearg specifies whether or not the created event will bubble. cancelablearg specifies whether or not the created event can be canceled. viewarg the nsidomabstractview in which the event occurred.
...se. altkeyarg true if the alt key was down when the event occurred, otherwise false. shiftkeyarg true if the shift key was down when the event occurred, otherwise false. metakeyarg true if the meta key was down when the event occurred, otherwise false. buttonarg indicates which mouse button was pressed when the event occurred, if any.
relatedtargetarg the event target
related to this event. axis the mouse wheel axis for this event; this is either horizontal_axis or vertical_axis. see also nsidommouseevent nsidomevent nsidomeventtarget ...
nsIProcess
valid after the process has exited. read only. isrunning boolean true if the process is running, otherwise false. only accurate if the process was run with blocking disabled. read only. location nsifile the location of the executable file on disk. read only. gecko 1.9.1 note this attribute is no longer implemented as of gecko 1.9.1, and is removed enti
rely in gecko 1.9.2. pid unsigned long the process id of the process. this value is only available after the process has started; in addition, some platforms may not offer this value at all. read only. processname string the name of the process. read only. gecko 1.9.1 note this attribute is no longer implemented as of gecko 1.9.1, and is removed entir...
... methods init() initializes the nsiprocess with the specified executable file. once initialized, you can start the process executing by calling run(). ...
... parameters executable the nsifile executable file to be represented by the nsiprocess object. initwithpid() obsolete since gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) initializes the nsiprocess to represent an existing process, given that process's id. gecko 1.9.1 note this method is no longer implemented as of gecko 1.9.1, and is removed enti
rely in gecko 1.9.2. void initwithpid( in unsigned long pid ); parameters pid the process id to begin to represent. kill() immediately terminates the process represented by the nsiprocess object. this only works if the process was run without blocking enabled. gecko 1.9.1 note prior to gecko 1.9.1 (firefox 3.5), this method did not work on windows or mac os x. now it does. void k...
nsISHistoryListener
can be registered on a particular nsishistory instance via the nsishistory.addshistorylistener() method. method overview boolean onhistorygoback(in nsiuri abackuri); boolean onhistorygoforward(in nsiuri aforwarduri); boolean onhistorygotoindex(in long aindex, in nsiuri agotouri); void onhistorynewentry(in nsiuri anewuri); boolean onhistorypurge(in long anumentries); boolean onhistory
reload(in nsiuri a
reloaduri, in unsigned long a
reloadflags); methods onhistorygoback() called when navigating to a previous session history entry, for example due to an nsiwebnavigation.goback() call. boolean onhistorygoback( in nsiuri abackuri ); parameters abackuri the uri of the session history entry being navigated to. return value true to allow the go back operation to proceed or false t...
...sage, to prevent users from loading documents from history, to erase evidence of prior page loads, etc. to purge documents from session history call nsishistory.purgehistory(). boolean onhistorypurge( in long anumentries ); parameters anumentries the number of entries to be removed from session history. return value true to allow the purge operation to proceed or false to cancel it. onhistory
reload() called when the current document is
reloaded, for example due to an nsiwebnavigation.
reload() call. boolean onhistory
reload( in nsiuri a
reloaduri, in unsigned long a
reloadflags ); parameters a
reloaduri the uri of the document to be
reloaded. a
reloadflags flags that indicate how the document is to be refreshed. see the nsiwebnavigation interface's load constants. return value true to a...
...led when the current document is
reloaded, for example due to an nsiwebnavigation.
reload() call. boolean onhistory
reload( in nsiuri a
reloaduri, in unsigned long a
reloadflags ); parameters a
reloaduri the uri of the document to be
reloaded. a
reloadflags flags that indicate how the document is to be refreshed. see the nsiwebnavigation interface's load constants. return value true to allow the
reload operation to proceed or false to cancel it. ...
nsISelectionPrivate
de, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than me
rely overlapping it. resultcount returns the number of ranges that overlap (or touch) the input range. results returns the ranges that overlap (or touch) the input range. native code only!getrangesforintervalcomarray obsolete since gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it...
...sidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than me
rely overlapping it. results returns the ranges that overlap (or touch) the input range. native code only!getrangesforintervalarray void getrangesforintervalarray( in nsinode beginnode, in print32 beginoffset, in nsinode endnode, in print32 endoffset, in boolean allowadjacent, in rangearray results ); parameters beginnode beginoffset endnode endoffset these four pa...
... in nsinode beginnode, in print32 beginoffset, in nsinode endnode, in print32 endoffset, in boolean allowadjacent, in rangearray results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than me
rely overlapping it. results returns the ranges that overlap (or touch) the input range. gettableselectiontype() test if supplied range points to a single table element. long gettableselectiontype( in nsidomrange range ); parameters range return value one of tableselection_* constants. "none" means a table element is not selected. removeselectionlistener() void removeselectionl...
nsISupports
xpcom/base/nsisupports.idlscriptable all xpcom interfaces inherit this interface. ...
...ace guidelines methods violates the xpcom interface guidelines addref() notifies the object that an interface pointer has been duplicated. nsrefcnt addref(); parameters none. return value an integer value that is generally ignored. queryinterface() the queryinterface method provides runtime type discovery. note: the interface pointer, aresult, returned by queryinterface must be
released by a call to
release() when it is no longer needed. queryinterface is a symmetric, transitive, and reflexive operator. void queryinterface( in nsiidref uuid, [iid_is(uuid),retval] out nsqiresult result ); parameters uuid the uuid of the requested interface result the resulting interface pointer. exceptions thrown ns_error_no_interface the re...
...etric, transitive, and reflexive operator. void queryinterface( in nsiidref uuid, [iid_is(uuid),retval] out nsqiresult result ); parameters uuid the uuid of the requested interface result the resulting interface pointer. exceptions thrown ns_error_no_interface the requested interface is not available. violates the xpcom interface guidelines
release() notifies the object that an interface pointer has been destroyed and any resources the object held on behalf of the client can be
released. nsrefcnt
release(); parameters none. return value an integer value that is generally ignored. remarks the method descriptions above were taken from essential com by don box. the point of those descriptions is to highlight the fact that addref() and re...
nsISupports proxies
so, given an event queue to execute methods on, and either an nsisupports object that has been created or cid, and a flag, a new nsisupports proxy object will be returned to you. once you have a proxy object, you may use it as if it is the "real" object. all the methods that are in the "real" object are stubbed into the proxy object. when you are finished with a proxy object, you should call ns_
release on it. it will take care of freeing the "real" object as well as itself. if you have created the object yourself and then created the proxy, please note that you will have at least a refcount of 2 (one for the proxy and one for the created object which you passed into getproxyobject, plus any other refcounts which you may have). a point here to bring up is how do we supply the event queue to...
... ...
...einstance(foo_contractid, &rv)); if(ns_failed(rv)) return rv; nscomptr<ifoo> pproxy; rv = piproxyobjectmanager->getproxyforobject(ns_proxy_to_main_thread, ifoo::getiid(), ptestobj, ns_proxy_sync | ns_proxy_always, getter_addrefs(pproxy)); if(ns_failed(rv)) return rv; // we do not care about the real object anymore. // ie. getproxyobject refcounts it. ns_
release(ptestobj); pproxy->bar(); ns_
release(pproxy); original document information author: doug turner last updated date: january 27, 2007 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...
nsITelemetry
bute type description canrecordbase boolean a flag indicating if telemetry can record base data (fhr data). this is true if the fhr data reporting service or the self-support service is enabled. canrecordextended boolean a flag indicating if telemetry is allowed to record extended data. ...
...r data reporting service or the self-support service is enabled. canrecordextended boolean a flag indicating if telemetry is allowed to record extended data. returns false if the user has not opted into "extended telemetry" on the
release channel, when the user has explicitly opted out of telemetry on nightly/aurora/beta or if manually set to false during tests. canrecord
releasedata readonly boolean a flag indicating whether telemetry is recording
release data. does not indicate whether telemetry will send any data. that is governed by user preference and other mechanisms. canrecordpre
releasedata readonly boolean a flag indicating whether telemetry is recording pre-
release data. does not indicate whether telemetry will send any data. that is gove...
...rical 5 for storing enumerated values by label. scalar types constant value description scalar_type_count 0 for storing a numeric value. scalar_type_string 1 for storing a string value. scalar_type_boolean 2 for storing a boolean value. dataset types constant value description dataset_
release_channel_optout 0 the basic dataset that is on-by-default on all channels. dataset_
release_channel_optin 1 the extended dataset that is opt-in on
release, opt-out on pre-
release channels. methods gethistogrambyid() get an histogram by id for histograms registered in histograms.json. jsval gethistogrambyid( in acstring id ); parameters id unique identifier...
nsITransactionManager
istener alistener); void undotransaction(); attributes attribute type description maxtransactioncount long sets the maximum number of transaction items the transaction manager will maintain at any time. this is commonly referred to as the number of levels of undo. a value of -1 means no limit. a value of zero means the transaction manager will execute each transaction, then immediately
release all references it has to the transaction without pushing it on the undo stack. a value greater than zero indicates the max number of transactions that can exist at any time on both the undo and redo stacks. this method will prune the necessary number of transactions on the undo and redo stacks if the value specified is less than the number of items that exist on both the undo and redo stacks.
...t transactions so they can be undone with a single call to undotransaction(). void beginbatch(); parameters none. clear() clears the undo and redo stacks. void clear(); parameters none. dotransaction() calls a transaction's nsitransaction.dotransaction() method, then pushes it on the undo stack. this method calls the transaction's nsitransaction.addref() method. the transaction's nsitransaction.
release() method will be called when the undo or redo stack is pruned or when the transaction manager is destroyed. void dotransaction( in nsitransaction atransaction ); parameters atransaction the nsitransaction to do. endbatch() turns off the transaction manager's batch mode. void endbatch(); parameters none. getredolist() returns the list of nsitransaction on the redo stack. note that the tr...
...urn value an addref'd pointer to the nsitransaction at the top of the undo stack. redotransaction() pops the topmost transaction on the redo stack, calls it's nsitransaction.redotransaction() method, then pushes it on the undo stack. void redotransaction(); parameters none. removelistener() removes a listener from the transaction manager's notification list. the listener's nsitransactionlistener.
release() method is called. void removelistener( in nsitransactionlistener alistener ); parameters alistener the nsitransactionlistener to remove. undotransaction() pops the topmost transaction on the undo stack, calls it's nsitransaction.undotransaction() method, then pushes it on the redo stack. void undotransaction(); parameters none. see also nsitransaction nsitransactionlist nsitransactio...
nsIURI
follows the idna draft specification for converting internationalized domain names (utf-8) to ascii for compatibility with existing internet infrastructure. read only. note: ipv6 addres...
...the uri's port. a port value of -1 corresponds to the protocol's default port (for example -1 implies port 80 for http uris). exceptions thrown ns_error_failure if port is not applicable to the uri scheme (e.g. about:blank) prepath autf8string the prepath returns the string before the path (such as "scheme://user:password@host:port"). this is
related to the web origin concept of rfc6454. this is useful for authentication, managing sessions, or for checking the origin of an uri to prevent cross-site scripting attacks while using methods such as window.postmessage(). note: some characters may be escaped. read only. ref autf8string returns the reference portion (the part after the "#") of the uri. if there is not...
...s two different uri strings can represent the same location. for example, comparing "http://foo.com/#" and "http://foo.com/" or "http://foo.com/#aaa" and "http://foo.com/#bbb" will return true. boolean equalsexceptref( in nsiuri other ); parameters other another nsiuri to compare to. return value true if the two uris represent the same location; otherwise false. resolve() resolves a
relative uri string, using this uri as the base. note: some implementations may have no concept of a
relative uri. autf8string resolve( in autf8string
relativepath ); parameters
relativepath the
relative path to resolve. return value the resolved absolute uri string. schemeis() quickly reports whether the nsiuri represents a uri with the specified scheme. this comparison is case-insens...
nsIWebNavigation
in gecko 1.9.2 (firefox 3.6), the @mozilla.org/webshell;1 component no longer exists; you need to use @mozilla.org/docshell;1 instead. method overview void goback void goforward void gotoindex( in long index ) void loaduri(in wstring uri , in unsigned long loadflags , in nsiuri referrer , in nsiinputstream postdata, in nsiinputstream headers) void
reload(in unsigned long
reloadflags) void stop(in unsigned long stopflags) constants load flags constant value description load_flags_mask 65535 this flag defines the range of bits that may be specified. load_flags_none 0 this is the default value for the load flags parameter. load_flags_is_refresh 16 this flag specifies t...
... this flag specifies that the local web cache should be bypassed, but an intermediate proxy cache could still be used to satisfy the load. load_flags_bypass_proxy 512 this flag specifies that any intermediate proxy caches should be bypassed (that is, that the content should be loaded from the origin server). load_flags_charset_change 1024 this flag specifies that a
reload was triggered as a result of detecting an incorrect character encoding while parsing a previously loaded document. load_flags_stop_content 2048 if this flag is set, stop() will be called before the load starts and will stop both content and network activity (the default is to only stop network activity). effectively, this passes the stop_content flag to stop(), in addit...
...t headers. it may be prefixed with additional http headers. this stream must contain a \r\n sequence separating any http headers from the http request body. this parameter may be null. headers if the uri corresponds to a http request, then any http headers contained in this stream are set on the http request. the http header stream is formatted as: ( header \r\n )* this parameter may be null.
reload() tells the object to
reload the current page. there may be cases where the user will be asked to confirm the
reload (for example, when it is determined that the request is non-idempotent). void
reload( unsigned long
reloadflags ); parameters
reloadflags flags modifying load behaviour. this parameter is a bitwise combination of the load flags defined above. (undefined bits are reserv...
Troubleshooting XPCOM components registration
on. this should not occur if you uninstalled/installed your extension via the extension manager. when adding a component to a xulrunner application, change the buildid in application.ini. if your component requires any external libraries, you may need to read using dependent libraries in extension components make sure you are compiling against the right version. if you are testing with a
release from mozilla.org, use the gecko sdk (and not your own compile of trunk firefox, etc.). if you are compiling your own firefox (or xulrunner, etc.), use the artifacts from that compilation to build your component. if you are testing a build from your linux distribution (or other vendor-supplied build), look for -dev packages from them. remember to check that the directory the component...
...ld your component using use_static_libs=1 in order to remove c runtime library dependencies. linux-specific hints check if you have missing dependent libraries: from your firefox (/xulrunner) install directory, run "./run-mozilla.sh `which ldd` -r path/to/your/component.so". there should be no "not found" entries and no undefined symbols. (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). use strace to see if firefox is trying to load your components. pass the -wl,-z,defs flag to gcc when linking your component. this will ensure that undefined symbols show an error at link time instead of failing ...
...ndefined symbols show an error at link time instead of failing at run time. mac-specific hints use ktrace to see if firefox is trying to load your components. use dyld environment variables to trace binary component loading: dyld_print_apis=1 dyld_print_libraries=1 (see `man dyld` for details). further help if the component still does not load, you may wish to ask for help. the extension-
related places are often useful; please refer to the community section on the extensions page. ...
Frequently Asked Questions
scomptr with operator->()" ns_precondition "you can't dereference a null nscomptr with operator*()" other issues printf("%x\n", mynscomptr); can cause the program to crash on sigill (illegal instruction), and not on the line with the printf, which can make it tricky to figure out. for debugging purposes you can write printf("%x\n", mynscomptr.get()); how do i... initialize an nscomptr?
release an nscomptr before it goes out of scope? assign 0 into it. whenever an nscomptr takes on a new value, it always
releases its old value, if any. assigning in the value 0 is just like assigning in a raw pointer that happens to be null. the old referent will be
released. [see initialization and assignment for more details] you should note, though, that there is a small performance penalty for ...
...the optimal solution is to arrange the lifetime of your nscomptr to correspond to exactly how long you want to hold the reference. ...
...ld the reference nsresult somelongfunction( nsibar* abar ) { nsresult rv; // ... { // i only need the |nsifoo| interface for a short time // so i control its lifetime by declaring it inside // a block statement. nscomptr<nsifoo> foo( do_queryinterface(abar, &rv) ); if ( foo ) foo->dosomefoothing(); // |foo| goes out of scope, and so |
release|s its referent, here } // ...tons of stuff here, during which i don't need an |nsifoo| return rv; } editors note: move this discussion to the efficiency section, and link to it from here. make an nscomptr leak (for a debug test)? call a getter that uses a raw xpcom interface pointer as an `in/out' parameter? call a getter that fills in an nsifoo*& parameter? ca...
Xray vision
eated by chrome code, but chrome code can access objects created by content. however, even the ability to access content objects can be a security risk for chrome code. javascript's a highly malleable language. scripts running in web pages can add extra properties to dom objects (also known as expando properties) and even redefine standard dom objects to do something unexpected. if chrome code
relies on such modified objects, it can be tricked into doing things it shouldn't. for example: window.confirm() is a dom api that's supposed to ask the user to confirm an action, and return a boolean depending on whether they clicked "ok" or "cancel". a web page could redefine it to return true: window.confirm = function() { return true; } any privileged code calling this function and expecti...
... shown here to illustrate how xray vision works. waiving xray vision xray vision is a kind of security heuristic, designed to make most common operations on untrusted objects simple and safe. however, there are some operations for which they are too restrictive: for example, if you need to see expandos on dom objects. in cases like this you can waive xray protection, but then you can no longer
rely on any properties or functions being, or doing, what you expect. any of them, even setters and getters, could have been redefined by untrusted code. to waive xray vision for an object you can use components.utils.waivexrays(object), or use the object's wrappedjsobject property: // chrome code var waivedwindow = components.utils.waivexrays(gbrowser.contentwindow); var transfer = waivedwindow.
... aim to make it easy for privileged code to treat untrusted objects like simple dictionaries. any value properties of the object are visible in the xray. if the object has properties which are themselves objects, and these objects are same-origin with the content, then their value properties are visible as well. there are two main sorts of restrictions: first, the chrome code might expect to
rely on the prototype's integrity, so the object's prototype is protected: the xray has the standard object or array prototype, without any modifications that content may have done to that prototype. the xray always inherits from this standard prototype, even if the underlying instance has a different prototype. if a script has created a property on an object instance that shadows a property...
MailNews fakeserver
it is comprised of three major components: a daemon, a handler, and the server itself. ...
...ssages. daemons should usually persist for the entirety of the test. the handler is the glue between the server and the daemon. this area will be the most diverse of all components, as edge cases with quirky servers being liberal with the specs will require different handlers. writing a new fakeserver since the number of protocols we use is very small, most people shouldn't have to write an enti
rely new daemon and handler setup by themselves. that said, someone writing a new test may have to take into account a new handler. a handler will contain the following methods: <caption> handler methods </caption> name arguments returns notes [command] rest of sent line server's response the name is normalized to be uppercase. onerror command, rest of sent line server's response called if ha...
...ent classes of nntp servers: compliance for rfc 977, rfc 2980, and rfc 3977, as well as a giganews and an inn server. (full 2980 and 3977 compliance as well as inn is not yet written). for xpcshell tests in mailnews/news, all files in mailnews/news/test/postings/auto-add are automatically added based on the newsgroups header. there are added in alphabetical order, which may help for purposes that
rely on article key orders. the only generated header is lines. 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...
Building a Thunderbird extension 3: install manifest
see developer.thunderbird.net for newer information. the install.rdf file is an xml file that provides general information about the extension. ...
...n of your website. while this value is in email address format, it is not an email address. it should, however, be a unique value so that it does not conflict with other extensions. <em:name>my first extension</em:name>: the extension name is displayed in the thunderbird add-on manager. <em:version>1.0</em:version>: this is the version number of your extension. it must be updated each time you
release a new version of your extension. it is not the thunderbird version number (which is stored in the minversion and maxversion fields). <em:creator>jenzed</em:creator>: this optional value is used to store the extension author's name. <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id>: this element contains the version id of the application that this add on is developed for. it is defined b...
...d (such as "*"). see valid application versions for a list of the supported version numbers and formats. <em:maxversion>5.0.*</em:maxversion>: this element indicates the most recent version of thunderbird for which the extension is intended to work. this cannot be higher than the currently available version. "5.0.*" indicates that the extension works with thunderbird 5.0 and any subsequent 5.0.x
releases. see valid application versions for a list of the supported version numbers and formats. there are more optional elements that can be specified in install.rdf. these are described on the install manifests page. note that elements can be specified in any order, as long as they are children of the <description> node. « previous next » ...
customDBHeaders Preference
within thunderbird's main view. the mailnews.customdbheaders preference will be our focus. some of the functionality described here is really new, so please try to be understanding if some of these things change tomorrow (or have changed already). while i was going through the creating a custom column guide, i built and used thunderbird-2.0b1 checked-out from cvs with the thunderbird_2_0b1_
release tag. there is a high probability that your experience will be different should you use an earlier
release. getting started to build upon the reply-to column tutorial, i'll describe the process i went through in developing a custom column to display a 'superfluous' column within thunderbird's main view. the data will come from a custom header labeled x-superfluous. setting the preferences...
...", "x-superfluous,x-other"); important: please pay careful attention to the case of the mailnews.customdbheaders preference. because comparisons are case-insensitive, all of the custom headers get set to lowercase when the data gets migrated to the message database. also, it has been brought to my attention that the delimiter has been changed to a space in the latest code. ...
...ed to the .msf database after the customdbheaders pref is set will have the corresponding string property set on the msghdr. if the .msf file is rebuilt, all the msghdrs should have the string property set correctly. 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. depending on the
release you use one, both, or none of the methods may work. building the extension for this extension, i used a directory tree exactly like this: superfluous/ chrome.manifest install.rdf makefile chrome/ content/ superfluous.js superfluous_overlay.xul here's th...
Standard OS Libraries
ample: ... // placeholder - example soon to come x11 x11 runs primarily on unix® and unix-like operating systems like linux, all of the bsd variants, sun solaris both native 32 and 64 bit support, solaris x86, mac os x (via darwin) as well as other platforms like os/2 and cygwin. there are updates that happen to x11; at the time of this writing, the latest version is 4.4.0. information on all
releases can be found on its official page x11 resources. syntax and variable types are found on the documentation pages linked from this page. for example the documentation for v4.4.0 is seen here: x11 manual pages: section 3. example: xquerypointer get mouse cursor position and some extra information. documentation on this function is found at xfree86 :: xquerypointer(3x11) manual page. componen...
...nd you cannot use carbon from 64-bit code. core foundation to learn about all the mac os x apis and which library file you will need to call, go to the mac developer library website and find the function, then scroll down to "declared in" section, and find which framework contains the header file. the coregraphics framework is based on corefoundation framework, including coregraphics etc. the
release, string, etc. comes from corefoundation. example: cgeventgetlocation for example, cgeventgetlocation function is declared in cgevent.h header file, which is contained in coregraphics.framework. so /system/library/frameworks/coregraphics.framework/coregraphics is the library path to pass to ctypes.open function call. components.utils.import("resource://gre/modules/ctypes.jsm"); let coregrap...
... [ { "x" : cgfloat }, { "y" : cgfloat } ]); let cgeventgetlocation = coregraphics.declare("cgeventgetlocation", ctypes.default_abi, cgpoint, cgeventref); let cftyperef = ctypes.voidptr_t; let cf
release = corefoundation.declare("cf
release", ctypes.default_abi, ctypes.void_t, cgeventref); let event = cgeventcreate(null); let cursor = cgeventgetlocation(event); cf
release(event); components.utils.reporterror(cursor); coregraphics.close(); corefoundation.close(); resources f...
Using js-ctypes
ice", ctypes.default_abi, sint32, // return cftimeinterval, // timeout cfoptionflags, // flags cfurlref, // iconurl cfurlref, // soundurl cfurlref, // localizationurl cfstringref, // alertheader cfstringref, // alertmessage cfstringref // defaultbuttontitle ); /* https://developer.apple.com/library/mac/documentation/corefoundation/reference/cftyperef/#//apple_ref/c/func/cf
release * void cf
release ( * cftyperef cf * ); */ var cf
release = libcf.declare('cf
release', ctypes.default_abi, void, // return cftyperef // cf ); /* https://developer.apple.com/library/mac/documentation/corefoundation/reference/cfstringref/#//apple_ref/c/func/cfstringcreatewithcharacters * cfstringref cfstringcreatewithcharacters ( * cfallocatorref alloc, * const unichar *chars, *...
...* cfallocatorref alloc, * const unichar *chars, * cfindex numchars * ); */ var cfstringcreatewithcharacters = libcf.declare('cfstringcreatewithcharacters', ctypes.default_abi, cfstringref, // return cfallocatorref, // alloc unichar.ptr, // *chars cfindex // numchars ); // helper functions function makecfstr(jsstr) { // js str is just a string // returns a cfstr that must be
released with cf
release when done return cfstringcreatewithcharacters(null, jsstr, jsstr.length); } // main var mycfstrs = { head: makecfstr('core foundation says...'), body: makecfstr('we just called the equivalent of the "standardalert carbon function" for 64bit osx from javascript!') }; var rez = cfusernotificationdisplaynotice(0, kcfusernotificationcautionalertlevel, null, null, null, mycfst...
...ull); console.info('rez:', rez, rez.tostring(), uneval(rez)); // cfusernotificationdisplaynotice does not block till user clicks dialog, it will return immediately if (rez.tostring() == '0') { console.log('notification was succesfully shown!!'); } else { console.error('failed to show notification... :('); } for (var cfstr in mycfstrs) { if (mycfstrs.hasownproperty(cfstr)) { var rez_cf
release = cf
release(mycfstrs[cfstr]); // returns void } } libcf.close(); calling libc routines on linux/posix this example demonstrates how to use ctypes to call a libc function on linux. /* import js-ctypes */ var {cu} = require("chrome"); var {ctypes} = cu.import("resource://gre/modules/ctypes.jsm", null); /* open the library */ try { /* linux */ var libc = ctypes.open("libc.so.6"); } cat...
Scripting plugins - Plugins
this document also explains how to make a plugin use these new extensions to be scriptable as well as how to access objects in a browser. ...
... npnvwindownpobject and npnvpluginelementnpobject. calling npn_getvalue() with either of those new enumerations will return an npobject representing the browser object, and from there, the functions in this api can be used to get and set properties, and to call methods on those browser objects. and as always when working with reference counted npobjects, the caller is responsible for calling npn_
releaseobject on the npobject to drop the reference. the new npnvariable enumerations are defined in npapi.h as: npnvwindownpobject = 15, npnvpluginelementnpobject = 16 how to call plugin native methods the following html code will do the job: <embed type="application/plugin-mimetype"> <script> var embed = document.embeds[0]; embed.nativemethod(); alert(embed.nativeproperty); embed.nati...
...ementnpobject = 16 how to call plugin native methods the following html code will do the job: <embed type="application/plugin-mimetype"> <script> var embed = document.embeds[0]; embed.nativemethod(); alert(embed.nativeproperty); embed.nativeproperty.anothernativemethod(); </script> the api extensions the api extensions are based on four new structs: npstring npvariant npn_
releasevariantvalue npn_getstringidentifier npn_getstringidentifiers npn_getintidentifier npn_identifierisstring npn_utf8fromidentifier npn_intfromidentifier npobject npn_construct (since firefox 3.0b1) npn_createobject npn_retainobject npn_
releaseobject npn_invoke npn_invokedefault npn_enumerate (since mozilla 1.9a1) npn_evaluate npn_getproperty ...
Debugger.Script - Firefox Developer Tools
ed and via the findscripts method on debugger instances. spidermonkey constructs exactly one debugger.script for each underlying webassembly module per debugger instance. a debugger.script instance is a strong reference to the underlying webassembly module; it protects the module it refers to from being garbage collected. please note at the time of this writing, support for webassembly is very p
reliminary. many properties and methods below throw. convention for descriptions of properties and methods below, if the behavior of the property or method differs between the instance referring to a jsscript or to a block of webassembly code, the text will be split into two sections, headed by “if the instance refers to a jsscript” and “if the instance refers to webassembly code”, respecti...
... to a jsscript, "js". if the instance refers to webassembly code, "wasm". function properties of the debugger.script prototype object the functions described below may only be called with a this value referring to a debugger.script instance; they may not be used as methods of other kinds of objects. getalloffsets() if the instance refers to a jsscript, return an arrayl describing the
relationship between bytecode instruction offsets and source code positions in this script.l is sparse, and indexed by source line number. if a source line numberline has no code, thenl has noline property. if there is code forline, then l[line] is an array of offsets of byte code instructions that are entry points to that line. for example, suppose we have a script for the following source code: ...
...t offsets 5 and 20 (for the initialization, which is performed only once, and the loop test, which is performed at the start of each iteration); the third line has no code; and the fourth line begins at offset 10. if the instance refers to webassembly code, throw a typeerror. getallcolumnoffsets(): if the instance refers to a jsscript, return an array describing the
relationship between bytecode instruction offsets and source code positions in this script. unlike getalloffsets(), which returns all offsets that are entry points for each line, getallcolumnoffsets() returns all offsets that are entry points for each (line, column) pair. the elements of the array are objects, each of which describes a single entry point, and contains the following properties: ...
Debugger - Firefox Developer Tools
tion value is treated like undefined (“continue normally”);value is ignored. onpromisesettled(promise) a promise object, referenced by the debugger.object instance promise that was allocated within a debuggee scope, has settled (either fulfilled or rejected). the promise’s state, fulfillment or rejection value, and the allocation and resolution stacks can be obtained using the promise-
related accessor properties of the debugger.object instance promise. this handler method should return a resumption value specifying how the debuggee’s execution should proceed. however, note that a { return:value } resumption value is treated like undefined (“continue normally”);value is ignored. ondebuggerstatement(frame) debuggee code has executed adebugger statement inframe. this meth...
... is used. if the object is not a global object, then the global in whose scope it was allocated is used. note that the result may include sources that can no longer ever be used by the debuggee: say, eval code that has finished running, or source for unreachable functions. whether such sources appear can be affected by the garbage collector’s behavior, so this function’s result is not enti
rely deterministic. findscripts([query]) return an array of debugger.script instances for all debuggee scripts matchingquery. each instance appears only once in the array.query is an object whose properties restrict which scripts are returned; a script must meet all the criteria given byquery to be returned. ifquery is omitted, we return the debugger.script instances for all debuggee scripts. ...
...ry are optional. passing an empty object returns all debuggee code scripts. note that the result may include debugger.script instances for scripts that can no longer ever be used by the debuggee, say, those for eval code that has finished running, or unreachable functions. whether such scripts appear can be affected by the garbage collector’s behavior, so this function’s behavior is not enti
rely deterministic. findobjects([query]) return an array of debugger.object instances referring to each live object allocated in the scope of the debuggee globals that matches query. each instance appears only once in the array. query is an object whose properties restrict which objects are returned; an object must meet all the criteria given by query to be returned. if query is omitted, we ret...
DevTools API - Firefox Developer Tools
onsole() closes the split console. togglesplitconsole() toggles the state of the split console. return value: a promise that is fulfilled once the operation has finished. switchhost(hosttype) switches the location of the toolbox parameters: hosttype {toolbox.hosttype} - the type of the new host. return value: a promise that is fulfilled once the new host is ready.
reloadtarget(force)
reloads the current target of the toolbox. parameters: force {boolean} - if true the target is shift-
reloaded i.e. the cache is bypassed during the
reload. zoomin() increases the zoom level of the toolbox document. zoomout() decreases the zoom level of the toolbox document. zoomreset() resets the zoom level of the toolbox document. setzoom(value) set...
...plitter"/> <tabbox id="mytool-sidebar" class="devtools-sidebar-tabs" hidden="true"> <tabs/> <tabpanels flex="1"/> </tabbox> a sidebar is composed of tabs. each tab will hold an iframe. for example, in the inspector, there are 3 tabs (computed view, rule view, layout view). the user can select the tab he wants to see. if the availability of the tabs depends on some tool-
related conditions, we might want to not let the user select a tab. this api provides methods to hide the tabstripe. for example, in the web console, there are 2 views (network view and object view). these views are only available in certain conditions controlled by the webconsole code. so it's up the webconsole the hide and show the sidebar, and select the correct tab. if the loaded document exp...
... a new tab has been added {tabid}-ready tab is loaded and can be used {tabid}-selected tab has been selected and is visible {tabid}-unselected tab has been unselected and is not visible show the sidebar has been opened. hide the sidebar has been closed. examples register a tool gdevtools.registertool({ // fixme: missing key
related properties. id: "inspector", icon: "chrome://browser/skin/devtools/inspector-icon.png", url: "chrome://browser/content/devtools/inspector/inspector.xul", get label() { let strings = services.strings.createbundle("chrome://browser/locale/devtools/inspector.properties"); return strings.getstringfromname("inspector.label"); }, istargetsupported: function(target) { return...
Dominators view - Firefox Developer Tools
node, as bytes and as a percentage of the total the nodes's name and address in memory. entries are ordered by the amount of memory that they retain. for example: in this screenshot we can see five entries under "gc roots". the first two are call and window objects, and retain about 21% and 8% of the total size of the memory snapshot, respectively. you can also see that these objects have a
relatively tiny "shallow size", so almost all of the retained size is in the objects that they dominate. immediately under each gc root, you'll see all the nodes for which this root is the immediate dominator. these nodes are also ordered by their retained size. for example, if we click on the first window object: we can see that this window dominates a css2properties object, whose retained size...
...f you haven't already open the memory tool check "record call stacks" press the button labeled "make monsters!" take a snapshot switch to the "dominators" view analyzing the dominators tree you'll see the three arrays as the top three gc roots, each retaining about 23% of the total memory usage: if you expand an array, you'll see the objects (monsters) it contains. each monster has a
relatively small shallow size of 160 bytes. this includes the integer eye- and tentacle-counts. each monster has a bigger retained size, which is accounted for by the string used for the monster's name: all this maps closely to the memory graph we were expecting to see. one thing you might be wondering, though, is: where's the top-level object that retains all three arrays? if we look at the retai...
...arrays, we'll see it: here we can see the retaining object, and even that this particular array is the array of fierce monsters. but the array is also rooted directly, so if the object were to stop referencing the array, it would still not be eligible for garbage collection. this means that the object does not dominate the array, and is therefore not shown in the dominators tree view. see the
relevant section of the dominators concepts article. using the call stack view finally, you can switch to the call stack view, see where the objects are being allocated, and jump to that point in the debugger: ...
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
beside them. in the css pane in the css pane's rules view, any instance of a display: grid declaration gets a grid icon included within it: . clicking the icon toggles the display of a grid overlay on the page, which appears over the element, laid out like a grid to show the position of its grid lines and tracks: the overlay is still shown when you select other elements, so you can edit
related css properties and see how the grid is affected. the layout view grid section when grids are included on a page, the css pane's layout view includes a "grid" section containing a number of options for viewing those grids. you can find out more about those in the section below. note: the layout view can be found underneath the layout tab on the right-hand pane of the page inspector. the ab...
...ithin: overlay grid: contains a checkbox for each grid present on the page, along with various options. allows overlay views to be toggled on and off. grid display settings: display line numbers: turn the line numbers shown for each grid overlay on and off (on by default). display area names: turn area names on and off, in the case of grids with named grid areas (on by default, where
relevant). extend lines infinitely: by default, grid lines/tracks are only shown inside the element with display: grid set on it; when toggling this option on, the grid lines extend to the edge of the viewport along each axis. mini grid view: a smaller view of the currently overlaid grid. note: your grid preferences such as overlay color and display settings choices are persisted across p...
... each entry consists of (from left to right): a checkbox allowing you to toggle the grid overlay for that grid on and off. a name label to represent the grid, consisting of a selector identifying the html element that has the grid applied to it. clicking this also toggles the grid overlay on and off. a target icon that when clicked immediately selects the html element that this grid entry
relates to, inside the html pane. a color picker icon that allows you to change the primary color of the grid overlay. this is useful for selecting different colors so you can easily tell your grids apart. inspecting a subgrid when the page contains a grid with a subgrid, the entry for the subgrid is indented under its parent in the overlay grid section. when you select the checkbox for the subgr...
AbstractRange - Web APIs
and end points of a section of content within the document. as an abstract interface, you will not directly instantiate an object of type abstractrange. instead, you will use the range or staticrange interfaces. to understand the difference between those two interfaces, and how to choose which is appropriate for your needs. ...
...asons for that. first, after your page is loaded, the browser simply isn't thinking in terms of html. once it's been loaded, the page is a tree of dom node objects, so you need to specify the beginning and ending locations of a range in terms of nodes and positions within nodes. second, in order to support the mutability of the dom tree as much as possible, you need a way to represent positions
relative to nodes in the tree, rather than simply global positions within the entire document. by defining points within the document as offsets within a given node, those positions remain consistent with the content even as nodes are added to, removed from, or moved around within the dom tree—within reason. there are fairly obvious limitations (such as if a node is moved to be after the endpoint o...
...thin the document as offsets within a given node, those positions remain consistent with the content even as nodes are added to, removed from, or moved around within the dom tree—within reason. there are fairly obvious limitations (such as if a node is moved to be after the endpoint of a range, or if the content of a node is heavily altered), but it's far better than nothing. third, using node-
relative positions to define the start and end positions will generally be easier to make perform well. rather than having to negotiate the dom figuring out what your global offset refers to, the user agent (browser) can instead go directly to the node indicated by the starting position and start from there, working its way forward until it reaches the given offset into the ending node. to illustrat...
AudioContext - Web APIs
sing, or decoding. you need to create an audiocontext before you do anything else, as everything happens inside a context. it's recommended to create one audiocontext and reuse it instead of initializing a new one each time, and it's ok to use a single audiocontext for several different audio source and pipeline concurrently. ...
... returns the number of seconds of processing latency incurred by the audiocontext passing the audio from the audiodestinationnode to the audio subsystem. audiocontext.outputlatency read only returns an estimation of the output latency of the current audio context. methods also inherits methods from its parent interface, baseaudiocontext. audiocontext.close() closes the audio context,
releasing any system audio resources that it uses. audiocontext.createmediaelementsource() creates a mediaelementaudiosourcenode associated with an htmlmediaelement. this can be used to play and manipulate audio from <video> or <audio> elements. audiocontext.createmediastreamsource() creates a mediastreamaudiosourcenode associated with a mediastream representing an audio stream which may come fro...
...inationnode associated with a mediastream representing an audio stream which may be stored in a local file or sent to another computer. audiocontext.createmediastreamtracksource() creates a mediastreamtrackaudiosourcenode associated with a mediastream representing an media stream track. audiocontext.getoutputtimestamp() returns a new audiotimestamp object containing two audio timestamp values
relating to the current audio context. audiocontext.resume() resumes the progression of time in an audio context that has previously been suspended/paused. audiocontext.suspend() suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing cpu/battery usage in the process. examples basic audio context declaration: var audioctx = new audiocontex...
AuthenticatorAssertionResponse.authenticatorData - Web APIs
the authenticatordata property of the authenticatorassertionresponse interface returns an arraybuffer containing information from the authenticator such as the
relying party id hash (rpidhash), a signature counter, test of user presence, user verification flags, and any extensions processed by the authenticator. syntax var authnrdata = authenticatorassertionresponse.authenticatordata; value an arraybuffer that has a arraybuffer.bytelength of at least 37 bytes, containing the following fields: rpidhash (32 bytes) - a sha256 hash of the
relying party id that was seen by the browser. the server will ensure that this hash matches a hash of its own origin in order to prevent phishing or other man-in-the-middle attacks. flags (1 bytes) - a bitfield that indicates various attributes that...
...attestedcredentialdata (variable length) - the credential that was created. this is only present during a navigator.credentials.create() call. this is a sequence of bytes with the following format: aaguid (16 bytes) - authenticator attestation globally unique identifier, a unique number that identifies the model of the authenticator (not the specific instance of the authenticator) so that a
relying party can understand the characteristics of the authenticator by looking up its metadata statement. credentialidlength (2 bytes) - the length of the credential id that immediately follows these bytes. credentialid (variable length) - a unique identifier for this credential so that it can be requested for future authentications. the credential is "credentialidlength" bytes long. crede...
...is "credentialidlength" bytes long. credentialpublickey (variable length) - a cose encoded public key. this public key will be stored on the server associated with a user's account and be used for future authentications. extensions (variable length) - an optional cbor map of extensions. ...
Using the CSS Painting API - Web APIs
t() to create a rectangle of that color. the fillrect() parameters are, in order, x-axis origin, y-axis origin, width, and height. fillrect(0, 15, 200, 20) results in the creation of a rectangle that is 200 units wide by 20 units tall, positioned 0 units from the left and 15 units from the top of the content box. we can use the css background-size and background-position properties to re-size or
relocate this background image, but this is the default size and placement of the yellow box we created in our paint worklet. we tried to keep the example simple. for more options, look at the canvas documentation. we also add a little bit of complexity later in this tutorial. using the paint worklet to use the paint worklet, we need to register it using addmodule() and include it in our css, ensu...
...e and location of the background image. paintsize in the example above, we created a 20x200 unit box, painted 15 units from the top of the element it is the same regardless of the size of the element. if the text is small, the yellow box looks like a huge underline. if the text is huge, the box might look like an bar above the first three letters. it would be better if the background image was
relative to the size of the element — we can use the element's paintsize property to ensure the background image is proportional to the size of the element's box model size. in the above image, the background proportional to the size of the element. the 3rd example has width: 50%; set on the block level element, making the element narrower and therefore the background image narrower. the code t...
... and width) of the box being painted */ paint(ctx, size) { ctx.fillstyle = 'hsla(55, 90%, 60%, 1.0)'; ctx.fillrect( 0, size.height / 3, size.width * 0.4, size.height * 0.6 ); } }); this code example has two differences from our first example: we've included a second argument, which is the paint size. we've changed the dimensions and positioning of our rectangle to be
relative to the size of the element box rather than absolute values. we can pass the second parameter into the paint() function to give us access to the width and the height of the element, via .width and .height properties. our header now has a highlight that changes according to it's size. css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/02parttwo/header-highli...
CanvasRenderingContext2D.arcTo() - Web APIs
canvasrenderingcontext2d.arcto() method of the canvas 2d api adds a circular arc to the current sub-path, using the given control points and radius. the arc is automatically connected to the path's latest point with a straight line, if necessary for the specified parameters. this method is commonly used for making rounded corners. note: be aware that you may get unexpected results when using a
relatively large radius: the arc's connecting line will go in whatever direction it must to meet the specified radius. syntax void ctx.arcto(x1, y1, x2, y2, radius); parameters x1 the x-axis coordinate of the first control point. y1 the y-axis coordinate of the first control point. x2 the x-axis coordinate of the second control point. y2 the y-axis coordinate of the second control poin...
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas...
...y, 50); ctx.lineto(p2.x, p2.y); labelpoint(p0); labelpoint(p1); labelpoint(p2); ctx.stroke(); result result of a large radius if you use a
relatively large radius, the arc may appear in a place you didn't expect. in this example, the arc's connecting line goes above, instead of below, the coordinate specified by moveto(). this happens because the radius is too large for the arc to fit enti
rely below the starting point. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(180, 90); ctx.arcto(180,130, 110,130, 130); ctx.lineto(110, 130); ctx.stroke(); result live demo more sophisticated demo of the method. you can play around with range input to see how arc changes. h...
Advanced animations - Web APIs
raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); adding mouse control to get some control over the ball, we can make it follow our mouse using the mousemove event, for example. the click event
releases the ball and lets it bounce again. <canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var running = false; var ball = { x: 100, y: 100, vx: 5, vy: 1, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.rad...
... ...
...unction(e) { window.cancelanimationframe(raf); running = false; }); ball.draw(); move the ball using your mouse and
release it with a click. breakout this short chapter only explains some techniques to create more advanced animations. there are many more! how about adding a paddle, some bricks, and turn this demo into a breakout game? check out our game development area for more gaming
related articles. ...
ContentIndex - Web APIs
async function unregistercontent(article) { // reference registration ...
... async function unregistercontent(article) { // reference registration const registration = await navigator.servicewo...
... async function unregistercontent(article) { // reference registration const registration = await navigator.serviceworker.ready; // feature detect content i...
Content Index API - Web APIs
async function unregistercontent(article) { // reference registration ...
... async function unregistercontent(article) { // reference registration const registration = await navigator.servicewo...
... async function unregistercontent(article) { // reference registration const registration = await navigator.serviceworker.ready; // feature detect content i...
Document: DOMContentLoaded event - Web APIs
script has a chance to run, so it is wise to check before adding a listener. ...
...o run, so it is wise to check before adding a listener. ...
...abel>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.addev...
Document: lostpointercapture event - Web APIs
the lostpointercapture event is fired when a captured pointer is
released. 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. when the user subsequently
releases the pointer, the lostpointercapture event will be fired. ...
... event handler property onlostpointercapture examples this example listens for the lostpointercapture event, and captures the pointer for an element on pointerdown. when the user subsequently
releases the pointer, the lostpointercapture event will be fired. ...
...elector('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: readystatechange event - Web APIs
the readystatechange event is fired when the readystate attribute of a document has changed. ...
... the readystatechange event is fired when the readystate attribute of a document has changed. ...
...abel>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.addev...
DocumentOrShadowRoot.elementFromPoint() - Web APIs
the elementfrompoint() method—available on both the document and shadowroot objects—returns the topmost element at the specified coordinates (
relative to the viewport). if the element at the specified point belongs to another document (for example, the document of an <iframe>), that document's parent element is returned (the <iframe> itself). if the element at the given point is anonymous or xbl generated content, such as a textbox's scroll bars, then the first non-anonymous ancestor element (for example, the textbox) is returned. elements with pointer-events set to none will be ignored, and the element below it will be returned. if the method is run on another document (like an <iframe>'s subdocument), the coordinates are
relative to the document where the method is being called. if...
... return value the topmost element object located at the specified coordinates. example this example creates two buttons which let you set the current color of the paragraph element located under the coordinates (2, 2). ...
...side the visible bounds of the document or either coordinate is negative, the result is null. if you need to find the specific position inside the element, use document.caretpositionfrompoint(). syntax const element = document.elementfrompoint(x, y) parameters x the horizontal coordinate of a point,
relative to the left edge of the current viewport. y the vertical coordinate of a point,
relative to the top edge of the current viewport. return value the topmost element object located at the specified coordinates. example this example creates two buttons which let you set the current color of the paragraph element located under the coordinates (2, 2). javascript function changecolor(newcolor) { elem = document.elementfrompoint(2, 2); elem.style.color = newcolor; } the chan...
Introduction to the DOM - Web APIs
item() is the single method on the nodelist object. the latter uses the typical array syntax to fetch the second item in the list. attribute when an attribute is returned by a member (e.g., by the createattribute() method), it is an object reference that exposes a special (albeit small) interface for attributes. attributes are nodes in the dom just like elements are, though you may ra
rely use them as such. namednodemap a namednodemap is like an array, but the items are accessed by name or index, though this latter case is me
rely a convenience for enumeration, as they are in no particular order in the list. a namednodemap has an item() method for this purpose, and you can also add and remove items from a namednodemap. there are also some common terminology consi...
...ects and the actual things you can use to manipulate the dom hierarchy. there are many points where understanding how these work can be confusing. for example, the object representing the html form element gets its name property from the htmlformelement interface but its classname property from the htmlelement interface. in both cases, the property you want is simply in that form object. but the
relationship between objects and the interfaces that they implement in the dom can be confusing, and so this section attempts to say a little something about the actual interfaces in the dom specification and how they are made available. interfaces and objects many objects borrow from several different interfaces. the table object, for example, implements a specialized htmltableelement interface, w...
...cript> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the html elements upon which the dom operates listed as well. when this is the case, you can cut and paste the example into a new html document, save it, and run the example from the browser. there are some cases, however, when the examples are more concise. to run examples that only demonstrate the basic
relationship of the interface to the html elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. the following very simple web page provides a <script> element in the header in which you can place functions that test the interface, a few html elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessar...
Element.setPointerCapture() - Web APIs
note: when pointer capture is set, pointerover, pointerout, pointerenter, and pointerleave events are only generated when crossing the boundary of the capture target. this has the effect of suppressing these events on all other elements. ...
... note: when pointer capture is set, pointerover, pointerout, pointerenter, and pointerleave events are only generated when crossing the boundary of the capture target. this has the effect of suppressing these events on all other elements. ...
... you pointer moves outside of its boundaries. ...
Cross-global fetch usage - Web APIs
this article explains an edge case that occurs with fetch (and potentially other apis exhibiting the same kind of resource retrieval behavior). when a cross-origin fetch involving a
relative url is initiated from an <iframe>, the
relative url used to be resolved against the current global location, rather than the iframe's location. the edge case many sites will never comes up against this edge case. to see it: you need a same-origin iframe that same-origin iframe needs to have a location with a different base url you have to use the fetch function cross-global, e.g. ...
...d to be resolved against the current global location, rather than the iframe's location. the edge case many sites will never comes up against this edge case. to see it: you need a same-origin iframe that same-origin iframe needs to have a location with a different base url you have to use the fetch function cross-global, e.g. frame.contentwindow.fetch() the url passed to fetch needs to be
relative the problem in the past we would resolve the
relative url against the current global, for example: let absolute = new url(
relative, window.location.href) this is not a problem as such. it is just that different apis that exhibit this kind of behavior were doing it inconsistently with the behavior defined in the spec, which could lead to problems further down the line. the solution in ...
... resolve the
relative url against the current global, for example: let absolute = new url(
relative, window.location.href) this is not a problem as such. it is just that different apis that exhibit this kind of behavior were doing it inconsistently with the behavior defined in the spec, which could lead to problems further down the line. the solution in firefox 60 onwards, mozilla resolves the
relative url against the global that owns the fetch() function being used (see bug 1432272). so in the case described above, it is resolved against the iframe's location: let absolute = new url(
relative, frame.contentwindow.location.href) there is a lot of discussion in progress about getting new specs to align with this behavior change, to mitigate potential problems going forward. ...
Using Fetch - Web APIs
requests and responses. it also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network. this kind of functionality was previously achieved using xmlhttprequest. fetch provides a better alternative that can be easily used by other technologies such as service workers. fetch also provides a single logical place to define other http-
related concepts such as cors and extensions to http. the fetch specification differs from jquery.ajax() in three main ways: the promise returned from fetch() won’t reject on http error status even if the response is an http 404 or 500. instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing...
...r of different settings: see fetch() for the full options available, and more details. // example post method implementation: async function postdata(url = '', data = {}) { // default options are marked with * const response = await fetch(url, { method: 'post', // *get, post, put, delete, etc. ...
...ybody, { 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 response. similarly, redirect() returns a response resulting in a redirect to a specified url. these are also only
relevant to service workers. body both requests and responses may contain body data. a body is an instance of any of the following types: arraybuffer arraybufferview (uint8array and friends) blob/file string urlsearchparams formdata the body mixin defines the following methods to extract a body (implemented by both request and response). these all return a promise that is eventually reso...
FocusEvent - Web APIs
the focusevent interface represents focus-
related events, including focus, blur, focusin, and focusout. ...
... the focusevent interface represents focus-
related events, including focus, blur, focusin, and focusout. ...
...nsolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">focusevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor focusevent() creates a focusevent event with the given parameters. properties this interface also inherits properties from its parent uievent, and indirectly from event. focusevent.
relatedtarget is an eventtarget representing a secondary target for this event. in some cases (such as when tabbing in or out a page), this property may be set to null for security reasons. methods this interface has no specific methods. it inherits methods from its parent uievent, and indirectly from event. specifications specification status comment ui eventsthe de...
HTMLElement: lostpointercapture event - Web APIs
the lostpointercapture event is fired when a captured pointer is
released. 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. when the user subsequently
releases the pointer, the lostpointercapture event will be fired. ...
...handler property onlostpointercapture examples this example listens for the lostpointercapture event for an element, and captures the pointer for the element on pointerdown. when the user subsequently
releases the pointer, the lostpointercapture event will be fired. ...
...t.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 ...
HTMLFontElement.size - Web APIs
the obsolete htmlfontelement.size property is a domstring that reflects the size html attribute. it contains either an integer number in the range of 1-7 or a
relative value to increase/decrease the value of the size attribute of the <basefont> element. ...
...the size html attribute. it contains either an integer number in the range of 1-7 or a
relative value to increase/decrease the value of the size attribute of the <basefont> element. ...
...mber in the range of 1-7 or a
relative value to increase/decrease the value of the size attribute of the <basefont> element. ...
HTMLInputElement.webkitdirectory - Web APIs
e set of selected items. the selected file system entries can be obtained using the webkitentries property. syntax htmlinputelement.webkitdirectory = boolvalue value a boolean; true if the <input> element should allow picking only directories or false if only files should be selectable. understanding the results after the user makes a selection, each file object in files has its file.webkit
relativepath property set to the
relative path within the selected directory at which the file is located. for example, consider this file system: photoalbums birthdays jamie's 1st birthday pic1000.jpg pic1004.jpg pic1044.jpg don's 40th birthday pic2343.jpg pic2344.jpg pic2355.jpg pic2356.jpg ...
...c2355.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. the entry for pic2343.jpg will have a webkit
relativepath of photoalbums/birthdays/don's 40th birthday/pic2343.jpg. this makes it possible to know the hierarchy even though the filelist is flat. note: the behavior of webkit
relativepath is different in chromium < 72. see this bug for further details. example in this example, a directory picker is presented which lets the user choose one or more directories. when the change event occurs, a l...
... draft initial specification. this api has no official w3c or whatwg specification. browser compatibility the compatibility table on this page is generated...
HTMLInputElement - Web APIs
the htmlinputelement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements. ...
... formaction string: returns / sets the element's formaction attribute, containing the uri of a program that processes information submitted by the element. this overrides the action attribute of the parent form. formenctype string: returns / sets t...
...alidity, valueasdate, valueasnumber, width, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(), setselectionrange(), stepup(), and stepdown(). document object model (dom) level 2 html specificationthe definition of 'htmlinputelement' in that specification. obsolete the size property is now an unsigned long. the type property must be enti
rely given in lowercase characters. document object model (dom) level 1 specificationthe definition of 'htmlinputelement' in that specification. obsolete initial definition. ...
MediaKeyMessageEvent - Web APIs
the mediakeymessageevent interface of the encryptedmediaextensions api contains the content and
related data when the content decryption module generates a message for the session. ...
... the mediakeymessageevent interface of the encryptedmediaextensions api contains the content and
related data when the content decryption module generates a message for the session. ...
...ssageevent() creates a new instance of mediakeymessageevent. properties inherits properties from its parent, event. mediakeymessageevent.message read only returns an arraybuffer with a message from the content decryption module. messages vary by key system. mediakeymessageevent.messagetype read only indicates the type of message. may be one of license-request, license-renewal, license-
release, or individualization-request. methods inherits methods from its parent, event. examples // tbd specifications specification status comment encrypted media extensionsthe definition of 'mediakeymessageevent' in that specification. recommendation initial definition. ...
MouseEvent() - Web APIs
if the shift key was simultaneously pressed. "altkey", optional and defaulting to false, of type boolean, that indicates if the alt key was simultaneously pressed. "metakey", optional and defaulting to false, of type boolean, that indicates if the meta key was simultaneously pressed. ...
...multaneously pressed. "altkey", optional and defaulting to false, of type boolean, that indicates if the alt key was simultaneously pressed. "metakey", optional and defaulting to false, of type boolean, that indicates if the meta key was simultaneously pressed. ...
... "region", optional and defaulting to null, of type domstring, is the id of the hit region affected by the event. the absence of any hit region is affected, is represented by the null value. in some imple...
MouseEvent.pageX - Web APIs
this includes any portion of the document not currently visible. being based on the edge of the document as it is, this property takes into account any horizontal scrolling of the page. for example, if the page is scrolled such that 200 pixels of the left side of the document are scrolled out of view, and the mouse is clicked 100 pixels inward from the left edge of the view, the value returned by pagex will be 300. ...
...ally in the browser's code, resulting in potential behavior differences. see browser compatibility to learn which browsers have been updated to use the revised data type. example more examples you can also see an example that demonstrates how to access the mouse position information in every available coordinate system. let's take a look at a simple example that shows you the mouse's position
relative to the page's origin. since this example is presented in an <iframe>, that top-left corner is the top-left corner of the frame, not the browser window. 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; } b...
...s change. </p> <p> <code>pagex</code>: <span id="x">n/a</span> </p> <p> <code>pagey</code>: <span id="y">n/a</span> </p> </div> the html is simple; the box we'll be watching for mouse events on is given the class "box". it has two <span> elements, one with the id "x" and one with the id "y". those will be updated each time an event occurs to contain the latest mouse coordinates
relative to the page. css the css used for this example is shown below. .box { width: 400px; height: 250px; border: 2px solid darkblue; background-color: blue; color: white; font: 16px "zilla", "open sans", "helvetica", "arial", sans-serif; } result try this out here: specifications specification status comment css object model (cssom) view modulethe de...
Navigator.sendBeacon() - Web APIs
data a arraybuffer, arraybufferview, blob, domstring, formdata, or urlsearchparams object containing the data to send. return values the sendbeacon() method returns true if the user agent successfully queued the data for transfer. otherwise, it returns false. ...
....open("post", "/log", false); // third parameter of `false` means synchronous xhr.send(analyticsdata); }); this is what sendbeacon() replaces. with the sendbeacon() method, the data is transmitted asynchronously when the user agent has an opportunity to do so, without delaying unload or the next navigation. this solves all of the problems with submission of analytics data: the data is sent
reliably it's sent asynchronously it doesn't impact the loading of the next page in addition, the code is simpler to write than any of the older techniques! the following example shows a theoretical analytics code pattern that submits data to a server using the sendbeacon() method. window.addeventlistener("unload", function logdata() { navigator.sendbeacon("/log", analyticsdata); }); the be...
...ading of the next page in addition, the code is simpler to write than any of the older techniques! the following example shows a theoretical analytics code pattern that submits data to a server using the sendbeacon() method. 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. specifications specification status comment beaconthe definition of 'sendbeacon()' in that specification. candidate recommendation initial definition ...
Network Information API - Web APIs
changes to the user's connection. 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); p
reload large resources the connection object is useful for deciding whether to p
reload resources that take large amounts of bandwidth or memory. this example would be called soon after page load to check for a connection type where p
reloading a video may not be desirable. if a cellular connection is found, then the p
reloadvideo flag is set to false. for simplicity and clarity, this example only test...
..., then the p
reloadvideo flag is set to false. for simplicity and clarity, this example only tests for one connection type. a real-world use case would likely use a switch statement or some other method to check all of the possible values of networkinformation.type. regardless of the type value you can get an estimate of connection speed through the networkinformation.effectivetype property. ...
...e other method to check all of the possible values of networkinformation.type. regardless of the type value you can get an estimate of connection speed through the networkinformation.effectivetype property. let p
reloadvideo = true; var connection = navigator.connection || navigator.mozconnection || navigator.webkitconnection; if (connection) { if (connection.effectivetype === 'slow-2g') { p
reloadvideo = false; } } interfaces networkinformation provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes. the networkinformation interfaces cannot be instantiated. it is instead accessed through the navigator interface. specifications specification status c...
Payment Request API - Web APIs
the payment request api provides a consistent user experience for both merchants and users. it is not a new way for paying for things; rather, it's a way for users to select their preferred way of paying for things, and make that information available to a merchant. payment request concepts and usage many problems
related to online shopping-cart abandonment can be traced to checkout forms, which can be difficult and time consuming to fill out and often require multiple steps to complete. the payment request api is meant to reduce the number of steps needed to complete a payment online, potentially doing away with checkout forms. it aims to make the checkout process easier, by remembering a user's details, which are then passed along to a merchant hopefully without requiring a htm...
...erchant (website) to validate themselves as allowed to use a particular payment handler (e.g., registered as allowed to use apple pay). dictionaries addresserrors a dictionary containing strings providing descriptive explanations of any errors in any paymentaddress entries which have errors. ...
...ctionary containing strings providing descriptive explanations of any errors in
related to paymentresponse's email, phone, and name attributes. paymentdetailsupdate an object describing changes that need to be made to the payment details in the event that the server needs to update information following the instantiation of the payment interface but before the user begins to interact with it.
related dictionaries for the basic card specification basiccardchangedetails an object providing redacted address information that is provided as the methoddetails on the paymentmethodchange event sent to the paymentrequest when the user changes payment information. basiccarderrors an object providing any error messages associated with the fields in the basiccardresponse object that are not val...
PerformanceNavigationTiming - Web APIs
the performancenavigationtiming interface provides methods and properties to store and retrieve metrics regarding the browser's document navigation events. for example, this interface can be used to determine how much time it takes to load or unload a document. ...
...rent browsing context. if there was no redirect, or if the redirect was from another origin, and that origin does not permit it's timing information to be exposed to the current origin then the value will be 0. performancenavigationtiming.requeststart read only a domhighrestimestamp representing the time immediately before the user agent starts requesting the resource from the server, or from
relevant application caches or from local resources. performancenavigationtiming.responsestart read only a domhighrestimestamp representing the time immediately after the user agent's http parser receives the first byte of the response from
relevant application caches, or from local resources or from the server. performancenavigationtiming.type read only a string representing the navigation typ...
...or from local resources. performancenavigationtiming.responsestart read only a domhighrestimestamp representing the time immediately after the user agent's http parser receives the first byte of the response from
relevant application caches, or from local resources or from the server. performancenavigationtiming.type read only a string representing the navigation type. must be: "navigate", "
reload", "back_forward" or "prerender". performancenavigationtiming.unloadeventend read only a domhighrestimestamp representing the time value equal to the time immediately after the user agent finishes the unload event of the previous document. performancenavigationtiming.unloadeventstart read only a domhighrestimestamp representing the time value equal to the time immediately before the user ...
PointerEvent - Web APIs
on the y axis), in css pixels, of the contact geometry of the pointer. pointerevent.pressure read only the normalized pressure of the pointer input in the range 0 to 1, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively. pointerevent.tangentialpressure read only the normalized tangential pressure of the pointer input (also known as bar
rel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control. pointerevent.tiltx read only the plane angle (in degrees, in the range of -90 to 90) between the y–z plane and the plane containing both the pointer (e.g. pen stylus) axis and the y axis. pointerevent.tilty read only the plane angle (in degrees, in the range of -90 to 90) between the x–z p...
...ylus makes physical contact with the digitizer. pointermove this event is fired when a pointer changes coordinates. pointerrawupdate this event is fired when any of a pointer's properties change. pointerup this event is fired when a pointer is no longer active. pointercancel a browser fires this event if it concludes the pointer will no longer be able to generate events (for example the
related device is deactived). pointerout this event is fired for several reasons including: pointing device is moved out of the hit test boundaries of an element; firing the pointerup event for a device that does not support hover (see pointerup); after firing the pointercancel event (see pointercancel); when a pen stylus leaves the hover range detectable by the digitizer. pointerleave this event...
...ange detectable by the digitizer. pointerleave this event is fired when a pointing device is moved out of the hit test boundaries of an element. for pen devices, this event is fired when the stylus leaves the hover range detectable by the digitizer. gotpointercapture this event is fired when an element receives pointer capture. lostpointercapture this event is fired after pointer capture is
released for a pointer. globaleventhandlers globaleventhandlers.onpointerover a global event handler for the pointerover event. globaleventhandlers.onpointerenter a global event handler for the pointerenter event. globaleventhandlers.onpointerdown a global event handler for the pointerdown event. globaleventhandlers.onpointermove a global event handler for the pointermove event. globalev...
PublicKeyCredential.response - Web APIs
the response read-only property of the publickeycredential interface is an authenticatorresponse object which is sent from the authenticator to the user agent for the creation/fetching of credentials. the information contained in this response will be used by the
relying party's server to verify the demand is legitimate. ...
...onse will be used by the
relying party's server to verify the demand is legitimate. an authenticatorresponse is either: an authenticatorattestationresponse (when the publickeycredential is created via credentialscontainer.create()) an authenticatorassertionresponse (when the publickeycredential is obtained via credentialscontainer.get()). in order to validate the creation of credentials, a
relying party's server needs both: this response the extensions of the client (given by publickeycredential.getclientextensionresults()) to validate the demand. note: when validating the fetching of existing credentials, the whole publickeycredential object and the client extensions are necessary for the
relying party's server. note: this property may only be used in top-level contexts and ...
... note: when validating the fetching of existing credentials, the whole publickeycredential object and the client extensions are necessary for the
relying party's server. note: this property may only be used in top-level contexts and will not be available in an <iframe> for example. syntax response = publickeycredential.response value an authenticatorresponse object containing the data a
relying party's script will receive and which should be sent to the
relying party's server in order to validate the demand for creation or fetching. this object contains data from the client (authenticatorresponse/clientdatajson) and from the authenticator. examples var options = { challenge: new uint8array(16) /* from the server */, rp: { name: "example corp", id : "login.example.com"...
PublicKeyCredentialCreationOptions.attestation - Web APIs
attestation is an optional property of the publickeycredentialcreationoptions dictionary. this is a string whose value indicates the preference regarding the attestation transport, between the authenticator, the client and the
relying party. the attestation is a mean for the
relying party to verify the origin of the authenticator with an attestation certificate authority. the information contained in the attestation may thus disclose some information about the user (e.g. which device they are using). syntax attestation = publickeycredentialcreationoptions.attestation value a string which may be "none": the
relying party is not interested in this attestation. this avoids making a check with the attestation certificate authority and asking the user consent for sharing identifying inf...
... the default value is "none". ...
... the default value is "none". ...
PushEvent - Web APIs
16disabled full support 16disabled disabled from version 16: this feature is behind the enable service workers preference. ...
... 16disabled full support 16disabled disabled from version 16: this feature is behind the enable service workers preference. ...
... 16disabled full support 16disabled disabled from version 16: this feature is behind the enable service workers preference. ...
RTCConfiguration.iceTransportPolicy - Web APIs
uration = { icetransportpolicy: policy }; rtcconfiguration.icetransportpolicy = policy; let policy = rtcconfiguration.icetransportpolicy; value a domstring which indicates what ice candidate policy the ice agent should use during the negotiation process, per the jsep standard. ...
...tiation process, per the jsep standard. the permitted values are: all the ice agent is permitted to use any kind of candidate, including both local and
relay candidates. the agent—or the browser itself—may still perform some form of ip filtering on the incoming candidates for reasons including privacy and security, as well as to simply limit the number of candidates. this is the default.
relay the ice agent only considers media
relay candidates when evaluating candidates. this includes, for example, those candidates
relayed by a stun or turn server. this can be used to prevent the remote endpoint from receiving the user's ip addresses, which may be important in some security situations. for example, in a video calling application, the app may want to prevent unknown callers from...
...r. this can be used to prevent the remote endpoint from receiving the user's ip addresses, which may be important in some security situations. for example, in a video calling application, the app may want to prevent unknown callers from learning the callee's ip addresses until the callee has agreed to receive the call. examples in this example, a new connection is configured to only accept
relay candidates. let config = { iceservers: [ { urls: [ "stun:stun.example.com" ] }, ], icetransportpolicy: "
relay" }; let pc = new rtcpeerconnection(config); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtccandidate.icetransportpolicy' in that specification. candidate recommendat...
RTCDataChannel - Web APIs
channel property protocol returns a domstring containing the name of the subprotocol in use. ...
...name of the subprotocol in use. ...
...cified when the data channel was created, then this property's value is "" (the empty string).readystate read only the read-only rtcdatachannel property readystate returns an enum of type rtcdatachannelstate which indicates the state of the data channel's underlying data connection.
reliable read only the read-only rtcdatachannel property
reliable indicates whether or not the data channel is
reliable.stream read only the deprecated (and never part of the official specification) read-only rtcdatachannel property stream returns an id number (between 0 and 65,535) which uniquely identifies the rtcdatachannel.event handlersalso inherits event handlers from: eventtargetonbufferedamountlow the rtcdatachannel.onbufferedamountlow property is an eventhandler which specifies a function the br...
RTCDtlsTransport - Web APIs
information about sctp packets transmitted and received by an connection's data channels. features of the dtls transport include the addition of security to the underlying transport; the rtcdtlstransport interface can be used to obtain information about the underlying transport and the security added to it by the dtls layer. ...
...on the bundling mode used when creating the rtcpeerconnection. whether bundling is used depends on what the other endpoint is able to negotiate. all browsers support bundling, so when both endpoints are browsers, you can rest assured that bundling will be used. some non-browser legacy endpoints, however, may not support bundle. to be able to negotiate with such endpoints (or to exclude them enti
rely), the rtcconfiguration property bundlepolicy may be provided when creating the connection. the bundlepolicy lets you control how to negotiate with these legacy endpoints. the default policy is "balanced", which provides a balance between performance and compatibility. for example, to create the connection using the highest level of bundling: const rtcconfig = { bundlepolicy: "max-bundle" }; ...
...they're initially separate, then half or more of them get closed and the senders and receivers updated to refer to the appropriate remaining rtcdtlstransport objects. data channels rtcdatachannels use sctp to communicate. all of a peer connection's data channels share a single rtcsctptransport, found in the connection's sctp property. you can, in turn, identify the rtcdtlstransport used to secu
rely encapsulate the data channels' sctp communications by looking at the rtcsctptransport object's transport property. examples this example presents a function, tallysenders(), which iterates over an rtcpeerconnection's rtcrtpsenders, tallying up how many of them are in various states. the function returns an object containing properties whose values indicate how many of the senders are in each s...
RTCIceCandidate - Web APIs
ine string. the permitted values are listed in the rtcicecomponent enumerated type. foundation read only returns a domstring containing a unique identifier that is the same for any candidates of the same type, share the same base (the address from which the ice agent sent the candidate), and come from the same stun server. this is used to help optimize ice performance while prioritizing and cor
relating candidates that appear on multiple rtcicetransport objects. ip read only a domstring containing the ip address of the candidate. port read only an integer value indicating the candidate's port number. priority read only a long integer value indicating the candidate's priority. protocol read only a string indicating whether the candidate's protocol is "tcp" or "udp". the string is...
...rt objects. ip read only a domstring containing the ip address of the candidate. port read only an integer value indicating the candidate's port number. priority read only a long integer value indicating the candidate's priority. protocol read only a string indicating whether the candidate's protocol is "tcp" or "udp". the string is one of those in the enumerated type rtciceprotocol. ...
...ate. port read only an integer value indicating the candidate's port number. priority read only a long integer value indicating the candidate's priority. protocol read only a string indicating whether the candidate's protocol is "tcp" or "udp". the string is one of those in the enumerated type rtciceprotocol.
relatedaddress read only if the candidate is derived from another candidate,
relatedaddress is a domstring containing that host candidate's ip address. for host candidates, this value is null.
relatedport read only for a candidate that is derived from another, such as a
relay or reflexive candidate, the
relatedport is a number indicating the port number of the candidate from which this candidate is derived. for host candidates, the
relatedport property is null. sdpmid rea...
RTCIceCandidateStats - Web APIs
the webrtc api's rtcicecandidatestats dictionary provides statistics
related to an rtcicecandidate. properties rtcicecandidatestats is based upon the rtcstats dictionary, so it includes those properties in addition to the ones below. address optional a string containing the address of the candidate. this value may be an ipv4 address, an ipv6 address, or a fully-qualified domain name. this property was previously named ip and only accepted ip addresses. candidatetype optional a string matching one of the values in the rtcicecandidatetype enumerated type, indicating what kind of candidate the object provides statistics for. deleted optional a boolean value indicating whether or not the candidate has been
released or deleted; the default value is false. for local candidates, it's valu...
...ip addresses. candidatetype optional a string matching one of the values in the rtcicecandidatetype enumerated type, indicating what kind of candidate the object provides statistics for. deleted optional a boolean value indicating whether or not the candidate has been
released or deleted; the default value is false. for local candidates, it's value is true if the candidate has been deleted or
released. for host candidates, true means that any network resources (usually a network socket) associated with the candidate have already been
released. for turn candidates, the turn allocation is no longer active for deleted candidates. this property is not present for remote candidates. networktype optional a string from the rtcnetworktype enumerated type which indicates the type of interface us...
...networktype enumerated type which indicates the type of interface used for a local candidate. this property is only present for local candidates. port optional the network port number used by the candidate. priority optional the candidate's priority, corresponding to rtcicecandidate.priority. protocol optional a string specifying the protocol (tcp or udp) used to transmit data on the port.
relayprotocol optional a string identifying the protocol used by the endpoint for communicating with the turn server; valid values are tcp, udp, and tls. only present for local candidates. transportid optional a string uniquely identifiying the transport object that was inspected in order to obtain the rtctransportstats associated with the candidate correspondin to these statistics. url optional ...
RTCPeerConnection - Web APIs
the rtcpeerconnection interface represents a webrtc connection between the local computer and a remote peer. it provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed. ...
...matches for all components of the connection. it is, however, possible that the ice agent did find compatible connections for some components. "disconnected" checks to ensure that components are still connected failed for at least one component of the rtcpeerconnection. this is a less stringent test than "failed" and may trigger intermittently and resolve just as spontaneously on less
reliable networks, or during temporary disconnections. when the problem resolves, the connection may return to the "connected" state. "closed" the ice agent for this rtcpeerconnection has shut down and is no longer handling requests. rtcicegatheringstate enum the rtcicegatheringstate enum defines string constants which reflect the current status of ice gathering, as returned using...
... defines string constants which can be used to limit the transport policies of the ice candidates to be considered during the connection process. constant description "all" all ice candidates will be considered. "public" only ice candidates with public ip addresses will be considered. removed from the specification's may 13, 2016 working draft. "
relay" only ice candidates whose ip addresses are being
relayed, such as those being passed through a turn server, will be considered. rtcpeerconnectionstate enum the rtcpeerconnectionstate enum defines string constants which describe states in which the rtcpeerconnection may be. these values are returned by the connectionstate property. this state essentially represents the aggregate stat...
Request.cache - Web APIs
d from the cache. otherwise the resource will be downloaded from the server and the cache will be updated. if there is no match, the browser will make a normal request, and will update the cache with the downloaded resource. no-store — the browser fetches the resource from the remote server without first looking in the cache, and will not update the cache with the downloaded resource.
reload — the browser fetches the resource from the remote server without first looking in the cache, but then will update the cache with the downloaded resource. no-cache — the browser looks for a matching request in its http cache. if there is a match, fresh or stale, the browser will make a conditional request to the remote server. if the server indicates that the resource has not change...
...t property is "follow" and the redirects do not violate the "same-origin" mode. example // download a resource with cache busting, to bypass the cache // completely. fetch("some.json", {cache: "no-store"}) .then(function(response) { /* consume the response */ }); // download a resource with cache busting, but update the http // cache with the downloaded resource. fetch("some.json", {cache: "
reload"}) .then(function(response) { /* consume the response */ }); // download a resource with cache busting when dealing with a // properly configured server that will send the correct etag // and date headers and properly handle if-modified-since and // if-none-match request headers, therefore we can
rely on the // validation to guarantee a fresh response. fetch("some.json", {cache: "no-cache"}...
... return res }) .then(function(response) { /* consume the (possibly stale) response */ }) .catch(error => { /* can be an abort...
SVGAnimationElement - Web APIs
the svganimationelement interface is the base interface for all of the animation element interfaces: svganimateelement, svgsetelement, svganimatecolo
relement, svganimatemotionelement and svganimatetransformelement. ...
... the svganimationelement interface is the base interface for all of the animation element interfaces: svganimateelement, svgsetelement, svganimatecolo
relement, svganimatemotionelement and svganimatetransformelement. ...
...ent. svganimationelement.getstarttime() returns a float representing the begin time, in seconds, for this animation element's current interval, if it exists, regardless of whether the interval has begun yet. if there is no current interval, then a domexception with code invalid_state_err is thrown. svganimationelement.getcurrenttime() returns a float representing the current time in seconds
relative to time zero for the given time container. svganimationelement.getsimpleduration() returns a float representing the number of seconds for the simple duration for this animation. if the simple duration is undefined (e.g., the end time is indefinite), then a domexception with code not_supported_err is raised. svganimationelement.beginelement() creates a begin instance time for the curren...
SVGTextContentElement - Web APIs
the svgtextcontentelement interface is implemented by elements that support rendering child text content. it is inherited by various text-
related interfaces, such as svgtextelement, svgtspanelement, svgtrefelement, svgaltglyphelement and svgtextpathelement. ...
... the svgtextcontentelement interface is implemented by elements that support rendering child text content. it is inherited by various text-
related interfaces, such as svgtextelement, svgtspanelement, svgtrefelement, svgaltglyphelement and svgtextpathelement. ...
...he computed tight bounding box of the glyph cell that corresponds to a given typographic character. svgtextcontentelement.getrotationofchar() returns a float representing the rotation of typographic character. svgtextcontentelement.getcharnumatposition() returns a long representing the character which caused a text glyph to be rendered at a given position in the coordinate system. because the
relationship between characters and glyphs is not one-to-one, only the first character of the
relevant typographic character is returned svgtextcontentelement.selectsubstring() selects text within the element. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgtextcontentelement' in that specification. candidate recommen...
Using the Screen Capture API - Web APIs
isplay surface is any content object that can be selected by the api for sharing purposes. sharing surfaces include the contents of a browser tab, a complete window, all of the applications of a window combined into a single surface, and a monitor (or group of monitors combined together into one surface). there are two types of display surface. a visible display surface is a surface which is enti
rely visible on the screen, such as the frontmost window or tab, or the entire screen. a logical display surface is one which is in part or completely obscured, either by being overlapped by another object to some extent, or by being enti
rely hidden or offscreen. how these are handled by the screen capture api varies. generally, the browser will provide an image which obscures the hidden portion of ...
...applications can't force the user to share specific content by restricting the source list until only one item is left. while display capture is in effect, the machine which is sharing screen contents will display some form of indicator so the user is aware that sharing is taking place. note: for privacy and security reasons, screen sharing sources are not enumerable using enumeratedevices().
related to this, the devicechange event is never sent when there are changes to the sources available for getdisplaymedia(). capturing shared audio getdisplaymedia() is most commonly used to capture video of a user's screen (or parts thereof). however, user agents may allow the capture of audio along with the video content. the source of this audio might be the selected window, the entire computer...
...h, when clicked, calls the startcapture() function to request access to, and begin capturing, screen contents. a second button, "stop capture", which upon being clicked calls stopcapture() to terminate capture of screen contents. a <video> into which the captured screen contents are streamed. a <pre> block into which logged text is placed by the intercepted consolemethod. css the css is enti
rely cosmetic in this example. the video is given a border, and its width is set to occupy nearly the entire available horizontal space (width: 98%). max-width is set to 860px to set an absolute upper limit on the video's size, the error, warn, and info classes are used to style the corresponding console output types. #video { border: 1px solid #999; width: 98%; max-width: 860px; } .error { ...
TouchEvent - Web APIs
oints of contact with the screen and includes support for detecting movement, addition and removal of contact points, and so forth. touches are represented by the touch object; each touch is described by a position, size and shape, amount of pressure, and target element. lists of touches are represented by touchlist objects. ...
...nly distance between two digits since the event's beginning. expressed as a floating-point multiple of the initial distance between the digits at the beginning of the event. values below 1.0 indicate an inward pinch (zoom out). values above 1.0 indicate an outward unpinch (zoom in). initial value: 1.0 touch event types there are several types of event that can be fired to indicate that touch-
related changes have occurred. you can determine which of these has happened by looking at the event's touchevent.type property. touchstart sent when the user places a touch point on the touch surface. the event's target will be the element in which the touch occurred. touchend sent when the user removes a touch point from the surface (that is, when they lift a finger or stylus from the surface).
...ement that received the touchstart event corresponding to the touch point, even if the touch point has moved outside that element. this event is also sent if the values of the radius, rotation angle, or force attributes of a touch point change. note: the rate at which touchmove events is sent is browser-specific, and may also vary depending on the capability of the user's hardware. you must not
rely on a specific granularity of these events. touchcancel sent when a touch point has been disrupted in some way. there are several possible reasons why this might happen (and the exact reasons will vary from device to device, as well as browser to browser): an event of some kind occurred that canceled the touch; this might happen if a modal alert pops up during the interaction. the touch poi...
Touch events - Web APIs
a multi-touch interaction starts when a finger (or stylus) first touches the contact surface. other fingers may subsequently touch the surface and optionally move across the touch surface. the interaction ends when the fingers are removed from the surface. ...
...ceives touch events during the start, move, and end phases. touch events are similar to mouse events except they support simultaneous touches and at different locations on the touch surface. the touchevent interface encapsulates all of the touchpoints that are currently active. the touch interface, which represents a single touchpoint, includes information such as the position of the touch point
relative to the browser viewport. definitions surface the touch-sensitive surface. this may be a screen or trackpad. touch point a point of contact with the surface. this may be a finger (or elbow, ear, nose, whatever, but typically a finger) or stylus. interfaces touchevent represents an event that occurs when the state of touches on the surface changes. touch represents a single p...
... a final line segment. convenience functions this example uses two convenience functions that should be looked at briefly to help make the rest of the code more clear. selecting a color for each touch to make each touch's drawing look different, the colorfortouch() function is used to pick a color based on the touch's unique identifier. this identifier is an opaque number, but we can at least
rely on it differing between the currently-active touches. function colorfortouch(touch) { var r = touch.identifier % 16; var g = math.floor(touch.identifier / 3) % 16; var b = math.floor(touch.identifier / 7) % 16; r = r.tostring(16); // make it a hex digit g = g.tostring(16); // make it a hex digit b = b.tostring(16); // make it a hex digit var color = "#" + r + g + b; console.log(...
TreeWalker - Web APIs
hod. properties this interface doesn't inherit any property. treewalker.root read only returns a node representing the root node as specified when the treewalker was created. treewalker.whattoshow read only returns an unsigned long being a bitmask made of constants describing the types of node that must be presented. non-matching nodes are skipped, but their children may be included, if
relevant. the possible values are: constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningful only when creating a treewalker with an attr node as its root. in this case, it means that the attribute n...
...ill appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_processing_instruction 64 shows processinginstruction nodes. nodefilter.show_text 4 shows text nodes. treewalker.filter read only returns a nodefilter used to select the
relevant nodes. treewalker.expandentityreferences read only is a boolean indicating, when discarding an entityreference its whole sub-tree must be discarded at the same time. treewalker.currentnode is the node on which the treewalker is currently pointing at. methods this interface doesn't inherit any method. note: in the context of a treewalker, a node is visible if it exists in the logic...
... whole sub-tree must be discarded at the same time. treewalker.currentnode is the node on which the treewalker is currently pointing at. methods this interface doesn't inherit any method. note: in the context of a treewalker, a node is visible if it exists in the logical view determined by the whattoshow and filter parameter arguments. (whether or not the node is visible on the screen is ir
relevant.) treewalker.parentnode() moves the current node to the first visible ancestor node in the document order, and returns the found node. it also moves the current node to this one. if no such node exists, or if it is before that the root node defined at the object construction, returns null and the current node is not changed. treewalker.firstchild() moves the current node to the first ...
URL() - Web APIs
the url() constructor returns a newly created url object representing the url defined by the parameters. if the given base url or the resulting url are not valid urls, the javascript typeerror exception is thrown. note: this feature is available in web workers. syntax const url = new url(url [, base]) parameters url a usvstring representing an absolute or
relative url. if url is a
relative url, base is required, and will be used as the base url. if url is an absolute url, a given base will be ignored. base optional a usvstring representing the base url to use in case url is a
relative url. if not specified, it defaults to ''. note: you can still use an existing url object for the base, which stringifies itself to the object's href property. exceptions exception ...
...be ignored. base optional a usvstring representing the base url to use in case url is a
relative url. if not specified, it defaults to ''. note: you can still use an existing url object for the base, which stringifies itself to the object's href property. exceptions exception explanation typeerror url (in the case of absolute urls) or base + url (in the case of
relative urls) is not a valid url. examples // base urls let m = 'https://developer.mozilla.org'; let a = new url("/", m); // => 'https://developer.mozilla.org/' let b = new url(m); // => 'https://developer.mozilla.org/' new url('docs', b); // => 'https://developer.mozilla.org/docs' let d = new ur...
... living standard initial definition. ...
URL.createObjectURL() - Web APIs
note: this feature is available in web workers. note: this feature is not available in service workers due to its potential to create memory leaks. ...
...ce object to create an object url for. return value a domstring containing an object url that can be used to reference the contents of the specified source object. examples see using object urls to display images. usage notes memory management each time you call createobjecturl(), a new object url is created, even if you've already created one for the same object. each of these must be
released by calling url.revokeobjecturl() when you no longer need them. browsers will
release object urls automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so. using object urls for media streams in older versions of the media source specification, attaching a stream to a <video...
...nd memory usage, if there are safe times when you can explicitly unload them, you should do so. using object urls for media streams in older versions of the media source specification, attaching a stream to a <video> element required creating an object url for the mediastream. this is no longer necessary, and browsers are removing support for doing this. important: if you still have code that
relies on createobjecturl() to attach streams to media elements, you need to update your code to simply set srcobject to the mediastream directly. specifications specification status comment file apithe definition of 'createobjecturl()' in that specification. working draft initial definition. media source extensionsthe definition of 'url' in that specificatio...
URL - Web APIs
you can then easily read the parsed components of the url or make changes to the url. ...
...e url. if a browser doesn't yet support the url() constructor, you can access a url object using the window interface's window.url property. be sure to check to see if any of your target browsers require this to be prefixed. note: this feature is available in web workers. constructor new url() creates and returns a url object referencing the url specified using an absolute url string, or a
relative url string and a base url string. properties hash a usvstring containing a '#' followed by the fragment identifier of the url. host a usvstring containing the domain (that is the hostname) followed by (if a port was specified) a ':' and the port of the url. hostname a usvstring containing the domain of the url. href a stringifier that returns a usvstring containing the whole url.
...teobjecturl() returns a domstring containing a unique blob url, that is a url with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser. revokeobjecturl() revokes an object url previously created using url.createobjecturl(). usage notes the constructor takes a url parameter, and an optional base parameter to use as a base if the url parameter is a
relative url: const url = new url('../cats', 'http://www.example.com/dogs'); console.log(url.hostname); // "www.example.com" console.log(url.pathname); // "/cats" url properties can be set to construct the url: url.hash = 'tabby'; console.log(url.href); // "http://www.example.com/cats#tabby" urls are encoded according to the rules found in rfc 3986. for instance: url.pathname = 'démonstration...
WebRTC connectivity - Web APIs
note: this page needs heavy rewriting for structural integrity and content completeness. lots of info here is good but the organization is a mess since this is sort of a dumping ground right now. signaling unfortunately, webrtc can’t create connections without some sort of server in the middle. we call this the signal channel or signaling service. it’s any sort of channel of communication to exchange information before setting up a connection, whether by email, post card or a carrier pigeon... it’s up to you. ...
...tion about the network connection. this is known as an ice candidate and details the available methods the peer is able to communicate (directly or through a turn server). typically, each peer will propose its best candidates first, making their way down the line toward their worse candidates. ideally, candidates are udp (since it's faster, and media streams are able to recover from interruptions
relatively easily), but the ice standard does allow tcp candidates as well. generally, ice candidates using tcp are only going to be used when udp is not available or is restricted in ways that make it not suitable for media streaming. not all browsers support ice over tcp, however. ice allows candidates to represent connections over either tcp or udp, with udp generally being preferred (and bein...
...phase is finished). srflx a server reflexive candidate is generated by a stun/turn server; the connection's initiator requests a candidate from the stun server, which forwards the request through the remote peer's nat, which creates and returns a candidate whose ip address is local to the remote peer. the stun server then replies to the initiator's request with a candidate whose ip address is un
related to the remote peer.
relay a
relay candidate is generated just like a server reflexive candidate ("srflx"), but using turn instead of stun. tcp candidate types tcp candidates (that is, candidates whose protocol is tcp) can be of these types: active the transport will try to open an outbound connection but won't receive incoming connection requests. this is the most common type, and th...
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
to move data between two endpoints as efficiently as possible under current conditions. those conditions may be affected by everything from the underlying layers of the network stack to the physical network connection, the intervening networks, the performance of the remote endpoint, noise levels, traffic levels, and so forth. since rtp is simply a data transport, it is augmented by the closely-
related rtp control protocol (rtcp), which is defined in rfc 3550, section 6. rtcp adds features including quality of service (qos) monitoring, participant information sharing, and the like. it isn't adequate for the purposes of fully managing users, memberships, permissions, and so forth, but provides the basics needed for an unrestricted multi-user communication session. the very fact that rtcp is...
...n 6. rtcp adds features including quality of service (qos) monitoring, participant information sharing, and the like. it isn't adequate for the purposes of fully managing users, memberships, permissions, and so forth, but provides the basics needed for an unrestricted multi-user communication session. the very fact that rtcp is defined in the same rfc as rtp is a clue as to just how closely-inter
related these two protocols are. capabilities of rtp rtp's primary benefits in terms of webrtc include: generally low latency. packets are sequence-numbered and time-stamped for reassembly if they arrive out of order. this lets data sent using rtp be delivered on transports that don't guarantee ordering or even guarantee delivery at all. this means rtp can be — but is not required to be — ...
...ers can be obtained by calling rtcpeerconnection.getreceivers(). rtcrtptransceiver an rtcrtptransceiver is a pair of one rtp sender and one rtp receiver which share an sdp mid attribute, which means they share the same sdp media m-line (representing a bidirectional srtp stream). these are returned by the rtcpeerconnection.gettransceivers() method, and each mid and transceiver share a one-to-one
relationship, with the mid being unique for each rtcpeerconnection. leveraging rtp to implement a "hold" feature because the streams for an rtcpeerconnection are implemented using rtp and the interfaces above, you can take advantage of the access this gives you to the internals of streams to make adjustments. among the simplest things you can do is to implement a "hold" feature, wherein a particip...
Using bounded reference spaces - Web APIs
e boundary of the world, and providing guidance to move back toward the origin point, or at least to stay inside the safe zone. xr hardware that does not have an inherent boundary defined may or may not support the bounded reference space. if it does, it likely has a system in place to allow the user to specify or select the boundaries to apply if a bounded space is to be used. however, it's enti
rely possible that the device will simply decline to support bounded spaces at all, so you should be prepared to fall back to some other type of reference space. understanding boundaries as mentioned previously, the boundary is defined as an array of points located at floor level, each defining a corner of the boundary area, going around the origin in a clockwise manner. this is demonstrated in the...
... each boundary segment as if it were an object to hit test against. as the user grows close to the boundary, you might warn them by displaying a message, flashing a warning indicator, playing an audio warning, or the like. and if the user actually collides with the boundary, don't let them continue past it. <<<--- example --->>> creating a bounded reference space before creating a project that
relies on bounded reference spaces, it's important to keep in mind that not all xr devices are capable of creating them. by their very nature, bounded reference spaces have special hardware requirements, since they need to allow for the user to physically move around in space while their movements are tracked. in this section, we'll look at how to safely create a session that will work whether bounde...
...w space into the function onrefspacecreated(). if neither type of space can be created, an error handler is called (handleerror()). in either case, once a reference space has been created, it's handed off to a function called onrefspacecreated(), which takes over the process of setting up the space for use. it's important, however, to keep in mind that while a local-floor space provides a floor-
relative space and is always available for immersive sessions, it also has significant differences from bounded-floor, so you need to be prepared to handle these differences. this is why the code snippet above records the reference space being used in the variable spacetype. the most obvious difference is that local-floor spaces don't provide boundaries, and are primarily meant to be used in situatio...
Web Animations API Concepts - Web APIs
ter timeline, document.timeline, which stretches from the moment the page is loaded to infinity — or until the window is closed. spread along that timeline according to their durations are our animations. each animation is anchored to a point in the timeline by its starttime, representing the moment along the document’s timeline when the animation starts playing. all the animation's playback
relies on this timeline: seeking the animation moves the animation’s position along the timeline; slowing down or speeding up the playback rate condenses or expands its spread across the timeline; repeating the animation lines up additional iterations of it along the timeline. in the future, we might have timelines based on gestures or scroll position or even parent and child timelines. the web ani...
...ime, which lets us see how long the page has been opened for: it's the "current time" of the document's timeline, which started when the page was opened. as of this writing, there’s only one kind of timeline object: the one based on the active document’s timeline. in the future we may see timeline objects that correspond to the length of the page, perhaps a scrolltimeline, or other things enti
rely. animation animation objects can be imagined as dvd players: they’re used for controlling media playback, but without media to play, they don’t do anything. animation objects accept media in the form of animation effects, specifically keyframe effects (we’ll get to those in a moment). like a dvd player, we can use the animation object’s methods to play, pause, seek, and control the ani...
...omated tests to ensure that your ui animations are running correctly. it opens up the browser’s rendering engine for building animation development tools like timelines. it is also a performant base on which to build a custom or commercial animation library. (see animating like you just don’t care with element.animate.) in some instances, it may negate the need for a fully fledged library enti
rely in the same way vanilla javascript can be used without jquery for many purposes. polyfill the web animation api has a polyfill that you can use today. ...
Using the Web Storage API - Web APIs
this article provides a walkthrough of how to make use of this technology. basic concepts storage objects are simple key-value stores, similar to objects, but they stay intact through page loads. the keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings). you can access these values like an object, or with the storage.getitem() and storage.setitem() methods. ...
...t's recommended to use the web storage api (setitem, getitem, removeitem, key, length) to prevent the pitfalls associated with using plain objects as key-value stores. the two mechanisms within web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page
reloads and restores). localstorage does the same thing, but persists even when the browser is closed and reopened. these mechanisms are available via the window.sessionstorage and window.localstorage properties (to be more precise, in supporting browsers the window object implements the windowlocalstorage and windowsessionstorage objects, which the localstorage and sessionstorage properties are m...
...font').value = currentfont; document.getelementbyid('image').value = currentimage; htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } here, the first three lines grab the values from local storage. next, we set the values displayed in the form elements to those values, so that they keep in sync when you
reload the page. finally, we update the styles/decorative image on the page, so your customization options come up again on
reload. setting values in storage storage.setitem() is used both to create new data items, and (if the data item already exists) update existing values. this takes two arguments — the key of the data item to create/modify, and the value to store in it. function populatestor...
XRReferenceSpace - Web APIs
perform the needed transforms when changing the viewer's position and/or orientation in 3d space. events in addition to other events that may be sent to xrspace or eventtarget objects, the following also apply to xrreferencespace objects. reset the reset event is sent to an xrreferencespace object when the browser detects a discontinuity has occurred wherein the tracked object's origin
relative to the user's environment or location. this can happen, for example, after the user recalibrates their xr device, or if the device automatically adjusts its origin after losing and regaining tracking. in addition to using addeventlistener(), you can establish a reset event handler by setting the onreset event handler property. reference space types the reference space returned by xrse...
...origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable
relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a w...
...s easily done using the getoffsetreferencespace() method. let offsettransform = new xrrigidtransform({x: 2, y: 0, z: 1}, {x: 0, y: 1, z: 0, w: 1}); xrreferencespace = xrreferencespace.getoffsetreferencespace(offsettransform); this replaces the xrreferencespace with a new one whose origin and orientation are adjusted to place the new origin at (2, 0, 1)
relative to the current origin and rotated given a unit quaternion that orients the space to put the viewer facing straight up
relative to the previous world orientation. geometry the native origin of any xrreferencespace is always configured so that +x is considered to be to the right, +y is upward, and +z is "backward" or toward the user. specifications specification status comme...
XRSession - Web APIs
the session's render state to match the values specified in the specified xrrenderstateinit dictionary. any properties not included in the given dictionary are left unchanged from their current values. events the following events are delivered to xrsession objects. event description end sent to the xrsession object after the webxr session has ended and all hardware-
related functions have completed. the event is represented by an object of type xrsessionevent. also available through the onend event handler property. inputsourceschange an event of type xrinputsourceschangeevent sent to the xrsession when the list of active xr input sources has changed. also available through the oninputsourceschange event handler property. select a...
...as aborted before being completed. also available through the onselect event handler property. selectend an event of type xrinputsourceevent which gets sent to the session object when one of its input devices finishes its primary action or gets disconnected while in the process of handling a primary action. for example: for button or trigger actions, this means the button has been
released; for spoken commands, it means the user has finished speaking. this is the last of the three select* events to be sent. also available through the onselectend event handler property. selectstart an event of type xrinputsourceevent which is sent to the session object when one of its input devices is first engaged by the user in such a way as to cause the primary action to begi...
...e of its input devices is first engaged by the user in such a way as to cause the primary action to begin. this is the first of the session* event to be sent. also available through the onselectstart event handler property. squeeze an xrinputsourceevent sent to indicate that a primary squeeze action has successfully completed. this indicates that the device being squeezed has been
released, and may represent dropping a grabbed object, for example. it is sent immediately before the squeezeend event is sent to indicate that the squeeze action is over. also available through the onsqueeze event handler property. squeezeend an xrinputsourceevent sent to the xrsession when the primary squeeze action ends, whether or not the action was successful. also available ...
XRView.transform - Web APIs
with the transform, you can then position the view as a camera within the 3d scene. if you instead need the more traditional view matrix, you can get using view.transform.inverse.matrix; this gets the underlying matrix of the transform's inverse. ...
...ng view.transform.inverse.matrix; this gets the underlying matrix of the transform's inverse. syntax let viewtransform = xrview.transform; value a xrrigidtransform object specifying the position and orientation of the viewpoint represented by the xrview. examples for each view making up the presented scene, the view's transform represents the position and orientation of the viewer or camera
relative to the reference space's origin. you can then use the inverse of this matrix to transform the objects in your scene to adjust their placement and orientation to simulate the viewer's movement through space. in this example, we see an outline of a code fragment used while rendering an xrframe, which makes use of the view transform to place objects in the world during rendering. const modelv...
...rientation by the additional position and orientation adjustments needed to match the camera's movement. to convert the "camera focused" transform matrix into an "object focused" transform, we use the transform's inverse, thus taking the matrix returned by view.transform.inverse.matrix. the resulting model view matrix will apply all the transforms needed to move and rotate the object based on the
relative positions of the object and the camera. this will simulate the movement of the camera even though we're actually moving the object. we then compute the normals for the model view matrix by inverting it, then transposing it. finally, we call the object's render() routine, passing along the modelviewmatrix and normalmatrix so the renderer can place and light the object properly. note: this...
Using the aria-labelledby attribute - Accessibility
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. without an element id, the assistive technology cannot catalog the object. ...
...contents </div> example 5: inline definition in the example below, the definition of a term that 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 aut...
...pup="true" id="filemenu">file</div> <div role="menu" aria-labelledby="filemenu"> <div role="menuitem">open</div> <div role="menuitem">save</div> <div role="menuitem">save as ...</div> ... </div> ... ...
ARIA: cell role - Accessibility
ai-aria roles, states, and properties context roles role="row" an element with role="row" is a row of cells within a tabular structure. a row contains one or more cells, grid cells, column headers, or row headers within a grid, table or treegrid, and optionally within a rowgroup. role="rowgroup" row is a required cell parent. rowgroup is an optional contextual row parent. it establishes a
relationship between descendant rows. it is a structural equivalent to the thead, tfoot, and tbody elements in an html table element. role="table" one of the three possible contexts (along with grid and treegrid) in which you'll find a row containing cells. table identifies the cell as being part of a non-interactive table structure containing data arranged in rows and columns, similar to the nativ...
...tive <table> html element. role="treegrid" similar to a grid, but with rows that can be expanded and collapsed in the same manner as for a tree. subclass roles role="gridcell" a cell in a row within a grid or treegrid. role="columnheader" a header cell that is the structural equivalent of the html <th> element with a column scope. unlike a plain cell, the columnheader role establishes a
relationship between it and all cells in the corresponding column. role="rowheader" a header cell that is the structural equivalent of the html <th> element with a row scope. unlike a plain cell, the rowheader role establishes a
relationship between it and all cells in the corresponding row. states and properties aria-colspan similar to the html <th> and <td> colspan attribute, it defines t...
...luded the aria-rowindex property on every cell. if no cells spanned more than one row or column, the aria-rowindex could have been placed on the row rather than the row's individual cells. best practices only use table, tbody, thead, tr, th, td, etc., for data table structure. you can add aria roles to ensure accessibility should the native semantics of the table be removed, such as with css. a
relevant use case for the aria table role is when the native semantics of a table are overridden by css's display property, such as by display: grid. in this case, you can use the aria table roles to add the semantics back in. <table role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <caption id="semantic_elements_table_desc">semantic ...
ARIA: feed role - Accessibility
> ... </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. ...
...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. these streams can be limited or infinite, loading more content as the user scrolls. implementing the feed pattern allows a screen reader to
reliably read and trigger the loading of feed content while in reading mode. a feed is a container element whose children are <article>s or have role article. each article within a feed should be focusable, with tabindex of...
... with an aria-describedby, suggesting to screen readers which elements to speak after the label when navigating by article. by identifying the elements inside of an article that provide the title and the primary content, assistive technologies can provide functions that enable users to jump from article to article and efficiently discern which articles they want to read. the feed pattern enables
reliable assistive technology reading mode interaction by establishing the following interoperability agreement between the web page and assistive technologies: in the context of a feed, the web page code is responsible for: appropriate visual scrolling of the content based on which article contains dom focus. loading or removing feed articles based on which article contains dom focus. ...
ARIA: gridcell role - Accessibility
the columns and rows, gridcells must have their positions programatically described by using aria-describedby. the ids provided for aria-describedby should correspond to parent elements intended to be the rows and columns. by referencing the parent elements with roles of rowheader or columnheader applied to them via aria-describedby, it allows assistive technology to understand the position and
relationship of the gridcell element to the rest of the table-style grouping of content. interactive grids and treegrids editable cells both td elements and elements with a role of gridcell applied to them can be made editable, mimicking functionality similar to editing a spreadsheet. this is done by applying the html contenteditable attribute. <td contenteditable="true">notes</td> <div role="g...
...ell. associated wai-aria roles, states, and properties grid communicates that a parent element is a a table or tree style grouping of information. row required to communicate the gridcell is part of a row of a table-style grouping of information. columnheader specifies which element is the associated column header. aria-colindex identifies the position of an element in
relation to the rest of the table-style grouping of information's columns. rowheader specifies which element is the associated row header. aria-rowindex identifies the position of an element in
relation to the rest of the table-style grouping of information's rows. examples the following example creates a table-style grouping of information: <h3 id="table-title">jovian gas giant planets...
...if at all possible, utilize native html table markup in their place. best practices the first rule of aria is: if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding an aria role, state or property to make it accessible. as such, it is reco...
ARIA: tab role - Accessibility
abs above, or to the side of, a content area, and selecting a different tab changes the content and makes the selected tab more prominent than the other tabs. 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. this combination identifies to assistive technology that the element is part of a group of
related elements. 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. they should contain the aria-controls property identifying an element with the tabpanel role. when an element with the tabpanel role has focus, or a child of it has focus, that indicates that the connected element with the ta...
...for the first panel</p> </div> <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> <p>content for the second panel</p> </div> <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden> <p>content for the third panel</p> </div> </div> .tabs { padding: 1em; } [role="tablist"] { margin-bottom: -1px; } [role="tab"] { position:
relative; z-index: 1; background: white; border-radius: 5px 5px 0 0; border: 1px solid grey; border-bottom: 0; padding: 0.2em; } [role="tab"][aria-selected="true"] { z-index: 3; } [role="tabpanel"] { position:
relative; padding: 0 0.5em 0.5em 0.7em; border: 1px solid grey; border-radius: 0 0 5px 5px; background: white; z-index: 2; } [role="tabpanel"]:focus { border-colo...
...ll non-active elements to tabindex=-1, and to set the active element to tabindex=0. specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'tab' in that specification. recommendation wai-aria authoring practicesthe definition of 'tabs' in that specification. working draft precedence order what are the
related properties, and in what order will this attribute or property be read (which property will take precendence over this one, and which property will be overwritten. screen reader support tbd ...
Web applications and ARIA FAQ - Accessibility
ructural information, helping authors identify landmarks, regions, and grids on their pages. aria enables dynamic, javascript-driven applications and widgets to interoperate with a variety of desktop-based assistive technologies. for more information about how to create accessible widgets with aria, see the overview of accessible web applications and widgets. where is aria supported? aria is a
relatively new specification, but support for it is growing. a wide variety of commonly-used browsers, assistive technologies, javascript toolkits, and applications now support aria. however, many users may still be using older versions of these technologies. you may want to consider implementing aria using progressive enhancement techniques—such as adding aria using javascript, not directly to you...
...add aria to your page, as shown in the answer to can you show me an example of aria in action? above. your page will still be theoretically invalid, but it will correctly pass all static validation checks. another alternative is to use the html5 doctype, which includes built-in support for aria. the w3c's html5 validator will even find invalid uses of aria in html5 pages for you. how does html5
relate to aria? html5 introduces a number of useful new semantic tags to html. a few of these tags overlap directly with roles available in aria, such as the new <progress> element. in cases where the browser supports an html5 tag that also exists in aria, there is usually no need to also add aria roles and states to the element. aria includes many roles, states, and properties that aren't available...
... as the new <progress> element. in cases where the browser supports an html5 tag that also exists in aria, there is usually no need to also add aria roles and states to the element. aria includes many roles, states, and properties that aren't available in html5, so these will continue to be useful to developers who use html5. for more information, steve faulkner has written a good overview of the
relationship between html5 and aria. degrading gracefully from html5 to aria when delivering content to browsers that aren't html5-aware, you may want to consider gracefully degrading to the use of aria where necessary. so, using the example of a progress bar, you can degrade gracefully to a role="progressbar" in cases where the <progressbar> tag isn't supported. here is an example of the markup u...
Accessibility Information for Web Authors - Accessibility
nglish and in 9 other languages) on accessible website authoring, which goes into greater depth. in 30 days, you will know why your website should be accessible and how to make it more accessible. automated checking & repair cynthia says™ from hisoftware® company "cynthia says™" is a free online webpage accessibility validation service that is designed to identify errors in webpage
related to section 508 standards and/or the wcag guidelines. it can perform a "complete webpage quality check" for accessibility, privacy, searchability, metadata and even alt text attribute quality. the web author chooses the guidelines (as a basis for errors and warnings) to be used by "cynthia says™": section 508, wcag priorities 1, 2 and 3. the output data report is displayed in a clear and wel...
...y, privacy, searchability, metadata and even alt text attribute quality. the web author chooses the guidelines (as a basis for errors and warnings) to be used by "cynthia says™": section 508, wcag priorities 1, 2 and 3. the output data report is displayed in a clear and well structured table where each and all checkpoints are identified and described (along with an helpful clickable link to the
related reference guideline) into logical groups and according to measurable results: passed, warning, failed for automated verification, warning for manual verification, not selected, not available, not
related, etc. accessibility valet from webthing description and summary to be written. wave 4.0 beta (web accessibility versatile evaluator) from webaim and sponsored by temple university ins...
...its purpose is to aid humans in the web accessibility evaluation process. rather than providing a complex technical report, wave 4.0 shows the original web page with embedded icons and indicators that reveal the accessibility information within your page. you can get accessibity report for errors, warnings. ...
Web accessibility for seizures and physical reactions - Accessibility
on musicogenic seizures. seizures and epilepsy are not the same. in its article, "a revised definition of epilepsy" the epilepsy foundation notes that…"a seizure is an event and epilepsy is the disease involving recurrent unprovoked seizures." according to the epilepsy foundation's page "how serious are seizures?" , "sudden unexpected death in epilepsy (sudep) is likely the most common disease-
related cause of death in with epilepsy. it is not frequent but it is a very real problem and people need to be aware of its risk". the point is, seizures most definitely can be and are fatal, and developers and designers are incredibly important to making the web a safer place for those with sensitivities to photosensitive or musicogenic triggers. seizures can be fatal, but even the ones that are ...
...working draft personalization tools 1.0 working draft three flashes or below threshhold understanding sc 2.3.1 understanding wcag 2.0 (older, but contains some explanations of references made in the wcag 2.1 criteria) three flashes or below threshold understanding success criterion 2.3.1 understanding...
...selim r. benbadis, director, comprehensive epilepsy program and clinical neurophysiology laboratory at usf and tgh in tampa, florida for their great, great...
Understandable - Accessibility
where abbreviations are used, you should provide an expansion of them, or a definition as required. the <abbr> element is often thought of as the preferred way to provide an expansion for an abbreviation — it takes a title attribute that contains the expansion, and this appears when the acronym is moused over. however, the title contents are not accessible via keyboard, nor are they
reliably read out by screenreaders. a better way to handle this is to again provide links to glossary pages containing the acronym expansion and explanation, or at the very least include them in the surrounding text in context. see abbreviations. 3.1.5 reading level (aaa) if text is provided that requires a higher reading level that lower secondary education level (typically c...
... around helping users enter correct information when required with the minimum of mistakes. success criteria how to conform to the criteria practical resource 3.3.1 error identification (a) when a user is filling out a form or choosing between options, any error that is detected should be clearly reported to the user, along with the form control that the error
relates to. it is advisable to implement client-side error detection and handling, via html5 form validation features, and/or javascript, whatever is best for your situation. when an error is detected, an intuitive error message should be shown next to the form input that is at fault to help the user correct their inputs. for screenreader users, you can use aria live regions to alert the user to...
...intuitive error message should be shown next to the form input that is at fault to help the user correct their inputs. for screenreader users, you can use aria live regions to alert the user to a change on the page. note: server-side validation should *always* be used alongside client-side validation. client-side validation is too easy to turn off or otherwise get around, so it can't be
relied on alone. see form data validation for comprehensive validation information, and wai-aria: dynamic content updates for information on live regions. 3.3.2 labels or instructions (a) clear instructions should be provided when data input is required. when a simple instruction or prompt is required, you can use <label> elements for single inputs like name or age, a com...
Understanding the Web Content Accessibility Guidelines - Accessibility
e: users must be able to control ui elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.). understandable: the content must be understandable to its users. robust: the content must be developed using well-adopted web standards that will work across different browsers, now and in the future. should i use wcag 2.0 or 2.1? wcag 2.1 is the most recent and
relevant accessibility standard. use wcag 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. target wcag 2.0 first when allocating resources. then step up to wcag 2.1. what is wcag 2.1? wcag 2.1 was published as an official recommendation on 05 june 2018. the european union (eu) adopted wcag 2.1 as the digital accessibility standard in september 2018. w...
...tandard. use wcag 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. target wcag 2.0 first when allocating resources. then step up to wcag 2.1. what is wcag 2.1? wcag 2.1 was published as an official recommendation on 05 june 2018. the european union (eu) adopted wcag 2.1 as the digital accessibility standard in september 2018. w3c published a press
release wcag 2.1 adoption in europe. wcag 2.1 includes: all of wcag 2.0 (verbatim, word-for-word) 17 new success criteria at the a / aa / aaa levels primarily addressing user needs in these areas: mobile accessibility low vision cognitive read more about wcag 2.1: deque: wcag 2.1: what is next for accessibility guidelines tpg: web content accessibility guidelines (...
...ers, and none of this constitutes legal advice. if you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer. what is accessibility? and particularity the accessibility guidelines and the law section provide more
related information. ...
src - CSS: Cascading Style Sheets
the src css descriptor of the @font-face rule specifies the resource containing font data. it is required for the @font-face rule to be valid. ...
...rioritized, 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. as with other urls in css, the url may be
relative, in which case it is resolved
relative to the location of the style sheet containing the @font-face rule. in the case of svg fonts, the url points to an element within a document containing svg font definitions. if the element reference is omitted, a reference to the first defined font is implied. similarly, font container formats that can contain more than one font load only one of the font...
... font container formats that can contain more than one font load only one of the fonts for a given @font-face rule. fragment identifiers are used to indicate which font to load. if a container format lacks a defined fragment identifier scheme, a simple 1-based indexing scheme (e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.) is used. ...
height - CSS: Cascading Style Sheets
imum height, to the value provided. if two viewport values are provided, the first value will set the minimum height and the second value will set the maximum height. syntax /* one value */ height: auto; height: 320px; height: 15em; /* two values */ height: 320px 200px; values auto the used value is calculated from the other css descriptors' values. ...
...t values are provided, the first value will set the minimum height and the second value will set the maximum height. syntax /* one value */ height: auto; height: 320px; height: 15em; /* two values */ height: 320px 200px; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or
relative length. ...
...; height: 15em; /* two values */ height: 320px 200px; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or
relative length. <percentage> a percentage value
relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. must be non-negative. formal definition
related at-rule@viewportinitial valueas each of the properties of the shorthand:min-height: automax-height: nonepercentagesas each of the properties of the shorthand:min-height: the percentage is calculated with respect to the height of the generated box's containing block. if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not ...
max-height - CSS: Cascading Style Sheets
ially be set as close as possible to the initial viewport height considering the maximum height constraint. syntax /* keyword value */ max-height: auto; /* <length> values */ max-height: 400px; max-height: 50em; max-height: 20cm; /* <percentage> value */ max-height: 75%; values auto the used value is calculated from the other css descriptors' values. ...
...ewport height considering the maximum height constraint. syntax /* keyword value */ max-height: auto; /* <length> values */ max-height: 400px; max-height: 50em; max-height: 20cm; /* <percentage> value */ max-height: 75%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or
relative length. ...
...height: 400px; max-height: 50em; max-height: 20cm; /* <percentage> value */ max-height: 75%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or
relative length. <percentage> a percentage value
relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths. must be non-negative. ...
max-width - CSS: Cascading Style Sheets
efault, the width is set as close as possible to the initial viewport considering the maximum width constraint. syntax /* keyword value */ max-width: auto; /* <length> values */ max-width: 600px; max-width: 80em; max-width: 15cm; /* <percentage> value */ max-width: 75%; values auto the used value is calculated from the other css descriptors' values. ...
...e initial viewport considering the maximum width constraint. syntax /* keyword value */ max-width: auto; /* <length> values */ max-width: 600px; max-width: 80em; max-width: 15cm; /* <percentage> value */ max-width: 75%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or
relative length. ...
...x-width: 600px; max-width: 80em; max-width: 15cm; /* <percentage> value */ max-width: 75%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or
relative length. <percentage> a percentage value
relative to the width of the initial viewport at zoom factor 1.0 for horizontal lengths. must be non-negative. ...
min-height - CSS: Cascading Style Sheets
ially be set as close as possible to the initial viewport height considering the minimum height constraint. syntax /* keyword value */ min-height: auto; /* <length> values */ min-height: 120px; min-height: 20em; min-height: 10cm; /* <percentage> value */ min-height: 25%; values auto the used value is calculated from the other css descriptors' values. ...
...ewport height considering the minimum height constraint. syntax /* keyword value */ min-height: auto; /* <length> values */ min-height: 120px; min-height: 20em; min-height: 10cm; /* <percentage> value */ min-height: 25%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or
relative length. ...
...height: 120px; min-height: 20em; min-height: 10cm; /* <percentage> value */ min-height: 25%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or
relative length. <percentage> a percentage value
relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths. must be non-negative. ...
min-width - CSS: Cascading Style Sheets
default, min-width is set as close as possible to the initial viewport considering the minimum width constraint. syntax /* keyword value */ min-width: auto; /* <length> values */ min-width: 320px; min-width: 40em; min-width: 5cm; /* <percentage> value */ min-width: 25%; values auto the used value is calculated from the other css descriptors' values. ...
...he initial viewport considering the minimum width constraint. syntax /* keyword value */ min-width: auto; /* <length> values */ min-width: 320px; min-width: 40em; min-width: 5cm; /* <percentage> value */ min-width: 25%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or
relative length. ...
...-width: 5cm; /* <percentage> value */ min-width: 25%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or
relative length. <percentage> a percentage value
relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. must be non-negative. ...
width - CSS: Cascading Style Sheets
alues are provided the first value will be set to the min-width and the second value will be set max-width. syntax /* an example with one viewport value: */ @viewport { width: 320px; } /* an example with two viewport values: */ @viewport { width: 320px, 120px; } values auto the used value is calculated from the other css descriptors' values. ...
...he min-width and the second value will be set max-width. syntax /* an example with one viewport value: */ @viewport { width: 320px; } /* an example with two viewport values: */ @viewport { width: 320px, 120px; } values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or
relative length. ...
...ort values: */ @viewport { width: 320px, 120px; } values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or
relative length. <percentage> a percentage value
relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. must be non-negative. ...
Using CSS animations - CSS: Cascading Style Sheets
ccurs at 100% (using the alias to). the left margin is set to 0% and the width of the element is set to 100%. this causes the header to finish its animation flush against the left edge of the content area. <p>the caterpillar and alice looked at each other for some time in silence: at last the caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> note:
reload page to see the animation, or click the codepen button to see the animation in the codepen environment. adding another keyframe let’s add another keyframe to the previous example’s animation. let’s say we want the header’s font size to increase as it moves from right to left for a while, then to decrease back to its original size. that’s as simple as adding this keyframe: 75% {...
... to { margin-left: 0%; width: 100%; } } <p>the caterpillar and alice looked at each other for some time in silence: at last the caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> this tells the browser that 75% of the way through the animation sequence, the header should have its left margin at 25% and the width should be 150%. note:
reload page to see the animation, or click the codepen button to see the animation in the codepen environment. making it repeat to make the animation repeat itself, simply use the animation-iteration-count property to indicate how many times to repeat the animation. in this case, let’s use infinite to have the animation repeat indefinitely: p { animation-duration: 3s; animation-name: slid...
... ...
CSS Containment - CSS: Cascading Style Sheets
iven contain: content in order to indicate to the browser that this is the case. the browser can then use this information to make decisions about how to render the content. for example, it might not render articles that are outside the viewable area. if we give each <article> the contain property with a value of content, when new elements are inserted the browser understands it does not need to
relayout or repaint any area outside of the containing element's subtree, although if the <article> is styled such that its size depends on its contents (e.g. with height: auto), then the browser may need to account for its size changing). we have told it by way of the contain property that each article is independent. the content value is shorthand for contain: layout paint. it tells the browser t...
...er that the internal layout of the element is totally separate from the rest of the page, and that everything about the element is painted inside its bounds. nothing can visibly overflow. this information is something that is usually known, and in fact quite obvious, to the web developer creating the page. however browsers cannot guess at your intent and cannot assume that an article will be enti
rely self-contained. therefore this property gives you a nice way to explain to the browser this fact, and allow it to make performance optimizations based on that knowledge. key concepts and terminology this specification defines only one property, the contain property. the values for this property indicate the type of containment that you want to apply to that element. layout containment articl...
...y supported in firefox). special values there are two special values of contain: content strict we encountered the first in the example above. using contain: content turns on layout and paint containment. the specification describes this value as being "reasonably safe to apply widely". it does not apply size containment, so you would not be at risk of a box ending up zero-sized due to a
reliance on the size of its children. to gain as much containment as possible use contain: strict, which behaves the same as contain: size layout paint, or perhaps the following to also add style containment in browsers that support it: contain: strict; contain: strict style; reference css properties contain external resources an introduction to css containment ...
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
xbox, which are pretty easy to identify due to the change in the way that a flex container is created. if you find something referring to display: box or display: flexbox this is outdated information. status in browsers browser support for flexbox is excellent, and the majority of browsers do not need a prefix at this point. safari was the last of the major browsers to remove prefixes, with the
release of safari 9 in 2015. the two browsers you should still keep in mind for cross-browser compatibility are: internet explorer 10, which implemented the display: flexbox version of the specification with the -ms- prefix. uc browser, which still supports the 2009 display: box version only with the -webkit- prefix. note also that internet explorer 11 supports the modern display: flex specific...
...internet explorer 10, which implemented the display: flexbox version of the specification with the -ms- prefix. uc browser, which still supports the 2009 display: box version only with the -webkit- prefix. note also that internet explorer 11 supports the modern display: flex specification however it has a number of bugs in the implementation. common issues the majority of issues with flexbox
relate to the changes in the specification, as it has been developed, and the fact that many of us were attempting to use an experimental specification in production. if you are trying to ensure backwards compatibility with old versions of browsers, and in particular ie10 and 11, the flexbugs site is a helpful resource. you will see that many of the listed bugs apply to old browser versions and are f...
...ack as far as internet explorer 8. if you use display: table-cell on an item in your html it takes on the styling of an html table cell. css creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the html table row, and a second one to represent the table element itself, you can’t see or style these anonymous boxes; they are there pu
rely to fix up the tree. if you then declare display: flex on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the table display features. “note: some values of display normally trigger the creation of anonymous boxes around the original box. if such a box is a flex item, it is blockified first, and so ...
Basic concepts of flexbox - CSS: Cascading Style Sheets
assumption about the writing mode of the document. in the past, css was heavily weighted towards horizontal and left-to-right writing modes. modern layout methods encompass the range of writing modes and so we no longer assume that a line of text will start at the top left of a document and run towards the right hand side, with new lines appearing one under the other. you can read more about the
relationship between flexbox and the writing modes specification in a later article; however, the following description should help explain why we do not talk about left and right and top and bottom when we describe the direction that our flex items flow in. if the flex-direction is row and i am working in english, then the start edge of the main axis will be on the left, the end edge on the right. ...
... ratios of items along the main axis. note that these values for flex-grow and flex-shrink are proportions. typically if we had all of our items set to flex: 1 1 200px and then wanted one item to grow at twice the rate, we would set that item to flex: 2 1 200px. however you could use flex: 10 1 200px and flex: 20 1 200px if you wanted. shorthand values for the flex properties you will very ra
rely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the flex shorthand. the flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis. the live example below allows you to test out the different values of the flex shorthand; remember that the first value is flex-grow. giving this a positive valu...
... ...
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
basic concepts of flexbox, then you will have already had an introduction to the properties. here we will explore them in depth in order that you can fully understand what the browser is doing when you use them. important concepts when working on the main axis there are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. these
relate to the natural size of flex items before any growing or shrinking takes place, and to the concept of free space. flex item sizing in order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. how is this worked out for items that don’t have a width or a height applied using an absolute length unit? there is a con...
...xbox to completely ignore the size of the item when doing space distribution then set flex-basis to 0. this essentially tells flexbox that all the space is up for grabs, and to share it out in proportion. we will see examples of this as we move on to look at flex-grow. the flex-grow property the flex-grow property specifies the flex grow factor, which determines how much the flex item will grow
relative to the rest of the flex items in the flex container when the positive free space is distributed. if all of your items have the same flex-grow factor then space will be distributed evenly between all of them. if this is the situation that you want then typically you would use 1 as the value, however you could give them all a flex-grow of 88, or 100, or 1.2 if you like — it is a ratio. if t...
...itive value here. it is the ratio between one item and the others that matters. you can use large numbers, or decimals — it is up to you. to test that out change the values assigned in the above example to .25, .25, and .50 — you should see the same result. the flex-shrink property the flex-shrink property specifies the flex shrink factor, which determines how much the flex item will shrink
relative to the rest of the flex items in the flex container when negative free space is distributed. this property deals with situations where the browser calculates the flex-basis values of the flex items, and finds that they are too large to fit into the flex container. as long as flex-shrink has a positive value the items will shrink in order that they do not overflow the container. so where fl...
CSS Fonts - CSS: Cascading Style Sheets
it lets you define the style of a font, such as its family, size and weight, line height, and the glyph variants to use when multiple are available for a single character. basic example the following example shows a simple use of basic font properties to style a paragraph of text. ...
...es many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. this article will give you all you need to know to get you started using variable fonts. ...
.... this article will give you all you need to know to get you started using variable fonts. specifications specification status comment css fonts module level 4 working draft adds font-variation-settings (and
related higher-level properties) and font-optical-sizing. ...
Stacking context example 3 - CSS: Cascading Style Sheets
e from several positioned divs. second-level and third-level divs appear when hovering or clicking on their parents. usually this kind of menu is script-generated either client-side or server-side, so style rules are assigned with a class selector instead of the id selector. if the three menu levels partially overlap, then managing stacking could become a problem. the first-level menu is only
relatively positioned, so no stacking context is created. the second-level menu is absolutely positioned inside the parent element. in order to put it above all first-level menus, a z-index is used. the problem is that for each second-level menu, a stacking context is created and each third-level menu belongs to the context of its parent. so a third-level menu will be stacked under the following se...
...d in an absolutely positioned container. this is useful to group and position all of them at once. ...
...><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } div.lev1 { width: 250px; height: 70px; position:
relative; border: 2px outset #669966; background-color: #ccffcc; padding-left: 5px; } #container1 { z-index: 1; position: absolute; top: 30px; left: 75px; } div.lev2 { opacity: 0.9; width: 200px; height: 60px; position:
relative; border: 2px outset #990000; background-color: #ffdddd; padding-left: 5px; } #container2 { z-index: 1; position: absolute; top: 20px; left: 110px; } div.lev3 { z-index: 10; width: 100px; position:
relative; border: 2px outset #000099; background-color: #ddddff; padding-left: 5px; } </style></head> <body> <br /> <div class="lev1"> <span class="bold...
The stacking context - CSS: Cascading Style Sheets
the stacking context is a three-dimensional conceptualization of html elements along an imaginary z-axis
relative to the user, who is assumed to be facing the viewport or the webpage. html elements occupy this space in priority order based on element attributes. the stacking context in the previous part of this article, using z-index, the rendering order of certain elements is influenced by their z-index value. this occurs because these elements have special properties which cause them to form a stacking context. a stacking context is formed, anywhere in the document, by any element in the following scenarios: root element of the document (<html>). element with a position value absolute or
relative and z-index value other than auto. element with a position value fixed or sticky (stic...
...n a rendering order of 4.1 div #6 - z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3 div #4 - z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6 div #1 - z-index is 5 example html <div id="div1"> <h1>division element #1</h1> <code>position:
relative;<br/> z-index: 5;</code> </div> <div id="div2"> <h1>division element #2</h1> <code>position:
relative;<br/> z-index: 2;</code> </div> <div id="div3"> <div id="div4"> <h1>division element #4</h1> <code>position:
relative;<br/> z-index: 6;</code> </div> <h1>division element #3</h1> <code>position: absolute;<br/> z-index: 4;</code> <div id="div5"> <h1>div...
...div id="div2"> <h1>division element #2</h1> <code>position:
relative;<br/> z-index: 2;</code> </div> <div id="div3"> <div id="div4"> <h1>division element #4</h1> <code>position:
relative;<br/> z-index: 6;</code> </div> <h1>division element #3</h1> <code>position: absolute;<br/> z-index: 4;</code> <div id="div5"> <h1>division element #5</h1> <code>position:
relative;<br/> z-index: 1;</code> </div> <div id="div6"> <h1>division element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> css * { margin: 0; } html { padding: 20px; font: 12px/20px arial, sans-serif; } div { opacity: 0.7; position:
relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px dashed #696; paddin...
CSS values and units - CSS: Cascading Style Sheets
lement’s parent, provided it is inherited. the unset keyword acts as either inherit or initial, depending on whether the property is inherited or not. a fourth value of revert was added in the cascade level 4 specification, but it does not currently have good browser support. urls a <url> type uses functional notation, which accepts a <string> that is a url. this may be an absolute url or a
relative url. for example, if you wanted to include a background image, you might use either of the following. .box { background-image: url("images/my-background.png"); } .box { background-image: url("https://www.exammple.com/images/my-background.png"); } the parameter for url() can be either quoted or unquoted. if unquoted, it is parsed as a <url-token>, which has extra requirements includin...
...ween a the number and the unit identifier: i.e. 1 cm is not valid. css uses dimensions to specify: <length> (distance units) <angle> <time> <frequency> <resolution> these are all covered in subsections below. distance units where a distance unit, also known as a length, is allowed as a value for a property, this is described as the <length> type. there are two types of lengths in css:
relative and absolute.
relative length units specify a length in
relation to something else. for example, em is
relative to the font size on the element and vh is
relative to the viewport height.
relative length units unit
relative to em font size of the element. ex x-height of the element's font. cap cap height (the nominal height of capital...
...ation, such as a screen, by indicating how many of these dots fit in a css inch, centimeter, or pixel. it accepts the following values: unit description dpi dots per inch. dpcm dots per centimetre. dppx, x dots per px unit. percentages a <percentage> is a type that represents a fraction of some other value. percentage values are always
relative to another quantity, for example a length. each property that allows percentages also defines the quantity to which the percentage refers. this quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else. as an example, if you specify the width of a box as a percentage, it refers to t...
Layout and the containing block - CSS: Cascading Style Sheets
osition of an element are often impacted by its containing block. percentage values that are applied to the width, height, padding, margin, and offset properties of an absolutely positioned element (i.e., which has its position set to absolute or fixed) are computed from the element's containing block. ...
...applied to the width, height, padding, margin, and offset properties of an absolutely positioned element (i.e., which has its position set to absolute or fixed) are computed from the element's containing block. identifying the containing block the process for identifying the containing block depends enti
rely 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). if the position property is absolute, the containing block is formed by...
...her 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). if the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute,
relative, or sticky). if the position property is fixed, the containing block is established by the viewport (in the case of continuous media) or the page area (in the case of paged media). if the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following: a transform or perspective valu...
Shorthand properties - CSS: Cascading Style Sheets
and often more readable) style sheets, saving time and energy. the css specification defines shorthand properties to group the definition of common properties acting on the same theme. for instance, the css background property is a shorthand property that's able to define the values of background-color, background-image, background-repeat, and background-position. similarly, the most common font-
related properties can be defined using the shorthand font, and the different margins around a box can be defined using the margin shorthand. tricky edge cases even if they are very convenient to use, there are a few edge cases to keep in mind when using them: a value which is not specified is set to its initial value. that sounds anecdotal, but it really means that it overrides previously set v...
... keyword inherit. shorthand properties try not to force a specific order for the values of the properties they replace. this works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. ...
...p (the initial letter of top-right-bottom-left matches the order of the consonant of the word trouble: trbl) (you can also remember it as the order that the hands would rotate on a clock: 1em starts in the 12 o'clock position, then 2em in the 3 o'clock position, then 3em in the 6 o'clock position, and 4em in the 9 o'clock position). ...
Viewport concepts - CSS: Cascading Style Sheets
distinct from the layout viewport. for included documents, the visual viewport and layout viewport are the same. css the layout viewport and visual viewport described above are not the only viewports you will encounter. any sub-viewport that is fully or partially displayed within the layout viewport is considered a visual viewport. we generally think of width and height media queries as being
relative to the width and height of the browser window. they are actually
relative to the viewport, which is the window in the main document but is the intrinsic size of the element's parent in a nested browsing context like objects, iframes and svg. in css, we also have length units based on the viewport size. a vh unit is 1% of the layout viewport's height. similarly, the vw unit is 1% of the layou...
...ame document, 1vh will be 1% of the height of the iframe, and 1vw will be 1% of the width of the document. iframe { width: 50vw; } if the iframe is set to 50vw, it will be 50% of the width of the 1200px parent document in our example above, or 600px, with 1vw being 6px. when zoomed in, the iframe shrinks to 400px and 1vw becomes 4px. a width-based media query within the iframe document is
relative to the iframe's viewport. @media screen and (min-width: 500px) { p { color: red; } } if the above css is included in the iframe, the paragraphs will become red when the user has zoomed in, but this style does not apply in the non-zoomed-in state. svg in an svg document, the viewport is the visible area of the svg image. you can set any height and width on an svg, but the...
...ible is called the viewport. the size of the viewport can be defined using the width and height attributes of the <svg> element. <svg height="300" width="400"></svg> in this examples, the viewport has an aspect ratio of 3::4, and is, but default, 400 by 300 units, with a unit generally being a css pixel. svg also has an internal coordinate system defined via the viewbox attribute, which is not
related to this viewport discussion. if you include an svg file in your html, the viewport of the svg is the initial containing block, or the width and height of the svg container. using the @media query in your svg's css is
relative to that container, not the browser. @media screen and (min-width: 400px) and (max-width: 500px) { /* css goes here */ } generally, when you write the above media qu...
attr() - CSS: Cascading Style Sheets
pes being turned into different characters. an empty string. color <color> the attribute value is parsed as a hash (3- or 6-value hash) or a keyword. it must be a valid css <string> value. leading and trailing spaces are stripped. currentcolor url <url> the attribute value is parsed as a string that is used inside a css url() function.
relative url are resolved
relatively to the original document, not
relatively to the style sheet. leading and trailing spaces are stripped. the url about:invalid that points to a non-existent document with a generic error condition. integer <integer> the attribute value is parsed as a css <integer>. if it is not valid, that is not an integer or out of the range accepted...
...trailing spaces are stripped. 0, or, if 0 is not a valid value for the property, the property's minimum value. length <length> the attribute value is parsed as a css <length> dimension, that is including the unit (e.g. 12.5em). if it is not valid, that is not a length or out of the range accepted by the css property, the default value is used. if the given unit is a
relative length, attr() computes it to an absolute length. leading and trailing spaces are stripped. 0, or, if 0 is not a valid value for the property, the property's minimum value. em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc <length> the attribute value is parsed as a css <number>, that is without the unit (e.g. 12.5), and interpreted as a <length> with ...
...erty's minimum value. em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc <length> the attribute value is parsed as a css <number>, that is without the unit (e.g. 12.5), and interpreted as a <length> with the specified unit. if it is not valid, that is not a number or out of the range accepted by the css property, the default value is used. if the given unit is a
relative length, attr() computes it to an absolute length. leading and trailing spaces are stripped. 0, or, if 0 is not a valid value for the property, the property's minimum value. angle <angle> the attribute value is parsed as a css <angle> dimension, that is including the unit (e.g. 30.5deg). if it is not valid, that is not an angle or out of the range accepted by th...
background-position-x - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
...y declaration of the background or background-position shorthand properties applied to the element after it. syntax /* keyword values */ background-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> values */ background-position-x: 25%; /* <length> values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* side-
relative values */ background-position-x: right 3px; background-position-x: left 25%; /* multiple values */ background-position-x: 0px, center; /* global values */ background-position-x: inherit; background-position-x: initial; background-position-x: unset; the background-position-x property is specified as one or more values, separated by commas. values left aligns the left edge of the back...
...ckground position layer. right aligns the right edge of the background image with the right edge of the background position layer. <length> the offset of the given background image's left vertical edge from the background position layer's left vertical edge. (some browsers allow assigning the right edge for offset). <percentage> the offset of the given background image's horizontal position
relative to the container. a value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the right edge of the background image is aligned with the right edge of the container, thus a value of 50% horizontally centers the background image. formal definition initial valueleftapplies toall elementsinheritednopercentagesr...
background-position-y - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
...y declaration of the background or background-position shorthand properties applied to the element after it. syntax /* keyword values */ background-position-y: top; background-position-y: center; background-position-y: bottom; /* <percentage> values */ background-position-y: 25%; /* <length> values */ background-position-y: 0px; background-position-y: 1cm; background-position-y: 8em; /* side-
relative values */ background-position-y: bottom 3px; background-position-y: bottom 10%; /* multiple values */ background-position-y: 0px, center; /* global values */ background-position-y: inherit; background-position-y: initial; background-position-y: unset; the background-position-y property is specified as one or more values, separated by commas. values top aligns the top edge of the bac...
...ion layer. bottom aligns the bottom edge of the background image with the bottom edge of the background position layer. <length> the offset of the given background image's horizontal edge from the corresponding background position layer's top horizontal edge. (some browsers allow assigning the bottom edge for offset). <percentage> the offset of the given background image's vertical position
relative to the container. a value of 0% means that the top edge of the background image is aligned with the top edge of the container, and a value of 100% means that the bottom edge of the background image is aligned with the bottom edge of the container, thus a value of 50% vertically centers the background image. formal definition initial valuetopapplies toall elementsinheritednopercentagesrefe...
background-size - CSS: Cascading Style Sheets
cified dimension. the unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. if there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area. note: background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. be careful about
relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable. working with gradients if you use a <gradient> as the background and specify a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%). rendering of <gradient>s in such ca...
...nd an auto dimension with a <gradient>, because it's impossible to replicate rendering in versions of firefox prior to 8, and in browsers not implementing firefox 8's rendering, without knowing the exact size of the element whose background is being specified. formal definition initial valueauto autoapplies toall elements. ...
...dering in versions of firefox prior to 8, and in browsers not implementing firefox 8's rendering, without knowing the exact size of the element whose background is being specified. formal definition initial valueauto autoapplies toall elements. it also applies to ::first-letter and ::first-line.inheritednopercentages
relative 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. specifications specification status comment ...
caption-side - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... css .top caption { caption-side: top; } .bottom caption { caption-side: bottom; } table { border: 1px solid red; } td { border: 1px solid blue; } result specifications specification status comment css logical properties and values level 1the definition of 'caption-side' in that specification. editor's draft defines the top and bottom values as
relative to the writing-mode value. css level 2 (revision 1)the definition of 'caption-side' in that specification. recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desk...
... nochrome android no support nofirefox android full support 4opera android no support nosafari ios no support nosamsung internet android no support notop and bottom are
relative to the writing-mode valuechrome no support noedge no support nofirefox full support 42ie no support noopera no support nosafari no support ...
clear - CSS: Cascading Style Sheets
y applies to floating and non-floating elements. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all
relevant floats. the non-floated block's top margin collapses. vertical margins between two floated elements on the other hand will not collapse. when applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all
relevant floats. this affects the position of later floats, since later floats cannot be positioned higher than earlier ones. the floats that ar...
...ant floats. the non-floated block's top margin collapses. vertical margins between two floated elements on the other hand will not collapse. when applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all
relevant floats. this affects the position of later floats, since later floats cannot be positioned higher than earlier ones. the floats that are
relevant to be cleared are the earlier floats within the same block formatting context. if an element contains only floated elements, its height collapses to nothing. if you want it to always be able to resize, so that it contains floating elements inside it, you need to self-clear its children. this is called clearfix, and one way to do it is to add clear to a replaced ::after pseudo-element on it...
... 1chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0flow-
relative values inline-start and inline-endchrome no support noedge no support nofirefox full support 55ie no support noopera no support nosafari no support ...
flex-basis - CSS: Cascading Style Sheets
sis: unset; the flex-basis property is specified as either the keyword content or a <'width'>. values <'width'> an absolute <length>, a <percentage> of the parent flex container's main size property, or the keyword auto. negative values are invalid. defaults to auto. content indicates automatic sizing, based on the flex item’s content. note: this value was not present in the initial
release of flexible box layout, and thus some older implementations will not support it. the equivalent effect can be had by using auto together with a main size (width or height) of auto. history: originally, flex-basis:auto meant "look at my width or height property". then, flex-basis:auto was changed to mean automatic sizing, and "main-size" was introduced as the "look at my width or he...
...in bug 1093316, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing. (bug 1105111 covers adding that keyword). ...
... </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 { flex-basis: auto; } .flex1:after { content: 'auto'; } .flex2 { flex-basis: max-content; } .flex2:after { content: 'max-content'; } .flex3 { flex-basis: min-content; } .flex3:after { content: 'min-content'; } .flex4 { ...
font-variant - CSS: Cascading Style Sheets
f font-variant are: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian. none sets the value of the font-variant-ligatures to none and the values of the other longhand property as normal, their initial value. ...
...keywords
related to the font-variant-ligatures longhand property. the possible values are: common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, and no-contextual. stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation() specifies the keywords and functions
related to the font-variant-alternates longhand property. small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps specifies the keywords and functions
related to the font-variant-caps longhand property. ...
...ation() specifies the keywords and functions
related to the font-variant-alternates longhand property. small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps specifies the keywords and functions
related to the font-variant-caps longhand property. <numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero specifies the keywords
related to the font-variant-numeric longhand property. the possible values are: lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, and slashed-zero. <east-asian-variant-values>, <east-asian-width-values>, ruby specifies the keywords
related to the font-variant-east-asian longhand property. the possible values are: jis78, jis83, jis90, jis04...
font-weight - CSS: Cascading Style Sheets
of the font. the weights available depend on the font-family that is currently set. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...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. values normal normal font weight. same as 400. bold bold font weight. same as 700. lighter one
relative font weight lighter than the parent element. note that only four font weights are considered for
relative weight calculation; see the meaning of
relative weights section below. bolder one
relative font weight heavier than the parent element. note that only four font weights are considered for
relative weight calculation; see the meaning of
relative weights section below. <number> a <numb...
...than 400 is given, look for available weights less than the target, in descending order. if no match is found, look for available weights greater than the target, in ascending order. if a weight greater than 500 is given, look for available weights greater than the target, in ascending order. if no match is found, look for available weights less than the target, in descending order. meaning of
relative weights when lighter or bolder is specified, the below chart shows how the absolute font weight of the element is determined. note that when using
relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900). if a font-family has more weights available, they are ignored for the purposes of
relative weight calculation. inherited...
margin-block-end - CSS: Cascading Style Sheets
e element's writing mode, directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... values the margin-block-end property takes the same values as the margin-left property. ...
margin-block-start - CSS: Cascading Style Sheets
ement's writing mode, directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... values the margin-block-start property takes the same values as the margin-left property. ...
repeat() - CSS: Cascading Style Sheets
0px [col-end]) /* <fixed-repeat> values */ repeat(4, 250px) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) syntax values <length> a positive integer length. <percentage> a non-negative percentage
relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. if the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto. the user-agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the...
...he grid items occupying the grid track. min-content represents the largest min-content contribution of the grid items occupying the grid track. auto as a maximum, identical to max-content. as a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. auto-fill if the grid container has a definite or maximal size in the
relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container. treating each track as its maximal track sizing function (each independant value used to define grid-template-rows or grid-template-columns), if that is definite. otherwise, as its minimum track sizing function, and taking grid-gap into account. if any nu...
...rid container. treating each track as its maximal track sizing function (each independant value used to define grid-template-rows or grid-template-columns), if that is definite. otherwise, as its minimum track sizing function, and taking grid-gap into account. if any number of repetitions would overflow, then the repetition is 1. otherwise, if the grid container has a definite minimal size in the
relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. otherwise, the specified track list repeats only once. auto-fit behaves the same as auto-fill, except that after placing the grid items any empty repeated tracks are collapsed. an empty track is one with no in-flow grid items placed into or spanning across it. (this can resul...
scroll-margin-inline - CSS: Cascading Style Sheets
he blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts
relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: ...
...the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most
relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline: 1rem; } .scroller > div:nth-child(3) { scroll-margin-inline: 2rem; } this...
...} .scroller > div:nth-child(3) { scroll-margin-inline: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the inline end edge of the second <div>, and 2rems outside the inline end edge of the third <div>. note: here we are setting scroll-margin on the start and end of the inline axis (x in our case), but only the end edge is really
relevant. it would work just as well here to only set a scroll margin on that one edge, for example with scroll-margin-inline: 0 1rem, or scroll-margin-inline-end: 1rem. result try it for yourself: specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-inline' in that specification. candidate recommendation i...
scroll-margin - CSS: Cascading Style Sheets
he blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts
relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: ...
...e scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most
relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin-values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin: 1rem; } .scroller > div:nth-child(3) { scroll-margin: 2rem; } this means that...
...croller > div:nth-child(2) { scroll-margin: 1rem; } .scroller > div:nth-child(3) { scroll-margin: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the left edge of the second <div>, and 2rems outside the left edge of the third <div>. note: here we are setting scroll-margin on all sides at once, but only the start edge is really
relevant. it would work just as well here to only set a scroll margin on that one edge, for example with scroll-margin-inline-start: 1rem, or scroll-margin: 0 0 0 1rem. result try it for yourself: specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin' in that specification. candidate recommendation initial d...
scroll-snap-points-x - CSS: Cascading Style Sheets
bal values */ scroll-snap-points-x: inherit; scroll-snap-points-x: initial; scroll-snap-points-x: unset; syntax values none the scroll container does not define any snap points. elements within the scroll container may still define snap points on behalf of the scroll container. ...
...s within the scroll container may still define snap points on behalf of the scroll container. repeat(<length-percentage>) defines an interval at which snap points are defined, starting from the container's
relevant start edge. only positive lengths are allowed. percentages refer to the width of the container. ...
...(<length-percentage>) defines an interval at which snap points are defined, starting from the container's
relevant start edge. only positive lengths are allowed. percentages refer to the width of the container. ...
scroll-snap-points-y - CSS: Cascading Style Sheets
al values */ scroll-snap-points-y: inherit; scroll-snap-points-y: initial; scroll-snap-points-y: unset; syntax values none the scroll container does not define any snap points. elements within the scroll container may still define snap points on behalf of the scroll container. ...
...s within the scroll container may still define snap points on behalf of the scroll container. repeat(<length-percentage>) defines an interval at which snap points are defined, starting from the container's
relevant start edge. only positive lengths are allowed. percentages refer to the width of the container. ...
...(<length-percentage>) defines an interval at which snap points are defined, starting from the container's
relevant start edge. only positive lengths are allowed. percentages refer to the width of the container. ...
<shape> - CSS: Cascading Style Sheets
work in conjunction with clip, which has been deprecated in favor of clip-path. when possible, use clip-path and the <basic-shape> data type instead. syntax the <shape> data type is specified using the rect() function, which produces a region in the form of a rectangle. ...
...e> data type instead. syntax the <shape> data type is specified using the rect() function, which produces a region in the form of a rectangle. rect() rect(top, right, bottom, left) values top is a <length> representing the offset for the top of the rectangle
relative to the top border of the element's box. right is a <length> representing the offset for the right of the rectangle
relative to the left border of the element's box. bottom is a <length> representing the offset for the bottom of the rectangle
relative to the top border of the element's box. left is a <length> representing the offset for the left of the rectangle
relative to the left border of the element's box. interpolation when animated, values of the <shape> data type are interpolated over their to...
... ...
url() - CSS: Cascading Style Sheets
the url() function can be passed as a parameter of another css functions, like the attr() function. depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. the url() functional notation is the value for the <url> data type. ...
...econd.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ... } @import url("https://www.example.com/style.css"); @namespace url(http://www.w3.org/1999/xhtml);
relative urls, if used, are
relative to the url of the stylesheet (not to the url of the web page). 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 descri...
...ge, src as part of a @font-face block, and @counter-style/symbol in css level 1, the url() functional notation described only true urls. in css level 2, the definition of url() was extended to describe any uri, including urns. css values and units level 3 returned to the narrower, initial definition. now, url() denotes only true <url>s. syntax values <string> <url> a url, which is a
relative or absolute address, or pointer, to the web resource to be included, or a data uri, optionally in single or double quotes. quotes are required if the url includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes ...
Media buffering, seeking, and time ranges - Developer guides
which will give a valid indication of the end of seekable media. if range requests are enabled this value usually becomes the duration of the media almost instantly. it is better perhaps to give an indication of how much media has actually downloaded — this what the browser's native players seem to display. so let's build this. ...
...play. so let's build this. ...
...ed-amount"></span> </div> <div class="progress"> <span id="progress-amount"></span> </div> we'll use the following css to style the buffering display: .buffered { height: 20px; position:
relative; background: #555; width: 300px; } #buffered-amount { display: block; 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 <...
HTML attribute: pattern - HTML: Hypertext Markup Language
ditionally, include a title attribute which gives a description of the pattern. user agents may use the title contents during constraint validation to tell the user that the pattern is not matched. some browsers show a tooltip with title contents, improving usability for sighted users. additionally, assistive technology may read the title aloud when the control gains focus, but this should not be
relied upon for accessibility. constraint validation if the input’s value is not the empty string and the value does not match the entire regular expression, there is a from a patternmismatch . the pattern's regular expression, when matched against the value, must have its start anchored to the start of the string and its end anchored to the end of the string, which is slightly different from ja...
... <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}" title="4 to 8 lowercase letters"> <span class="validity"></span> <p>usernames must be lowercase and 4-8 characters in length.</p> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position:
relative; } p { font-size: 80%; color: #999; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } this renders like so: accessibility concerns when a control has a pattern attribute, the title attribute, if used, must desc...
...t-size: 80%; color: #999; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } this renders like so: accessibility concerns when a control has a pattern attribute, the title attribute, if used, must describe the pattern.
relying on the title attribute for the visual display of text content is generally discouraged as many user agents do not expose the attribute in an accessible manner. some browsers show a tooltip when an element with a title is hovered, but that leaves out keyboard-only and touch-only users. this is one of the several reasons you must include information informing users how to fill out the the contr...
<basefont> - HTML: Hypertext Markup Language
you should not use this element; instead, you should use css properties such as font, font-family, font-size, and color to change the font configuration for an element and its contents. attributes like all other html elements, this element supports the global attributes. ...
...#rrggbb format. face this attribute contains a list of one or more font names. the document text in the default style is rendered in the first font face that the client's browser supports. if no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system. size this attribute specifies the font size as either a numeric or
relative value. numeric values range from 1 to 7 with 1 being the smallest and 3 the default. usage notes do not use this element! though once (imprecisely) normalized in html 3.2, it wasn't supported in all major browsers. further, browsers, and even successive versions of browsers, never implemented it in the same way: practically, using it has always brought indeterminate results. the <basefon...
... 3 the default. usage notes do not use this element! though once (imprecisely) normalized in html 3.2, it wasn't supported in all major browsers. further, browsers, and even successive versions of browsers, never implemented it in the same way: practically, using it has always brought indeterminate results. the <basefont> element was deprecated in the standard at the same time as all elements
related to styling only. starting with html 4, html does not convey styling information anymore (outside the <style> element or the style attribute of each element). in html5, this element has been removed completely. for any new web development, styling should be written using css only. the former behavior of the <font> element can be achieved, and even better controlled using the css fonts propert...
<input type="number"> - HTML: Hypertext Markup Language
play generated content very effectively on some types of form inputs. (read, for example, the section on <input type="date"> validation.) important: html form validation is not a substitute for server-side scripts that ensure that the entered data is in the proper format! it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely. it's also possible for someone to bypass your html and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth). pattern validation <input type="number"> elements do not support use of the pattern attribute for ma...
...e minimum and maximum number of valid digits using the min and max attributes (as explained above). examples we've already covered the fact that by default, the increment is 1, and you can use the step attribute to allow decimal inputs. let's take a closer look. in the following example is a form for entering the user's height. it defaults to accepting a height in meters, but you can click the
relevant button to change the form to accept feet and inches instead. the input for the height in meters accepts decimals to two places. the html looks like this: <form> <div class="metersinputgroup"> <label for="meters">enter your height — meters:</label> <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required> <span class...
... the step value to 0.01, so that values like 1.78 are not seen as invalid. we've also provided a placeholder for that input. we've hidden the feet and inches inputs initially using style="display: none;", so that meters is the default entry type. now, onto the css. this looks very similar to the validation styling we saw before; nothing remarkable here. ...
<input type="radio"> - HTML: Hypertext Markup Language
only one radio button in a given group can be selected at the same time. radio buttons are typically rendered as small circles, which are filled or highlighted when selected. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...s submitted, only radio buttons which are currently checked are submitted to the server, and the reported value is the value of the value attribute. if the value is not otherwise specified, it is the string on by default. this is demonstrated in the section value above. using radio inputs we already covered the fundamentals of radio buttons above. let's now look at the other common radio-button-
related features and techniques you may need to know about. selecting a radio button by default to make a radio button selected by default, you simply include checked attribute, as shown in this revised version of the previous example: <form> <p>please select your preferred contact method:</p> <div> <input type="radio" id="contactchoice1" name="contact" value="email" checked> <lab...
... font-family: sans-serif; } div:first-of-type { display: flex; align-items: flex-start; margin-bottom: 5px; } label { margin-right: 15px; line-height: 32px; } input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 16px; height: 16px; border: 2px solid #999; transition: 0.2s all linear; margin-right: 5px; position:
relative; top: 4px; } input:checked { border: 6px solid black; } button, legend { color: white; background-color: black; padding: 5px 10px; border-radius: 0; border: 0; font-size: 14px; } button:hover, button:focus { color: #999; } button:active { background-color: white; color: black; outline: 1px solid black; } most notable here is the use of the -moz-appearance propert...
<input type="week"> - HTML: Hypertext Markup Language
css used in the above example. here we make use of the :valid and :invalid css properties to style the input based on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. div { margin-bottom: 10px; position:
relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the result here is that only weeks between w01 and w52 in 2017 will be seen as valid and be selectable in supporting browsers. ...
...lue, the browser displays an error. try playing with the example now: here's'a screenshot for those of you who aren't using a supporting browser: important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely. it's also possible for someone to simply bypass your html enti
rely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth). handling browser support as mentioned above, the major problem with using week inputs ri...
... </select> </span> <span> <label for="year">year:</label> <select id="year" name="year"> <option value="2017" selected>2017</option> <option value="2018">2018</option> </select> </span> </div> </div> </form> the week values are dynamically generated by the javascript code below. div { margin-bottom: 10px; position:
relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the other part of the code that may be of interest is the feature detection code. to detect whether the browser supports <inpu...
<mark>: The Mark Text element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. ...
...y indicates text which is of special interest but is not marked in the original source material, or material which needs special scrutiny even though the original author didn't think it was of particular importance. think of this like using a highlighter pen in a book to mark passages that you find of interest. ...
... examples marking text of interest in this first example, a <mark> element is used to mark some text within a quote which is of particular interest to the user. <blockquote> it is a period of civil war. ...
itemscope - HTML: Hypertext Markup Language
in each of the following examples, the vocabulary is from schema.org. every html element may have an itemscope attribute specified. ...
...rg. every html element may have an itemscope attribute specified. an itemscope element that does not have an associated itemtype must have an associated itemref. note: find more about itemtype attributes at http://schema.org/thing simple example html the following example specifies the itemscope attribute. the example specifies the itemtype as "http://schema.org/movie", and specifies three
related itemprop attributes. <div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 1954)</span> <span itemprop="genre">science fiction</span> <a href="https://youtu.be/0ay1xikx7by" itemprop="trailer">trailer</a> </div> structured data the following table shows the structured data f...
...xikx7by trailer itemscope id attributes when you specify the itemscope attribute for an element, a new item is created. the item consists of a group of name-value pairs. for elements with an itemscope attribute and an itemtype attribute, you may also specify an id attribute. you can use the id attribute to set a global identifier for the new item. a global identifier allows the item to
relate to other items found on pages across the web. example there are four itemscope attributes in the following example. each itemscope attribute sets the scope of its corresponding itemtype attribute. the itemtypes, recipe, aggregaterating, and nutritioninformation in the following example are part of the schema.org structured data for a recipe, as specified by the first itemtype, http://schema.
Global attributes - HTML: Hypertext Markup Language
ping will create a copy of the element that was dragged move, which indicates that the element that was dragged will be moved to this new location. link, will create a link to the dragged data. exportparts used to transitively export shadow parts from a nested shadow tree into a containing light tree. hidden a boolean attribute indicates that the element is not yet, or is no longer,
relevant. for example, it can be used to hide elements of the page that can't be used until the login process has been completed. the browser won't render such elements. this attribute must not be used to hide content that could legitimately be shown. id defines a unique identifier (id) which must be unique in the whole document. its purpose is to identify the element when linking (using a fragment...
...the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. it can take several values: a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation; 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its
relative order is defined by the platform convention; a positive value means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the tabindex. if several elements share the same tabindex, their
relative order follows their
relative positions in the document. title contains a text represen...
...such information can typically, but not necessarily, be presented to the user as a tooltip. ...
Choosing between www and non-www URLs - HTTP
erver. so, do i have to choose one or the other for my web site? yes, you need to choose one and stick with it. the choice of which one to have as your canonical location is yours, but if you choose one, stick with it. it will make your website appear more consistent to your users and to search engines. this includes always linking to the chosen domain (which shouldn't be hard if you're using
relative urls in your website) and always sharing links (by email/social networks, etc.) to the same domain. no, you can have two. what is important is that you are coherent and consistent with which one is the official domain. this official domain is called the canonical name. all your absolute links should use it. but even so, you can still have the other domain working: http allows two techniques...
...eives a request for http://www.example.org/whaddup (when the canonical domain is example.org) the server answers with a code 301 with the header location: http://example.org/whaddup. the client issues a request to the canonical domain: http://example.org/whatddup the html5 boilerplate project has an example on how to configure an apache server to redirect one domain to the other. using <link
rel="canonical"> it is possible to add a special html <link> element to a page to indicate what the canonical address of a page is. this has no impact on the human reader of the page, but tells search engine crawlers where the page actually lives. this way, search engines don't index the same page several times, potentially leading to it being considered as duplicate content or spam, and even removi...
...d even removing or lowering your page from the search engine result pages. when adding such a tag, you serve the same content for both domains, telling search engines which url is canonical. in the previous example, http://www.example.org/whaddup would serve the same content as http://example.org/whaddup, but with an additional <link> element in the head: <link href="http://example.org/whaddup"
rel="canonical"> unlike the previous case, browser history will consider non-www and www urls as independent entries. make your page work for both with these techniques, you can configure your server to respond correctly for both, the www-prefixed and the non-www-prefixed domains. it is good advice to do this since you can't predict which url users will type in their browser's url bar. it is a mat...
HTTP conditional requests - HTTP
cific headers. these headers define a precondition, and the result of the request will be different if the precondition is matched or not. the different behaviors are defined by the method of the request used, and by the set of headers used for a precondition: for safe methods, like get, which usually tries to fetch a document, the conditional request can be used to send back the document, if
relevant only. therefore, this spares bandwidth. for unsafe methods, like put, which usually uploads a document, the conditional request can be used to upload the document, only if the original it is based on is the same as that stored on the server. validators all conditional headers try to check if the resource stored on the server matches a specific version. to achieve this, the conditional re...
...r if the precondition fails; the client then restarts the download from the beginning: even if this method works, it adds an extra response/request exchange when the document has been changed. this impairs performance, and http has a specific header to avoid this scenario: if-range: this solution is more efficient, but slightly less flexible, as only one etag can be used in the condition. ra
rely is such additional flexibility needed. avoiding the lost update problem with optimistic locking a common operation in web applications is to update a remote document. this is very common in any file system or source control applications, but any application that allows to store remote resources needs such a mechanism. common web sites, like wikis and other cms, have such a need. with the put ...
...omplex applications. for caching or resuming downloads, the only work required for webmasters is to configure the server correctly; setting correct etags in some environments can be tricky. once achieved, the browser will serve the expected conditional requests. for locking mechanisms, it is the opposite: web developers need to issue a request with the proper headers, while webmasters can mostly
rely on the application to carry out the checks for them. in both cases it's clear, conditional requests are a fundamental feature behind the web. ...
Using HTTP cookies - HTTP
ends, and some browsers use session restoring when restarting, which can cause session cookies to last indefinitely long. permanent cookies are deleted at a date specified by the expires attribute, or after a period of time specified by the max-age attribute. for example: set-cookie: id=a3fwa; expires=wed, 31 oct 2021 07:28:00 gmt; note: when an expires date is set, the time and date set is
relative to the client the cookie is being set on, not the server. if your site authenticates users, it should regenerate and resend session cookies, even ones that already exist, whenever the user authenticates. this technique helps prevent session fixation attacks, where a third party can reuse a user's session. restrict access to cookies there are a couple of ways to ensure that cookies are se...
...o the client the cookie is being set on, not the server. if your site authenticates users, it should regenerate and resend session cookies, even ones that already exist, whenever the user authenticates. this technique helps prevent session fixation attacks, where a third party can reuse a user's session. restrict access to cookies there are a couple of ways to ensure that cookies are sent secu
rely and are not accessed by unintended parties or scripts: the secure attribute and the httponly attribute. a cookie with the secure attribute is sent to the server only with an encrypted request over the https protocol, never with unsecured http, and therefore can't easily be accessed by a man-in-the-middle attacker. insecure sites (with http: in the url) can't set cookies with the secure attribut...
...habits based on cookies sent to it by the same browser when accessing multiple sites. firefox, by default, blocks third-party cookies that are known to contain trackers. third-party cookies (or just tracking cookies) may also be blocked by other browser settings or extensions. cookie blocking can cause some third-party components (such as social media widgets) to not function as intended. ...
Accept-Language - HTTP
preferred. (by languages, we mean natural languages, such as english, and not programming languages.) using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the content-language response header. browsers set adequate values for this header according to their user interface language and even if a user can change it, this happens ra
rely (and is frowned upon as it leads to fingerprinting). this header is a hint to be used when the server has no way of determining the language via another way, like a specific url, that is controlled by an explicit user decision. it is recommended that the server never overrides an explicit decision. the content of the accept-language is often out of the control of the user (like when traveling a...
...t of the accept-language is often out of the control of the user (like when traveling and using an internet cafe in a different country); the user may also want to visit a page in another language than the locale of their user interface. if the server cannot serve any matching language, it can theoretically send back a 406 (not acceptable) error code. but, for a better user experience, this is ra
rely done and more common way is to ignore the accept-language header in this case. 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 *,-.;=. syntax accept-language: <language> accept-language: * // multiple types, weighted with the qualit...
...ted by '-'. the most common extra information is the country or region variant (like 'en-us' or 'fr-ca') or the type of alphabet to use (like 'sr-latn'). other variants like the type of orthography ('de-de-1996') are usually not used in the context of this header. * any language; '*' is used as a wildcard. ;q= (q-factor weighting) any value placed in an order of preference expressed using a
relative quality value called weight. examples accept-language: de accept-language: de-ch accept-language: en-us,en;q=0.5 specifications specification title rfc 7231, section 5.3.5: accept-language hypertext transfer protocol (http/1.1): semantics and context bcp 47 tags for the identification of language ...
X-DNS-Prefetch-Control - HTTP
fetch-control header server-side, or from individual documents, using the http-equiv attribute on the <meta> element, like this: <meta http-equiv="x-dns-prefetch-control" content="off"> you can reverse this setting by setting content to "on". ...
...p-equiv attribute on the <meta> element, like this: <meta http-equiv="x-dns-prefetch-control" content="off"> you can reverse this setting by setting content to "on". ...
...ame by using the
rel attribute on the <link> element with a link type of dns-prefetch: <link
rel="dns-prefetch" href="https://www.mozilla.org/contribute/"> in this example, the domain name "www.mozilla.org/contribute" will be pre-resolved. similarly, the link element can be used to resolve hostnames without providing a complete url, but only, by preceding the hostname with two slashes: <link
rel="dns-prefetch" href="//www.mozilla.org/contribute/"> forced prefetching of hostnames might be useful, for example, on the homepage of a site to force pre-resolution of domain names that are referenced frequently throughout the site even though they are not used on the home page itself. this will improve the overall performance of site even though the performance of the home page may not be affe...
HTTP Messages - HTTP
the answer from the server. http messages are composed of textual information encoded in ascii, and span over multiple lines. in http/1.1, and earlier versions of the protocol, these messages were openly sent across the connection. in http/2, the once human-readable message is now divided up into http frames, providing optimization and performance improvements. web developers, or webmasters, ra
rely craft these textual http messages themselves: software, a web browser, proxy, or web server, perform this action. they provide http messages through config files (for proxies or servers), apis (for browsers), or other interfaces. the http/2 binary framing mechanism has been designed to not require any alteration of the apis or config files applied: it is broadly transparent to the user. http...
...body, each containing a different bit of information. this is typically associated with html forms. http responses status line the start line of an http response, called the status line, contains the following information: the protocol version, usually http/1.1. a status code, indicating success or failure of the request. common status codes are 200, 404, or 302 a status text. a brief, pu
rely informational, textual description of the status code to help a human understand the http message. a typical status line looks like: http/1.1 404 not found. headers http headers for responses follow the same structure as any other header: a case-insensitive string followed by a colon (':') and a value whose structure depends upon the type of the header. the whole header, including its value,...
...hree categories: single-resource bodies, consisting of a single file of known length, defined by the two headers: content-type and content-length. single-resource bodies, consisting of a single file of unknown length, encoded by chunks with transfer-encoding set to chunked. multiple-resource bodies, consisting of a multipart body, each containing a different section of information. these are
relatively rare. http/2 frames http/1.x messages have a few drawbacks for performance: headers, unlike bodies, are uncompressed. headers are often very similar from one message to the next one, yet still repeated across connections. no multiplexing can be done. several connections need opening on the same server: and warm tcp connections are more efficient than cold ones. http/2 introduces ...
Proxy Auto-Configuration (PAC) file - HTTP
lete. there is no additional syntax needed to save it into a file and use it. ...
...ell expression to compare against. returns true if the string matches the specified shell expression. note that the patterns are shell glob expressions, not regular expressions. * and ? are always supported, while [characters] and [^characters] are supported by some implmentations including firefox. this is mainly because the expression is translated to a regexp via subsitution of [.*?]. for a
reliable way to use these regexp syntaxes, just use regexp instead. examples shexpmatch("http://home.netscape.com/people/ari/index.html" , "*/ari/*"); // returns true shexpmatch("http://home.netscape.com/people/montulli/index.html", "*/ari/*"); // returns false weekdayrange() syntax weekdayrange(wd1, wd2, [gmt]) note: (before firefox 49) wd1 must be less than wd2 if you want the function t...
...ain.com:8080"; } // ... the autoconfig file can be output by a cgi script. this is useful, for example, when making the autoconfig file act differently based on the client ip address (the remote_addr environment variable in cgi). usage of isinnet(), isresolvable() and dnsresolve() functions should be carefully considered, as they require the dns server to be consulted. all the other autoconfig-
related functions are mere string-matching functions that don't require the use of a dns server. if a proxy is used, the proxy will perform its dns lookup which would double the impact on the dns server. most of the time these functions are not necessary to achieve the desired result. history and implementation proxy auto-config was introduced into netscape navigator 2.0 in the late 1990s, at the ...
Redirections in HTTP - HTTP
e, etc. principle in http, redirection is triggered by a server sending a special redirect response to a request. redirect responses have status codes that start with 3, and a location header holding the url to redirect to. when browsers receive a redirect, they immediately load the new url provided in the location header. besides the small performance hit of an additional round-trip, users ra
rely notice the redirection. there are several types of redirects, sorted into three categories: permanent redirections temporary redirections special redirections permanent redirections these redirections are meant to last forever. they imply that the original url should no longer be used, and replaced with the new one.search engine robots, rss readers, and other crawlers will update the ...
...s 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. machine-readable choices are encouraged to be sent as link headers with
rel=alternate. 304 not modified sent for revalidated conditional requests. indicates that the cached response is still fresh and can be used. alternative way of specifying redirections http redirects aren't the only way to define redirections. there are two others: html redirections with the <meta> element javascript redirections via the dom html redirections http redire...
...equest occurs). if you can avoid it by correcting internal links, you should fix those links instead. temporary responses to unsafe requests unsafe requests modify the state of the server and the user shouldn't resend them unintentionally. typically, you don't want your users to resend put, post or delete requests. if you serve the response as the result of this request, a simple press of the
reload button will resend the request (possibly after a confirmation message). in this case, the server can send back a 303 (see other) response for a url that will contain the right information. if the
reload button is pressed, only that page is redisplayed, without replaying the unsafe requests. temporary responses to long requests some requests may need more time on the server, like delete requ...
Details of the object model - JavaScript
ee; var amy = new workerbee; employee.prototype.name = 'unknown'; in this case, the name property of amy becomes "unknown". as these examples show, if you want to have default values for object properties and you want to be able to change the default values at run time, you should set the properties in the constructor's prototype, not in the constructor function itself. determining instance
relationships property lookup in javascript looks within an object's own properties and, if the property name is not found, it looks within the special object property __proto__. this continues recursively; the process is called "lookup in the prototype chain". the special property __proto__ is set when an object is constructed; it is set to the value of the constructor's prototype property. so the...
...s set to the value of the constructor's prototype property. so the expression new foo() creates an object with __proto__ == foo.prototype. consequently, changes to the properties of foo.prototype alters the property lookup for all objects that were created by new foo(). every object has a __proto__ object property (except object); every function has a prototype object property. so objects can be
related by 'prototype inheritance' to other objects. you can test for inheritance by comparing an object's __proto__ to a function's prototype object. javascript provides a shortcut: the instanceof operator tests an object against a function and returns true if the object inherits from the function prototype. for example, var f = new foo(); var istrue = (f instanceof foo); for a more detailed examp...
...the employee. in this example, mac.id would be 1. alternatively, you can create a copy of employee's prototype object to assign to workerbee: workerbee.prototype = object.create(employee.prototype); // instead of workerbee.prototype = new employee no multiple inheritance some object-oriented languages allow multiple inheritance. that is, an object can inherit the properties and values from un
related parent objects. javascript does not support multiple inheritance. inheritance of property values occurs at run time by javascript searching the prototype chain of an object to find a value. because an object has a single associated prototype, javascript cannot dynamically inherit from more than one prototype chain. in javascript, you can have a constructor function call more than one other ...
Expressions and operators - JavaScript
erators and expressions is also available in the reference. operators javascript has the following types of operators. this section describes the operators and contains information about operator precedence. assignment operators comparison operators arithmetic operators bitwise operators logical operators string operators conditional (ternary) operator comma operator unary operators
relational operators javascript has both binary and unary operators, and one special ternary operator, the conditional operator. a binary operator requires two operands, one before the operator and one after the operator: operand1 operator operand2 for example, 3+4 or x*y. a unary operator requires a single operand, either before or after the operator: operator operand or operand operator ...
...ion; // returns "function" typeof string; // returns "function" void the void operator is used in either of the following ways: void (expression) void expression the void operator specifies an expression to be evaluated without returning a value. expression is a javascript expression to evaluate. the parentheses surrounding the expression are optional, but it is good style to use them.
relational operators a
relational operator compares its operands and returns a boolean value based on whether the comparison is true. in the in operator returns true if the specified property is in the specified object. the syntax is: propnameornumber in objectname where propnameornumber is a string, numeric, or symbol expression representing a property name or array index, and objectname is th...
...e following table describes the precedence of operators, from highest to lowest. operator precedence operator type individual operators member . ...
FinalizationRegistry - JavaScript
thods finalizationregistry.prototype.register() registers an object with the registry in order to get a cleanup callback when/if the object is garbage-collected. finalizationregistry.prototype.unregister() unregisters an object from the registry. avoid where possible correct use of finalizationregistry takes careful thought, and it's best avoided if possible. it's also important to avoid
relying on any specific behaviors not guaranteed by the specification. when, how, and whether garbage collection occurs is down to the implementation of any given javascript engine. any behavior you observe in one engine may be different in another engine, in another version of the same engine, or even in a slightly different situation with the same version of the same engine. garbage collection is a...
...look like they are unreachable (e.g., in closures, or inline caches). different javascript engines may do these things differently, or the same engine may change its algorithms across versions. complex factors may lead to objects being held alive for unexpected amounts of time, such as use with certain apis. notes on cleanup callbacks some notes on cleanup callbacks: developers shouldn't
rely on cleanup callbacks for essential program logic. cleanup callbacks may be useful for reducing memory usage across the course of a program, but are unlikely to be useful otherwise. a conforming javascript implementation, even one that does garbage collection, is not required to call cleanup callbacks. when and whether it does so is enti
rely down to the implementation of the javascript engine. w...
... required to call cleanup callbacks. when and whether it does so is enti
rely down to the implementation of the javascript engine. when a registered object is reclaimed, any cleanup callbacks for it may be called then, or some time later, or not at all. it's likely that major implementations will call cleanup callbacks at some point during execution, but those calls may be substantially after the
related object was reclaimed. there are also situations where even implementations that normally call cleanup callbacks are unlikely to call them: when the javascript program shuts down enti
rely (for instance, closing a tab in a browser). when the finalizationregistry instance itself is no longer reachable by javascript code. examples creating a new registry you create the registry...
String.prototype.localeCompare() - JavaScript
contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the new locales and options arguments let applications specify the language whose sort order should be used and customize the behavior of the function. in older implementations, which ignore the locales and options arguments, the locale and sort order used are enti
rely implementation-dependent. syntax referencestr.localecompare(comparestring[, locales[, options]]) parameters comparestring the string against which the referencestr is compared. locales and options these arguments customize the behavior of the function and let applications specify the language whose formatting conventions should be used. in implementations which ignore the locales and ...
... locales[, options]]) parameters comparestring the string against which the referencestr is compared. locales and options these arguments customize the behavior of the function and let applications specify the language whose formatting conventions should be used. in implementations which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation-dependent. see the intl.collator() constructor for details on these parameters and how to use them. return value a negative number if referencestr occurs before comparestring; positive if the referencestr occurs after comparestring; 0 if they are equivalent. description returns an integer indicating whether the referencestr comes before, after or is equivalent to the comp...
...s before comparestring; positive if the referencestr occurs after comparestring; 0 if they are equivalent. description returns an integer indicating whether the referencestr comes before, after or is equivalent to the comparestring. negative when the referencestr occurs before comparestring positive when the referencestr occurs after comparestring returns 0 if they are equivalent do not
rely on exact return values of -1 or 1! negative and positive integer results vary between browsers (as well as between browser versions) because the w3c specification only mandates negative and positive values. some browsers may return -2 or 2, or even some other negative or positive value. performance when comparing large numbers of strings, such as in sorting large arrays, it is better to cr...
globalThis - JavaScript
being run in.to help you remember the name, just remember that in global scope the this value is globalthis. html and the windowproxy in many engines globalthis will be a reference to the actual global object, but in web browsers, due to iframe and cross-window security considerations, it references a proxy around the actual global object (which you can't directly access). ...
... run in.to help you remember the name, just remember that in global scope the this value is globalthis. html and the windowproxy in many engines globalthis will be a reference to the actual global object, but in web browsers, due to iframe and cross-window security considerations, it references a proxy around the actual global object (which you can't directly access). ...
...his distinction is ra
rely
relevant in common usage, but important to be aware of. naming several other popular name choices such as self and global were removed from consideration because of their potential to break compatibility with existing code. see the language proposal's "naming" document for more details. examples search for the global across environments prior to globalthis, the only
reliable cross-platform way to get the global object for an environment was function('return this')(). however, this causes csp violations in some settings, so es6-shim uses a check like this, for example: var getglobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } ...
Web app manifests
cription, and list of all the necessary resources (among other things). can pwa manifest contain comments? it is a json-formatted file, with one exception: it is allowed to contain "//"-style comments. members web manifests can contain the following keys. ...
...f all the necessary resources (among other things). can pwa manifest contain comments? it is a json-formatted file, with one exception: it is allowed to contain "//"-style comments. members web manifests can contain the following keys. ...
... "src": "images/touch/homescreen96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/touch/homescreen144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/touch/homescreen168.png", "sizes": "168x168", "type": "image/png" }, { "src": "images/touch/homescreen192.png", "sizes": "192x192", "type": "image/png" }], "
related_applications": [{ "platform": "play", "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" }] } deploying a manifest web app manifests are deployed in your html pages using a <link> element in the <head> of a document: <link
rel="manifest" href="/manifest.webmanifest"> note: the .webmanifest extension is specified in the media type registration section of th...
Navigation and resource timings - Web Performance
uncompressed file size of 87.24kb. if we do the math with these numbers, we get the same result: 1 - (22.04 / 87.24) = 0.747. the navigation timings provide us a way to programmatically check transfer sizing and bandwidth savings. note that this is the size for this single document alone: for this resource alone, not for all the resources combined. however, the duration, load events and dom
related timings have to do with the entire navigation, not this single asset. client-side web applications may seem faster than this one with transfer sizes under 10000 and decoded body sizes under 30000, but that doesn't mean javascript, css, or media assets aren't adding bloat. checking compression ratios is important but ensure to also check duration and the time between when the domcontentload...
...r interface. request time the api doesn't provide every measurement you may desire. for example, how long did the request take? we can use measurements we do have, to get our answer. to measure the response time, subtract the request start time from the response start time. the request start is the moment immediately before the user agent starts requesting the resource from the server, or from
relevant application caches or from local resources. the response start is the time immediately after the user agent's http parser receives the first byte of the response from
relevant application caches, or from local resources or from the server, which happens after the request is received and processed. request = timing.responsestart - timing.requeststart load event duration by subtracting the ...
... domcontentloaded = timing.domcontentloadedeventend - timing.domcontentloadedeventstart duration we are provided with the duration. the duration is the difference between the performancenavigationtiming.loadeventend and performanceentry.starttime properties. the performancenavigationtiming interface also provides information about what type of navigation you are measuring, returning navigate,
reload, back_forward or prerender. resource timing whereas navigation timing is for measuring the performance of the main page, generally the html file via which all the other assets are requested, resource timing measures timing for individual resources, the assets called in by the main page, and any assets that those resources request. many of the measurements are similar: there is a dns look up,...
Add to Home screen - Progressive web apps (PWAs)
tain information about the web app and how it should behave. note: the .webmanifest extension is specified in the media type registration section of the specification, but generally browsers will support manifests with other appropriate extensions, e.g. .json. the fields needed for a2hs are as follows: background_color: specifies a background color to be used in some app contexts. the most
relevant one to a2hs is the splash screen displayed when the app icon on the home screen is tapped and it first starts to load (this currently appears only when apps have been added to the home screen by chrome). display: specifies how the app should be displayed. to make it feel like a distinct app (and not just a web page), you should choose a value such as fullscreen (no ui is shown at all) or st...
...hen representing the app in different places. name provides the full app name, and short_name provides a shortened name to be used when there is insufficient space to display the full name. you are advised to provide both if your app's name is particularly long. start_url: provides a path to the asset that should be loaded when the added-to-home screen app is launched. note that this has to be a
relative url pointing to the site index,
relative to the url of the manifest. also, be aware that chrome requires this before it will display the install banner, whereas firefox doesn't require it for showing the home-with-a-plus icon. the manifest for our sample app looks like this: { "background_color": "purple", "description": "shows random fox pictures. hey, at least it isn't cats.", "di...
... what type the icon is, and then ignore it and move to a different icon if it doesn't support it. in terms of how to design the icon, you should follow the same best practices you'd follow for any android icon (see the android icon design guidelines). link the html to the manifest to finish setting up your manifest, you need to reference it from the html of your application's home page: <link
rel="manifest" href="manifest.webmanifest"> browsers that support a2hs will know where to look for your manifest once this is in place. what does a2hs not give you? bear in mind that when you add an app to your home screen, it just makes the app easily accessible — it doesn't download the app's assets and data to your device and make the app available offline, or anything like that. to make your...
Progressive loading - Progressive web apps (PWAs)
itial website access and completion of loading, the user sees a blank page, which is a bad experience. to fix that we can, for example, add defer to javascript files: <script src="app.js" defer></script> they will be downloaded and executed after the document itself has been parsed, so it won't block rendering the html structure. we can also split css files and add media types to them: <link
rel="stylesheet" href="style.css"> <link
rel="stylesheet" href="print.css" media="print"> this will tell the browser to load them only when the condition is met. in our js13kpwa demo app, the css is simple enough to leave it all in a single file with no specific rules as to how to load them. we could go even further and move everything from style.css to the <style> tag in the <head> of index.html ...
...oad. this problem can be solved with the new intersection observer api — using this we can ensure that images will be loaded only when they appear in the viewport. intersection observer this is a progressive enhancement to the previously working example — intersection observer will load target images only when the user scrolls down, causing them to display in the viewport. ...
... with service workers, installable pwas, and finally notifications. we also explained push with help from the service worker cookbook. and in this article, we've looked into the concept of progressive loading, including an interesting example that makes use of the intersection observer api. feel free to experiment with the code, enhance your existing app with pwa features, or build something enti
rely new on your own. pwas give a huge advantage over regular web apps. previous overview: progressive web apps ...
Structural overview of progressive web apps - Progressive web apps (PWAs)
it. responsive: responsive web design also applies to progressive web apps, as both are mainly for mobile devices. there are so many varied devices with browsers — it's important to prepare your website so it works on different screen sizes, viewports or pixel densities, using technologies like the viewport meta tag, css media queries, flexbox, and css grid. another approach: streams an enti
rely different approach to server- or client-side rendering can be achieved with the streams api. with a little help from service workers, streams can greatly improve the way we parse content. the app shell model requires all the resources to be available before the website can start rendering. it's different with html, as the browser is actually streaming the data already and you can see when the e...
...s styling provided in style.css. also included are a few images, scripts, and fonts. the file and folder hierarchy looks like this: app.js data/ games.js img/ favicon.ico fonts/ icons/ img/ bg.png js13kgames.png index.html js13kpwa.webmanifest style.css sw.js the html the html in the file index.html creates the structure of the app. the parts that are directly
relevant to the app shell model are found outside the <section> with the id content within this page. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>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="aut...
...itle> <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 ...
begin - SVG: Scalable Vector Graphics
animatemotion>, <animatetransform>, and <set>, begin defines when the element should begin, i.e. become active. value <begin-value-list> default value 0s animatable no the <begin-value-list> is a semicolon-separated list of values. each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time
relative to the beginning of the svg document (usually the load or domcontentloaded event). negative values are valid. <syncbase-value> this value defines a syncbase and an optional offset from that syncbase. the element's animation start time is defined
relative to the begin or active end of another animation. a valid syncbase-value consists of an id reference to another animation element followe...
...lement followed by a dot and either begin or end to identify whether to synchronize with the beginning or active end of the referenced animation element. an optional offset value as defined in <offset-value> can be appended. <event-value> this value defines an event and an optional offset that determines the time at which the element's animation should begin. the animation start time is defined
relative to the time that the specified event is fired. a valid event-value consists of an element id followed by a dot and one of the supported events for that element. all valid events (not necessarily supported by all elements) are defined by the dom and html specifications. those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemov...
...move, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent. an optional offset value as defined in <offset-value> can be appended. <repeat-value> this value defines a qualified repeat event. the element animation start time is defined
relative to the time that the repeat event is raised with the specified iteration value. a valid repeat value consists of an element id followed by a dot and the function repeat() with an integer value specifying the number of repetitions as parameter. an optional offset value as defined in <offset-value> can be appended. <accesskey-value> this value defines an access key that should trigger the a...
end - SVG: Scalable Vector Graphics
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. each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time
relative to the beginning of the svg document (usually the load or domcontentloaded event). negative values are valid. <syncbase-value> this value defines a syncbase and an optional offset from that syncbase. the element's animation end time is defined
relative to the begin or active end of another animation. a valid syncbase-value consists of an id reference to another animation element followed ...
...on element followed by a dot and either begin or end to identify whether to synchronize with the beginning or active end of the referenced animation element. an optional offset value as defined in <offset-value> can be appended. <event-value> this value defines an event and an optional offset that determines the time at which the element's animation should end. the animation end time is defined
relative to the time that the specified event is fired. a valid event-value consists of an element id followed by a dot and one of the supported events for that element. all valid events (not necessarily supported by all elements) are defined by the dom and html specifications. those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemo...
...emove, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent . an optional offset value as defined in <offset-value> can be appended. <repeat-value> this value defines a qualified repeat event. the element animation end time is defined
relative to the time that the repeat event is raised with the specified iteration value. a valid repeat value consists of an element id followed by a dot and the function repeat() with an integer value specifying the number of repetitions as parameter. an optional offset value as defined in <offset-value> can be appended. <accesskey-value> this value defines an access key that should trigger the e...
rendering-intent - SVG: Scalable Vector Graphics
n of a color profile rendering intent other than the default. rendering-intent is applicable primarily to color profiles corresponding to cmyk color spaces. the different options cause different methods to be used for translating colors to the color gamut of the target rendering device. only one element is using this attribute: <color-profile> usage notes value auto | perceptual |
relative-colorimetric | saturation | absolute-colorimetric default value auto animatable yes auto this value allows the user agent to determine the best intent based on the content type. perceptual this value preserves the
relationship between colors. it attempts to maintain
relative color values among the pixels as they are mapped to the target device gamut. som...
...colors that are outside the gamut are converted to colors that have the same saturation but fall just inside the gamut. saturation this value leaves colors that fall inside the gamut unchanged. ...
...colors that are outside the gamut are converted to colors that have the same saturation but fall just inside the gamut. saturation this value leaves colors that fall inside the gamut unchanged. this method usually converts out of gamut colors to colors that have the same lightness but fall just inside the gamut. ...
side - SVG: Scalable Vector Graphics
the side attribute determines the side of a path the text is placed on (
relative to the path direction). only one element is using this attribute: <textpath> html, body, svg { height: 100%; } text { font: 25px arial, helvelica, sans-serif; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <text> <textpath href="#circle1" side="left">text left from the path</textpath> </text> <text> <textpath href="#circle2" side="right">text right from the path</textpath> </text> <circle id="circle1" cx="100" cy="100" r="70" fill="transparent" stroke="silver"/> <circle id="circle2" cx="320" cy="100" r="70" fill="transparent" stroke="silver"/> </svg> usage notes value left | right default value left animatable yes ...
...this effectively reverses the path direction. specifications specification status comment scalable vector graphics (svg) 2the definition of 'side' in that specification. candidate recommendation initial definition ...
...transparent" stroke="silver"/> <circle id="circle2" cx="320" cy="100" r="70" fill="transparent" stroke="silver"/> </svg> usage notes value left | right default value left animatable yes left this value places the text on the left side of the path (
relative to the path direction). right this value places the text on the right side of the path (
relative to the path direction). this effectively reverses the path direction. specifications specification status comment scalable vector graphics (svg) 2the definition of 'side' in that specification. candidate recommendation initial definition ...
Namespaces crash course - SVG: Scalable Vector Graphics
take some time to understand namespaces now and it will save you all sorts of headaches in the future. ...
...ion is not "it can tell from the doctype declaration". dtds were never designed with mixed content in mind, and past attempts to create mixed content dtds are now considered to have failed. xml, and some xml dialects (svg included), don't require a doctype declaration, and svg 1.2 won't even have one. the fact that doctype declarations (usually) match the content in single content type files is me
rely coincidental. dtds are for validation only, not identification of content. user agents that cheat and identify xml content using its doctype declaration cause harm. the real answer to the question is that xml content tells the user agent which dialect the element names belong to by giving them explicit "namespace declarations". declaring namespaces so what do these namespace declarations look...
... to redeclare the default namespace. in general though it is better to redeclare the default namespace rather than prefix lots of elements in this way. scripting in namespaced xml namespaces affect not only markup, but also scripting. if you write scripts for namespaced xml such as svg, read on. the dom level 1 recommendation was created before the original namespaces in xml recommendation was
released; therefore, dom1 isn't namespace aware. this causes problems for namespaced xml such as svg. to resolve these problems, dom level 2 core added namespace aware equivalents of all the applicable dom level 1 methods. when scripting svg, it is important to use the namespace aware methods. the table below lists the dom1 methods that shouldn't be used in svg, along with their equivalent dom2 count...
Introduction - SVG: Scalable Vector Graphics
more than the <svg> root element and several basic shapes that build a graphic together. in addition there is the <g> element, which is used to group several basic shapes together. starting from there, the svg image can become arbitrarily complex. svg supports gradients, rotations, filter effects, animations, interactivity with javascript, and so on. but all these extra features of the language
rely on this
relatively small set of elements to define the graphics area. before you start there are a number of drawing applications available such as inkscape which are free and use svg as their native file format. however, this tutorial will
rely on the trusty xml or text editor (your choice). the idea is to teach the internals of svg to those who want to understand it, and that is best done by...
...pport different levels of the svg specification or another specification that you are using along with svg (that is, javascript or css). svg is supported in all modern browsers and even a couple versions back in some cases. a fairly complete browser support table can be found on can i use. firefox has supported some svg content since version 1.5, and that support level has been growing with each
release since. hopefully, along with the tutorial here, mdn can help developers keep up with the differences between gecko and some of the other major implementations. before starting you should have a basic understanding of xml or another markup language such as html. if you are not too familiar with xml, here are some guidelines to keep in mind: svg elements and attributes should all be entered...
...e able to use the element reference and the interface reference to find out anything else you need to know. flavors of svg since becoming a recommendation in 2003, the most recent "full" svg version is 1.1. it builds on top of svg 1.0, but adds more modularization to ease implementation. the second edition of svg 1.1 became a recommendation in 2011. "full" svg 1.2 was meant to be the next major
release of svg. it was dropped for the upcoming svg 2.0, which is under heavy development right now and follows a similar approach to css 3 in that it splits components into several loosely coupled specifications. apart from the full svg recommendations, the working group at the w3c introduced svg tiny and svg basic in 2003. these two profiles are aimed mainly at mobile devices. the first, svg tiny,...
SVG In HTML Introduction - SVG: Scalable Vector Graphics
like in the following example: var img = document.createelementns("http://www.w3.org/2000/svg", "image"); img.setattributens("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); details the viewbox attribute establishes a logical coordinate system which t...
...ked image with dom methods to an embedded svg element, one has to use setattributens to set href. ...
...(for inline svg to work in both firefox and internet explorer it is necessary to serve documents with a different content-type to each browser. ...
Transport Layer Security - Web security
server. the mozilla operations security (opsec) team maintains a wiki entry with reference configurations for servers. the transport layer security (tls) protocol is the standard for enabling two networked applications or devices to exchange information privately and robustly. applications that use tls can choose their security parameters, which can have a substantial impact on the security and
reliability of data. this article provides an overview of tls and the kinds of decisions you need to make when securing your content. history when https was introduced, it was based on secure sockets layer (ssl) 2.0, a technology introduced by netscape. it was updated to ssl 3.0 not long after, and as its usage expanded, it became clear that a common, standard encryption technology needed to be spe...
....3 can be enabled without affecting compatibility with some rare exceptions (see below). the major changes in tls 1.3 are: the tls 1.3 handshake completes in one round trip in most cases, reducing handshake latency. a server can enable a 0-rtt (zero round trip time) handshake. clients that reconnect to the server can send requests immediately, eliminating the latency of the tls handshake enti
rely. though the performance gains from 0-rtt can be significant, they come with some risk of replay attack, so some care is needed before enabling this feature. tls 1.3 supports forward-secure modes only, unless the connection is resumed or it uses a pre-shared key. tls 1.3 defines a new set of cipher suites that are exclusive to tls 1.3. these cipher suites all use modern authenticated encryption...
...o allow tls 1.3 to operate successfully. tls 1.3 adds just one significant new use case. the 0-rtt handshake can provide significant performance gains for latency sensitive applications, like the web. enabling 0-rtt requires additional steps, both to ensure successful deployment and to manage the risks of replay attacks. the removal of renegotiation in tls 1.3 might affect some web servers that
rely on client authentication using certificates. some web servers use renegotiation to either ensure that client certificates are encrypted, or to request client certificates only when certain resources are requested. for the privacy of client certificates, the encryption of the tls 1.3 handshake ensures that client certificates are encrypted; however this might require some software changes. reacti...
Web security
m data theft to site defacement to the distribution of malware. connection security transport security layer (tls) the transport layer security (tls) protocol is the standard for enabling two networked applications or devices to exchange information privately and robustly. applications that use tls can choose their security parameters, which can have a substantial impact on the security and
reliability of data. this article provides an overview of tls and the kinds of decisions you need to make when securing your content. https https (hypertext transfer protocol secure) is an encrypted version of the http protocol. it uses ssl or tls to encrypt all communication between a client and a server. this secure connection allows clients to be sure that they are connected with the intended se...
...website may appear broken to users (if iframes or plugins don't load, etc.). passive mixed content is displayed by default, but users can set a preference to block this type of content, as well. this page explains what you should be aware of as a web developer. secure contexts a secure context is a window or worker for which there is reasonable confidence that the content has been delivered secu
rely (via https/tls), and for which the potential for communication with contexts that are not secure is limited. many web apis and features are accessible only in a secure context. the primary goal of secure contexts is to prevent man-in-the-middle attackers from accessing powerful apis that could further compromise the victim of an attack. features restricted to secure contexts this reference lis...
...eal a user's password by sniffing the network, or by modifying the served page in transit. privacy and the :visited selector before about 2010, the css :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. to mitigate this problem, browsers have limited the amount of information that can be obtained from visited links. ...
Tutorials
oking at applying custom fonts to your page, and styling lists and links. common css questions common questions and answers for beginners. intermediate level css layout at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. now it's time to look at how to place your boxes in the right place in
relation to the viewport, and one another. we have covered the necessary prerequisites so can now dive deep into css layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox. css reference complete reference to css, with details on support by firefox and other browsers. fluid grids design layouts that...
...camp freecodecamp teaches a variety of languages and frameworks for web development. it also has a forum, an internet radio station, and a blog. intermediate level introducing javascript objects in javascript, most things are objects, from core javascript features like strings and arrays to the browser apis built on top of javascript. you can even create your own objects to encapsulate
related functions and variables into efficient packages. the object-oriented nature of javascript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. here we teach object theory and syntax in detail, look at how to create your own objects, and explain what json data is and how to work...
...introduction to essential javascript design patterns. advanced level javascript guide a comprehensive, regularly updated guide to javascript for all levels of learning from beginner to advanced. you don't know js a series of books diving deep into the core mechanisms of the javascript language. javascript garden documentation of the most quirky parts of javascript. exploring es6
reliable and in-depth information on ecmascript 2015. javascript patterns a javascript pattern and antipattern collection that covers function patterns, jquery patterns, jquery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, dom. how browsers work a detailed research article describing different modern brow...
Using custom elements - Web Components
takes as its arguments: a domstring representing the name you are giving to the element. note that custom element names require a dash to be used in them (kebab-case); they can't be single words. a class object that defines the behaviour of the element. optionally, an options object containing an extends property, which specifies the built-in element your element inherits from, if any (only
relevant to customized built-in elements; see the definition below). so for example, we can define a custom word-count element like this: customelements.define('word-count', wordcount, { extends: 'p' }); the element is called word-count, its class object is wordcount, and it extends the <p> element. a custom element's class object is written using standard es 2015 class syntax. for example, word...
...mple we apply style to the shadow dom using a <style> element, but it is perfectly possible to do it by referencing an external stylesheet from a <link> element instead. for example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code): // apply external styles to the shadow dom const linkelem = document.createelement('link'); linkelem.setattribute('
rel', 'stylesheet'); linkelem.setattribute('href', 'style.css'); // attach the created element to the shadow dom shadow.appendchild(linkelem); note that <link> elements do not block paint of the shadow root, so there may be a flash of unstyled content (fouc) while the stylesheet loads. many modern browsers implement an optimization for <style> tags either cloned from a common node or that have ide...
...); // self functionality written in here // self.addeventlistener(...) // return the right context return self; } } if you don't need to perform any operation in the constructor, you can simply omit it so that its native behavior (see following) will be preserved. constructor(...args) { return super(...args); } transpilers vs. classes please note that es2015 classes cannot
reliably be transpiled in babel 6 or typescript targeting legacy browsers. you can either use babel 7 or the babel-plugin-transform-builtin-classes for babel 6, and target es2015 in typescript instead of legacy. libraries there are several libraries that are built on web components with the aim of increasing the level of abstraction when creating custom elements. some of these libraries are snuggsi...
XPath
provide a flexible way of addressing (pointing to) different parts of an xml document. it can also be used to test addressed nodes within a document to determine whether they match a pattern or not. xpath is mainly used in xslt, but can also be used as a much more powerful way of navigating through the dom of any xml-like language document using xpathexpression, such as html and svg, instead of
relying on the document.getelementbyid() or parentnode.queryselectorall() methods, the node.childnodes properties, and other dom core features. xpath uses a path notation (as in urls) for navigating through the hierarchical structure of an xml document. it uses a non-xml syntax so that it can be used in uris and xml attribute values. note: support for xpath varies widely; it's supported reasonably...
...ough there are no plans to improve support further), while other browsers implement it to a lesser extent, if at all. if you need a polyfill, you may consider js-xpath or wicked-good-xpath. documentation introduction to using xpath in javascript describes a non-xslt use of xpath. xpath:axes list and definition of the axes defined in the xpath specification. axes are used to describe the
relationships between nodes. xpath:functions list and description of the core xpath functions and xslt-specific additions to xpath. transforming xml with xslt xslt uses xpath to address code segments in an xml document that it wishes to transform. xpath snippets these are javascript utility functions, that can be used in your own code, based on dom level 3 xpath apis. what is xslt? this exte...
...ttings xml documents, for example). ...
Compiling from Rust to WebAssembly - WebAssembly
rust installed. they may not even notice that it's written in webassembly. rust environment setup let's go through all the required steps to get our environment set up. install rust install rust by going to the install rust page and following the instructions. this installs a tool called "rustup", which lets you manage multiple versions of rust. by default, it installs the latest stable rust
release, which you can use for general rust development. rustup installs rustc, the rust compiler, as well as cargo, rust's package manager, rust-std, rust's standard libraries, and some helpful docs — rust-docs. note: pay attention to the post-install note about needing cargo's bin directory in your system path. this is added automatically, but you must restart your terminal for it to take effec...
...m npm, this is likely to be familiar; cargo works in a similar manner to both of them. next, cargo has generated some rust code for us in src/lib.rs: #[cfg(test)] mod tests { #[test] fn it_works() { assert_eq!(2 + 2, 4); } } we won't use this test code at all, so go ahead and delete it. let's write some rust let's put this code into src/lib.rs instead: use wasm_bindgen::p
relude::*; #[wasm_bindgen] extern { pub fn alert(s: &str); } #[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("hello, {}!", name)); } this is the contents of our rust project. it has three main parts; let's talk about them in turn. we give a high-level explanation here, and gloss over some details; to learn more about rust, please check the free online book the rust programming la...
...!("hello, {}!", name)); } this is the contents of our rust project. it has three main parts; let's talk about them in turn. we give a high-level explanation here, and gloss over some details; to learn more about rust, please check the free online book the rust programming language. using wasm-bindgen to communicate between rust and javascript the first part looks like this: use wasm_bindgen::p
relude::*; libraries are called "crates" in rust. get it? cargo ships crates. the third line contains a use command, which imports code from a library into your code. in this case, we're importing everything in the wasm_bindgen::p
relude module. we use these features in the next section. before we move on to the next section, we should talk a bit more about wasm-bindgen. wasm-pack uses wasm-bindg...
Communicating With Other Scripts - Archive of obsolete content
scripts which have been loaded into different documents cannot interact directly with each other. content scripts that have been loaded into the same document by different methods, or the same method called more than once, can pass messages directly to each other using the dom postmessage() api or a customevent. any two content scripts can communicate by using the main add-on script to manually
relay messages between the content scripts. for example: if an add-on creates a single panel object and loads several content scripts into the panel at the same time, then they can interact with each other. if an add-on creates two panel objects and loads a script into each one, they can't interact with each other. but, they can each communicate with the main add-on script which could be written...
...essages between the content scripts. for example: if an add-on creates a single panel object and loads several content scripts into the panel at the same time, then they can interact with each other. if an add-on creates two panel objects and loads a script into each one, they can't interact with each other. but, they can each communicate with the main add-on script which could be written to
relay messages between them. if an add-on creates a single page-mod object and loads several content scripts into the page mod, then only content scripts associated with the same page can interact with each other: if two different matching pages are loaded, content scripts attached to page a cannot interact with those attached to page b. if an add-on loads two or more content scripts into the same ...
Content Scripts - Archive of obsolete content
to send messages from one side to the other, use port.emit() to receive messages sent from the other side, use port.on() messages are asynchronous: that is, ...
...ttach() attaches two content scripts, then they can see each other directly, just as page scripts loaded by the same page can. but if you call tab.attach() twice, attaching a content script each time, then these content scripts are not loaded into the same context and must communicate with each other using the normal methods of communicating from one context to another. one option is that you can
relay messages through the main add-on code using the port api with the sending context script sending a message to the main add-on code and the the main add-on code sends the message to the other content script. this will work regardless of the context in which the content script was loaded. in the special case where the two content scripts are loaded into the same exact page, it is possible for th...
Testing the Add-on SDK - Archive of obsolete content
hat we expect it to. cfx testex --filter <addon_example_folder_name>: a suite of tests which run test code for some example add-ons. this suite builds the example code, then runs these example add-on's test code. cfx testaddons --filter <addon_folder_name>: a suite of tests which run add-ons, which are themseleves tests. this suite builds add-ons which are tests (ie: their main.js script's me
rely run tests and close firefox when their tests are done), and runs them as cfx run would. cfx testpkgs --filter <file_name>:<test_name>: a suite of tests which run sdk module unit tests. this suite builds the entire addon-sdk repo as an add-on, like cfx xpi would, then runs the add-on like cfx test would. the majority of the tests run here are module unit tests, but there are various other test...
...o. with gulp installed, and after installing the addon-sdk's npm dependencies, we can run the latter three test suites mentioned for cfx with jpm using the following commands: gulp test:examples --filter <addon_example_folder_name> gulp test:addons --filter <addon_folder_name> gulp test:modules --filter <file_name>:<test_name> or run all of the tests with gulp test. with travis if you me
rely make a pull request for the mozilla/addon-sdk then all of the jpm tests mentioned above will be run on travis-ci automatically and you will see the pass/fail results with a link to the log in the github pull request. only on a linux machine at the moment. from mozilla-central repository with a checkout of the mozilla-central source code, one can always cd addon-sdk/source and use any of the...
Guides - Archive of obsolete content
se modules are, how to load modules, and how the sdk's module tree is structured. sdk api lifecycle definition of the lifecycle for the sdk's apis, including the stability ratings for apis. program id the program id is a unique identifier for your add-on. this guide explains how it's created, what it's used for and how to define your own. firefox compatibility working out which firefox
releases a given sdk
release is compatible with, and dealing with compatibility problems. sdk idioms working with events write event-driven code using the the sdk's event emitting framework. content scripts guide an overview of content scripts, including: what they are, what they can do, how to load them, how to communicate with them. two types of scripts this article explains the...
... ...
page-mod - Archive of obsolete content
s for the resource:// url pointing to the stylesheet in your "data" directory. so you can rewrite the code above like this: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.org", contentstylefile: "./style.css" }); content styles specified by this option are loaded before those specified by the contentstyle option. in earlier versions of this module, you couldn't use
relative urls in stylesheets loaded in this way, and you had to use a workaround. in current versions this has been fixed, and the workaround is no longer needed. name:contentstyle type: string,array use this option to load one or more stylesheet rules into the targeted documents. each stylesheet rule is supplied as a separate string. to supply multiple rules, pass an array of strings: ...
... the contentstylefile option. name: attachto type: string,array if this option is not specified, content scripts: are not attached to any tabs that are already open when the page-mod is created. are attached to all documents whose url matches the rule: so if your rule matches a specific hostname and path, and the topmost document that satisfies the rule includes ten iframes using a
relative url, then your page-mod is applied eleven times. you can modify this behavior using the attachto option. it accepts the following values: "existing": the page-mod will be automatically applied on already opened tabs. "top": the page-mod will be applied to top-level tab documents "frame": the page-mod will be applied to all iframes inside tab documents if the option is set at all, y...
self - Archive of obsolete content
lains the package.json file. methods data.load(name) the data.load() method returns the contents of an embedded data file, as a string. it is most useful for data that will be modified or parsed in some way, such as json, xml, plain text, or perhaps an html template. for data that can be displayed directly in a content frame, use data.url(). parameters name : string the filename to be read,
relative to the package's data directory. each package that uses the self module will see its own data directory. returns string : the file contents. data.url(name) the data.url() method returns a resource:// url that points at an embedded data file. it is most useful for data that can be displayed directly in a content frame. the url can be passed to a content frame constructor, such as the pane...
..."); var mypanel = require("sdk/panel").panel({ contenturl: self.data.url("myfile.html") }); mypanel.show(); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html"). so you can rewrite the above code like this: var mypanel = require("sdk/panel").panel({ contenturl: "./myfile.html" }); mypanel.show(); parameters name : string the filename to be read,
relative to the package's data directory. each package that uses the self module will see its own data directory. returns string : resource:// url pointing to the given location under data. ...
dev/panel - Archive of obsolete content
however, it can receive messages from the add-on that created it, and the add-on can pass it the debuggee so it can communicate with ...
... which gives you a javascript api to the remote debugging protocol. note that at the moment volcan.js does not support the complete remote debugging protocol. we're still working on documenting exactly which messages are supported by volcan.js. ...
net/xhr - Archive of obsolete content
ssion may be ineffective if it's easy to write a regular expression that looks safe but contains a special character or two that makes it far less secure than it seems at first glance. possible attenuations before being exposed to unprivileged code, this object needs to be attenuated in such a way that, at the very least, it can't access the user's filesystem. this can probably be done most secu
rely 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. finally, we need to also consider attenuating http/https requests such that they're "sandboxed" and don't communicate potentially sensitive cookie information. globals co...
...on't communicate potentially sensitive cookie information. globals constructors xmlhttprequest() creates an xmlhttprequest. this is a constructor, so its use should always be preceded by the new operator. for more information about xmlhttprequest objects, see the mdn page on using xmlhttprequest and the security concerns section in this page. functions forceallowthirdpartycookie(xhr) force
relevant cookies to be sent with this xmlhttprequest even if normally they would not be. parameters xhr: xmlhttprequest the xmlhttprequest to allow third-party cookies for. ...
test/assert - Archive of obsolete content
notequal(actual, expected, message) tests that two objects are not equal, using !=: assert.notequal(1, 2, "test that one is not two"); parameters actual : object the actual result. expected : object the expected result. message : string optional message to log, providing extra information about the test. deepequal(actual, expected, message) tests that two objects have a deep equality
relation. deep equality is defined in the commonjs specification for assert, item 7, which is quoted here: all identical values are equivalent, as determined by ===. if the expected value is a date object, the actual value is equivalent if it is also a date object that refers to the same time. other pairs that do not both pass typeof value == "object", equivalence is determined by ==. for all ...
...accounts for both named and indexed properties on arrays. assert.deepequal({ a: "foo" }, { a: "foo" }, "equivalent objects"); parameters actual : object the actual result. expected : object the expected result. message : string optional message to log, providing extra information about the test. notdeepequal(actual, expected, message) tests that two objects do not have a deep equality
relation, using the negation of the test for deep equality: assert.notdeepequal({ a: "foo" }, object.create({ a: "foo" }), "object's inherit from different prototypes"); parameters actual : object the actual result. expected : object the expected result. message : string optional message to log, providing extra information about the test. strictequal(actual, expected, mes...
ui/button/action - Archive of obsolete content
toolbar, this appears in a tooltip, and when the button is in the menu, it appears underneath the button as a legend. icon url, string, object one or more icons for the button. you can specify this in one of three ways: as a resource:// url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.url(iconfile) as a
relative path: a string in the form "./iconfile", where "iconfile" is a
relative path to the icon file beginning in your add-on's "data" directory as an object, or dictionary of key-value pairs. here you can specify a range of sizes for your button's icon. each key-value pair specifies an icon: each value specifies an image file as a resource:// url or
relative path. each ke...
...n buttons only emit one type of event, "click". listener : function the listener to remove. destroy() destroy the button. after calling this function, the button will no longer appear in the ui, and accessing any of its properties or methods will throw an error. properties id the button's unique id. this is read-only. label the button's label. icon the button's icon or icons, as a url,
relative path, or object containing a set of key-value pairs. disabled boolean property indicating whether or not the button is disabled. badge new in firefox 36. value to attach to the button as a badge. may be a number or a string. the badge can contain as many characters (or digits) as you like, but only the first four will be displayed. badgecolor new in firefox 36. color for the bad...
ui/button/toggle - Archive of obsolete content
toolbar, this appears in a tooltip, and when the button is in the menu, it appears underneath the button as a legend. icon url, string, object one or more icons for the button. you can specify this in one of three ways: as a resource:// url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.url(iconfile) as a
relative path: a string in the form "./iconfile", where "iconfile" is a
relative path to the icon file beginning in your add-on's "data" directory as an object, or dictionary of key-value pairs. here you can specify a range of sizes for your button's icon. each key-value pair specifies an icon: each value specifies an image file as a resource:// url or
relative path. each ke...
... types of event, "click" and "change". listener : function the listener to remove. destroy() destroy the button. after calling this function, the button will no longer appear in the ui, and accessing any of its properties or methods will throw an error. properties id the button's unique id. this property is read-only. label the button's label. icon the button's icon or icons, as a url,
relative path, or object containing a set of key-value pairs. disabled boolean property indicating whether or not the button is disabled. checked boolean property indicating whether or not the button is checked. it's initialized to false, or the value of the checked option to the button's constructor. it is then flipped, on a per-window basis, whenever the user clicks the button or when the butto...
ui/sidebar - Archive of obsolete content
irefox 34, you can use "./sidebar.html" as an alias for self.data.url("sidebar.html"). so you can rewrite the above code like this: var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: "./sidebar.html" }); you can include javascript and css from the html as you would with any web page, for example using <script> and <link> tags containing a path
relative to the html file itself. <!doctype html> <html> <head> <link href="stuff.css" type="text/css"
rel="stylesheet"> </head> <body> <script type="text/javascript" src="stuff.js"></script> </body> </html> you can update the sidebar's content by setting the sidebar's url property. this will change the sidebar's content across all windows. communicating with sidebar scripts you ...
...ready. 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. using attach the attach event is triggered whenever the dom for a new sidebar instance is loaded and its scripts are attached. 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. here's a simple but complete add-on that shows how to set up communication between 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 m...
cfx to jpm - Archive of obsolete content
the argument to require(). in most respects this is the same as the old cfx logic. however there are a few differences, because old compatibility shims have been removed. requiring local modules suppose your add-on is structured into separate modules: my-addon lib main.js utils.js when you want to use the "utils" module in "main.js", you should use a path
relative to "main.js", and prefix the path with "./" to indicate that it's a
relative path: var utils = require("./utils"); however, with cfx you are also allowed to omit the "./": var utils = require("utils"); // this will not work with jpm! this second form will not work with jpm. requiring modules from test code similarly, suppose you've written some tests for your add-on: my-addon ...
... in jpm the old way to use third-party modules no longer works. instead,...
Displaying annotations - Archive of obsolete content
the widget api is deprecated from firefox 29 onwards. please see the ui module for replacements. in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis. in this chapter we'll use a page-mod to locate elements of web pages that have annotations associated with them, and a panel to display the annotations. 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. ...
...s.content); } }); execute cfx run one last time. activate the annotator and enter an annotation. you should see a yellow border around the item you annotated: when you move your mouse over the item, the annotation should appear: obviously this add-on isn't complete yet. it could do with more beautiful styling, it certainly needs a way to delete annotations, it should deal with overquota more
reliably, and the matcher could be made to match more
reliably. but we hope this gives you an idea of the things that are possible with the modules in the sdk. ...
Storing annotations - Archive of obsolete content
deprecated in firefox 29 and removed in firefox 38. warning: this tutorial
relies on the since-removed widget api and no longer works with firefox. the widget api is deprecated from firefox 29 onwards. please see the ui module for replacements. in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis. now we are able to create annotations, let's store them using the simple-storage module. in this chapter we will cover three topics
relating to persistent storage: using simple-storage to persist objects handling exhaustion of the storage quota allocated to you respecting private browsing storing new annotations in this section we are only touching the main.js file. first, import the simple-stora...
...in the main browser window rather than the panel. so the content script binds a click handler to the links which will send the url to the add-on. save this file in data/list as annotation-list.js. ...
Rosetta - Archive of obsolete content
possible, in theory, to use ecmascript for a smaller task: parsing exotic programming languages (i.e., creating compilers). beyond ecmascript this is not the place for showing a full compiler written in ecmascript. we can show, however, a possible way to start from. the following code is nothing but the base for an extensible collection of compilers. but by default, no compilers are loaded. it
relies on the fact that unrecognized mime types will be simply ignored: this allows us to manually parse them. for a fast overview on the code proposed here you can git clone https://github.com/madmurphy/rosetta.js, or, at your choice, directly download this .zip file. rosetta.js: library "use strict"; /*\ |*| |*| :: rosetta.js :: |*| |*| a possible, extensible collection of compilers to nati...
...m/madmurphy/rosetta.js, or, at your choice, directly download this .zip file. rosetta.js: library "use strict"; /*\ |*| |*| :: rosetta.js :: |*| |*| a possible, extensible collection of compilers to native ecmascript. |*| |*| november 12, 2014 |*| |*| https://developer.mozilla.org/add-ons/code_snippets/rosetta |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is
released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0.html |*| |*| syntax: |*| |*| rosetta.appendcompiler([ "text/x-csrc", "text/x-c" ], yourcompiler); |*| \*/ var rosetta = new (function () { function createscript (oscript, oxhr200) { var smimetype = oscript.getattribute("type").tolowercase(), obaton = document.createcomment(" th...
StringView - Archive of obsolete content
|*| http://www.gnu.org/licenses/lgpl-3.0.html |*| \*/ function stringview (vinput, sencoding /* optional (default: utf-8) */, noffset /* optional */, nlength /* optional */) { var ftaview, awhole, araw, fputoutptcode, fgetoutptchrsize, ninptlen, nstartidx = isfinite(noffset) ? noffset : 0, ntranscrtype = 15; if (sencodi...
...nd its note. valueof() syntax stringview.valueof() description converts stringview's content into string and returns it. arguments none no arguments expected. examples alert((new stringview("hello world!")).valueof() === "hello world!"); // true javascript calls the stringview.valueof() method to convert an object to a primitive value. you ra
rely need to invoke the stringview.valueof() method yourself; javascript automatically invokes it when encountering an object where a primitive value is expected. tostring() syntax stringview.tostring() description converts stringview's content into string and returns it. arguments none no arguments expected. examples alert((new stringview("hello world!
Communication between HTML and your extension - Archive of obsolete content
nt in a form. i set the onblur action to a little javascript function that performed a standard ajax request to get a result. the onreadystatechange was set to another little javascript function that would update a specific element on the html page with the result. the result of the ajax request was the something that i wanted the extension to find. there were only a handful of events that seemed
relevant (load, change, dominsertnode, dominsertnodeintodocument, domactivate) and i tried them all in many different ways. some of the events only apply to certain types of elements so i included trying to modify the result of the ajax request to be of the appropriate element type (img, which supports "onload," rather than span, which doesn't, for example). the problem with the events is the timing.
...sion, the element from the ajax request wasn't fully updated into the html page. what that meant is that everytime the extension went looking for the element, it wasn't there yet. as a last ditch effort i tried setting a timeout using settimeout when i got the event in the extension to wait a few milliseconds before looking for the desired element. this was non-optimal and the timeout wasn't very
reliable for some reason. sometimes i would get the timeout, sometimes i would'nt. what i ended up with some helpful information on the irc channel led me to believe that a custom event might help. i started to research custom events on google but everything that i found was far too complicated for what i wanted to achieve. eventually i put the creation of the custom event into the statechanged funct...
Chapter 1: Introduction to Extensions - Archive of obsolete content
ve feedback loop, with the number of extension users and extension developers growing explosively—there are now more than 7000 extensions and themes published at the firefox add-ons site (https://addons.mozilla.org). what you can do with extensions let's look at what features extensions can add, and some actual examples of extensions. single feature extensions fixme: update this. these are
relatively simple extensions that add a single feature. text link makes it so that double-clicking on an unlinked url follows that url. undo closed tabs button adds a toolbar button to re-open the most recently closed tabs to the history menu. locationbar separates a url’s domain and path in the location bar for easier reading. feature enhancing extensions fixme: update this. ...
... unlinked url follows that url. undo closed tabs button adds a toolbar button to re-open the most recently closed tabs to the history menu. locationbar separates a url’s domain and path in the location bar for easier reading. feature enhancing extensions fixme: update this. these extensions enhance features that already exist in firefox. tab mix plus offers detailed tab-
related settings. prefbar gives access to numerous preferences from the toolbar. noscript enables and disables javascript execution on a site-by-site basis. web application integration extensions fixme: update this. the use the apis of certain web applications to provide certain pieces of information. new feature extensions fixme: update this. extensions can add completely new features t...
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
almost all the sample code in this chapter into your existing test.xul file to try it out. feel free to fill in blank spots as you see fit. make sure to change file paths to match your own environment. you can download the source code used in this chapter. get window while you can use javascript to get child windows opened from the parent window, you cannot get dialogs or windows that have no
relation to that window. to overcome this limitation, nsiwindowmediator makes it possible to access all of firefox's windows. get active window one thing that nsiwindowmediator is often used for is to get the active window. listing 4 shows how to get the active browser window and the number of open tabs. passing the name of the window type as the parameter of the nsiwindowmediator.getmostrecentwin...
...here, the character string to be written, 変換テスト, is hard-coded directly into the javascript source using escaped unicode entities. open the output file to check your results. note that...
Adding sidebars - Archive of obsolete content
sidebars take as much space as the user wants them to, and provide a frame where you can add elaborate data and controls. you're probably familiar with the bookmarks and history sidebars. if not, you can open either one from the view > sidebar menu. they also have shortcuts to open or close them using the keyboard. the code required to add a sidebar is very simple, as explained in creating a firefox sidebar. it's even simpler than that. all you need is to overlay the view sidebar menu. ...
...s very, very hard, as explained by the creator of adblock plus, and the mozilla keyboard reference. to sum up both of these references: you can choose an obscure key combination that won't conflict with firefox, such as ctrl+shift+(some letter), but there's no way of knowing if any other extension uses that same combination as well. shortcut keys can be very valuable for advanced users, but don't
rely on them. the xul page for the sidebar can hold any content you want and it's no different from other xul windows or overlays. one minor difference is that the xul sidebar should be defined using the « xul reference « root element instead of window or dialog. the load event is fired every time the sidebar is opened, and unload every time it's closed, so you can use those for initialization and...
Adding windows and dialogs - Archive of obsolete content
ntent/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. if this value is null or empty, the default toolbars of the main window will be added to the new one, which is ra
rely what you want. the window.open page has a detailed description of the features you can use and their values. the following features are very important and you should always keep them in mind: chrome. this can only be used from the chrome, not from regular html javascript. it indicates that a chrome document is being opened, not a web page. this means that the document defines the whole window...
... quite different from the default. attribute persistence user actions can change the state of your windows, such as selecting an option in a listbox, or entering text in a textbox. if the user closes and then reopens your window, all the controls are reset to their defaults, which may not be what you want. you need some way of remembering the user-manipulated attribute values so that the window
reloads it last state when opened. most xul elements support the persist attribute, which has this exact function. you set the persist attribute with a space-separated list of attribute names, indicating which attribute values must be persisted across window "sessions". <checkbox id="xulschoolhello-some-checkbox" label="&xulschoolhello.sometext.label;" checked="false" persist="checked" /> ...
Appendix D: Loading Scripts - Archive of obsolete content
objects passed in our out of them are wrapped in inter-compartment proxy objects, which consume additional memory and add an extra layer of complexity to all property accesses and method calls. javascript compartments: as noted above, each sandbox executes in its own javascript compartment. in addition to the possible performance concerns, passing data between these compartments is not enti
rely transparent. some known issues include: e4x xml objects cannot be wrapped for passage between compartments: bug 613142 there are a number of type detection issues, including: string.replace does not recognize regexp objects from foreign compartments: bug 633830 debugging: support for sandbox evaluation in development tools is uneven. chromebug supports firebug b...
...import a module into the current global scope. all variables named in the target script's exported_symbols global array will be copied into the current execution context. components.utils.import("resource://my-package/my-module.jsm"); the following function will import an arbitrary module into a singleton object, which it returns. if the argument is not an absolute path, the module is imported
relative to the caller's filename. function module(uri) { if (!/^[a-z-]+:/.exec(uri)) uri = /([^ ]+\/)[^\/]+$/.exec(components.stack.caller.filename)[1] + uri + ".jsm"; let obj = {}; components.utils.import(uri, obj); return obj; } given the above code, the following code will import the module "my-module.jsm" from the current directory and define the symbols foo and bar f...
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
onclick", "openwindow(this.getattribute('href'))"); } escaping functions when the code fragment in question is not an event handler attribute and there is no feasible way to pass the data through other means, they must be escaped with functions such as uneval, string.quote, json.stringify, or number. generating scripts in this matter is deprecated and should be avoided wherever possible, but is
relatively safe and sometimes acceptable. function createscript(href, otherstuff) { var script = function (href, otherstuff) { dostuffwith(href); dootherstuff(); for (var somestuff in otherstuff) dosomemorestuffwith(somestuff); } return script.tosource() + "(" + [string.quote(href), uneval(otherstuff)] + ")"; } safely using remote html in the above ...
... an html fragment, removing any executable * javascript, and return a document fragment. * * @param {document} doc the document in which to create the * returned dom tree. * @param {string} html the html fragment to parse. * @param {boolean} allowstyle if true, allow <style> nodes and * style attributes in the parsed fragment. gecko 14+ only. * @param {nsiuri} baseuri the base uri
relative to which resource * urls should be processed. note that this will not work for * xml fragments. * @param {boolean} isxml if true, parse the fragment as xml. */ function parsehtml(doc, html, allowstyle, baseuri, isxml) { let parser_utils = "@mozilla.org/parserutils;1"; // user the newer nsiparserutils on versions that support it. if (parser_utils in cc) { let ...
Handling Preferences - Archive of obsolete content
then, create the observer method: observe : function(asubject, atopic, adata) { if ("nspref:changed" == atopic) { let newvalue = asubject.getintpref(adata); // do something. } }, always remember to remove the observer when you don't need it anymore: this._prefservice.queryinterface(ci.nsiprefbranch2); this._prefservice.removeobserver(prefname, this); p...
...ect.getintpref(adata); // do something. } }, always remember to remove the observer when you don't need it anymore: this._prefservice.queryinterface(ci.nsiprefbranch2); this._prefservice.removeobserver(prefname, this); preference windows it's very common for extensions to have a few settings that their users can change to tailor them to their needs. since there are some subtleties
related to preference management, there are some facilities provided in xul and firefox that make this much easier to deal with. the standard way of opening a preferences window is to open the add-ons manager, select the add-on, and then click on the preferences button. in order to have this button enabled in your extension you need to add the following line to install.rdf: <em:optionsurl>chrome:...
The Box Model - Archive of obsolete content
o much. all css properties involving lengths should be handled with caution. we recommended that you use proportional units (em, %) instead of absolute units (px) whenever possible. using the former allows the ui to scale proportionately depending on font size settings, which are often changed by users with accessibility limitations. a common exception to this rule is when your css is directly
related to images, where you'll usually handle measurements in pixels (px). also, just like in html, you can control the dimensions of inflexible elements using the width and height css properties and attributes. these attributes won't have any effect on flexible elements. margins, paddings and spacers margins and paddings are frequently used in both html and xul to define spacing between elemen...
...extbox next to it allows the user to type the message. the control attribute links the label to the textbox. if the user clicks on the label, the textbox will be focused. also, if the user has a screen reader, the label will be read when the focus is placed on the textbox. the description element is used for the rest of the cases, where the text is only meant as additional information and is not
related to input elements. handling text in xul may seem simple, but it's actually quite a tricky subject. you always have to keep in mind that localized strings may be significantly longer in other languages, specially much longer than english strings. you should avoid using long blocks text, and also avoid designing your ui so that everything fits just right around text. you should always keep in ...
Signing an XPI - Archive of obsolete content
it was developed from the linux article so you want to sign your xpi package? by mozdev group's pete collins. this article is a mirror of the original, with minor reformatting, some new info and all links updated in march 2010. get network security services 1. download the latest network security services (nss) package from the mozilla ftp site at https://ftp.mozilla.org/pub/mozilla.or.../nss/
releases/. for windows, you'll want the nss-3.11.4.zip package in the nss_3_11_4_rtm/msvc6.0/winnt5.0_opt.obj/ folder - it is by 2010 the only one with the right binaries. 2. extract the contents of the archive file to a local folder. in my case it's c:\apps\nss-3.11.4\ get netscape portable runtime 1. download the latest netscape portable runtime from the mozilla ftp site: http://ftp.mozilla.org/...
...you'll want the nss-3.11.4.zip package in the nss_3_11_4_rtm/msvc6.0/winnt5.0_opt.obj/ folder - it is by 2010 the only one with the right binaries. 2. extract the contents of the archive file to a local folder. in my case it's c:\apps\nss-3.11.4\ get netscape portable runtime 1. download the latest netscape portable runtime from the mozilla ftp site: http://ftp.mozilla.org/pub/mozilla.org/nspr/
releases/. for windows you'll want the nspr-4.6.zip package in the v4.6/winnt5.0_opt.obj/ folder. 2. extract the contents of the archive file to a local folder. in my case it's c:\apps\nspr-4.6\ add path add the nss tools bin/ and lib/, and the nspr lib/ directories to the system path. you can either set this permanently via control panel->system properties->advanced->environment variables->system...
Using the Stylesheet Service - Archive of obsolete content
istersheet fails if css contains #id. '#' must be percent-encoded, details see bug 659650. historical information nsistylesheetservice was introduced in firefox 1.5. in firefox 1.5 and 2, adding and removing such style sheets takes effect upon the next load of a page. ...
...il a
reload. ...
CSS3 - Archive of obsolete content
the css font-feature-settings property. the control of the aspect ratio to use when fallback fonts are selected via the css font-size-adjust property. the choice of alternative font faces using the css font-stretch, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, and font-variant-position properties. it also extends the
related css font-variant shorthand property and introduces the @font-feature-values at-rule. the control of the automatic generation of an oblique or bold face when none are found via the css font-synthesis property. css basic user interface module level 3 recommendation since june 21st, 2018 adds: the ability to tweak the box model using the ...
...n, column-width, break-after, break-before, and break-inside. css values and units module level 3 candidate recommendation makes initial and inherit keywords usable on any css property. formally defines the css data types of css 2.1, that were implicitely defined by their grammar token and some textual precisions. adds: definition for new font-
relative length units: rem and ch . definition for viewport-
relative length units: vw, vh, vmax, and vmin . precision about the real size of the absolute length units, which are not really absolute, but defined in
relation with the reference pixel . definition for <angle>, <time>, <frequency>, <resolution>. normative value to the definition of <color>, <image>, and <position>. ...
Case Sensitivity in class and id Names - Archive of obsolete content
script. it is also important to avoid using class or id names which are a case-insensitive match within the same document. for example, you would not want to do something like: .urgent {color: purple;} .urgent {color: yellow;} even though these are technically two distinct class names, browsers other than netscape 6 will treat them as though they are the same thing. therefore, authors should not
rely on case-sensitivity as a way of creating distinct identifiers, unless they are designing solely for a truly standards-compliant browser such as netscape 6. why so case-sensitive? netscape 6's unusual sensitivity to case is based on a close reading of the html 4.01 specification. in section 7.5.2, which defines class and ids, we find the following text: id = name [cs] this attribute assigns ...
...nsitive, there is an aspect of case-insensitivity to the use of id values. recommendation because of the flaws which are present in some existing implementations and the restrictions defined in html 4.01, it is doubly important to ensure that your class and id names are of a consistent case throughout a document, and that you do not attempt to define names which are case-insensitive matches.
related links html 4.01, section 7.5.2 html 4.01, section 12.2.3 original document information author(s): eric a. meyer, netscape communications last updated date: published 05 mar 2001 copyright information: copyright © 2001-2003 netscape. note: this reprinted article was originally part of the devedge site. ...
Creating a status bar extension - Archive of obsolete content
a web site the user can visit to get information about the extension, or to look for updates. this is not a required field, but including it is a nice thing to do. target application information it's also necessary to include information that identifies the application or applications in which your extension is designed to run. although this sample extension only works in firefox, it's enti
rely possible to create extensions that work in multiple xul-based applications. it's also necessary to indicate what versions of the target application or applications your extension supports. if it won't work in older versions of firefox, or hasn't been tested on newer versions, you can restrict the extension so that only supported versions of the target application will attempt to use it. the targ...
...s, status bars, menu bars, and the like. the chrome manifest file, chrome.manifest, for the sample follows. content status-bar-sample-1 chrome/content/ # firefox overlay chrome://browser/content/browser.xul chrome://status-bar-sample-1/content/status-bar-sample-1.xul the first line registers the location on disk of the contents of the extension whose id is "status-bar-sample-1". this path is
relative to the extension's root folder in this case, but can be absolute if you want it to be. the second line registers an overlay. an overlay lets you add new content to an existing document. in this case, we want to augment the ui of the firefox browser, so we specify the uri of the firefox main window's xul file, "chrome://browser/content/browser.xul", as the interface to overlay onto, and the u...
List of Mozilla-Based Applications - Archive of obsolete content
kazehakase gecko-based web browser for unix kirix strata data browser kiwix offline version of wikipedia kneemail prayer, praise, and journal application komodo and komodo edit and open komodo development tools mozilla-based application (pre-xulrunner style), xul ui kompozer wysiwyg html editor unofficial bug-fix
release of nvu kylo video browser uses gecko biofortis labmatrix web-accessible software application used for information management and integration of patient clinical, specimen, genetic and molecular assay data based on xul liaison groupware client for novell’s email and collaboration server previously called mozngw linbox kiosk browser (fr) ...
...r/identi.ca client uis university information system intranet application, 1000 users, thin client based on ff3 unison desktop enterprise email i think it's using mailnews code but don't have any information to link to. feel free to supply references. ...
Images, Tables, and Mysterious Gaps - Archive of obsolete content
almost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted tables and lots of images" paradigm. ...
... judicious mixture of approaches and a reduction of single-pixel image tricks-- which, in a css-capable browser, are unnecessary anyway-- it is quite possible to sidestep this strange effect of standards support. the best solution may be to ensure that images are always in a cell by themselves, thus allowing authors to make them block-level, but as always this will depend on the author's design.
related links gecko's almost standards mode mozilla's quirks mode original document information author(s): eric a. meyer last updated date: march 21st, 2003 copyright © 2001-2003 netscape. ...
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
or mozilla browsers) on windows. since the prospect of embedded gecko browsers raises the scenario of more than one gecko-based browser that a netscape-style plugin can work with, it becomes important to let plugin developers know how to discover these browsers on a windows machine. this information applies to mozilla based browsers that pull the mozilla codebase after the mozilla 0.9.1 milestone
release. none of the registry keys mentioned here are written by browsers before the mozilla 0.9.1 timeframe. for example, netscape 6.0 and 6.01 do not write any of these keys into the registry, and thus these keys are not available for plugin vendors to parse for these two browsers. netscape 6.1 and onwards, however, will write these keys, and so creating a plugin installer that puts the shared obje...
...by browsers before the mozilla 0.9.1 timeframe. for example, netscape 6.0 and 6.01 do not write any of these keys into the registry, and thus these keys are not available for plugin vendors to parse for these two browsers. netscape 6.1 and onwards, however, will write these keys, and so creating a plugin installer that puts the shared object (dll) in the right place becomes much easier, since the
relevant meta-information is present in the win32 system registry. these keys are written by the installer of mozilla browsers -- the netscape 6.2 installer, for example, writes these keys to the registry, and so does the mozilla installer (for versions after mozilla 0.9.1). other major commercial browsers based on gecko have committed to providing these keys as well. some gecko-based browsers provid...
No Proxy For configuration - Archive of obsolete content
ally 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. in almost all cases, pac gives better control and flexibility. user interface "no proxy for" is an optional field, part of "manual proxy configuration". the field is
relatively short, but can hold reasonably long (2k+ characters) entries. new profiles contain the values "localhost, 127.0.0.1", by default. entry points: preferences | advanced | proxies control-click menu for off line-online icon (network plug) configuration the no proxy list is composed of either domain elements or ipv4 address elements. the elements are separated by either a space (" ") ...
... :81 www.mozilla.org:81 proxy developer notes the no_proxy for logic is written in c++. pac is written in js, so there are potential problems with feature consistency and porting. david baron has pointed out that the original pac code in the "classic" tree is written in c++. the pac in c++ has not been tested in mozilla, so porting pac in c++ forward would not be a panacea. the
relevant code lives in nsprotocolproxyservice.cpp. nsprotocolproxyservice::prefschanged - loads preferences nsprotocolproxyservice::loadfilters - parses filters nsprotocolproxyservice::examineforproxy - decides to check filters if configuration is "manual" nsprotocolproxyservice::canuseproxy - performs url vs. filter comparison notable bugs bug 172083 - [meta] proxy: "no proxy for" items ...
Using content preferences - Archive of obsolete content
e.setpref(uri, "devmo.somesetting", "foo"); ... // retrieve the value of the "devmo.somesetting" preference. var value = prefservice.getpref(uri, "devmo.somesetting"); built-in site-specific preferences preference name menu equivalent values notes browser.content.full-zoom view / zoom example: "1.10000002384186" (rounding variant of "1.1")
related about:config preferences: browser.zoom.full boolean, set by the menu item view / zoom / zoom text only. despite the confusion in names, this preference is not site-specific. browser.zoom.sitespecific toolkit.zoommanager.zoomvalues zoom.maxpercent and zoom.minpercent browser.download.lastdir path o...
...s: browser.zoom.full boolean, set by the menu item view / zoom / zoom text only. despite the confusion in names, this preference is not site-specific. browser.zoom.sitespecific toolkit.zoommanager.zoomvalues zoom.maxpercent and zoom.minpercent browser.download.lastdir path of a filesystem directory
related about:config preferences: browser.download.lastdir the last directory for any site use downloadlastdir.jsm for access to these preferences. browser.upload.lastdir path of a filesystem directory this preference is stored and retrieved automatically by file upload controls. spellcheck.lang language code (e.g., "en-us") ...
Working with BFCache - Archive of obsolete content
nt) stays right where it is. it just has its inner window and document replaced. the inner nsidomwindow (the global scope object in content js) is either thrown away when gc happens, or frozen and placed in the bfcache. when the user hits the 'back' button, either the window in bfcache is thawed or a new inner window is created, depending on whether there's a window in the bfcache. q: is the page
reloaded? loaded from cache? or is the dom saved in some way as if the window was there but invisible? are scripts recompiled? where do they live while the page was invisible? a: in the non-bfcache case, the page is
reloaded in the sense of reparsing from the original html source. that might come from the http cache or not, depending on whether it's been evicted; typically it does come from the http ...
...in the bfcache case, freezing the window just marks it as frozen; the dom is preserved, as are compiled script objects. thawing marks it as thawed. freezing suspends timeouts and interval timers on the frozen window, so they won't execute. ...
Autodial for Windows NT - Archive of obsolete content
e the autodial feature of the os, i added the autodial helper feature requested in bug 93002. how the feature works this feature doesn't do anything on linux, mac, or the consumer versions of windows. the "correct" way too use the autodial feature in nt-based oss is for the user to configure the system to use the autodial service. if the user has a modem and no lan card, this service will work
reliably for them. whenever an internet address cannot be reached, because of a dns lookup failure for example, the system will try to dial. however, if the user has both a modem and a lan card, the service will be less
reliable for them. the only way the service will work in this case is if the internet address has been accessed some previous time via the modem. these addresses are stored in an os d...
...d trigger dialup or disconnect. this is a misunderstanding of this mode. hanging up a dialup connection should not cause mozilla to go into offline mode. making a dialup connection should not cause mozilla to go into online mode. a pref to disable users can bypass the feature altogether by setting the pref network.autodial-helper.enabled to false. since the feature was implemented close to the
release of netscape 7, the pref was added so that we could include the feature in the 7.0
release with the feature turned off and enable it in specific cases. the feature was turned on in mozilla 1.1 to get more exposure. mozilla 1.1 also includes a fix to bug 157733, which allows our interaction with the autodial service to work a little more
reliably. i don't see a need to expose this pref in the u...
How Thunderbird and Firefox find their configuration files - Archive of obsolete content
pecified directory, in a file named prefs.js. this is a readable file of javascript commands. all other files in that directory are dynamically created by mozilla on first start. unlike mozilla's binary registry.dat file, thunderbird's and firefox' profiles.ini file is a readable text file. here is an example of what this may look like: [general] startwithlastprofile=1 [profile0] name=default is
relative=1 path=profiles/default.uda if you want to point this to a location of your choice (for example h:\thunderbird), you need to perform to changes: set is
relative to be 0 update the path to point to the desired place. note: for absolute paths thunderbird uses dos'ish backslashes (\) rather than unixish slashes (/). you'd obtain a file such as the following: [general] startwithlastprofile=1 [...
...ault.uda if you want to point this to a location of your choice (for example h:\thunderbird), you need to perform to changes: set is
relative to be 0 update the path to point to the desired place. note: for absolute paths thunderbird uses dos'ish backslashes (\) rather than unixish slashes (/). ...
Bookmark Keywords - Archive of obsolete content
ded information. for example, a keyworded bookmark could be set up so that a user could type <tt>google spam and eggs</tt> and thereby trigger a google search for the words "spam and eggs." because these tools require bookmarks with specific keywords in order to work, they will be referred to hereafter as keymarks, as distinct from regular bookmarks. laying the groundwork we're going to pick a
relatively easy example to illustrate this process: a keymark that will let the user jump straight to a specific bugzilla entry by entering its number. the quickest way to start is to simply look up any random bug in the bugzilla system-- the actual number doesn't matter. see figure 1 for an example. to file this bookmark open the "bookmarks" menu in the browser and select "add bookmark," or by of u...
...r, and the browser will jump right to the bug with that number. this is illustrated in figure 6. that's all it takes! setting up a google keymark to set up a keymark that will search google directly form the address bar, go to google and run a search for any word. once you get a result page, bookmark that page. you'll need to replace the word for which you searched. one such example, with the
relevant term highlighted, is shown in figure 7. once this result page has been bookmarked, we need only adjust the boookmark's properties. in this case, we'll give it a keyword and title of google and replace the term "geitost" with the %s, as shown (with extra highlighting) in figure 8. now we can run google searches straight from the address bar. these searches can be as complex as google will t...
Installing Dehydra - Archive of obsolete content
68. there is no need for some installation after make. you can skip the next section "building gcc 4.5" if you are using gcc 4.6 or above. building gcc 4.5 for treehydra's process_tree_decl to work, when compiling with g++, you must use a patched gcc 4.5 before building dehydra. cd $home # obtain gcc 4.5.3 (see http://gcc.gnu.org/mirrors.html for alternate mirrors) wget http://www.netgull.com/gcc/
releases/gcc-4.5.3/gcc-4.5.3.tar.bz2 tar -jxvf gcc-4.5.3.tar.bz2 # apply plugin_finish_decl patch wget https://bug559964.bugzilla.mozilla.o....cgi?id=457606 -o finish_decl.diff cd gcc-4.5.3 patch -p0 < ../finish_decl.diff # build gcc cd .. mkdir gcc-objdir mkdir gcc-dist cd gcc-objdir ../gcc-4.5.3/configure --disable-bootstrap --enable-languages=c,c++ --prefix=$pwd/../gcc-dist make make install b...
...kdir gcc-dist cd gcc-objdir ../gcc-4.5.3/configure --disable-bootstrap --enable-languages=c,c++ --prefix=$pwd/../gcc-dist make make install building dehydra and treehydra building dehydra requires spidermonkey development headers from the previous step. cxx should point to your copy of gcc 4.5. it is recommended to get the latest dehydra sources by checking out from mercurial. (obsolete dehydra
releases can be found on the mozilla ftp site.) hg clone http://hg.mozilla.org/rewriting-and-analysis/dehydra/ cd dehydra export cxx=/usr/bin/g++ ./configure \ --js-headers=$home/obj-js/dist/include \ --js-libs=$home/obj-js make # run dehydra and treehydra tests make check usage dehydra checking can be performed directly within the mozilla build. to enable static checking of a mozilla build, ...
Dehydra - Archive of obsolete content
examples for getting started writing analysis scripts. dehydra function reference callback and utility functions for dehydra scripts. dehydra object reference javascript objects and properties provided by dehydra. ...
...aq answers to common questions static analyses analyses being worked on for mozilla 2 todo steps to dehydra 1.0
release community view dehydra forums... ...
Drag and Drop - Archive of obsolete content
one to drag particular objects around within the interface. for example, dragging files to other directories, or dragging an icon to another window to open the document it refers to. mozilla and xul provide a number of events that can handle when the user attempts to drag objects around. a user can start dragging by holding down the mouse button and moving the mouse. the drag stops when the user
releases the mouse. event handlers are called when the user starts and ends dragging, and at various points in-between. mozilla implements dragging by using a drag session. when a user requests to drag something that can be dragged, a drag session should be started. the drag session handles updating the mouse cursor and where the object should be dropped. if something cannot be dragged, it should no...
... can be dropped on it. ondragexit called for an element when the mouse pointer moves out of an element while something is being dragged. the is also called after a drop is complete so that an element has a chance to remove any highlighting or other indication. ondragdrop this event handler is called for an element when something is dropped on the element. at this point, the user has already
released the mouse button. the element can simply ignore the event or can handle it some way, such as pasting the dragged object into itself. ondragend called when the drag operation is finished. there are two ways that drag and drop events can be handled. this first involves using the drag and drop xpcom interfaces directly. the second is to use a javascript wrapper object that handles some of...
Block and Line Layout Cheat Sheet - Archive of obsolete content
given ns_unconstrainedsize as its available width in the nshtmlreflowstate. brs_unconstrainedheight this flag is set in the nsblockreflowstate constructor when the frame being reflowed has been given ns_unconstrainedsize as its available height in the nshtmlreflowstate. if set, ns_unconstrainedsize is passed to nslinelayout as the available height. brs_shrinkwrapwidth brs_needresizereflow
related to brs_shrinkwrapwidth. set if we need to force a resize reflow when computing the final size. e.g., because...why? brs_isinlineincrreflow this flag is set in nsblockframe::reflow() if we detect that we're incrementally reflowing a linebox that contains inline frames. in this case, we can avoid some of the work that occurs during reflow. brs_nowrap this flag is set in the nsblockreflowsta...
.... mflags ll_endsinwhitespace set to true by default when starting line layout. ll_understandsnwhitespace ll_textstartswithnbsp ll_firstletterstyleok ll_istopofpage ll_updatedband ll_impactedbyfloaters ll_lastfloaterwasletterframe ll_canplacefloater ll_knowstrictmode ll_instrictmode ll_lineendsinbr perframedata (why isn't this just stored in the frame?) mflags pfd_
relativepos pfd_istextframe pfd_isnonemptytextframe pfd_isnonwhitespacetextframe pfd_isletterframe pfd_issticky pfd_isbullet perspandata in nslinelayout, a "span" is a container inline frame, and a "frame" is one of its children. perhaps perparentdata and perchilddata would be better names? nslinelayout::beginlinereflow creates the initial perspandata which is called the "root span". ...
Building Firefox with Rust code - Archive of obsolete content
section called including rust code in firefox. firefox uses the rust programming language extensively. this page is a rough guide for people using rust in firefox. see also the documentation on this topic on the oxidation wiki page. adding rust code we generally target stable rust, but sometimes issues temporarily require a beta or custom toolchain build. our goal is to always ship a firefox
release build with a stable rust toolchain
release. if you don't have rust already, use the rustup tool to install it and update as new
releases become available, or use the ./mach bootstrap command. the build system will generate a special 'rust unified library' crate, compiled to a static library (libgkrust.a) which is in turn linked into xul, so all public symbols will be available to c++ code. ...
...you are strongly encouraged to remove dependencies for those features when importing code so the build system doesn't require that (unused) code to live in-tree. the build system will check that there's only one copy of a given crate in a build; this was a deliberate decision to try and avoid code bloat in libxul. if this turns out to be a serious problem in practice, we can look into ways of
relaxing that check. if you need to locally patch a third-party crate, you'll need to add a [replace] section to the referencing cargo.toml to declare that the vendored source shouldn't match the upstream
release. this works even if you use the existing vendored source location, but be aware that other vendor updates could clobber your patch in that case. testing rust code there's a simple linkag...
Layout System Overview - Archive of obsolete content
architecture of the layout system included the creation of frames for elements with no display. this changed somewhere along the line, but there is no indication of why the change was made. 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. this is presumably
related to the fact that layout is responsible for form submission, but this is a design flaw that is being corrected by moving form submission into the content world. these collections of forms and form controls should be removed eventually. css frame constructor the frame constructor is responsible for resolving style values for content elements and creating the appropriate frames corresponding to ...
...roduces the ability to manage a list of child frames. all frames that need to manage child frames (e.g. frames that are not themselves leaf frames) derive from container frame. block frame reflow state reflow metrics space manager styleset stylecontext see also layout faq document history 05/20/2002 - marc attinasi: created, wrote highest level introduction to general layout concepts, links to
relevant specs and existing documents. original document information author(s): marc attinasi last updated date: november 20, 2005 ...
Style System Overview - Archive of obsolete content
ssimportantrule 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. various rules in nshtmlstylesheet.cpp do other things with presentational color-
related attributes and with tables. content nodes (instead of stylesheets) also hold onto cssstyleruleimpl objects that represent their style attributes. the cascade stylesetimpl manages the different origins of rules in the cascade (ua, user, author) style set gets the nsistyleruleprocessor implementations from the style sheets, and the css stylesheets force one cssruleprocessor per origin (r...
... we cache the struct in the rule tree, on the first rule node that contributed any data, and mark dependent bits on the path up to that rule node. managing style contexts style contexts must (in most cases) be created before frames are constructed, to determine what frame to create. parent style context determines inheritance; it should always be the content parent. [design flaw in frame/sc
relationship] three functions for creating style contexts on nsistyleset, wrapped by similarly named ones on nsiprescontext: resolvestylecontextfor: for elements. resolvepseudostylecontextfor: for pseudo-elements (:first-letter, :before, etc.) resolvestylecontextfornonelement: skips rule matching and uses root rule node (text frame optimization) managing style contexts style co...
Firefox Sync - Archive of obsolete content
these components and services include: firefox sync client the sync client bundled with mozilla products. it exists as a core javascript module providing generic functionality and ui components for each product. server a server implementation of the sync http protocol. clients communicate through it. firefox home an ios application that functions as a sync client. mozilla server instance an instance of the server deployed and maintained by mozilla. if you use sync in your browser, this is what it talks to by default. ...
...finitive source for these specifications is http://docs.services.mozilla.com/. running a server it is possible to run your own sync server instance. full instructions are available at http://docs.services.mozilla.com/howtos/run-sync.html. ...
Jetpack Snippets - Archive of obsolete content
bits of code that may come in handy. ...
...ture.import("slidebar");jetpack.slidebar.append({ html: <html><head></head><body> <p>some slidbar you want to debug</p> <a href="javascript:console.log('hello!')">test</a> <script><![cdata[ //firebug lite bookmarklet code: var firebug=document.createelement('script'); firebug.setattribute('src','http://getfirebug.com/
releases/lite/1.2/firebug-lite-compressed.js'); document.body.appendchild(firebug); (function(){if(window.firebug.version){firebug.init();}else{settimeout(arguments.callee);}})();void(firebug); ]]></script> </body></html>, width: 800, //wide enough to use firebug onselect: function(slide) { slide.slide(800, true); }}); calling int...
Simple Storage - Archive of obsolete content
it's a simple key-based persistent object data store. simple storage is really simple. jetpack.storage.simple is a single, persistent javascript object private to each jetpack. ...
... it wants on it. to manipulate its persistent data, a jetpack therefore need only use the various standard javascript functions and operators. the jetpack.simple.storage object is automatically and periodically flushed to disk. how and when it is flushed is an implementation detail. jetpacks can flush it manually, however, by calling jetpack.storage.simple.sync(). the object can also be forced to
reload its data from disk by calling jetpack.storage.simple.open(), although the data comes loaded automatically. don't abuse these methods, since they cause firefox -- all of firefox -- to drop what it's doing to make a trip to the disk. if you call them too often, firefox may become unresponsive for some of your users. unless you are doing something strange, let jetpack flush your data for you. the...
jspage - Archive of obsolete content
e=="css1compat")?k.html:k.body; var i={x:a.pagex||a.clientx+k.scrollleft,y:a.pagey||a.clienty+k.scrolltop};var c={x:(a.pagex)?a.pagex-f.pagexoffset:a.clientx,y:(a.pagey)?a.pagey-f.pageyoffset:a.clienty}; if(j.match(/dommousescroll|mousewheel/)){var h=(a.wheeldelta)?a.wheeldelta/120:-(a.detail||0)/3;}var e=(a.which==3)||(a.button==2);var l=null;if(j.match(/over|out/)){switch(j){case"mouseover":l=a.
relatedtarget||a.fromelement; break;case"mouseout":l=a.
relatedtarget||a.toelement;}if(!(function(){while(l&&l.nodetype==3){l=l.parentnode;}return true;}).create({attempt:browser.engine.gecko})()){l=false; }}}}return $extend(this,{event:a,type:j,page:i,client:c,rightclick:e,wheel:h,
relatedtarget:l,target:g,code:b,key:m,shift:a.shiftkey,control:a.ctrlkey,alt:a.altkey,meta:a.metakey}); }});event.keys=ne...
...});element.nativeevents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.
relatedtarget;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.haschild(c)); };element.events=new hash({mouseenter:{base:"mouseover",condition:a},mouseleave:{base:"mouseout",condition:a},mousewheel:{base:(browser.engine.gecko)?"dommousescroll":"mousewheel"}}); })();element.properties.styles={set:function(a){this.setstyles(a);}};...
New Security Model for Web Services - Archive of obsolete content
ed resources. also, this technique prevents the script from accessing many legitimate external resources not provided in the same domain as the script. this prevents a script from accessing web services and data published from any domain besides its own. 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 ac...
...soap messages from being sent to non-soap addresses, which is a big enough problem that the verification cannot stand alone to guarantee that untrusted service requests are always properly rejected by services that should be firewall-protected. it may also be inconvenient to modify a soap service to ignore the specific verification header. using a declarations file a more robust solution is to
rely on getting a file named "web-scripts-access.xml" in the root directory of the server that the sandboxed script requests to communicate with. it should be fairly easy for most providers of public resources to create. web scripts access statements the syntax of statements of the access file are as follows. <!element webscriptaccess (delegate?|allow*)> <!element delegate empty> <!element allow e...
Plug-n-Hack Phase1 - Archive of obsolete content
ribes the commands the browser can invoke. serving manifests from outside of your tool you may want to serve manifests from a separate webserver (e.g. for testing); plug-n-hack requires tool and service manifests to be served from the same origin as the api endpoints but, for testing purposes, ringleader (the firefox addon implementation of the browser component) allows you to set a preference to
relax or disable origin checks. the preference is ringleader.check.origin this can be set to 'off' to disble origin checks completely, or 'noport' to disable only port checks. security tool commands manifest an example commands manifest (for owasp zap) is: https://code.google.com/p/zap-extensions/source/browse/branches/beta/src/org/zaproxy/zap/extension/plugnhack/resource/service.json firefox ui in f...
...mands, 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. pnh does not specify how tool commands should be displayed, so other browsers are free to display them in different ways.
related links plug-n-hack overview ...
Supporting per-window private browsing - Archive of obsolete content
nsiwebbrowserpersist) take nsiloadcontext arguments that are used to determine whether they should be classed as private or not (for example, whether the uri being persisted by saveuri should be added to the permanent download history). ...
...he uri being persisted by saveuri should be added to the permanent download history). to do this, import resource://gre/modules/privatebrowsingutils.jsm and use privatebrowsingutils.getprivacycontextfromwindow(win), passing a window object that is
related to the content in question. as an example, if an add-on adds a context menu item that accesses an api that requires an nsiloadcontext, the most
relevant window is the one that owns the element being targeted by the context menu (element.ownerdocument.defaultview). if some action triggered by a chrome element (such as a button) requires an api that takes a privacy context, the most
relevant window is the one that contains the chrome element. in some cases, there is no logical window object to use (such as when data or an action originate from...
Abc Assembler Tests - Archive of obsolete content
compare_numbereq(name:string, expected:*, actual:*, fractiondigits:int=-1):void - compare 2 numbers up to fractiondigits this is to be used for high precision numbers that may vary slightly due to platform differences. sample abcasm test /* ***** begin license block ***** * version: mpl 1.1/gpl 2.0/lgpl 2.1 * * the contents of this file are subje...
...compare_numbereq(name:string, expected:*, actual:*, fractiondigits:int=-1):void - compare 2 numbers up to fractiondigits this is to be used for high precision numbers that may vary slightly due to platform differences. sample abcasm test /* ***** begin license block ***** * version: mpl 1.1/gpl 2.0/lgpl 2.1 * * the contents of this file are subject to the mo...
Running Tamarin acceptance tests - Archive of obsolete content
as described above. set the shellabc environment variable to the path of the generated/shell_toplevel.abc. $ cd tamarin-redux/test/acceptance $ export asc=/users/build/hg/tamarin-redux/utils/asc.jar $ export builtinabc=/users/build/hg/tamarin-redux/generated/builtin.abc $ export shellabc=/users/build/hg/tamarin-redux/generated/shell_toplevel.abc $ export avm=/users/build/hg/tamarin-redux/objdir-
release/shell/avmshell $ python runtests.py tamarin tests started: 2010-09-28 10:37:06.410676 current configuration: x64-mac-tvm-
release avm version: 5260:6d1899261bac executing 2532 tests against vm: /users/build/hg/builds/5260-6d1899261bac/mac/avmshell_64 2532 running abcasm/abs_helper.as skipping... reason: 2531 running abcasm/adhoc.abs skipping... reason: inconsistencies in different debug ou...
...ads to run tests in parallel and reduces running times dramatically. you must, in any case, at least use --androidthreads or --threads=1 (or will fail due to multiple tests running). $ cd tamarin-redux/test/acceptance $ ./runtests.py --androidthreads note on using an emulator: the emulator does seem to support hardware floating point but gives a buserror when running avmshell -darm_vfp. it's un
reliable, losing its adb connection frequently. an emulator is ok for testing a few abc files but for any consistency a real device is better. ...
Tamarin Build System Documentation - Archive of obsolete content
s, most frequent failures, and the newest testcases. the idea is to catch test failures in a few minutes rather than running the complete test run (1h 45m). the smoke test including downloading the shell takes about 3-4 minutes. the test phase runs all functional testcases including acceptance tests, cmdline tests, and selftests. the acceptance tests are the majority and are run on all shells (
release,
release-debugger, debug, debug-debugger). the test phase takes approximately 1 hour 45 minutes. the performance and deep phases do not run synchronously. the phases run when slaves are available and the other phases do not wait for completion to start the next build. how are builds triggered? checkins (hg push) to http://hg.mozilla.org/tamarin-redux and sandbox requests will trigger a ...
... directory: cp -r mac-intel-10_5/scripts . ; cd scripts edit environment.sh, change the basedir and buildsdir settings (around line 51) basedir=~/hg/tamarin-redux (path to my test repository) (next line) buildsdir=~/hg/builds (a directory to store downloaded builds) always set current working directory to the scripts directory when running a script run a script (e.g.) ../all/run-acceptance-
release.sh <optional hg revision number like 1902> how do i navigate the build status page? the page is divided into the phase table at the top and the waterfall table below the phase table shows all phases at the top of the page, each slave is shown as a box with a red,green, or yellow color: red means failed, green passed, and yellow has warnings. the phase state is idle or active click on the...
Tamarin Roadmap - Archive of obsolete content
the tamarin roadmap is intended to provide visibility into planned features and
release dates. the roadmap is a living document representing current best thinking and is subject to change. comments or questions are welcome and encouraged via the tamarin-devel mailing list. ...
... features and
release dates. the roadmap is a living document representing current best thinking and is subject to change. comments or questions are welcome and encouraged via the tamarin-devel mailing list. tc jan '09 feature links status integrate the tt string class tamarin:string implementation tamarin:strings bug 465506 complete enhanced c++ profiler enhance memory profiler to work in
release builds and be more performant in progress enable lir for arm targets bug 460764 complete amd64 nanojit bug 464476 in progress port nanojit to powerpc bug 458077 complete add mac-x64 and linux-x64 buildbots complete fail build on assertion in acceptance tests complete merge tracking bug bug 469836 in progress tc feb '09 spring backlog tbd. ...
TraceVis - Archive of obsolete content
so far, most of the documentation on tracevis is contained in the announcement blog post. ...
...python imaging library). building with tracevis these are the steps to build a js shell with tracevis, starting from a mozilla source directory. these directions create an optimized build, because optimized builds are usually better for performance analysis. cd js/src autoconf213 mkdir opt-tracevis cd opt-tracevis ../configure --enable-tracevis make -j2 the resulting binary will be at dist/bin/js
relative to the current directory. running with tracevis to run a shell with tracevis: dist/bin/js -j -t /tmp/tracevis.log myprogram.js the tracevis log file is a binary file consisting of a sequence of 8-byte records. there are two scripts for postprocessing the log files in js/src/tracevis. text summary python binlog.py /tmp/tracevis.log this prints a summary of the log. the first part lists the t...
Example Sticky Notes - Archive of obsolete content
nt. unlike virtual property it is called in function context: this.setborder(arg) you also may define any amount of named arguments using <parameter name="argumentname"/> --> <parameter name="arg"/> <body><![cdata[ this.style.border = arg; ]]></body> </method> </implementation> <handlers> <!-- event handlers. mouse events sent to bindings are refactored, so event.target / event.
relatedtarget always points to the bound element, even if it was originated to/from a child. --> <handler event="click"><![cdata[ if (this.priority == 'normal') { this.priority = 'high'; this.setborder('2px solid red'); } else { this.priority = 'normal'; this.setborder('2px solid blue'); } var str = this.innertext + '\n\n'; str+= ('on ' + event.type + ' priority set to: ' + this.pr...
...nt.type + ' priority set to: ' + this.priority); window.alert(str); ]]></handler> <handler event="mouseover"><![cdata[ this.$bg = this.style.backgroundcolor || '#ffff00'; this.style.backgroundcolor = '#ffcc00'; ]]></handler> <handler event="mouseout"><![cdata[ this.style.backgroundcolor = this.$bg; ]]></handler> </handlers> </binding> </bindings> notes.css .sticker { position:
relative; left: 0px; right: 0px; float: left; clear: none; width: 10em; height: 10em; overflow: visible; margin: 1em 1em; padding: 0.5em 0.5em; border: 2px solid blue; background-color: yellow; font: 1em normal "times new roman",serif; font-style: italic; cursor: default; } view this example ...
Creating XPI Installer Modules - Archive of obsolete content
d installed. though the chrome directory still includes subdirectories of uncompressed files by default, a new way to aggregate and distribute the files has improved performance, made the ui components more portable and easier to install, and made the installation process a much easier one. however, this new arrangement does not make things much easier for the web or user interface developer. the
relatively simple process of finding the appropriate resources (i.e. xul, javascript, or css files) in the chrome subdirectories and editing them with a text editor has been replaced by something a lot of developers find more confusing and esoteric. this article describes the new packaging scheme of mozilla and offers a tutorial for creating a new package that can then be redistributed, installed, an...
...gif barley.js barley.xul creating the contents.rdf file one of the most important ingredients of the software package is the contents.rdf file that describes the contents of the package in terms that the chrome registry can make sense of. for a package such as this one with its own content but no special localization or custom skin, the contents.rdf file describes package in terms of its
relation to the "root" package of mozilla. 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"> <...
Learn XPI Installer Scripting by Example - Archive of obsolete content
r available. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. this article uses the installer script from browser.xpi install package as the basis for discussing xpi installations in general. this installer script is
relatively short, but it exercises most of the important features of the xpinstall api, and it can easily be used as a template for other more general software installations. in this article, we use the unix install file, but the installers for all the platforms are quite similar, and you can easily take what you learn here and apply it to installations on any platform that mozilla supports. about b...
...re the contents.rdf file is located. see registerchrome in the xpinstall api reference for more information about registering new packages with the chrome registry. executing the installation once you have added all the files to the installation, the final step is to actually execute the installation. note that until this point, the install calls you have been making on the install object are p
reliminary only. recall that an install process takes the following general form: initinstall(); if (verify_space()) { err = add_dirs_and_files; register_files; if (err==success) { performinstall() }; else { cancelinstall() }; } in this arrangement, the actual execution of the installation is checked against the errors returned from the addition of files to the installation, which may...
XPJS Components Proposal - Archive of obsolete content
ts. we will have one native module - called the xpjsmanager - which holds this system together. the xpjsmanager is in charge of loading these .js files, helping them register themselves, and acting as an intermediary between the xpcom component manager and the js code. xjs components are not run in browser windows. each .js file (let's call it a module) is started up and run in the context of a
relatively 'raw' js global object. the standard (non-dom) js classes will be available. the xpconnectcomponents object will be available. and some additional yet to be defined objects may be available. the xpconnectcomponents object allows access to the whole repository of native and js xpcom components, so this is not as isolated an environment as it might at first sound. a 'load' or 'import' funct...
...sruntime; i.e. erasing the entire js universe]. in c if a module gets unloaded when there are still references to objects created by the module then a crash is likely to happen soon after. js does not have this problem. if the xpjsmanager is asked to trim itself back (by whatever means) it will call the nscanunload method (if present) on each module. it the module oks it then the xpjsmanager will
release its root of the module's global object and
release any hold over the objects in the module. any subsequent requests from the component manager that would result in nsgetfactory calls into the module will force the xpjsmanager to load up a new instance of the .js file and start over. so, these xpjs component modules are safely unloadable, but have the power (like native modules) to veto any at...
popup.position - Archive of obsolete content
this value can be specified either as a single word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should be aligned. ...
... this value can be specified either as a single word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should be aligned. ...
reserved - Archive of obsolete content
ement. setting this attribute to "true" indicates that the command is reserved for chrome code and is not available for use in the 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. currently, the content still receives these key events, even though it can't override them. in future
releases, it won't receive them. see bug 1173061 for details. 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, t...
... ...
Accessing Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! 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. accessing files this section describes how to cr...
...nd save dialogs, reading textual data, writing textual data, list of file-
related error codes. accessing files this section describes how to create a file reference. retrieving a file when working with files, usage is always done via a file object and not via string paths. this allows files to used in a portable way. because string paths are not used, references to files in a file object are made
relative to some starting directory. a number of starting directories may be used, for instance, the user's home directory, the desktop, the system's temporary folder, and so forth. once one of these starting directories is determined, a file reference may be created
relative to this. a common case is to write a file in the directory that holds the user's preferences. this is a convenient location wh...
Moving, Copying and Deleting Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! 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. there are several methods of the nsifile object...
...otherimage.png"); here, a file is copied within the same directory as the supplied destination is null. a number of errors could occur when copying a file, for instance if the file to copy does not exist or the destination directory is not writable. it is a good idea to enclose file operations within a try-catch block in order to capture any errors that might occur. for a list of possible file
related errors, see file errors. moving a file to move a file, nsifile.moveto() may be used which functions similarly to nsifile.copyto(). the following example moves a file 'myfile.txt' in the user's home directory into the temporary directory. as with nsifile.copyto(), nsifile.moveto() takes two arguments, the destination directory and the new filename. if you do not want to rename the file and k...
Menus - Archive of obsolete content
nu_toolspopup the menupopup associated with the 'tools' menu. menu_helppopup the menupopup associated with the 'help' menu. menu_viewsidebarmenu the menupopup for the 'sidebar' submenu on the 'view' menu. menuwebdeveloperpopup the menupopup for the 'web developer' submenu on the 'tools' menu. firefox context menu element id description
relevant context contentareacontextmenu the popup for the context menu when a web page is displayed in the browser area. spell-no-suggestions the no spelling suggestions item - notable as it is the first item on the context menu. editable text context-openlink opens a link in a new window links context-openlinkintab opens a link in a new ...
...rd images context-saveimage saves an image images context-sendimage sends an image in an email images context-setdesktopbackground sets an image as the desktop background images context-blockimage blocks an image images context-back goes back a page context-forward goes forward a page context-
reload
reloads a page context-stop stops loading a page context-bookmarkpage bookmarks a page context-savepage saves a page context-sendpagetodevice send page to device context-sendpage send page in an email context-viewbgimage views a background image context-undo undo editabl...
Introduction to XUL - Archive of obsolete content
t introduction to mozilla front-end architecture, concentrating on the task of building uis. it is, as always, incomplete. mozilla applications will be built of "small" components like dialog buttons and mail inbox folders, which we collectively term "widgets." within a widget, drawing and user interactions are completely under control of the individual widget, and set when the widget was built.
relative placement of widgets, their interactions with each other, and optionally some of their configuration, will be controlled by a ui layout specified in a script whose structure is defined in this and
related documents. widgets are pieces of the application largely self-contained, generally corresponding to a rectangle of window real estate. widgets will generally live grouped in separate, dyna...
...f (checkbox) checkbox.checked = true; } </html:script> javascript can be referenced as in html documents: as onclick handlers and the like. see individual widget documentation referenced at the index for a list of attributes accepting javascript values. ...
loadOneTab - Archive of obsolete content
}) return type: tab element opens a new tab that loads a page with the specified url. the rest of the parameters are optional. this method works the same as addtab except for the loadinbackground parameter which allows you to choose whether to open the new tab in foreground or background. ...
...o owner parameter as the owner tab is specified automatically. parameters inbackground if true the tab will be loaded in the background, if false the tab will be the newly selected tab. and if null or not specified, this parameter will default to the browser.tabs.loadinbackground preference. firefox 3.6 note the second form of this method was added in firefox 3.6; it adds the
relatedtocurrent parameter, and allows the parameters to be specified by name, in any order. ...
openPopup - Archive of obsolete content
anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same document as the popup. unanchored popups may be created by supplying null as the anchor node. ...
...ore, start_after, end_before, end_after, overlap, and after_pointer. check positioning of the popup guide for a precise description of the effect of the different values. x, y for an anchored popup, the x and y arguments may be used to offset the popup from its anchored position by some number, measured in css pixels. an unanchored popup appears at the position specified by x and y,
relative to the viewport of the document containing the popup node. in this case, the position and attributesoverride arguments are ignored. iscontextmenu the iscontextmenu argument should be true for context menus and false for all other types of popups. it affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their item...
showPopup - Archive of obsolete content
« xul reference home showpopup( element, x, y, popuptype, anchor, align ) deprecated since gecko 1.9 return type: no return value deprecated in favor of openpopup and openpopupatscreen opens a popup element. there are two ways of specifying where the popup appears, either at a specific screen position, or
relative to some element in the window. if either x or y are set to values, the popup will appear at the screen coordinate (x,y). if x and y are -1, the popup will be positioned
relative to the element specified as the first argument. this is what you might do to show a popup below a button, for example. in this latter case, the anchor and align arguments may be used to further control where the popup appears
relative to the element. the anchor argument corresponds to the popu...
...on, for example. in this latter case, the anchor and align arguments may be used to further control where the popup appears
relative to the element. the anchor argument corresponds to the popupanchor attribute on the element. the align argument corresponds to the popupalign attribute on the element. the anchor and align arguments are ignored if either x or y are not -1. to have a popup appear
relative to another element yet still offset by some number of pixels, determine the actual screen position of the element using the boxobject.screenx and boxobject.screeny properties of the element, and use those as the x and y arguments offset by the desired values. the popuptype should be one of the strings popup, context, or tooltip. each type of popup is intended to be displayed only tempora...
Methods - Archive of obsolete content
goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto movetoalertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferencefo
relement
reload
reloadalltabs
reloadtab
reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurrenttab removeitemat removeitemfromselection removenotification removeprogresslistener removesession removetab removetabsprogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scroll...
...ner 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.ge...
Extensions - Archive of obsolete content
he following: <menupopup id="menu_toolspopup"> <menuitem label="thesaurus"/> </menupopup> note that other extensions may be adding their own items into the same menus. because of this, the new item might not appear at the end of the menu but before a menuitem added by another extension, depending on the order in which the overlays are applied. as you cannot predict this order, you should not
rely on any menuitems being in particular positions in the presence of other extensions. modifying the context menu an extension may wish to modify the context menu associated with the browser area. normally, this menu displays menu items specific to what was context clicked or focused. for instance, opening a context menu for a link displays items to open the link in a new window or tab and to sav...
...ith manually. the following are the most common properties that you can check. an example follows. target the element that was context clicked. if the keyboard was used to open a context menu, this will be the focused element. ontextinput true if the target is a plain or password type input, a textarea, or an editable area. this would be used to enable or disable commands
related to text editing. onimage true if the target is an image. hasbgimage true if the target or an ancestor has a background image. onmathml true if the target is a mathml element. onlink true if the target is a link. onmailtolink true if the target is a link to an email address (a mailto: link). linkurl the url of the link tha...
Sorting and filtering a custom tree view - Archive of obsolete content
this is useful if this is an editable table //to prevent the user from losing the row they edited var topvisiblerow = null; if (table) { topvisiblerow = gettopvisiblerow(); } if (data == null) { //put object loading code here. for our purposes, we'll hard code it. data = []; //the property names match the column ids in the xul.
...opvisiblerow) { return tree.treeboxobject.scrolltorow(topvisiblerow); } function inputfilter(event) { //do this now rather than doing it at every comparison var value = prepareforcomparison(event.target.value); setfilter(value); document.getelementbyid("clearfilter").disabled = value.length == 0; } function clearfilter() { document.getelementbyid("clearfilter").disabled = true; var filte
relement = document.getelementbyid("filter"); filte
relement.focus(); filte
relement.value = ""; setfilter(""); } function setfilter(text) { filtertext = text; loadtable(); } ...
Template and Tree Listeners - Archive of obsolete content
o guess that the builder's root property, which is used above, refers to the tree. in a content builder, it will return the element with the datasources attribute, which in the template builder is referred to as the root element. finally, you can remove a listener using the builder's removelistener method. listening for tree changes the second type of listener is used to handle particular actions
related to trees. the tree builder implements the nsitreeview interface, so handles the gathering of data and passing it on to the tree. the tree widget informs the view when certain operations are performed that might affect the data. the tree view handles all of these operations, but allows an observer to be attached which is invoked during these operations. for instance, the observer may have an o...
...r is always invoked before the appropriate operation is performed. for instance, the ontoggleopenstate method of any observers will be called before the tree item is opened. after the observers have finished, the tree builder opens the row and adds any child rows inside. note that you cannot cancel the operation from within the observer. some useful functions of the observer are the drag and drop
related callbacks to handle when an item is dragged onto the tree. this makes handling dragging onto a tree fairly simple. all you need to do is implement three methods, candropon, candropbeforeafter and ondrop. the tree observer receives drag
related events in three places: over a container row, before a row, and after a row. this allows you to handle dragging with more flexibility. for example, in ...
Adding Event Handlers - Archive of obsolete content
used. add the line below just after the opening window tag and before any elements. <script src="findfile.js"/> we'll create the script file later when we know what we want to put in it. we'll define some functions in the file and we can call them in event handlers. you can include multiple scripts in a xul file by using multiple script tags, each pointing to a different script. ...
... by default the javascript console only shows errors from web content. ...
Creating a Window - Archive of obsolete content
attributes can be placed in the window tag -- in this case there are four. in the example, each attribute is placed on a separate line but they do not have to be. id="findfile-window" the id attribute is used as an identifier so that the window can be referred to by scripts. you will usually put an id attribute on all elements. the name can be anything you want although it should be something
relevant. title="find files" the title attribute describes the text that would appear on the title bar of the window when it is displayed. in this case the text 'find files' will appear. orient="horizontal" the orient attribute specifies the arrangement of the items in the window. the value horizontal indicates that items should be placed horizontally across the window. you may also use the val...
...splayed. in this case the text 'find files' will appear. orient="horizontal" the orient attribute specifies the arrangement of the items in the window. the value horizontal indicates that items should be placed horizontally across the window. you may also use the value vertical, which means that the items are placed in a column. this is the default value, so you may leave the attribute off enti
rely if you wish to have vertical orientation. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> this line declares the namespace for xul, which you should put on the window element to indicate that all of its children are xul. note that this url is never actually downloaded. mozilla will recognize this url internally. <!-- other elements go here --> replace this comment bl...
Creating a Wizard - Archive of obsolete content
» many applications use wizards to help the user through complex tasks. xul provides a way to create wizards easily. the wizard a wizard is a special type of dialog that contains a number of pages. buttons appear at the bottom of the dialog to allow navigation between pages. the wizards are often used to help the user perform a complex task. each page contains a single question or a set of
related questions. after the last page, the operation is carried out. xul provides a wizard element which can be used to create wizards. attributes placed on the wizard are used to control the wizard navigation. when creating a wizard, use the wizard tag instead of the window tag. the content of the wizard element includes the content of each page of the wizard. the pages of the wizard are created ...
...keeper/there.is.only.xul"> when the user clicks the finish button, the function savedoginfo() will be called, which would be defined in a script file to save the information that was entered. if the function returns true, the wizard closes. if it returns false, then the wizard does not close, which might occur if the function savedoginfo() encountered invalid input, for example. there are also
related onwizardback, onwizardnext and onwizardcancel attributes, which are called when the back, next and cancel buttons are pressed respectively. these functions are called regardless of which page is currently displayed. to have different code called depending on which page you are on, use the onpagerewound or onpageadvanced attributes on a wizardpage element. they work in a similar way to the ot...
Document Object Model - Archive of obsolete content
somebox'); var flex = box.flex; var box2 = document.getelementbyid('anotherbox'); box2.flex = 2; once you have a reference to an element, you can call the properties of that element. for example, to get the hidden property for an element, you can use the syntax element.hidden where 'element' is a reference to the element. you might note that most of the properties listed in the reference cor
relate to common attributes on elements. there are differences, of course, for example, while getattribute("hidden") will return the string 'true' for a hidden element, whereas the hidden property returns a boolean true value. in this case, the type conversion is done for you so the property is more convenient. as with each document, there is a different element object for xul elements as for html a...
...o be more precise with which namespace is meant. this causes an xhtml button to be created for this case. the fourth button is a little confusing, but might clarify that it is the uri that is important and not the prefix. the fourth example is a xul button, not an html button, despite what the prefix might say. this is an important distinction. in fact, the actual text used for the prefix is ir
relevant when determining what kind of element is used. the dom provides a number of namespace
related functions similar to the non-namespace ones. for example, the getattributens() function is similar to the the getattribute() function except an additional argument may be supplied to specify an attribute in a specific namespace. many xul elements have their own properties that are unique to that e...
Keyboard Shortcuts - Archive of obsolete content
key="copy_cmd"/> <menuitem label="paste" accesskey="p" key="paste_cmd" disabled="true"/> </menupopup> </menu> </menubar> </toolbox> </vbox> </window> now we can use those shortcuts to activate the commands. of course, the clipboard commands don't do anything anyway, as we haven't written those scripts. key events there are three keyboard events that may be used if the key
related features described above aren't suitable. these events are: keypress called when a key is pressed and
released when an element has the focus. you might use this to check for allowed characters in a field. keydown called when a key is pressed down while an element has the focus. note that the event will be called as soon as the key is pressed, even if it hasn't been
released yet. keyup ...
... key events are only sent to the element that has the focus. typically, this will include textboxes, buttons, checkboxes and so forth. if no element is focused, the key event will instead be targeted at the xul document itself. ...
Modifying the Default Skin - Archive of obsolete content
fferent skin, you can change the look of a window without changing its functionality. firefox provides a skin by default, and you may download others. the xul for any skins is the same, however the style sheets and images used are different. for a simple personalized look to a firefox window, you can easily change the style sheets associated with it. larger changes can be done by creating an enti
rely new skin. firefox has a theme manager for changing the default skin. (although the underlying code for mozilla calls them skins and the user interface calls them themes, they're both referring to the same thing). a skin is described using css, allowing you to define the colors, borders and images used to draw elements. the file classic.jar contains the skin definitions. the global directory wit...
...t each contain a number of style sheets and a number of images. the style sheets refer to the images. you should avoid putting references to images directly in xul files if you want your content to be skinnable. this is because a particular skin's design might not use images and it may need some more complex design. by referring to the images with css, they are easy to remove. it also removes the
reliance on specific image filenames. 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 checkb...
More Button Features - Archive of obsolete content
the button below will have both a label and the image 'happy.png'. the image will appear to the left of the label. you can change this position by using two other attributes. this will be explained in a moment. ...
...et. positioning the images by default, the image on a button will appear to the left of the text label. there are two attributes that can be used to control this position. the dir attribute controls the direction of the image and text. by setting this attribute to the value reverse, the image will be placed on the right side of the text. by using the value normal, or leaving the attribute out enti
rely, the image will be placed on the left side of the text. the orient attribute can be used to place the image above or below the text. the default value is horizontal which is used to place the image on the left or right. you can also use the value vertical to place the image above or below. in this case, the dir attribute controls the placement above or below. the same values are used, where norm...
Skinning XUL Files by Hand - Archive of obsolete content
parent-child element:pseudo-class { attribute: value; } parent > child { attribute: value; } button:hover { border: 1px; } menu#file > menuitem { font-weight: bold; } pseudo-classes reflect states of the element: when the mouse moves over a button, for example, the appropriate pseudo-class stylesheet rules are applied. the parent-child
relationship is more economical than the aforementioned contextual subgrouping, which searches the entire subtree of an element for the subelement. finally, mozilla provides some special extensions to the cascading style sheets specification that allow even more control over the way that xul is skinned within the browser. on to the actual global.css file: after some comments, the css file con...
...ylesheet processing instruction to the top of your xul file. <?xml-stylesheet href="sample.css" type="text/css"?> create a new text file called sample.css. add the following lines to the file: @import url(chrome://global/skin/); box#bbox { background-color: lightgrey; } button#rd { background-color: red; color: white; } save it in the same directory as your xul file. ...
The Chrome URL - Archive of obsolete content
, 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 mapping between chrome urls and jar files are specified in the manifest files stored in the chrome directory. if you were to move the file messenger.jar somewhere else and update the manifest file accordingly, thunderbird will still work since it doesn't
rely on its specific installed location. by using chrome urls we can leave details like this to mozilla. similarly, if the user changes their theme, the 'skin' part of the chrome url translates to a different set of files, yet the xul and scripts don't need to change. here are some more examples. note how none of the urls specify which theme or locale is used and none specify a specific directory. ch...
...orm. this is convenient since all a user needs to know is the package name to be able to open the application. of course, for extensions that modify the browser interface, the user will not need to know the url, as the extension will present itself in the ui. for a skin, the file <package name>.css is selected; for a locale, the file <package name>.dtd is selected. remember, the chrome url is not
related to where it is located on disk. the first two pieces of the chrome url are the package name and the part (either content, skin, or locale). while it is common to put the content files in a directory called 'content', this is pu
rely out of convention, and these files may be placed in an enti
rely different structure. in the next section, we will look at how to create .manifest files and package...
Trees - Archive of obsolete content
naturally, having to implement a tree view with thirty or so properties and methods for every tree can be very cumbersome, especially for simple trees. fortunately, xul provides a couple of built-in view implementations which do most of the hard work for you. for most trees, especially when you first start to use trees, you will use one of these built-in types. however, you can create a view enti
rely from scratch if necessary. if you do, you might store the data in an array or javascript data structure, or load the data from an xml file. since the entire body of the tree is a single widget, you can't change the style of individual rows or cells in the normal way. this is because there are no elements that display the individual cells, like there is with the listbox. instead, all drawing is ...
...when the tree needs to display a row, the tree asks the content tree view for a cell's label by calling the view's getcelltext function, which in turn gets the data from the label of the appropriate treecell. however, the three elements listed above are not displayed directly. they are used only as the source for the data for the view. thus, only a handful of attributes apply to the treeitem and
related elements. for instance, you cannot change the appearance of the tree rows using the style attribute or with other css properties and the box
related features such as flexibility and orientation cannot be used. in addition, mouse and other user interface events do not fire at these elements. in fact, apart from some tree specific attributes, the only attributes that will have any effect will ...
Writing Skinnable XUL and CSS - Archive of obsolete content
these sorts of files are typically used with reusable overlayable widgets (e.g., the sidebar). your css file should never import another skin file if your file is loaded by a xul overlay. css files that are used by xul overlays should never import the global skin (or any other skin for that matter). they are already derived skins and therefore should not inherit from global. they should instead
rely on the context in which they will appear for color, font, and border information. for example, the sidebar should not import the global skin, since it could appear in messenger and in navigator (which could have two completely different color schemes). if it imported the global skin, then when it was overlayed into navigator, it would potentially clash (if the user's current chosen navigator ski...
... (if the user's current chosen navigator skin were not inheriting from global). derived skin files should not contain any font, color, or border information. this information should only be found in base skin files. the skin file should instead inherit from a base skin file to obtain the appropriate font, color, and border information. by obeying this restriction, your package will be almost enti
rely skinnable by changing only the global defaults. this rule also applies when designing a css file for a ui component that will be overlayed into other components. below are examples for each case. example 1: the navigator package has a personal toolbar with popup menu buttons. the colors for the toolbar and buttons should be drawn from global by placingclass attributes on the appropriate elemen...
XUL Event Propagation - Archive of obsolete content
to the user action by raising an event, a message meant to travel from one element within the interface to another. in this case, the event raised was the "click" event, but a variety of events can be raised by the button element. when the mouse moves over the button, for example, the "hover" event is raised. and sometimes elements raise different events for the pressing down of the click and the
release. the events raised by a particular element are pre-determined. the click event is just a message. 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. any element that is interested in the event -- any part of the interface, in other words...
...the hierarchy of the interface can be represented as follows: when one of these menuitems raises an event, any of the elements above it in the hierarchy can handle it. in the example above, when the me...
arrowscrollbox - Archive of obsolete content
the user only needs to hover the mouse over the arrows to scroll the box. this element is typically used for large popup menus. hovering the mouse over one of the (active) arrows triggers a scroll event. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. smoothscroll type: boolean true initially enables smooth scrolling for the corresponding arrowscrollbox, false disables it. currently, smooth scrolling supports horizontal arrowscrollboxes only.
binding - Archive of obsolete content
a binding is used to bind a variable to a node. like the triple element in syntax, it can be used to bind a particular property of a matched node to a particular variable name. that name can then be used within the action of a rule. ...
...tributes(), 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
this element should be contained within a rule element and contain one or more binding elements. this element is optional in firefox 3/mozilla 1.9 and later; instead binding elements may be placed directly inside the rule element. more information is available in the template guide. ...
...ributes(), 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
if the box has an orient attribute that is set to horizontal, the child elements are laid out from left to right in the order that they appear in the box. if orient is set to vertical, the child elements are laid out from top to bottom. child elements do not overlap. the default orientation is horizontal. more information is available in the xul tutorial. ...
...ributes(), 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 ...
caption - Archive of obsolete content
it may contain either a text label, using the label attribute, or child elements for a more complex caption. more information is available in the xul tutorial. attributes accesskey, crop, image, label, tabindex properties accesskey, crop, image, label, tabindex examples <groupbox> <caption label="my groupbox"/> </groupbox> <groupbox flex="1"> <caption> <checkbox label="a checked groupbox"/> </caption> </groupbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key. ...
...tributes(), 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 ...
column - Archive of obsolete content
each child of the column element is placed in each successive cell of the grid. the column with the most child elements determines the number of rows in each column. it is common to use columns only to define width and flexibility for the grid column and not place elements directly inside the column. more information is available in the xul tutorial. example see grid for an example. ...
...ributes(), 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
child column elements define the individual columns to appear in the grid. the columns element may be nested inside another columns element. other elements placed inside a columns element occupy the full height of the grid and are placed in their corresponding positions between the columns. more information about columns is available in the xul tutorial. example see grid for an example. ...
... ...
content - Archive of obsolete content
la pregunta en una regla debería enlazar a sólo a un elemento del contenido. los contenidos deberían tener al atributo uri . Ésto se utiliza para vincular una variable a un nodo de contenido cuando se emparejan. cuando use un árbol con los atributos flags ("banderas"), establezca dont-build-content, ("no almacenar contenido"), use treeitem en su lugar. para más información, se encuentra disponible el tutorial xul. ...
...tributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
relacionados tbd ...
deck - Archive of obsolete content
the selectedindex attribute determines which child is displayed. more information is available in the xul tutorial. attributes selectedindex properties selectedindex, selectedpanel examples <deck selectedindex="2"> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> attributes selectedindex type: integer gets and sets the index of the currently selected panel. ...
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related stack ...
dialog - Archive of obsolete content
the buttons attribute may be used to set which buttons should appear in the dialog box. these buttons will be placed in the correct locations for the user's platform. more information is available in the xul tutorial and dialogs and prompts (code snippets). ...
...t, similar to pressing the cancel button. ...
dialogheader - Archive of obsolete content
this element should be placed inside a dialog element. the header may have a title and a description. ...
...ributes(), 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 ...
grid - Archive of obsolete content
the grid is expected to contain both a columns element as a child which defines the structure of the columns and a rows element as child to define the rows. ...
... ...
groupbox - Archive of obsolete content
if a caption element is placed inside the groupbox, it will be used as a caption which appears along the top of the groupbox. typically, the groupbox will be drawn with a border around it and the caption either above or over the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. more information is available in the xul tutorial. ...
...ributes(), 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
this is equivalent to the box element, except it defaults to horizontal orientation. more information is available in the xul tutorial. ...
...ributes(), 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
the keyset and its descendants are not displayed. more information is available in the xul tutorial. ...
...ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxh...
listcol - Archive of obsolete content
you can make some columns flexible and other columns non-flexible. ...
...ributes(), 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 ...
listcols - Archive of obsolete content
there should be only one listcols element in a list box. if there is no listcols element, the list box has a single column. ...
...ributes(), 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, listhead, listheader, listitem ...
notificationbox - Archive of obsolete content
typically the element will be a browser, but any element may be used. the notification element is used for each notification, and will be created automatically for each item. each notification will slide in and out as needed. this element is used, for example, to implement the yellow information bar in various firefox windows. the notification box is a vertical box which may have children. the notifications appear at the top of the box. the notifications may be placed at the bottom by setting the dir attribute to reverse. ...
...value remove the current notification. ...
popupset - Archive of obsolete content
this element is optional; the given elements need not appear in a popupset container. more information is available in the xul tutorial. ...
...ributes(), 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
it's supposed to be a child of <prefpane> element. <preferences> element should contain one or more <preference> elements. note: it's not clear which of the following methods and properties are public. examples <preferences> <preference id="pref_one" name="extensions.myextension.one" type="bool"/> <preference id="pref_two" name="extensions.myextension.two" type="string"/> ... etc ... ...
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
progressmeter - Archive of obsolete content
it is drawn as a bar that is filled as the operation completes. in addition, an indeterminate progressmeter may be created by setting the mode attribute to undetermined. this is used when the length of time to complete an operation is not known beforehand. more information is available in the xul tutorial. ...
...ributes(), 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 ...
row - Archive of obsolete content
each child of the row element is placed in each successive cell of the grid. the row with the most child elements determines the number of columns in each row, which may be smaller or larger than the number of column elements defined in the grid. more information is available in the xul tutorial. example see grid for an example. ...
... ...
rows - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] defines the rows of a grid. child row elements define the individual rows to appear in the grid. each child of a rows element should be a row element. the rows element may be nested inside another rows element. the children of these nested rows are counted as normal rows as if they were part of the parent. however, nesting rows elements allows groups of rows to have a separate appearance such as a different border, or separate scrolling may be defined for these rows. non-row
related elements placed inside a rows element occupy the full width of the grid and are placed in their corresponding positions between the rows. more information is available in the xul tutorial. example see grid for...
... ...
scrollbox - Archive of obsolete content
note that a scrollbox doesn't cause scrollbars to be displayed. it is intended to be used when an application wants to be able to adjust the scroll position itself. if you just want scrollbars to appear, add style='overflow: auto;'. this may also be used with any other container element. examples the following shows the xul for a bunch of labels. they come out in a box. ...
...y things out. scrolling a child element into view see element.scrollintoview. prior to gecko 19, scrollintoview() didn't exist in xul. do this instead: var xpcominterface =scrollbox_element.boxobject.queryinterface( components.interfaces.nsiscrollboxobject); xpcominterface.ensureelementisvisible(child_element_to_make_visible); see the nsiscrollboxobject api for other scroll-
related methods. 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, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popu...
separator - Archive of obsolete content
this type of separator should be used to separate parts of a dialog. it doesn't draw a bar visually, but is just a small space. it is functionally equivalent to a spacer except it defaults to a small size (usually 1.5 ems). attributes orient style classes groove, groove-thin, thin examples <separator class="groove-thin"/> attributes orient type: one of the values below used to specify whether the separator is a horizontal or vertical separator. note that the values are the reverse of what seems more likely. ...
...tenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element. these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme. groove a grooved separator. groove-thin a thin grooved separator. thin a thinner separator, which is usually 0.5 ems.
related elements spacer, splitter, menuseparator, toolbarseparator, treeseparator. ...
spacer - Archive of obsolete content
it is usually used to place spacing within a container. if you don't specify that the spacer has a size or is flexible, the spacer does not occupy any space. if you want a small gap, consider using a separator instead. more information is available in the xul tutorial. ...
...ributes(), 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 ...
stack - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] an element that renders its children on top of each other. the first element is placed on the bottom and each successive child is placed above the previous. all elements are displayed at once. child elements may also be placed at absolute positions within the stack. the top, right, bottom, and left attributes on a child of the stack specify the position of that element. the bottom and right attributes can also be used in conjunction with top and left to set the width and/or height of the children of the stack. note that bottom and right attributes, unlike rect, are
relative to the bottom and right of the stack. when using these attributes to set width or height, both attributes for the gi...
...ributes(), 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
it is virtually equivalent to a standard box, but may be rendered differently. contains statusbarpanels. ...
...tributes(), 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 ...
<statusbarpanel> - Archive of obsolete content
refer to the add-on bar. an individual element of a statusbar. this is a special type of button which is drawn differently. unlike normal buttons, a statusbarpanel can only have a label or an image but not both. this element is often used with a short label or icon to indicate status, for instance whether the user is online or whether there are new messages. ...
...abel. specify the image using the src attribute. ...
stringbundle - Archive of obsolete content
stringbundles should be placed inside a stringbundleset element. a property file is a list of property key-value pairs each on a separate line. the key and value is separated with an equals sign. for example, the following defines two properties: message.displayerror=an error occured trying to display this message message.namealreadyused=the name %s is already being used by another account. more information is available in the xul tutorial. ...
...ributes(), 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 ...
tabbox - Archive of obsolete content
a row of tabs is displayed at the top of tabbox which may be used to switch between each page. the tabbox should contain two children, the first a tabs element which contains the tabs and the second a tabpanels element which contains the contents of the pages. more information is available in the xul tutorial. ...
... ...
tabpanels - Archive of obsolete content
the tabpanels element should be placed in a tabbox although it does not have to be a direct child. the children of the tabpanels element become the panels of the tabbox. in most cases you would use a vbox, but they can be any element, although some people like to use tabpanel elements. by clicking the first tab, the first panel will be displayed. by clicking the second tab, the second panel will be displayed and so on. there should be the same number of panels as there are tabs. ...
... ...
titlebar - Archive of obsolete content
this element can't be used to change the platform-native titlebar of normal windows; instead, it's used to create custom titlebars for chromeless windows. if the titlebar is in a panel element, dragging it will move the panel. elements inside the titlebar usually don't receive any mouse events, so e.g. buttons inside it can't be clicked and textboxes can't be focused with the mouse. ...
...vents, so e.g. buttons inside it can't be clicked and textboxes can't be focused with the mouse. if you don't want this behavior, you can override it by setting allowevents="true" on the titlebar element. the titlebar will send a command event after the move is complete. examples this xul file will create a hud-style window that can be moved with the mouse. it will close if the mouse button is
released. <?xml version="1.0"?> <window title="movable hud window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="200" style="background: transparent; -moz-appearance: none;"> <titlebar flex="1" oncommand="close()" style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; ...
toolbar - Archive of obsolete content
it is a type of box that defaults to horizontal orientation. it can be collapsed with a grippy when the toolbar is placed inside a toolbox. the toolbar should always have an id attribute. note: gecko 2.0 adds support for external toolbars. these are toolbars that are not children of a toolbox element. you can associate an external toolbar with a toolbox for the purpose of managing your toolbars by setting the toolboxid property on the toolbar. ...
...tlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes chromeclass-toolbar when this class is used, the toolbar will be hidden when a window is opened by setting the toolbar option to no in the window.open method. otherwise, this option will be ignored for this toolbar and it will always be visible.
related elements toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbargrippy - Archive of obsolete content
this element is used internally by the toolbar and should only be used directly when modifying its theme. more information is available in the xul tutorial. ...
...ributes(), 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 ...
toolbaritem - Archive of obsolete content
this element should wrap all customizable items (unless they're instances of toolbarbutton). if you don't need the thing you're placing in the toolbar to be customized then it doesn't need to be in a toolbaritem element. the element is used, for example, to hold the location bar's textbox in firefox. it is also used to group buttons together so they can be added and removed all at once like firefox's unified-back-forward-button. ...
...ributes(), 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 ...
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. do not add the various spacing items, as those are added automatically. you can add your own custom buttons to the firefox browser by using an overlay that overlays the toolbarpalette with the idbrowsertoolbarpalette. ...
...ributes(), 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 ...
toolbarseparator - Archive of obsolete content
it is functionally equivalent to a normal separator but some themes may apply a different appearance. ...
...tributes(), 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
« xul reference home [ examples | attributes | properties | methods |
related ] firefox only this element is used as a container for custom toolbars, which are added in the custom toolbar dialog. examples (example needed) 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, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait...
...tributes(), 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
« xul reference home [ examples | attributes | properties | methods |
related ] firefox only a space between toolbar items. properties accessibletype examples (example needed) 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, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties ...
...ributes(), 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
« xul reference home [ examples | attributes | properties | methods |
related ] firefox only a flexible space between toolbar items. properties accessibletype examples (example needed) 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, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width p...
...tributes(), 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
for content trees, the content will be placed inside this element. this element is also used to define container rows in the tree. more information is available in the xul tutorial. attributes alternatingbackground attributes alternatingbackground obsolete since gecko 2.0 type: boolean if true, the background of the tree's rows will alternate between two colors. you can use the :-moz-tree-row css style to do this instead. ...
... ...
treecols - Archive of obsolete content
there should one and only one treecols element in a tree. more information is available in the xul tutorial. attributes pickertooltiptext properties accessibletype examples (example needed) attributes pickertooltiptext type: string the text for the tooltip on the column picker. ...
... interfaces nsiaccessibleprovider ...
treeitem - Archive of obsolete content
the treeitem can be clicked by the user to select the row of the tree. the treeitem contains a single row and all of what appear to the user as that row's descendants. in a template condition, you should use a treeitem instead of a content element when the dont-build-content flag is specified. set the uri attribute to the variable name to bind to a content node during matching. more information is available in the xul tutorial. ...
... ...
treerow - Archive of obsolete content
it should be placed inside a treeitem element. children of the treerow should be treecell elements. if child rows are necessary, they should be placed in a treechildren element inside the parent treeitem. more information is available in the xul tutorial. 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. for more information, see styling a tree. ...
... ...
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. for more information, see styling a tree. ...
... ...
vbox - Archive of obsolete content
this is equivalent to the box element, except it defaults to vertical orientation. more information is available in the xul tutorial. ...
...ributes(), 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 ...
wizardpage - Archive of obsolete content
the content in the pages should be placed inside the wizardpage element. more information is available in the xul tutorial. attributes description, label, next, pageid properties next, pageid attributes description type: string descriptive text to appear in addition to the dialog title. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. ...
...), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related wizard ...
Building XULRunner with Python - Archive of obsolete content
ify it to set the cvsroot environment variable. set cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot having created amozilla project directory (e.g.c:\projects\mozilla or/c/projects/mozilla in msys) create the following .mozconfig file. note this is complete and does not require the checkout of any other project specific .mozconfig files as sometimes shown. it effectively specifies a
release build that is not particularly suitable for debugging xulrunner itself. it uses the trunk (or latest) code in cvs so may be unstable. mk_add_options moz_objdir=@topsrcdir@/../obj-xulrunner mk_add_options moz_co_project=xulrunner ac_add_options --enable-application=xulrunner ac_add_options --enable-extensions=python,default ac_add_options --disable-javaxpcom ac_add_options --disable-activex a...
...) 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. however it does not include any path
related to the xul application being run. some work around will need to be found. unhandled exceptions are displayed in the javascript error console which can be opened usingxulrunner -jsconsole. one solution is to puttry .... except: print_exc() round any event handler to print tracebacks to stdout and use a python console to catch that output. the jsconsole can also be open and used from code, for...
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
the same level as the current (i.e. source) directory. to build just one of the projects, remove the name of the other from moz_build_projects. for example, you might want to set it to "xulrunner" now and run make to ensure that everything is set up correctly so far. the second section contains general options for your build. in this case we're creating a debug build, so you'd have to change the
relevant options if you want a
release build instead. you can find out more about which options to use in configuring build options. the third section contains options for building xulrunner. you shouldn't have to change this. finally, the final section contains options specific to your application. make sure you change the application name (following ac_add_app_options to that of your app. do the sa...
...ges. the components/ subdirectory if you are reading this guide, you probably need to include c++ components in your application. if you've never done this before, you should consult creating xpcom components or another xpcom reference. the public/ and src/ directories that you put in the components/ directory will look the same as for an extension that includes c++ components, so you can use the
relevant sections of creating custom firefox extensions with the mozilla build system as a reference. the makefiles, however, will be difference since you won't be defining things like xpi_name (this is used only for extensions). so use the makefiles in the components/ directory of mccoy as a guide instead. don't forget to put components into the dirs variable in the top-level makefile, or your compo...
XULRunner FAQ - Archive of obsolete content
la web platform, including html, xhtml, svg, or xul. so why is it called xulrunner, instead of htmlrunner or something? xul was always the original language of choice for ui in mozilla applications and the main library is called libxul, mostly the name is a hangover from that that has now stuck. ...
...s now stuck. when will firefox be based on xulrunner? there is no intention to do this for official
release versions of firefox. it is already possible to run firefox on xulrunner now though and certain linux distributions already do this. why is installing xulrunner so painful? why isn't there a nice installer? because nobody has written that code yet! this is a developer preview
release: additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future
releases. i'm writing a xul application, how can i deploy that application to my users? right now mozilla recommends that xulrunner should be deployed privately with each application. see deploying xulrunner 1.8 for more information. where is the source code?
XULRunner - Archive of obsolete content
short introduction to xulrunner. xulrunner is a mozilla runtime package that can be used to bootstrap xul+xpcom applications that are as rich as firefox and thunderbird. it provides mechanisms for installing, upgrading, and uninstalling these applications. xulrunner also provides libxul, a solution which allows the embedding of mozilla technologies in other projects and products.
releases until version 41, xulrunner could be downloaded from ftp.mozilla.org. firefox (from version 3) ships with a private xulrunner package, which can run any compatible xulrunner application using the -app switch: firefox -app application.ini is equivalent to xulrunner -app application.ini older builds are also available. overview development plan wha...
...on steps to configure venkman to debug your app xulrunner guide a fairly complete, but outdated, introduction and tutorial for xulrunner which collates much of the documentation found here. view all... community view mozilla forums... mailing list newsgroup rss feed #xulrunner on irc.mozilla.org other community links...
related topics xul see also a brief introduction to xulrunner ...
calICalendarView - Archive of obsolete content
ndarviewcontroller and provides an integral link with the code in which a calicalendarview may be used. this link allows the calicalendarview to have a way of creating, modifying, and deleting events based on user interaction with the dom nodes it controls, often without requiring any other user interaction. in general, therefore, a calicalendarview will not provide its own controller, but rather
rely on other code to set this attribute. implementations should therefore be wary to check whether a controller has been assigned to the view, before calling any of the methods it implements.note that in most cases, this attribute will be set by the consumers of calicalendarview very early in an application/extension's loading process. startdate returns a calidatetime corresponding to the first d...
...tes shown in the view. getdatelist void getdatelist(out unsigned long acount, [array,size_is(acount),retval] out calidatetime adates); this function returns a list of all dates currently being shown in the view. history calicalendarview was introduced as part of the 'backend rewrite' that occurred prior to lightning 0.1 and between sunbird 0.2 and sunbird 0.3. it remains unfrozen today.
related interfaces calicalendarviewcontroller calidecoratedview example code both calendar-multiday-view and calendar-month-view show examples, albeit complex, of implementations of this interface. ...
2006-09-29 - Archive of obsolete content
summary: mozilla.dev.apps.calendar - september 22 - september 29, 2006 announcements lightning and sunbird 0.3 rc1 test day! ...
...ll locales with a calendar localization. details are available for calendar only and for calendar and core. discussions no discussions available this week. meetings sept. 27 status meeting cancelled most of the mozilla calendar participants were unavailable during sept. 27, the meeting was cancelled and rescheduled for a later date. sept 20 brief status meeting the meeting consisted enti
rely of the status and details of sunbird 0.3. the details of subird 0.3 rc1 are available here. authors mark paruzel yi (eric) shen [| back to weekly summaries ] ...
2006-10-06 - Archive of obsolete content
hence, they are looking for a mac user to test out the new features by building a mac.rdf file with all of the various .mac account properties mentioned in the document here. ...
...ing message headers on the ui side would be helpful. cédric corazza recommends that the proposed documention should be made available on the l10n cvs once it reaches a decent stage so that localizers can get a head-start on the localization before the final version is made available. updated : need ui to rearrange tags peter lairo suggested some ui should be available for rearranging tags.
related: bug 342065 meetings none for this week. ...
Extentsions FAQ - Archive of obsolete content
to always open "file://*" urls in an ie tab. the appearance with a firefox tab isn't quite the same as having a completely separate explorer window. however, it's functional and does allow for the explorer to be handling the display of the folder contents, and all of the right-click context menu support is present so it should meet my needs. what is the valid location and things needed to to
release a mozilla extension on mozallia site? you must remove updateurl from the install.rdf and use a known to amo minversion/maxversion. no confirmation that the answer given worked yet. is it possible to open the url in a new tab? var tab = gbrowser.addtab( url ); // and if you want it to load in the foreground: gbrowser.selectedtab = tab; is it possible to read the html-code of the curr...
...y, october 06 - 13, 2006 (↑ top) any suggestions to remove tool tip appears on the menu it when it should not? what you described was a bug (https://bugzilla.mozilla.org/show_bug.cgi?id=147670). it looks like it has been fixed for firefox version 2. what do i need to do to avoid deadlocks? do i need to marshalinvokations to a particular thread? if so, how? are there any fundamental rules
related to threading in xpcom, and if so, where are these defined? dom can only be accessed from the main thread. also, check out this site to learn how to set up a proxy: http://www.mozilla.org/projects/xpcom/proxies.html how to test a tab has been closed or not? you can capture the even of tab closing. you can get the tab that is being closed. this should be enough for you. is it possible...
2006-11-17 - Archive of obsolete content
discussions how to translate mozilla to a language called quiché how to translate mozilla to a language called quiché. how to start a localization how to start a localization po format usage discussion on how to make l10n easier due to expansion to 100 locales. quick builds for localisers (full or p...
... seamonkey 1.1b in russian (ru-ru) is uploaded to ftp.mozilla.org seamonkey 1.0.6 in russian (ru-ru) seamonkey 1.0.6 in russian (ru-ru) is uploaded to ftp.mozilla.org seamonkey 1.0.6 in czech (cs-cz) seamonkey 1.0.6 in czech (cs-cz) is uploaded to ftp.mozilla.org seamonkey 1.0.6 he-il seamonkey 1.0.6 he-il is
released. seamonkey 1.0.6 in french seamonkey 1.0.6 in french (fr-fr) is
released. discussions how to translate mozilla to a language called quiché how to translate mozilla to a language called quiché. how to start a localization how to start a localization po format usage discussion on how to make l10n easier due to expansion to 100 locales. quick builds for localisers (full or partial) discussion on moz-l10n-builder, which automates many of the function...
2006-11-3 - Archive of obsolete content
summary: mozilla.dev.l10n - november 3, 2006 announcements mozip.net 1.2.0
released: the should have been 1.0
release mozip.net 1.2.0, a gui (graphic) version of piaip's mozip command line utility, is available here. check thread for complete details. mozillatranslator 5.13
released mozillatranslator 5.13 is available here. opening l10n repository on mozilla_1_8_branch for approved check-ins mozilla_1_8_branch is opened for approved check-ins. check-ins are limited to bug fixes filed in bugzilla and should mention their bug, describe the change, and who approved the change. seamonkey 1.0.6 and 1.1 beta upcoming the seamonkey projet is planning a security
release of the stable 1.0 series as well as a beta for the 1.1 version, all possibly in the next days or week. com...
... beta for the 1.1 version, all possibly in the next days or week. community is advised to perform tests on both builds to ensure they work flawlessly. 1.0.6 build is located here, and 1.1 beta build is located here. discussions last check-ins on sun-calendar-event-dialog.* files last check-ins on sun-calendar-event-dialog.* files from 50 to 100 locales how to get from the 50 locales and
releasing 40 to a hundred. revisiting mozillatranslator bugs in bugzilla revisiting mozillatranslator bugs in bugzilla dictionary packages there are some dictionaries at http://dictionaries.mozdev.org/installation.html which are not at https://addons.mozilla.org/en/dictionaries. localization of amo and some other pages of mozilla.com suggestion on localizing popular add-ons as well as web...
2006-07-17 - Archive of obsolete content
the survey questions and feedback are included in the thread. deadline for feedback has passed. dropping bugs from blocking1.8.1+ david baron suggested a list of bugs that could be dropped from the blocking list. view bugzilla list. ...
...the survey questions and feedback are included in the thread. deadline for feedback has passed. dropping bugs from blocking1.8.1+ david baron suggested a list of bugs that could be dropped from the blocking list. view bugzilla list. ...
NPEvent - Archive of obsolete content
on the event type. undefined for null, mouseup, and mousedown events. when longint. ticks since start-up. where point. cursor location. modifiers integer. flags. xevent npevent on unix/x11 npevent is defined as an xevent data structure, which is a union of a number of different x11 event structures. type the type member is an int representing an event type, and indicating which structure is
relevant. the event type may be any of the ollowing: graphicsexpose focusin focusout enternotify leavenotify motionnotify buttonpress button
release keypress key
release description microsoft windows description the type npevent represents an event passed by npp_handleevent() to a windowless plug-in. for information about these events, see your microsoft windows documentation. mac os descr...
...ows platform. for information about the xevent structure and xwindows events, see the xwindows documentation. as the xevents sent to the plug-in are synthesized and there is not a native window corresponding to the plug-in rectangle, some of the members of the xevent structures are not set to their normal xserver values. e.g. key events don't have a position. mouse events have x and y coordinates
relative to the top-left corner of the plugin rectangle. see also npp_handleevent() ...
NPN_SetValue - Archive of obsolete content
ntext off the stack nppvpluginkeeplibraryinmemory: tells browser that the plugin dll should live longer than usual nppvpluginneedsxembed nppvpluginscriptablenpobject nppvformvalue nppvplugindrawingmodel value the value of the specified variable to be set. returns if successful, the function should return nperr_no_error. if unsuccessful, the function should return the most
relevant npapi error code. for possible values, see error codes. description a good place to set plugin operation mode such as windowless mode is npp_new, so the browser knows right away what mode the plugin is designed to operate in. nppvpluginwindowbool (windows and unix) specifies that the plugin operates in windowed mode. the alternative is windowless where no window messages are sent to the ...
...tion mode such as windowless mode is npp_new, so the browser knows right away what mode the plugin is designed to operate in. nppvpluginwindowbool (windows and unix) specifies that the plugin operates in windowed mode. the alternative is windowless where no window messages are sent to the plugin as there is no window associated with it. in windowless mode all the browser to plugin communications
related to drawing, mouse, and keyboard input are accomplished via npp_handleevent. to set windowless operation, call npn_setvalue with nppvpluginwindowbool as the variable parameter and false as the value parameter. by default, plugins are windowed. nppvplugintransparentbool (windows and unix) specifies that a plugin is either opaque or transparent. to specify an opaque mode, the plugin calls npn_s...
NPN_Version - Archive of obsolete content
n version information, both of the plug-in api and of the browser itself. syntax #include <npapi.h> void npn_version(int* plugin_major, int* plugin_minor, int* netscape_major, int* netscape_minor); parameters the function has the following parameters: plugin_major pointer to a plug-in's major version number; changes with major code
release number. plugin_minor pointer to a plug-in's minor version number; changes with point
release number. netscape_major pointer to the browser's major version; changes with major code
release number. netscape_minor pointer to the browser's version; changes with point
release number. description the values of the major and minor version numbers of the plug-in api are...
...this function gets the values from the plug-in rather than from the browser. a plug-in can use this function to check that the version of the plug-in api it is using is compatible with the version in use by the browser. this could be part of the initialization process. ...
NPObject - Archive of obsolete content
nt, and possibly also implementation specific (i.e. plugin specific, or browser specific) members. npobject is the type used to express objects exposed by either the plugin or by the browser through this api. the browsers are expected to expose their window objects and everything reachable from it through this api. npobjects are reference counted objects, so callers need to be careful to properly
release acquired references to them. to aid with the reference counting and ownership management in general, the functions npn_createobject(), npn_retainobject(), npn_
releaseobject(), and npn_
releasevariantvalue() are provided as part of this api. npobject behavior is implemented using the set of callback functions defined in npclass. syntax struct npobject { npclass *_class; uint32_t reference...
...ace may be allocated here by types of npobjects */ }; fields _class a pointer to the npclass of which the object is a member. referencecount the reference count for the object. ...
NPWindow - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary contains information about the target into which the plug-in instance can draw. ...
...*/ #endif /* xp_unix */ npwindowtype type; /* window or drawable target */ } npwindow; fields the data structure has the following fields: window platform-specific handle to a native window element in the netscape window hierarchy on windows (hwnd) and unix (x window id). mac os: window is a pointer to an np_port. x, y the x and y coordinates for the top left corner of the plug-in
relative to the page (and thus
relative to the origin of the drawable). should not be modified by the plug-in. height, width the height and width of the plug-in area. should not be modified by the plug-in. cliprect clipping rectangle of the plug-in; the origin is the top left corner of the drawable or window. clipping to the cliprect prevents the plug-in from overwriting the status bar, scr...
NPAPI plugin reference - Archive of obsolete content
browser-side plug-in api this chapter describes methods in the plug-in api that are provided by the browser; these allow call back to the browser to request information, tell the browser to repaint part of the window, and so forth. the names of all of these methods begin with npn_ to indicate that they are implemented by the browser and called by the plug-in. np_getmimedescription np_getmimedescription returns a supported mime type list for your plugin. it works on unix (linux) and macos. on windows you have to define supported mimetypes in the dll resource file. np_getvalue allows the browser to query the plug-in for information. ...
...e browser free a specified amount of memory. npn_memfree deallocates a block of allocated memory. npn_pluginthreadasynccall thread safe way to request that the browser calls a plug-in function on the browser or plugin thread (the thread on which the plug-in was initiated). npn_posturl posts data to a url. npn_posturlnotify posts data to a url, and receives notification of the result. npn_
releaseobject decrements the reference count of the given npobject. if the reference count reaches 0, the npobject is deallocated by calling its deallocate function if one is provided; if one is not provided, free() is used. npn_
releasevariantvalue npn_
releasevariantvalue()
releases the value in the given variant. npn_
reloadplugins
reloads all of the installed plugins. npn_removeproperty ...
Writing a plugin for Mac OS X - Archive of obsolete content
this article is adapted from josh aas's blog post writing an npapi plugin for mac os x. before you go on reading this article, you may wish to grab the sample code located here, as it will be referenced during this tutorial. the sample is posted under a bsd-style license that means you can use it for anything, even if you don't plan to
release your source code. getting started if you check out the mozilla source code in mac os x, you can simply open basicplugin.xcodeproj in xcode, click build, and you're done. xcode will create a "build" directory next to the project file, and if you built it in
release mode, that folder in turn contains a "
release" directory with the plugin inside it. to install the plugin, just copy it into one of these two locations: /library/internet plug...
...people trying to get npapi plugins working. some symbols must be visible as standard c symbols so the browser can find them, which means they need to be prefixed by an underscore, and must not have the c++ obfuscation that is generated by the c++ compiler. the three symbols that must always be visible are: np_initialize() np_getentrypoints() np_shutdown() the sample plugin is written enti
rely in c, using a standard xcode build configuration, so by default all of its symbols are c-style and visible. if you want to implement your plugin in c++ or objective-c++, you need to tell the compiler to export them in c format by using extern "c" in the header, like this: #pragma gcc visibility push(default) extern "c" { nperror np_initialize(npnetscapefuncs *browserfuncs); nperror np_get...
Syndicating content with RSS - Archive of obsolete content
html page(s). adding a special <a> element to html page(s). we've already discussed the first step—creating rss feeds— so we'll focus on the other two steps here. adding the <link> often the data in an rss feed is also made available on an html web page. when this is the case, the html web page can let people and machines know about the feed by using the <link> element, like this: <link
rel="alternate" type="application/rss+xml" href="http://example.com/feed" /> adding the <a> while use of the html <link> element is powerful, it is mostly hidden. to advertise the rss feed in a more direct way, the html <a> element can be used. this mimics the <link> element discussed above. linking from the the html web page where the data in an rss feed is also contained makes the rss feed avai...
...application/rss+xml" href="http://example.com/feed" /> adding the <a> while use of the html <link> element is powerful, it is mostly hidden. to advertise the rss feed in a more direct way, the html <a> element can be used. this mimics the <link> element discussed above. linking from the the html web page where the data in an rss feed is also contained makes the rss feed available for use: <a
rel="alternate" type="application/rss+xml" href="http://example.com/feed">...</a> feed icons rss (and other) feeds use a special icon. it is recommended that you too use this icon when creating the special <a> link to your feed. the icon looks like the following: you can get more icons like this from feed icons. (other sizes and colors, along with their source files, are available too.) adv...
Digital Signatures - Archive of obsolete content
encryption and decryption address the problem of eavesdropping, one of the three internet security issues mentioned at the beginning of this document. but encryption and decryption, by themselves, do not address another problem: tampering. this section describes how public-key cryptography addresses the problem of tampering. tamper detection and
related authentication techniques
rely on a mathematical function called a one-way hash (also called a message digest). a one-way hash is a number of fixed length with the following characteristics: the value of the hash is unique for the hashed data. any change in the data, even deleting or altering a single character, results in a different value. the content of the hashed data cannot, for all practical purposes, be deduced from the ha...
.... the content of the hashed data cannot, for all practical purposes, be deduced from the hash-which is why it is called "one-way." similarly, in public key encryption, a key pair is generated for digital signing. the key pair consists of a private signing key and a public verification key. the public key is widely distributed, while the private key is known only to its proprietor. the keys are
related mathematically, but the parameters are chosen so that calculating the private key from the public key is either impossible or prohibitively expensive.the encrypted hash, along with other information, such as the hashing algorithm, is known as a digital signature. figure 1 shows a simplified view of the way a digital signature can be used to validate the integrity of signed data. figure 1 ...
Encryption and Decryption - Archive of obsolete content
encryption is the process of transforming information so it is unintelligible to anyone but the intended recipient. decryption is the process of transforming encrypted information so that it is intelligible again. a cryptographic algorithm, also called a cipher, is a mathematical function used for encryption or decryption. in most cases, two
related functions are employed, one for encryption and the other for decryption. with most modern cryptography, the ability to keep encrypted information secret is based not on the cryptographic algorithm, which is widely known, but on a number called a key that must be used with the algorithm to produce an encrypted result or to decrypt previously encrypted information. decryption with the correct key is simple. decryption without the correct ke...
...of encryption strength. the rsa cipher used for public-key encryption, for example, can use only a subset of all possible values for a key of a given length, due to the nature of the mathematical problem on which it is based. other ciphers, such as those used for symmetric key encryption, can use all possible values for a key of a given length, rather than a subset of those values. because it is
relatively trivial to break an rsa key, an rsa public-key encryption cipher must have a very long key, at least 1024 bits, to be considered cryptographically strong. on the other hand, symmetric-key ciphers can achieve approximately the same level of strength with an 80-bit key for most algorithms. original document information author(s): ella deon lackey last updated date: 2012 copyright in...
Introduction to SSL - Archive of obsolete content
rs can enable or disable any of the supported cipher suites for both clients and servers. when a particular client and server exchange information during the ssl handshake, they identify the strongest enabled cipher suites they have in common and use those for the ssl session. note: firefox 2 ships with ssl 2.0 support disabled by default, in favor of ssl 3.0. in addition, ssl 2.0 support is enti
rely removed in firefox 8. decisions about which cipher suites a particular organization decides to enable depend on trade-offs among the sensitivity of the data involved, the speed of the cipher, and the applicability of export rules. some organizations may want to disable the weaker ciphers to prevent ssl connections with weaker encryption. however, due to u.s. government restrictions on products...
...e. that way, when a domestic client or server is dealing with another domestic server or client, respectively, it will negotiate the use of the strongest ciphers available. and when an domestic client or server is dealing with an international server or client, it will negotiate the use of those ciphers that are permitted under u.s. export regulations. however, since 40-bit ciphers can be broken
relatively quickly, administrators whose user communities can use stronger ciphers without violating export restrictions should disable the 40-bit ciphers if they are concerned about access to data by eavesdroppers. red hat console does not support all of the cipher suites supported by red hat clients and servers. to ensure that red hat console can control an ssl-enabled server, the server must enab...
Vulnerabilities - Archive of obsolete content
and threats have changed a great deal since then, so the trust assumptions inherent in its design then are unlikely to still be reasonable today. it may be hard to differentiate software feature misuse vulnerabilities from the other two categories. for example, both software flaws and misuse vulnerabilities may be caused by deficiencies in software design processes. however, software flaws are pu
rely negative—they provide no positive benefit to security or functionality—while software feature misuse vulnerabilities occur as a result of providing additional features. there may also be confusion regarding misuse vulnerabilities for features that can be enabled or disabled—in a way, configured—versus security configuration issues. the key difference is that for a misuse vulnerability, ...
... a misuse vulnerability, the configuration setting enables or disables the entire feature and does not specifically alter just its security; for a security configuration issue vulnerability, the configuration setting alters only the software’s security. for example, a setting that disables all use of html in emails has a significant impact on both security and functionality, so a vulnerability
related to this setting would be a misuse vulnerability. a setting that disables the use of an antiphishing feature in an email client has a significant impact on only security, so a vulnerability with that setting would be considered a security configuration issue vulnerability. the presence of vulnerabilities no system is 100% secure: every system has vulnerabilities. at any given time, a system ...
Common Firefox theme issues and solutions - Archive of obsolete content
bled is not styled properly compared to windows and is not changing colors when in private browsing mode. the cause of this issue is that linux firefox uses a different id for the firefox button from windows. the fix is to make sure any style rule that references #appmenu-button also has a comparable reference to #appmenu-toolbar-button in chrome://browser/skin/browser.css. if your firefox button
relies on some button styling from toolbarbuttons.css you'll need to add comparable style rules for #appmenu-toolbar-button in browser.css. toolbars and menus firefox application button application button doesn't change styling for private browsing mode when in private browsing mode there needs to be a visual difference to the firefox app button that is displayed when tabs are on top and the menu...
...://global/skin/media/videocontrols.css the solution to this issue is to add the following name space to the second line of the file right after, and in addition to, the existing @namespace: @namespace html url("http://www.w3.org/1999/xhtml"); you can generate the error console message by going to mozilla's mission page. if you are using the extension console² you can easily filter out content
related messages to see just chrome issues. warning: unknown property (obsolete css rules) -moz-border-radius firefox no longer supports -moz-border-radius style properties. use css standard border-radius properties instead (supported by firefox since firefox 4). -moz-box-shadow firefox no longer supports -moz-box-shadow style property. use css standard box-shadow property instead (supported by ...
Scratchpad - Archive of obsolete content
ever, after the code returns, an object inspector is opened to let you examine the returned value. for example, if you enter the code: window then choose inspect, the object inspector is shown that looks something like this: display the display option executes the selected code, then inserts the result directly into your scratchpad editor window as a comment, so you can use it as a repl.
reload and run the
reload and run option is only available in the execute menu. it first
reloads the page, then executes the code when the page's "load" event fires. this is useful for running the code in a pristine environment. running scratchpad in the browser context you can run scratchpad in the context of the browser as a whole rather than a specific web page. this is useful if you are workin...
...atchpad shift + f4 shift + f4 shift + f4 run scratchpad code ctrl + r cmd + r ctrl + r run scratchpad code, display the result in the object inspector ctrl + i cmd + i ctrl + i run scratchpad code, insert the result as a comment ctrl + l cmd + l ctrl + l re-evaluate current function ctrl + e cmd + e ctrl + e
reload the current page, then run scratchpad code ctrl + shift + r cmd + shift + r ctrl + shift + r save the pad ctrl + s cmd + s ctrl + s open an existing pad ctrl + o cmd + o ctrl + o create a new pad ctrl + n cmd + n ctrl + n close scratchpad ctrl + w cmd + w ctrl + w pretty print the code in scratchpad ct...
Using IO Timeout And Interrupt On NT - Archive of obsolete content
ointing to freed memory. this is problematic. canceling overlapped io by closing the file descriptor therefore, we need to cancel the outstanding overlapped io request before the thread exits. nt's <tt>cancelio()</tt> function would be ideal for this purpose. unfortunately, <tt>cancelio()</tt> is not available on nt 3.51. so we can't go this route as long as we are supporting nt 3.51. the only
reliable way to cancel outstanding overlapped io request that works on both nt 3.51 and 4.0 is to close the file descriptor, hence the rule of thumb stated at the beginning of this memo. limitations this seemingly harsh way to force the completion of outstanding overlapped io request has the following limitations: it is difficult for threads to shared a file descriptor. for example, suppose thre...
...sing that socket at all times. once there is a timeout or interrupt error, the file descriptor is no longer usable. suppose the file descriptor is intended to be used for the life time of the process, for example, the logging file, this is really not acceptable. a possible solution is to add a <tt>pr_disableinterrupt()</tt> function to turn off interrupts when accessing such file descriptors. a
related known bug is that timeout and interrupt don't work for <tt>pr_connect()</tt> on nt. this bug is due to a different limitation in our nt implementation. conclusions as long as we need to support nt 3.51, we need to program under the guideline that after an io timeout or interrupt error, the thread must make sure the file descriptor is closed before it exits. programs should also take care in...
Using the W3C DOM - Archive of obsolete content
w3c dom standards are well supported by modern browsers, however the standards are moving target so support for newer features should be tested before use. using w3c standards means that code will run in compliant browsers with minimal need for cross-browser support, whereas code based on proprietary standards requires much more effort to be compatible with multiple user agents. ...
...ereas code based on proprietary standards requires much more effort to be compatible with multiple user agents. unsupported dom-
related properties the following ie proprietary document object properties are not supported in the w3c document object model: document.layers[] id_attribute_value document.all document.all.id_attribute_value document.all[id_attribute_value] the following form
related properties (originally from internet explorer) are not supported in the w3c document object model: formname.inputname.value inputname.value formctrlname document.forms(0) (note: document.forms[0] (using square brackets) uses the dom standard forms collection) scripts that use these properties will throw errors in most standards-compliant browsers. instead, use the w3c dom properties a...
New in JavaScript 1.1 - Archive of obsolete content
netscape navigator 3.0 was the second major version of the browser with javascript support. javascript versions netscape navigator 3.0 also introduced javascript language versions. <script language="javascript"> <!-- javascript for navigator 2.0. --> <script language="javascript1.1"> <!-- javascript for navigator 3.0. ...
...in the context of the specified object. math.random() now works on every platform. tostring(): added radix parameter, which specifies the base to use for representing numeric values. isnan() now works on every platform (not only unix anymore) parsefloat() and parseint() now return nan on all platforms, if the first character of the specified string cannot be converted to a number; in previous
releases, it returned nan on solaris and irix and zero on all other platforms. ...
RDF: Resource Description Framework for metadata - Archive of obsolete content
l. the rdf family of specifications is maintained by the world wide web consortium (w3c). the rdf metadata model is based upon the idea of making statements about resources in the form of a subject-predicate-object expression, called a triple in rdf terminology. the subject is the resource, the "thing" being described. the predicate is a trait or aspect about that resource, and often expresses a
relationship between the subject and the object. the object is the object of the
relationship or value of that trait. documentation directions of the mozilla rdf engine this presentation shows new developments in the mozilla rdf engine. these include plans to expose the rdf api to public web content, as well as performance and correctness improvements. what is rdf tim bray's introduction ...
... bray's introduction to the resource description framework, at xml.com. ...
Writing JavaScript for XHTML - Archive of obsolete content
s are what they were intended: comments. before processing the file, all comments will be stripped from the document, so enclosing your script in them is like throwing your lunch in a piranha pool. moreover, there's really no point to commenting out your scripts -- no browser written in the last ten years will display your code on the page. the easy solution is to do away with the commenting enti
rely: <script type="text/javascript"> window.alert("hello world!"); </script> this will work so long as your code doesn't contain characters which are "special" in xml, which usually means < and &. if your code contains either of these, you can work around this with cdata sections: <script type="text/javascript"> <![cdata[ // is the variable a non-negative integer less than 10? if (var...
...lity with very old browsers that do not recognize the script or style tags resulting in their contents displayed on the page, you can use this: <script type="text/javascript"><!--//--><![cdata[//><!-- ... //--><!]]></script> <!-- (for styles, it is different) --> <style type="text/css"><!--/*--><![cdata[/*><!--*/ ... /*]]>*/--></style> see this document for more on the issues
related to application/xhtml+xml and text/html (at least as far as xhtml 1.* and html 4; html5 addresses many of these problems). problem: names in xhtml and html are represented in different cases scripts that used getelementsbytagname() with an upper case html name no longer work, and attributes like nodename or tagname return upper case in html and lower case in xhtml. solution: use or convert ...
XForms Custom Controls - Archive of obsolete content
nd web pages as xforms matures and the user base grows. and with these new uses, more and more flexibility will be desired from the controls. introducing custom controls into your environment may be just the solution you are looking for. for example, you might want to render images that are held inside an instance document or you would like to show a disabled trigger when its bound node becomes ir
relevant rather than having it not display (the current default behavior). every xforms control's presentation has its own xbl binding. in many cases different values provided for the appearance or mediatype attributes will determine which xbl binding will be used for a particular xforms control on the form. as mentioned in the spec, the appearance attribute can be used to influence the look and feel...
...ccessors.idl). currently interface is: interface nsixformsaccessors : nsisupports { /** * return value of instance node. */ domstring getvalue(); /** * set value of instance node. */ void setvalue(in domstring value); /** * return true if the instance node is readonly as determined by the mdg. */ boolean isreadonly(); /** * return true if the instance node is
relevant as determined by the mdg. */ boolean is
relevant(); /** * return true if the instance node is required as determined by the mdg. */ boolean isrequired(); /** * return true if instance node is valid as determined by the mdg. */ boolean isvalid(); /** * return true if the control is bound to an instance node. */ boolean hasboundnode(); /** * return th...
Troubleshooting XForms Forms - Archive of obsolete content
always run your form through the xforms validator. it checks your form for a lot of errors. it is not perfect, but it can spot a lot of errors. always check the javascript console (tools, javascript console) for errors. if you get errors there, do not expect your form to work. ...
...froms buddy is located at: xforms buddy using http proxy you can use the charles firefox extension to view your http session data including http header data. if all else fails ask the community ask on one of the mailing lists or on irc. see the community section on the xforms main page. check for known bugs / missing features you can check the known bugs/missing features we have in the
release notes of the extension. 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. ...
Mozilla XForms User Interface - Archive of obsolete content
lectable values (see the spec). message used in combination with event listeners to display a message to the user when the specified event occurs (see the spec). xforms user interface these elements are mainly used to organize and manage the form's markup. they can be bound to instance nodes to define context for the xforms controls that they contain, should any of their child nodes happen to use
relative xpath expressions. binding these elements to instance data is also a way to apply model item properties (for example,
relevancy) to the elements. elements in this section do not have any behaviors that are dependent on the host language. group this element is used to logically group xforms elements together (see the spec). switch this element is used in conjunction with case and toggle eleme...
... toggle element is used (as an event handler) to make a case visible and thereby hiding all other case elements contained by the same switch. repeat a repeat element contains markup and is itself bound to a nodeset in an instance document (see the spec). for each node in the nodeset, the contents of the repeat element will be displayed in the form. that node will serve as the context node for any
relative xpath expressions in that set of repeated markup. for example, if a repeat is bound to a nodeset that contains 5 nodes and the repeat contains an output element that echoes the current node, then the user will see 5 outputs in the form. combined together, these outputs would echo the value of every node in the selected nodeset. ...
XForms - Archive of obsolete content
s is a w3c specification. xforms tutorial and cookbook xforms in wikibook format - over 50 examples tested with firefox. xforms support can be added to firefox and seamonkey by installing the mozilla xforms extension. this extension, while supporting a significant subset of the xforms 1.0 and 1.1 candidate recommendations, is not actively maintained any more since about 2010. the last official
release has been done for firefox 3.6 and is available for download on addons.mozilla.org. for more details about the future of the mozilla xforms extension see this blog post. documentation implementation status implementation status of the mozilla xforms extension building get started with building your own xforms extensions from source. troubleshooti...
... xforms ui elements reference xforms user interface elements documentation. ...
RDF in Fifty Words or Less - Archive of obsolete content
okay, so maybe this is a bit more than fifty words, but the key points are pretty simple (and put into bold text for you manager-types who just want to get straight to the point). the resource description framework, or "rdf", is really two things. first, rdf is a graph-based model for describing internetresources (like web pages and email messages), and how these resources
relate to one another. but what does that mean,really? to a mozilla developer, it means that the rdf data model (the "graph") can be used as a mechanism for integrating and organizing internet resources. let's look at an example:bookmarks. right now, most web browsers let you organize your bookmarks hierarchically intofolders. each bookmark is apointer to a web page called a uri (uniform resource identifier). but a web...
...ether into folders as you please, or maybe even creating "smart" folders that, when you open them, dynamically generate their contents by running common search that you define. and a "bookmark" could really have arbitrary properties associated with it: you might want to invent your own "classification" scheme for a bookmarka la macintosh's "hot", "warm", "cool" color coding. or you might want to
relate a bookmark to another bookmark, or keep it in multiple "folders" at once. the rdf graph provides a perfect data model upon which to build a "universal" bookmarking service as described above: the graph can contain pointers to arbitrary resources and can group them in just about any way that you can imagine. but wait, there's more... second, rdf is a serialization syntax. this syntax allows ...
Using the Right Markup to Invoke Plugins - Archive of obsolete content
sent. if the flash activex control is not installed, ie will then go to the url referenced by the codebase attribute and retrieve the activex control. additional param elements (which are "children" of the above object element) specify configuration parameters for the flash plugin. for instance, the param name="movie" tells the flash plugin the location of the swf file to start playing. with the
release of netscape 7.1, this kind of activex use of the object element is supported for use with the microsoft® windows media player. only the windows media player is supported as an activex control in netscape 7.1. the details are covered in another article. browsers such as netscape 7 will not render the flash plugin if the above kind of markup is used, because netscape 7 does not support active...
...ment.write('<\/object>'); } see also: flash satay the object element and java mozilla-based browsers such as netscape 6.x, netscape 7, and compuserve 7 ship with the java plugin that sun provides. users installing netscape 6.x and netscape 7 have a choice of whether or not to install java. unlike netscape communicator 4.x, netscape 6.x and 7 do not have a default java virtual machine -- they
rely on sun's plugin. during the netscape communicator 4.x days, netscape communications used to develop a java virtual machine which supported java 1.5.0 and below. now, with netscape 6 and 7, the java virtual machine is sun's plugin. netscape no longer develops or ships a default netscape java virtual machine with the browser. sun's java plugin can be invoked by the object element, just like any o...
Common causes of memory leaks in extensions - Extensions
this page explains coding patterns that cause extension to cause memory leaks. causes of zombie compartments zombie compartments are a particular kind of memory leak. all zombie compartments in extensions are caused by a failure to
release resources appropriately in certain circumstances, such as when a window is closed, a page unloads, or an extension is disabled or removed. while bug 695480 should prevent most of these compartment leaks, add-ons still need to be aware of the practices that caused these leaks, as the fix causes many add-ons which would have otherwise caused a leak to instead throw errors when attempting to access nodes from documents which no longer exist. storing references to window objects and dom nodes the most common problem is extensions holding onto refer...
...rvices on how to properly unregister/remove your observers and components during unload. forgetting to unload javascript modules in restartless add-ons another common cause of leaks is forgetting to unload javascript code modules in bootstrapped add-ons. when your add-on gets updated and re-enabled, the previous module version that is still loaded will be used, which might break your add-on enti
rely. the following example shows how to unload your modules again (bootstrap.js): components.utils.import("resource://gre/modules/services.jsm"); function startup(data, reason) { // this assumes your add-on did register some chrome components.utils.import("chrome://myaddon/content/mymodule.jsm"); } function shutdown(data, reason) { // no need to do regular clean up when the application is ...
Introduction to game development for the Web - Game development
and we're not talking about simple card games or multi-player social games that have in the olden days been done using flash®. ...
...one else just because your game is in their ecosystem. instead, charge what you want and use whatever payment processing service you like. again with more control, you can update your game whenever you want. no waiting breathlessly for approval while someone hidden within another company decides whether or not your critical bug fix will ship today or tomorrow. control your analytics! instead of
relying on someone else to make all the decisions about what analytics you need, you can collect your own -- or choose the third party that you like the best -- to gather information about your sales and your game's reach. you get to manage your customer
relationship more closely, in your own way. no more having customer feedback filtered through an app store's limited mechanisms. engage with your c...
Desktop mouse and keyboard controls - Game development
you can see this example in action online at end3r.github.io/javascript-game-controls and the full source code can be found at github.com/end3r/javascript-game-controls. phaser approach as i mentioned before you can write everything on your own, but you can also take the advantage of built-in functions in frameworks like phaser — these will make your l...
...ton will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and will execute the clickenclave() function when clicked. we can assign actions directly to the buttons: this.buttonshoot = this.add.button(this.world.width*0.5, 0, 'button-alpha', null, this); this.buttonshoot.oninputdown.add(this.shootingpressed, this); this.buttonshoot.oninputup.add(this.shooting
released, this); the button used for shooting works perfectly fine on both the mobile and desktop approach. if you want to use the mouse's cursor position on the screen you can do so with this.game.input.mousepointer. let's assume you'd like to shoot a bullet when the right half of the screen is clicked with a mouse — it would be something like this: if(this.game.input.mousepointer.isdown) { ...
Implementing game control mechanisms - Game development
r squeezing bananas. setting up the environment let's start with a quick overview of the game's folder structure, javascript files and in-game states, so we know what's happening where. the game's folders look like this: as you can see there are folders for images, javascript files, fonts and sound effects. ...
...states, so we know what's happening where. the game's folders look like this: as you can see there are folders for images, javascript files, fonts and sound effects. the src folder contains the javascript files split as a separate states — boot.js, p
reloader.js, mainmenu.js and game.js — these are loaded into the index file in this exact order. the first one initializes phaser, the second p
reloads all the assets, the third one controls the main menu welcoming the player, and the fourth controls the actual gameplay. every state has its own default methods: p
reload(), create(), and update(). the first one is needed for p
reloading required assets, create() is executed once the state had started, and update() is executed on every frame. for example, you can define a button in the create(...
Efficient animation for web games - Game development
t css transitions/animations are much higher level than javascript, and express a very specific intent. because of this, the browser can make some assumptions that it can’t easily make when you’re manually tweaking values in javascript. to take a concrete example, if you start a css transition to move something from off-screen so that it is fully visible on-screen, the browser knows that the
related content will end up completely visible to the user and can then pre-render that content. when you animate position with javascript, the browser cannot easily make that same assumption, and so you might end up causing it to draw only the newly-exposed region of content, which may introduce slow-down. there are signals at the beginning and end of animations that allow you to attach javascript c...
... to schedule them at a time when screen updates are unlikely to occur, or when such updates are of a more subtle nature. modern console games, for example, tend to prioritise framerate during player movement and combat, but may prioritise image quality or physics detail when compromise to framerate and input response would be less noticeable. measure performance there are some popular animation-
related libraries and ui toolkits with animation functions that still do things like using settimeout to drive their animations, drive all their animations completely individually, or other similar things that aren’t conducive to maintaining a high frame-rate. one of the goals for the puzzowl game is for it to be a solid 60fps on reasonable hardware (for the record, it’s almost there on galaxy ne...
Finishing up - Game development
ctx.fillstyle = "#0095dd"; ctx.filltext("lives: "+lives, canvas.width-65, 20); } instead of ending the game immediately, we will decrease the number of lives until they are no longer available. we can also reset the ball and the paddle positions when the player begins with their next life. ...
...eset the ball and the paddle positions when the player begins with their next life. so, in the draw() function replace the following three lines: alert("game over"); document.location.
reload(); clearinterval(interval); // needed for chrome to end game with this, we can add slightly more complex logic to it as given below: lives--; if(!lives) { alert("game over"); document.location.
reload(); clearinterval(interval); // needed for chrome to end game } else { x = canvas.width/2; y = canvas.height-30; dx = 2; dy = -2; paddlex = (canvas.width-paddlewidth)/2; } now, when the ball hits the bottom edge of the screen, we're subtracting one life from the lives variable. if there are no lives left, the game is lost; if there are still some lives left, then the po...
Paddle and keyboard controls - Game development
rightpressed = true; } else if(e.key == "left" || e.key == "arrowleft") { leftpressed = true; } } function keyuphandler(e) { if(e.key == "right" || e.key == "arrowright") { rightpressed = false; } else if(e.key == "left" || e.key == "arrowleft") { leftpressed = false; } } when we press a key down, this information is stored in a variable. the
relevant variable in each case is set to true. when the key is
released, the variable is set back to false. both functions take an event as a parameter, represented by the e variable. from that you can get useful information: the key holds the information about the key that was pressed. most browsers use arrowright and arrowleft for the left/right cursor keys, but we need to also include right and ...
...t as a parameter, represented by the e variable. from that you can get useful information: the key holds the information about the key that was pressed. most browsers use arrowright and arrowleft for the left/right cursor keys, but we need to also include right and left checks to support ie/edge browsers. if the left cursor is pressed, then the leftpressed variable is set to true, and when it is
released, the leftpressed variable is set to false. the same pattern follows with the right cursor and the rightpressed variable. the paddle moving logic we've now set up the variables for storing the info about the pressed keys, event listeners, and
relevant functions. next we'll get into the code to use all of the things we just set up and to move the paddle on the screen. inside the draw() funct...
Build the brick field - Game development
ur previous variable definitions: var bricks; var newbrick; var brickinfo; the bricks variable will be used to create a group, newbrick will be a new object added to the group on every iteration of the loop, and brickinfo will store all the data we need. rendering the brick image next, let's load the image of the brick — add the following load.image() call just below the others: function p
reload() { // ... game.load.image('brick', 'img/brick.png'); } you also need to grab the brick image from github and save it in your /img directory. drawing the bricks we will place all the code for drawing the bricks inside an initbricks function to keep it separated from the rest of the code. add a call to initbricks at the end of the create() function: function create(){ // ... ...
... compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps something is missing though. the ball goes through the bricks without stopping — we need proper collision detection. « ...
Extra lives - Game development
sible = false; this way changing the font in one variable will apply the changes to every place it is used. the lives handling code to implement lives in our game, let's first change the ball's function bound to the onoutofbounds event. instead of executing an anonymous function and showing the alert right away : ball.events.onoutofbounds.add(function(){ alert('game over!'); location.
reload(); }, this); we will assign a new function called ballleavescreen; delete the previous event handler (shown above) and replace it with the following line: ball.events.onoutofbounds.add(ballleavescreen, this); we want to decrease the number of lives every time the ball leaves the canvas. add the ballleavescreen() function definition at the end of our code: function ballleavescreen() { ...
...if yes, then the player still has some lives left and can continue to play — they will see the life lost message, the ball and paddle positions will be reset on screen and on the next input (click or touch) the message will be h...
Load the assets and print them on screen - Game development
/lesson03.html. our game will feature a ball rolling around the screen, bouncing off a paddle, and destroying bricks to earn points — familiar, huh? in this article we'll look at how to add sprites into our gameworld. having a ball let's start by creating a javascript variable to represent our ball. add the following line between the game initialization code (our var game... block) and the p
reload() function: var ball; note: for the sake of this tutorial, we will use global variables. the purpose of the tutorial is to teach phaser-specific approaches to game development rather than dwelling on subjective best approaches. loading the ball sprite loading images and printing them on our canvas is a lot easier using phaser than using pure javascript. to load the asset, we will use th...
...the tutorial is to teach phaser-specific approaches to game development rather than dwelling on subjective best approaches. loading the ball sprite loading images and printing them on our canvas is a lot easier using phaser than using pure javascript. to load the asset, we will use the game object created by phaser, executing its load.image() method. add the following new line just inside the p
reload() function, at the bottom: function p
reload() { // ... game.load.image('ball', 'img/ball.png'); } the first parameter we want to give the asset is the name that will be used across our game code — for example, in our ball variable name — so we need to make sure it is the same. the second parameter is the
relative path to the graphic asset. in our case, we will load the image for...
Physics - Game development
again at the bottom of create(): ball.body.velocity.set(150, 150); removing our previous update instructions remember to remove our old method of adding values to x and y from the update() function: function update() { ball.x += 1; ball.y += 1; } we are now handling this properly, with a physics engine. ...
...at the moment, the physics engine has gravity and friction set to zero. adding gravity would result in the ball falling down while friction would eventually stop the ball. fun with physics you can do much more with physics, for example by adding ball.body.gravity.y = 100; you will set the vertical gravit...
Visual-js game engine - Game development
1) click create application 2) enter new application name in input prompt 3) select folder fo...
...de from visual-js core also . see source code : paths.js see the pen visual js - pencil by visualjs game engine (@zlatnaspirala) on codepen. online demo examples at : https://jsfiddle.net/user/zlatnaspirala/fiddles/ demo slot mashine basic demo at : https://jsfiddle.net/zlatnaspirala/7d0d8v6d/ help about new 2d part - implementation of matter.js based typescript . i make strong
relation with webpack and project . build folder is full vendor nature. html css and resources come from dependency logic taken from source. to make all dependency works in build proccess we need some plugins. features : tile's background draw for images (alias sprite - but for now there's no sprite and frame by frame animation methods). small engine config . some option in aspect view like np...
Visual typescript game engine - Game development
r all browsers) implemented. socketio used for session staff. multirtc2 used for data transfer also for video chat. multirtc3 alias 'broadcaster' used for video chat. client part to make all dependency works in build process we need some plugins. npm install npm run build navigate in browser /build/app.html to see client app in action -the client part is a browser web application. no
reloading or redirecting. this is a single page application. i use html request only for loading local/staged html (like register, login etc.). networking is based on websocket full-duplex communication only.you must be conform with classic socket connection methodology. webrtc can be used for any proportion. already implemented: -video chat webrtc (sip) chat and data communication. look back on mai...
... template is platformer. this is high-level programming in this software. class gameplay extends platformer, it good for start. class starter is base class for my canvas part and matter.ts (matter.js) implementation. it is injected to the platformer to make full operated work. gameslist args for ioc constructor is for now just symbolic for now. (wip) in ioc, you can make strong class dependency
relations. use it for your own structural changes. main dependency file // symbolic for now const plarformergameinfo = { name: "crypto-runner", title: "play platformer crypto runner!", }; // symbolic for now const gameslist: any[] = [ plarformergameinfo, ]; const master = new ioc(gameslist); const appicon: appicon = new appicon(master.get.browser); master.singlton(platformer, master.get.st...
Handling different text directions - Learn web development
t in this scenario, is to essentially swap height and width along with the writing mode. when we're in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode. to make this easier, css has recently developed a set of mapped properties. these essentially replace physical properties — things like width and height — with logical, or flow
relative versions. the property mapped to width when in a horizontal writing mode is called inline-size — it refers to the size in the inline dimension. the property for height is named block-size and is the size in the block dimension. you can see how this works in the example below where we have replaced width with inline-size. logical margin, border, and padding properties in the last two l...
...nd the image. you could replace left with inline-start as shown in the example below. change the writing mode on this example to vertical-rl to see what happens to the image. change inline-start to inline-end to change the float. here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is. currently, only firefox supports flow
relative values for float. if you are using google chrome or microsoft edge, you may find that the image did not float. should you use physical or logical properties? the logical properties and values are newer than their physical equivalents, and therefore have only recently been implemented in browsers. you can check any property page on mdn to see how far back the browser support goes. if you ...
Pseudo-classes and pseudo-elements - Learn web development
previous overview: building blocks next the next set of selectors we will look at are referred to as pseudo-classes and pseudo-elements. there are a large number of these, and they often serve quite specific purposes. 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. once again the
relevant mdn page for each selector is helpful in explaining browser support. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the pseudo-class and pseudo-element selectors. what is a pseudo-class? a pseud...
... element and use an element selector; however, that would fail if the number of words you had wrapped were longer or shorter than the parent element's width. as we tend not to know how many words will fit on a line — as that will change if the screen width or font-size changes — it is impossible to robustly do this by adding html. the ::first-line pseudo-element selector will do this for you
reliably — if the number of words increases and decreases it will still only select the first line. it acts as if a <span> was magically wrapped around that first formatted line, and updated each time the line length changed. you can see that this selects the first line of both paragraphs. combining pseudo-classes and pseudo-elements if you wanted to make the first line of the first paragraph...
Sizing items in CSS - Learn web development
ize they are displayed in the design. downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection. note: find out more about responsive image techniques. viewport units the viewport — which is the visible area of your page in the browser you are using to view a site — also has a size. in css we have units which
relate to the size of the viewport — the vw unit for viewport width, and vh for viewport height. using these units you can size something
relative to the viewport of the user. 1vh is equal to 1% of the viewport height, and 1vw is equal to 1% of the viewport width. you can use these units to size boxes, but also text. in the example below we have a box which is sized as 20vh and 20vw. the box conta...
...d 1vw is equal to 1% of the viewport width. you can use these units to size boxes, but also text. in the example below we have a box which is sized as 20vh and 20vw. the box contains a letter a, which has been given a font-size of 10vh. if you change the vh and vw values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized
relative to the viewport. to see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <iframe> that contains the example shown above is its viewport). open the example, resize the browser window, and observe what happens to the size of the box and text. sizing things according to the viewport can be useful...
Flexbox - Learn web development
s or columns. items flex to fill additional space and shrink to fit into smaller spaces. this article explains all the fundamentals. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to learn how to use the flexbox layout system to create web layouts. why flexbox? for a long time, the only
reliable cross browser-compatible tools available for creating css layouts were things like floats and positioning. these are fine and they work, but in some ways they are also rather limiting and frustrating. the following simple layout requirements are either difficult or impossible to achieve with such tools, in any kind of convenient, flexible way: vertically centering a block of content insi...
... article { flex: 1; } this is a unitless proportion value that dictates how much of the available space along the main axis each flex item will take up compared to other flex items. in this case, we are giving each <article> element the same value (a value of 1), which means they will all take up an equal amount of the spare space left after things like padding and margin have been set. it is
relative to other flex items, meaning that giving each flex item a value of 400000 would have exactly the same effect. now add the following rule below the previous one: article:nth-of-type(3) { flex: 2; } now when you refresh, you'll see that the third <article> takes up twice as much of the available width as the other two — there are now four proportion units available in total (since 1 + 1...
Floats - Learn web development
nd both elements. change your document so that the first paragraph and our floated box are wrapped with a <div> with a class of wrapper. <div class="wrapper"> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> </div> in your css, add the following rule for the .wrapper class and then
reload the page: .wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; } in addition, remove the original .cleared class: .cleared { clear: left; } you will see that, just like in the example where we put a background color on the paragraph, the background color runs behind the float. float example 4 <h1>simple float example</h1> <div class="wrapper"> <div clas...
...uation properly. the clearfix hack the way that this situation has traditionally been dealt with is to use something known as a "clearfix hack". this involves inserting some generated content after the box which contains the float and wrapping content, and setting that to clear both. add the following css to our example: .wrapper::after { content: ""; clear: both; display: block; } now
reload the page and the box should clear. this is essentially the same as if you had added an html element such as a <div> below the items and set it to clear: both. float example 5 <h1>simple float example</h1> <div class="wrapper"> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> <...
Multiple-column layout - Learn web development
ns some very simple html; a wrapper with a class of container inside which is a heading and some paragraphs. the <div> with a class of container will become our multicol container. we switch on multicol by using one of two properties column-count or column-width. the column-count property will create as many columns as the value you give it, so if you add the following css to your stylesheet and
reload the page, you will get three columns: .container { column-count: 3; } the columns that you create have flexible widths — the browser works out how much space to assign each column. column-count example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } <div class="container"> <h1>simple multicol example</h1> <p> ...
...or .card. this is the container of the heading and text, and therefore we do not want to fragment this box. at the present time it is also worth adding the older property page-break-inside: avoid for best browser support. .card { break-inside: avoid; page-break-inside: avoid; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; margin: 0 0 1em 0; }
reload the page and your boxes should stay in one piece. multicol fragmentation body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } <div class="container"> <div class="card"> <h2>i am the heading</h2> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla luctus aliquam dolor, eu lacinia lorem pla...
Practical positioning examples - Learn web development
focus, .info-box li a:hover { background-color: #a60000; color: white; } .info-box li a.active { background-color: #a60000; color: white; } styling the panels the next job is to style our panels. let's get going! first, of all, add the following rule to style the .panels <div> container. ...
... background-color: #a60000; color: white; } styling the panels the next job is to style our panels. let's get going! first, of all, add the following rule to style the .panels <div> container. here we simply set a fixed height to make sure the panels fit snugly inside the info-box, position
relative to set the <div> as the positioning context, so you can then place positioned child elements
relative to it and not the <html> element, and finally we clear the float set in the css above so that it doesn't interfere with the remainder of the layout. .info-box .panels { height: 352px; position:
relative; clear: both; } finally for this section, we will style the individual <article> elements that comprise our panels. the first rule we'll add will absolutely position the panels, and m...
What is CSS? - Learn web development
t is not the only one. there are other user agents available — such as those which convert html and css documents into pdfs to be printed. css can be used for very basic document text styling — for example changing the color and size of headings and links. it can be used to create layout — for example turning a single column of text into a layout with a main content area and a sidebar for
related information. it can even be used for effects such as animation. have a look at the links in this paragraph for specific examples. css syntax css is a rule-based language — you define rules specifying groups of styles that should be applied to particular elements or groups of elements on your web page. for example "i want the main heading on my page to be shown as large red text." the fol...
...browser today! as a newcomer to css, it is likely that you will find the css specs overwhelming — they are intended for engineers to use to implement support for the features in user agents, not for web developers to read to understand css. many experienced developers would much rather refer to mdn documentation or other tutorials. it is however worth knowing that they exist, understanding the
relationship between the css you are using, browser support (see below), and the specs. browser support once css has been specified then it is only useful for us in developing web pages if one or more browsers have implemented it. this means that the code has been written to turn the instruction in our css file into something that can be output to the screen. we'll look at this process more in the ...
How do I start to design my website? - Learn web development
ons to make. (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. how could a website bring me to my goals? so you have a list of goals and you feel you need a website to reach those goals. are you sure? let's look back at our example. we have five goals connected to music, one goal
related to personal life (finding your significant other), and the completely un
related cat photos. is it reasonable to build a single website to cover all those goals? is it even necessary? after all, scores of existing web services might bring you to your goals without building a new website. finding a girl/boyfriend is a prime case where it makes more sense to use existing resources rather than b...
...a way to handle payment make a mechanism on your site for people to place orders teach music through videos record video lessons prepare video files viewable online (again, could you do this with existing web services?) give people access to your videos on some part of your website two things to notice. first, some of these items are not web-
related (e.g., record music, write articles). often those offline activities matter even more than the web side of the project. in sales, for instance, it's far more important and time-consuming to handle supply, payment, and shipment than to build a website where people can place orders. second, setting out actionable steps leads to new questions you'll need to answer. usually there turn out to be ...
What is a web server? - Learn web development
eeper dive to review: to fetch a webpage, your browser sends a request to the web server, which searches for the requested file in its own storage space. upon finding the file, the server reads it, processes it as-needed, and sends it to the browser. let's look at those steps in more detail. hosting files first, a web server has to store the website's files, namely all html documents and their
related assets, including images, css stylesheets, javascript files, fonts, and video. technically, you could host all those files on your own computer, but it's far more convenient to store files all on a dedicated web server because: a dedicated web server is typically more available. (up and running) excusing downtime and systems troubles, a dedicated web server is always connected to the int...
...ypertext transfer protocol). as its name implies, http specifies how to transfer hypertext (linked web documents) between two computers. a protocol is a set of rules for communication between two computers. http is a textual, stateless protocol. textual all commands are plain-text and human-readable. stateless neither the server nor the client remember previous communications. for example,
relying on http alone, a server can't remember a password you typed or remember your progress on an incomplete transaction. you need an application server for tasks like that. (we'll cover that sort of technology in other articles.) http provides clear rules for how a client and server communicate. we'll cover http itself in a technical article later. for now, just be aware of these things: only...
Sending form data - Learn web development
irst steps module. on the client side: defining how to send the data the <form> element defines how the data will be sent. all of its attributes are designed to let you configure the request to be sent when a user hits a submit button. the two most important attributes are action and method. the action attribute the action attribute defines where the data gets sent. ...
...tion and method. the action attribute the action attribute defines where the data gets sent. its value must be a valid
relative or absolute url. if this attribute isn't provided, the data will be sent to the url of the page containing the form — the current page. in this example, the data is sent to an absolute url — https://example.com: <form action="https://example.com"> here, we use a
relative url — the data is sent to a different url on the same origin: <form action="/somewhere_else"> when specified with no attributes, as below, the <form> data is sent to the same page that the form is present on: <form> note: it's possible to specify a url that uses the https (secure http) protocol. when you do this, the data is encrypted along with the rest of the request, even if the fo...
Your first form - Learn web development
it simple and stay focused: ask only for the data you absolutely need. designing forms is an important step when you are building a site or application. it's beyond the scope of this article to cover the user experience of forms, but if you want to dig into that topic you should read the following articles: smashing magazine has some good articles about forms ux, including an older but still
relevant extensive guide to web form usability article. uxmatters is also a very thoughtful resource with good advice from basic best practices to complex concerns such as multi-page forms. in this article, we'll build a simple contact form. let's make a rough sketch. our form will contain three text fields and one button. we are asking the user for their name, their e-mail and the message they...
... note: you can find our version on github at first-form-styled.html (also see it live). sending form data to your web server the last part, and perhaps the trickiest, is to handle form data on the server side. the <form> element defines where and how to send the data thanks to the action and method attributes. we provide a name to...
Web forms — Working with user data - Learn web development
k at the other sections listed below we'd recommend that you go away and learn some css and javascript first. the above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the html, css, and javascript topic areas — form elements are more complex than most other html elements, and they also require a close marriage of
related css and javascript techniques to get the most out of them. note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. introductory guides your first form the first article in our series provides your very first experience of crea...
...ts of a form. the different form controls basic native form controls we start off this section by looking at the functionality of the the original html <input> types in detail, looking at what options are available to collect different types of data. the html5 input types here we continue our deep dive into the <input> element, looking at the additional input types provided when html5 was
released, and the various ui controls and data collection enhancements they provide. additionally, we look at the <output> element. other form controls next we take a look at all the non-<input> form controls and associated tools, such as <select>, <textarea>, <meter>, and <progress>. form styling guides styling web forms this article provides an introduction to styling forms with css, incl...
CSS basics - Learn web development
d styles. to make the code work, we still need to apply this css (above) to your html document. otherwise, the styling won't change the appearance of the html. (if you haven't been following our project, pause here to read dealing with files and html basics.) open your index.html file. paste the following line in the head (between the <head> and </head> tags): <link href="styles/style.css"
rel="stylesheet"> save index.html and load it in your browser. you should see something like this: if your paragraph text is red, congratulations! your css is working. anatomy of a css ruleset let's dissect the css code for red paragraph text to understand how it works : the whole structure is called a ruleset. (the term ruleset is often referred to as just rule.) note the names of the indi...
...ance of the example by adding more rules and information to the style.css file. first, find the output from google fonts that you previously saved from what will your website look like?. add the <link> element somewhere inside your index.html's head (anywhere between the <head> and </head> tags). it looks something like this: <link href="https://fonts.googleapis.com/css?family=open+sans"
rel="stylesheet"> this code links your page to a style sheet that loads the open sans font family with your webpage. next, delete the existing rule you have in your style.css file. it was a good test, but let's not continue with lots of red text. add the following lines (shown below), replacing the font-family assignment with your font-family selection from what will your website look like?. the ...
Installing basic software - Learn web development
r phone or a library computer. for serious web development, it's better to invest in a desktop or laptop computer running windows, macos or linux. a text editor, to write code in. this could be a text editor (e.g. visual studio code, notepad++, sublime text, atom, gnu emacs, or vim), or a hybrid editor (e.g. dreamweaver or webstorm). office document editors are not suitable for this use, as they
rely on hidden elements that interfere with the rendering engines used by web browsers. web browsers, to test code in. currently, the most-used browsers are firefox, chrome, opera, safari, internet explorer and microsoft edge. you should also test how your site performs on mobile devices and on any old browsers your target audience may still be using (such as ie 8–10.) lynx, a text-based terminal ...
...ux distros vary; ubuntu comes with gedit by default. for web development, you can probably do better than notepad or textedit. we recommend starting with visual studio code, which is a free editor, that offers live previews and code hints. installing modern web browsers for now, we'll install a couple of desktop web browsers to test our code in. choose your operating system below and click the
relevant links to download installers for your favorite browsers: linux: firefox, chrome, opera, brave. windows: firefox, chrome, opera, internet explorer, microsoft edge, brave (windows 10 comes with edge by default; if you have windows 7 or above, you can install internet explorer 11; otherwise, you should install an alternative browser). macos: firefox, chrome, opera, safari, brave (macos and...
Getting started with HTML - Learn web development
lement content categories. while these definitions are more accurate and less ambiguous than their predecessors, the new definitions are a lot more complicated to understand than block and inline. this article will stay with these two terms. note: the terms block and inline, as used in this article, should not be confused with the types of css boxes that have the same names. while the names cor
relate by default, changing the css display type doesn't change the category of the element, and doesn't affect which elements it can contain and which elements it can be contained in. one reason html5 dropped these terms was to prevent this rather common confusion. note: find useful reference pages that include lists of block and inline elements. see block-level elements and inline elements. em...
...up = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; boolean attributes sometimes you will see attributes written without values. this is enti
rely acceptable. these are called boolean attributes. boolean attributes can only have one value, which is generally the same as the attribute name. for example, consider the disabled attribute, which you can assign to form input elements. (you use this to disable the form input elements so the user can't make entries. the disabled elements typically have a grayed-out appearance.) for example: <inpu...
From object to iframe — other embedding technologies - Learn web development
2020, most browsers block flash content by default, and by december 31st of 2020, all browsers will have completly removed all flash functionality. any existing flash content will be inaccessable after that date. so what should you do? if you need interactivity, html and javascript can readily get the job done for you with no need for java applets or outdated activex/bho technology. instead of
relying on adobe flash, you should use html5 video for your media needs, svg for vector graphics, and canvas for complex images and animations. peter elst was already writing some years ago that adobe flash is ra
rely the right tool for the job. as for activex, even microsoft's edge browser no longer supports it. test your skills! you've reached the end of this article, but can you remember the most...
...t can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: multimedia and embedding. summary the topic of embedding other content in web documents can quickly become very complex, so in this article, we've tried to introduce it in a simple, familiar way that will immediately seem
relevant, while still hinting at some of the more advanced features of the involved technologies. to start with, you are unlikely to use embedding for much beyond including third-party content like maps and videos on your pages. as you become more experienced, however, you are likely to start finding more uses for them. there are many other technologies that involve embedding external content beside...
Video and audio content - Learn web development
resources. refer to our guide to media types and formats for help selecting the best containers and codecs for your needs, as well as to look up the right mime types to specify for each. other <video> features there are a number of other features you can include when displaying an html video. take a look at our next example: <video controls width="400" height="400" autoplay loop muted p
reload="auto" poster="poster.png"> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> the resulting ui looks something like this: the new features are: width and height you can control the video size either with thes...
...cause users can find it really annoying. loop makes the video (or audio) start playing again whenever it finishes. this can also be annoying, so only use if really necessary. muted causes the media to play with the sound turned off by default. poster the url of an image which will be displayed before the video is played. it is intended to be used for a splash screen or advertising screen. ...
HTML table advanced features and accessibility - Learn web development
le> as you can infer from the brief example above, the caption is meant to contain a description of the table contents. this is useful for all readers wishing to get a quick idea of whether the table is useful to them as they scan the page, but particularly for blind users. rather than have a screenreader read out the contents of many cells just to find out what the table is about, he or she can
rely on a caption and then decide whether or not to read the table in greater detail. a caption is placed directly beneath the <table> tag. note: the summary attribute can also be used on the <table> element to provide a description — this is also read out by screenreaders. we'd recommend using the <caption> element instead, however, as summary is deprecated by the html5 spec, and can't be read ...
...sociations by programmatic ones. note: there are around 253 million people living with visual impairment according to who data in 2017. this section of the article provides further techniques for making tables as accessible as possible. using column and row headers screenreaders will identify all headers and use them to make programmatic associations between those headers and the cells they
relate to. the combination of column and row headers will identify and interpret the data in each cell so that screenreader users can interpret the table similarly to how a sighted user does. we already covered headers in our previous article — see adding headers with <th> elements. the scope attribute a new topic for this article is the scope attribute, which can be added to the <th> element to...
Looping code - Learn web development
the contact name does not match the entered search the paragraph text is set to "contact not found.", and the loop continues looping until the condition is no longer true. note: you can view the full source code on github too (also see it running live). skipping iterations with continue the continue statement works in a similar manner to break, but instead of breaking out of the loop enti
rely, it skips to the next iteration of the loop. let's look at another example that takes a number as an input, and returns only the numbers that are squares of integers (whole numbers). the html is basically the same as the last example — a simple text input, and a paragraph for output. the javascript is mostly the same too, although the loop itself is a bit different: let num = input.value; f...
...ath.floor() does to the number it is passed). if the square root and the rounded down square root do not equal one another (!==), it means that the square root is not an integer, so we are not interested in it. in such a case, we use the continue statement to skip on to the next loop iteration without recording the number anywhere. if the square root is an integer, we skip past the if block enti
rely so the continue statement is not executed; instead, we concatenate the current i value plus a space on to the end of the paragraph content. note: you can view the full source code on github too (also see it running live). while and do ... while for is not the only type of loop available in javascript. there are actually many others and, while you don't need to understand all of these now, ...
Function return values - Learn web development
unctions featuring return values. first of all, make a local copy of the function-library.html file from github. this is a simple html page containing a text <input> field and a paragraph. there's also a <script> element, in which we have stored a reference to both html elements in two variables. this little page will allow you to enter a number into the text box, and display different numbers
related to it in the paragraph below. let's add some useful functions to this <script> element. below the two existing lines of javascript, add the following function definitions: function squared(num) { return num * num; } function cubed(num) { return num * num * num; } function factorial(num) { if (num < 0) return undefined; if (num == 0) return 1; let x = num - 1; while (x > 1) { ...
...mple to work, feel free to check your code against the finished version on github (see it running live also), or ask us for help. now it's your turn! at this point, we'd like you to have a go at writing out a couple of functions of your own and adding them to the library. how about the square or cube root of the number? or the circumference of a circle with a given radius? some extra function
related tips: look at another example of writing error handling into functions. it is generally a good idea to check that any necessary parameters are validated, and that any optional parameters have some kind of default value provided. this way, your program will be less likely to throw errors. think about the idea of creating a function library. as you go further into your programming career, y...
Test your skills: Events - Learn web development
string values, and nesting them inside existing elements on the page — all via javascript. we haven't explicitly taught this yet in the course, but you'll have seen some examples that make use of it, and we'd like you to do some research into what dom apis you need to successfully answer the questions. a good starting place is our manipulating documents tutorial. events 1 in our first events-
related task, you need to create a simple event handler that causes the text inside the button (btn) to change when it is clicked on, and change back when it is clicked again. the html should not be changed; just the javascript. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. events...
...rawn with the function drawcircle(), which takes the folllowing parameters as inputs: x — the x coordinate of the circle. y — the y coordinate of the circle. size — the radius of the circle. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. 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"> ... </div>), which when invoked by clicking any of the buttons will set the background of the button-bar to the color contained in the button's data-color attribute. we want you to solve this without looping through all the buttons and giving each one their own event listener. try updating the...
Making decisions in your code — conditionals - Learn web development
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. ...
...eryselector('p'); select.addeventlistener('change', setweather); function setweather() { const choice = select.value; switch (choice) { case 'sunny': para.textcontent = 'it is nice and sunny outside today. ...
Client-side web APIs - Learn web development
makes heavy use of the document object. in this article, we'll look at how to use the dom in detail, along with some other interesting apis that can alter your environment in interesting ways. fetching data from the server another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an enti
rely new page. this seemingly small detail has had a huge impact on the performance and behavior of sites. in this article, we'll explain the concept, and look at technologies that make it possible, such as xmlhttprequest and the fetch api. third party apis the apis we've covered so far are built into the browser, but not all apis are. many large websites and services such as google maps, twitter,...
...e. video and audio apis html5 comes with elements for embedding rich media in documents — <video> and <audio> — which in turn come with their own apis for controlling playback, seeking, etc. this article shows you how to do common tasks such as creating custom playback controls. client-side storage modern web browsers feature a number of different technologies that allow you to store data
related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more. this article explains the very basics of how these work. ...
Basic math in JavaScript — numbers and operators - Learn web development
s like math, some of us have hated math ever since we had to learn multiplication tables and long division in school, and some of us sit somewhere in between the two. but none of us can deny that math is a fundamental part of life that we can't get very far without. this is especially true when we are learning to program javascript (or any other language for that matter) — so much of what we do
relies on processing numerical data, calculating new values, and so on, that you won't be surprised to learn that javascript has a full-featured set of math functions available. this article discusses only the basic parts that you need to know now. types of numbers in programming, even the humble decimal number system that we all know so well is more complicated than you might think. we use differ...
...t level language of computers; 0s and 1s. octal — base 8, uses 0–7 in each column. hexadecimal — base 16, uses 0–9 and then a–f in each column. you may have encountered these numbers before when setting colors in css. before you start to get worried about your brain melting, stop right there! for a start, we are just going to stick to decimal numbers throughout this course; you'll ra
rely come across a need to start thinking about other types, if ever. the second bit of good news is that unlike some other programming languages, javascript only has one data type for numbers, both integers and decimals — you guessed it, number. this means that whatever type of numbers you are dealing with in javascript, you handle them in exactly the same way. note: actually, javascript has a ...
Working with JSON - Learn web development
t" ] }, { "name": "madame uppercut", "age": 39, "secretidentity": "jane wilson", "powers": [ "million tonne punch", "damage resistance", "superhuman reflexes" ] } ] the above is perfectly valid json. you'd just have to access array items (in its parsed version) by starting with an array index, for example [0]["powers"][0]. other notes json is pu
rely a data format — it contains only properties, no methods. json requires double quotes to be used around strings and property names. single quotes are not valid. even a single misplaced comma or colon can cause a json file to go wrong, and not work. you should be careful to validate any data you are attempting to use (although computer-generated json is less likely to include errors, as long a...
...me nifty dom manipulation to display it, like this: obtaining the json to obtain the json, we use an api called xmlhttprequest (often called xhr). this is a very useful javascript object that allows us to make network requests to retrieve resources from a server via javascript (e.g. images, text, json, even html snippets), meaning that we can update small sections of content without having to
reload the entire page. this has led to more responsive web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail. to start with, we store the url of the json we want to retrieve in a variable. add the following at the bottom of your javascript code: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; t...
Object prototypes - Learn web development
alert(this.name.first + ' has left the building. bye for now!'); }; but the farewell() method is still available on the person1 object instance — its members have been automatically updated to include the newly defined farewell() method. note: if you are having trouble getting this example to work, have a look at our oojs-class-prototype.html example (see it running live also). you will ra
rely see properties defined on the prototype property, because they are not very flexible when defined like this. for example you could add a property like so: person.prototype.fullname = 'bob smith'; this isn't very flexible, as the person might not be called that. it'd be much better to build the fullname out of name.first and name.last: person.prototype.fullname = this.name.first + ' ' + this.n...
...ction() { ... }; // etc. this pattern can be seen in action in piotr zalewa's school plan app example. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: object-oriented javascript. note that this set of tests
relies on some of the knowledge taught in the next article, so you might want to read that first before you try them. summary this article has covered javascript object prototypes, including how prototype object chains allow objects to inherit features from one another, the prototype property and how it can be used to add methods to constructors, and other
related topics. in the next article we'll...
Test your skills: Object basics - Learn web development
presenting the band name. nationality: a string representing the country the band comes from. genre: what type of music the band plays. members: a number representing the number of members the band has. formed: a number representing the year the band formed. split: a number representing the year the band split up, or false if they are still together. albums: an array representing the albums
released by the band. each array item should be an object containing the following members: name: a string representing the name of the album.
released: a number representing the year the album was
released. include at least two albums in the albums array. once you've done this, you should then write a string to the variable bandinfo, which will contain a small biography detailing...
... try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. object basics 3 finally for our object basics assessment, we want you to return to the cat object literal from task #1. ...
JavaScript — Dynamic client-side scripting - Learn web development
aying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, or more—you can bet that javascript is probably involved. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites javascript is arguably more difficult to learn than
related technologies such as html and css. before attempting to learn javascript, you are strongly advised to get familiar with at least these two technologies first, and perhaps others as well. start by working through the following modules: getting started with the web introduction to html introduction to css having previous experience with other programming languages might also help. after...
...ck such as conditional statements, loops, functions, and events. you've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly. introducing javascript objects in javascript, most things are objects, from core javascript features like strings and arrays to the browser apis built on top of javascript. you can even create your own objects to encapsulate
related functions and variables into efficient packages. the object-oriented nature of javascript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. here we teach object theory and syntax in detail, look at how to create your own objects, and explain what json data is and how to work...
Measuring performance - Learn web development
previous overview: performance next meauring performance provides an important metric to help you asses the success of your app, site, or web service. for example, you can use performance metrics to determine how your app performs in comparison to a competitor or you can compare your app's performance across
releases. the metrics you choose to measure should be
relevant to your users, site, and business goals. they should be collected and measured in a consistent manner and analyzed in a format that can be consumed and understood by non-technical stakeholders. this article introduces web perfomrance metrics that you can use to measure and optimize your site's performance. prerequisites: basic computer literacy, basic software installed, and basic knowled...
...de for the web, there are a large number of web apis available that allow you to create your own performance measuring tools. you can use the navigation timing api to measure client-side web performance; including the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the window's load handler, and more. you can use the api for metrics
related to all of the navigation events displayed in the didagram below. the performance api, which provides access to performance-
related information for the current page, includes the performance timeline api, the navigation timing api, the user timing api, and the resource timing api. these interfaces allows the accurate measurement of the time it takes for javascript tasks to complete. the pe...
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
pe="button" class="clear-completed" {{on 'click' this.todos.clearcompleted}}> so now when the button is clicked, the clearcompleted() action we added earlier is run. however, if you try to click the "clear completed" button now, it won't appear to do anything, because there is currently no way to "complete" a todo. we need to wire up the todo.hbs template to the service, so that checking the
relevant checkbox changes the state of each todo. we'll do that next. the todo/todos plural problem the above is fine, but we have another small issue to contend with. the "todos left" indicator always says "x todos left", even when there is only one todo left, which is bad grammar! to fix this, we need to update this part of the template to include some conditional rendering. in ember, you can co...
...nd, but it never changes the invocation context; this is equivalent to using bind with a null first argument. try restarting the dev server and going to localhost:4200 again, and you'll now see that we have a fully-operational battlestation “todos left” counter and clear button: if you're asking yourself why we're not just doing the toggle on the component, since the function is enti
rely self-contained and not at all needing anything from the service, then you are 100% right to ask that question! 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. summary that's enough for now. at this point, not only ...
Accessibility in React - Learn web development
a form that lets us edit the name of the task. but where did our focus indicator go? when we switch between templates in our <todo /> component, we completely remove the elements that were there before to replace them with something else. that means the element that we were focused on vanishes, and nothing is in focus at all. this could confuse a wide variety of users — particularly users who
rely on the keyboard, or users who use a screen reader. to improve the experience for keyboard and screen-reader users, we should manage the browser’s focus ourselves. focusing between templates when a user toggles a <todo/> template from viewing to editing, we should focus on the <input> used to rename it; when they toggle back from editing to viewing, we should move focus back to the "edit" bu...
...ill only run when one of those values changes. we only want to change focus when the value of isediting changes. try it now, and you'll see that when you click an "edit" button, focus moves to the corresponding edit <input>! moving focus back to the edit button at first glance, getting react to move focus back to our "edit" button when the edit is saved or cancelled appears deceptively easy. su
rely we could add a condition to our useeffect to focus on the edit button if isediting is false? let's try it now — update your useeffect() call like so: useeffect(() => { if (isediting) { editfieldref.current.focus(); } else { editbuttonref.current.focus(); } }, [isediting]); this kind of mostly works. head back to your browser and you’ll see that your focus moves between edit <...
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
to avoid common pitfalls, we'll have to dig a little deeper into svelte's reactivity system. ...
...tton, like so: <button type="button" class="btn" on:click={onedit} use:focuseditbutton> edit<span class="visually-hidden"> {todo.name}</span> </button> go back and try your app again. at this point, every time the edit button is added to the dom, the focuseditbutton action is executed, but it will only give focus to the button if the editbuttonpressed flag is true. note: we have ba
rely scratched the surface of actions here. actions can also have reactive parameters, and svelte lets us detect when any of those parameters change. so we can add functionality that integrates nicely with the svelte reactive system. have a look at the
relevant svelte school article for a more detailed introduction to actions. actions are also very useful for seamlessly integrating with third party l...
Dynamic behavior in Svelte: working with variables and props - Learn web development
have to specify on:click={() => removetodo(todo)} as the handler. if removetodo() received no params, you could use on:event={removetodo}, but not on:event={removetodo()}. this is not some special svelte syntax — here we are just using regular javascript arrow functions. again, this is good progress — at this point, we can now delete tasks. when a todo item's delete button is pressed, the
relevant todo is removed from the todos array, and the ui updates to no longer show it. in addition, we can now check the checkboxes, and the completed status of the
relevant todos will now update in the todos array. however, the "x out of y items completed" heading is not being updated. read on to find out why this is happening and how we can solve it. reactive todos as we've already seen, every ...
...d to remove it from the helper function params, and just call it like this — filtertodos(todo). this would work, but now svelte has no way to find out that {#each filtertodos(todos)... } depends on filter, and the list of filtered todos won't be updated when the filter changes. always remember that svelte analyzes our code to find out dependencies, so it's better to be explicit about it and not
rely on the visibility of top-level variables. besides, it's a good practice to make our code clear and explicit about what information it is using. the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/04-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-...
Vue conditional rendering: editing existing todos - Learn web development
on is clicked, the component signals this by emitting an edit-cancelled event. modifying our todoitem component before we can add todoitemeditform to our app, we need to make a few modifications to our todoitem component. specifically, we need to add a variable to track if the item is being edited, and a button to toggle that variable. we’ll also add a delete button since deletion is closely
related. update your todoitem’s template as shown below. <template> <div class="stack-small"> <div class="custom-checkbox"> <input type="checkbox" class="checkbox" :id="id" :checked="isdone" @change="$emit('checkbox-changed')" /> <label :for="id" class="checkbox-label">{{label}}</label> </div> <div class="btn-group"> <button type="button" class="btn" ...
...es is that they preserve reactivity, meaning (among other things) that their state is saved when the template changes like ours is now doing. so, let's implement the fix: remove the following line from inside our data() property: isdone: this.done, add the following block below the data() { } block: computed: { isdone() { return this.done; } }, now when you save and
reload, you'll find that the problem is solved — the checkbox state is now preserved when you switch between todo item templates. understanding the tangle of events one of the most potentially confusing parts is the tangle of standard and custom events we've used to trigger all the interactivity in our app. to understand this better, it is a good idea to write out a flow chart, description, or di...
Creating our first Vue component - Learn web development
the name of a prop. the second way is to define props as an object, with each key corresponding to the prop name. listing props as an object allows you to specify default values, mark props as required, perform basic object typing (specifically around javascript primitive types), and perform simple prop validation. note: prop validation only happens in development mode, so you can't strictly
rely on it in production. additionally, prop validation functions are invoked before the component instance is created, so they do not have access to the component state (or other props). for this component, we’ll use the object registration method. go back to your todoitem.vue file. add a props property inside the export default {} object, which contains an empty object. inside this object,...
..." to the todoitem call in app.vue. note that you need to use the v-bind syntax, because otherwise true is passed as a string. the displayed checkbox should be checked. <template> <div id="app"> <h1>my to-do list</h1> <ul> <li> <to-do-item label="my todo item" :done="true"></to-do-item> </li> </ul> </div> </template> try changing true to false and back again,
reloading your app in between to see how the state changes. giving todos a unique id great! we now have a working checkbox where we can set the state programmatically. however, we can currently only add one todolist component to the page because the id is hardcoded. this would result in errors with assistive technology since the id is needed to correctly map labels to their checkboxes. to fix this,...
Styling Vue components with CSS - Learn web development
rgin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } /* end global styles */ #app { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; padding-top: 0; position:
relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 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; } </s...
...0c0c; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-checkbox > input:focus { outline: 3px dashed #fd0; outline-offset: 0; box-shadow: inset 0 0 0 2px; } .custom-checkbox { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position:
relative; min-height: 40px; margin-bottom: 10px; padding-left: 40px; clear: left; } .custom-checkbox > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; top: -2px; left: -2px; width: 44px; height: 44px; margin: 0; opacity: 0; } .custom-checkbox > .checkbox-label { font-size: inherit; font-family: inherit; l...
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. we are optimistic that jaws support will catch up this year. in recent articles from both afb's access world and nfb's voice of the nation's blind, reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users. ...
...at javascript is allowed to do while you browse. for example, you can disable functions that websites use to move or resize windows, or to remove your status bar, to disable right-click contextual menus, change the status bar text, etc. you can furthermore control javascript capabilities to remove scrollbars, toolbars or system buttons like minimize, close and maximize by editing the about:config
related properties or by editing accordingly the user.js file as explained in this "disable other javascript window features" document. moving back and forward by web page (alt+left and alt+right) occurs near-instantaneously the download manager provides keyboard access to all of your recent downloads operating system "look and feel" support: mozilla's default skin will match the colors and sizes ...
Embedding API for Accessibility
bility. text zoom on a per-window basis the nsidomwindow::gettextzoom(float *zoomfactor) and nsidomwindow::settextzoom(float zoomfactor) methods can be used to set a wide range of text zoom factors on a content window. a zoom factor of 1.0 represents 100%, or normal zoom. for double-sized text, use nsidomwindow::settextzoom(2.0); using accessibility preferences there are a number of prefs
related to accessibility. for the most part, an automatic reframe is performed when one of these prefs is changed. a reframe fixes the appearance of the page to match the new prefs, without
reloading the document over the network. be aware that in debug builds, this can cause a great number of assertions (bug 71598) to use prefs in embedding, use something like the following code: #include "nsipr...
..., acceptvideo); no audio setboolpref("browser.accept.audio", acceptaudio); 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_...
Links and Resources
will contain errors and warnings for "automatic checkpoints" and "manual checkpoints"; detailed and useful information (line numbers, instances/occurences, textual references to guidelines) will be included for web authors. cynthia says™ from hisoftware® company "cynthia says™" is a free online webpage accessibility validation service that identifies accessibility errors in webpage
related to section 508 standards and/or the wcag guidelines. just like webxact, it can also perform a "complete webpage quality check" for accessibility, privacy, searchability, metadata and even alt text attribute quality. accessibility valet from webthing description and summary to be written. wave 3.0 (web accessibility versatile evaluator) from webaim and sponsored by temple univers...
... quality. accessibility valet from webthing description and summary to be written. wave 3.0 (web accessibility versatile evaluator) from webaim and sponsored by temple university institute on disabilities wave 3.0 is another powerful, mature, free online webpage accessibility validation service that identifies accessibility errors and reports accessibility warnings about webpage
related to section 508 standards and/or the wcag guidelines. html advanced validator (firefox extension) by marc gueury this advanced html validator (based on w3c tidy and on opensp for sgml validation - just like w3c html validator) is a free, powerful, versatile, extended html validator. it can work offline. it can also report accessibility errors and warnings according to selectable acces...
Adding a new event
for defining internal event classes which are dispatched in content and do not represent user action. typically, events in this header file never cross process boundary. mouseevents.h this header file should be used for defining input events from pointing devices such as mouse. textevents.h this header file should be used for defining input events from keyboard or ime and also other text edit
related events like querying focused content information. touchevents.h this header file should be used for defining input events from touch devices. miscevents.h if the new event class isn't proper any header files above, you should use this. each event class should implement following methods manually. virtual internalfooevent* asfooevent() moz_override this method should just return this...
...cating an internal event class instance of a dom event when the dom event is stored by content. void assignfooeventdata(const internalfooevent* aevent, bool acopytargets) this method should copy members from aevent. first, this method should call its super class's this method. then, copy the additional members which are defined in the class. if acopytargets is false, don't copy its event target
related members. all new member variables of event classes must be with "m" prefix. although, a lot of existing members don't have "m" prefix, but you shouldn't use the legacy local rules. if you need to add methods, it's okay to implement them as inline methods. i.e., you can implement new methods in the header files directly. however, if implementing method isn't small and called from a lot of ...
Benchmarking
rust optimization level local optimized builds are compiled with rust optimization level 1 by default, unlike nightly builds, which use rust optimization level 2. this setting reduces build times significantly but comes with a serious hit to runtime performance for any rust code (for example stylo and webrender). ...
...and in optimized nightly builds (but not opt developer edition or beta builds). the poisoning can be disabled by setting the environment variable jsgc_disable_poisoning=1 before starting the browser. async stacks async stacks no longer impact performance since firefox 78, as bug 1601179 limits async stack capturing to when devtools is opened. another option that is on by default in non-
release builds is the preference javascript.options.asyncstack, which provides better debugging information to developers. set it to false to match a
release build. (this may be disabled for many situations in the future. see bug 1280819. accelerated graphics especially on linux, accelerated graphics can sometimes lead to severe performance problems even if things look ok visually. normally you wou...
Chrome registration
category category category entry-name value [flags] registers an entry in the category manager. the specific format and meaning of category entries depend on the category. content a content package is registered with the line: content packagename uri/to/files/ [flags] this will register a location to use when resolving the uri chrome://packagename/content/.... the uri may be absolute or
relative to the location of the manifest file. note: it must end with a '/'. locale a locale package is registered with the line: locale packagename localename uri/to/files/ [flags] this will register a locale package when resolving the uri chrome://packagename/locale/... . the localename is usually a plain language identifier "en" or a language-country identifier "en-us". if more than one local...
...cation or xulrunner. in order to allow for this, the chrome registration manifest allows for "override" instructions: override chrome://package/type/original-uri.whatever new-resolved-uri [flags] note: overrides are not recursive (so overriding chrome://foo/content/bar/ with file:///home/john/blah/ will not usually do what you want or expect it to do). also, the path inside overridden files is
relative to the overridden path, not the original one (this can be annoying and/or useful in css files, for example). note: there was a bug in gecko 1.8.1.5 (firefox 2.0.0.5) and earlier where you could not use a
relative url for the new-resolved-uri parameter. you needed to provide an absolute url. see bug 323455. resource aliases can be created using the resource instruction: resource alias...
Continuous Integration
this document will help you understand all the pieces that comprise mozilla's continuous integration systems. taskcluster and treeherder taskcluster, mozilla's continuous integration (ci) system picks up changes pushed to hg. taskcluster generate binary builds for firefox and firefox for android across a variety of operating sytems. after the builds are completed, they are used to run a series of correctness and performance tests. the results of taskcluster jobs (both builds and tests) are displayed in treeherder. ...
...fherder interface. other performance systems autophone (android) autophone is a test harness which runs a set of performance tests on a variety of real android phones. it reports to a custom dashboard known as phonedash. tests currently run are primarily startup tests. games benchmarking (firefox) under development, the games benchmarking harness (aka mozbench) will allow a number of games-
related benchmarks to be run against firefox and chrome. eventually, the system will likely be expanded with support for android. post-job analysis and alerts there is some analysis of test data that occurs out-of-band after jobs complete. perfherder alerts we track changes to talos and other performance frameworks inside perfherder, and try to automatically alert when there is a sustained chang...
Debugging on Mac OS X
h hardened runtime enabled in order to launch (ignoring workarounds.) when run on earlier macos versions, notarization and hardened runtime settings have no effect. official builds at this time, official builds of firefox 69 and later are notarized. uplifts to firefox 68 and esr 68 to enable notarization are planned. as a result, it is not possible to attach a debugger to these official firefox
releases on macos 10.14+ without disabling system integrity protection (sip). this is due to notarization requiring hardened runtime to be enabled with the com.apple.security.get-task-allow entitlement disallowed. rather than disabling sip (which has security implications), it is recommended to debug with try builds or local builds. the differences are explained below. try server builds in most cas...
...e source tree, and then reopen the project to finish setting it up. note also that since xcode 7.3.1 it doesn't seem to be possible to have the xcode project live outside the source tree. if you try to do that then xcode will simply copy the source files under the project directory rather than link to them (still the case in xcode 10?) which breaks debugging and the possibility to modify-rebuild-
relaunch from inside xcode. these steps were last updated for xcode 10.3: open xcode, and create a new project with file > new project. select the "cross-platform" tab then under the "other" template group select the "empty" project type. the click next. name the project and click next. create/select a temporary directory to contain the project and then click create. before going any further, c...
Debugging on Windows
ch the debugger to an existing mozilla process. in the visual studio, select debug > attach to process. if you want to debug a content process, you can hover on the tab of page you want to debug, which would show the pid. you can then select the process from dialog opened from "attach to process". for more information, see attach to running processes with the visual studio debugger. debugging
release and nightly builds refer to the steps to use the mozilla symbol server and source server. creating a visual c++ project for firefox please refer to the documentation on firefox-source-docs. 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. "executable for debug se...
...load without having vs hang and seeing the "downloading symbols for <library>" status at the bottom left of the main window. problems post-mortem debugging on windows 7 sp1 x64? if you attempt to use ns_debugbreak etc to perform post-mortem debugging on a 64bit windows 7, but as soon as you try and continue debugging the program crashes with an access violation, you may be hitting a windows bug
relating to avx support. for more details, including a work-around see this blog post or this social.msdn thread. (and just in-case those links die, the work-around is to execute bcdedit /set xsavedisable 1 from an elevated command-prompt to disable avx support.) got a tip? if you think you know a cool mozilla debugging trick, feel free to discuss it with #developers and then post it here. ori...
HTTP logging
note: the web console also offers the ability to peek at http transactions within firefox. http logging generally provides more detailed logging. using about:networking this is available starting with firefox 52. this is the best and easiest way to do http logging. at any point during while your browser is running, you can turn logging on and off. ...
...replace moz_log=nshttp:5 with moz_log=nshttp:3 in the commands above. there's a handy extension for firefox called http header live that you can use to capture just the http request and response headers. this is a useful tool when you want to peek at http traffic. turning off logging of socket-level transactions if you're not interested in socket-level log information, either because it's not
relevant to your bug or because you're debugging something that includes a lot of noise that's hard to parse through, you can do that. simply remove the text nssockettransport:5 from the commands above. turning off dns query logging you can turn off logging of host resolving (that is, dns queries) by removing the text nshostresolver:5 from the commands above. enable logging for try server runs yo...
Gmake vs. Pymake
rent (but mostly compatible) build tools: gmake and pymake. path issues on windows on windows, you must take special care to be able to switch back and forth between gmake and pymake on the same object dir. gmake uses msys paths ("/c/dev/foo"), while pymake uses native windows paths ("c:\dev\foo"). if you try to switch from gmake to pymake or pymake to gmake the build will fail unless you did a
relative configure. a
relative configure produces paths that look like "../../foo" which can be understood by gmake and pymake. to configure
relatively, invoke configure or client.mk from your objdir. for example, if using the default objdir, you might type in the root of your source tree: mkdir obj-i686-pc-mingw32; cd obj-i686-pc-mingw32; python ../build/pymake/make.py -f ../client.mk. note that t...
... the working directory must be your objdir when you invoke configure to get paths that will work in gmake and pymake. ...
Old Thunderbird build
you can create a file with this line by doing this: cd comm-central echo 'ac_add_options --enable-application=mail' > mozconfig if you omit this line, the build system will build firefox instead. other build configuration options can be added to this file, although it's strongly recommended that you only use options that you fully understand. for example, to create a debug build instead of a
release build, that file would contain: ac_add_options --enable-debug for more on configuration options, see the page configuring build options. note that if you use an moz_objdir it cannot be a sibling folder to your source directory. use an absolute path to be sure! building thunderbird before you start, make sure that the version you checked out is not busted. for hg tip, you should see green...
...t the build process will find the files, for example to c:\program files (x86)\windows kits\8.1\include\shared and/or c:\program files (x86)\windows kits\10\include\10.0.nnnnn.0\shared respectively, where nnnnn is the highest number present on the system. check to make sure that the path in which you placed the source code has no spaces, and is not too long. searched the bug database for issues
relating to your problem (e.g., platform-specific issues). try asking in mozilla.dev.builds - include details of what is in your mozconfig, and what the actual error is. check if your mozilla/ is a symlink. a symlink there is not supported. check for @topsrcdir@ or
relative paths in your mozconfig. those have caused several problems historically and tend to be poorly tested when the build system c...
Simple Thunderbird build
te a file with this line by doing this in the source/ directory: echo 'ac_add_options --enable-application=comm/mail' > mozconfig if you omit this line, the build system will build firefox instead. other build configuration options can be added to this file, although it's strongly recommended that you only use options that you fully understand. for example, to create a debug build instead of a
release build, that file would also contain the line: ac_add_options --enable-debug each of these ac_add_options entries needs to be on its own line. for more on configuration options, see the page configuring build options. note that if you use an moz_objdir it cannot be a sibling folder to your source directory. use an absolute path to be sure! to also build lightning when building thunderbird ...
...checked at https://treestatus.mozilla.org/ if the trunk is broken (i.e. closed), you may wish to consider building one of the branches (to pull the source code from a branch, just replace the url to the repository in the hg clone instruction). check to make sure that the path in which you placed the source code has no spaces, and is not too long. searched the bug database for issues
relating to your problem (e.g., platform-specific issues). try asking in mozilla.dev.builds - include details of what is in your mozconfig, and what the actual error is. check if your mozilla/ is a symlink. a symlink there is not supported. check for @topsrcdir@ or
relative paths in your mozconfig. those have caused several problems historically and tend to be poorly tested when the build system c...
Interface Compatibility
ew features, must have super-review. one exception to this rule is apis which are explicitly shipped with mozilla prefixes as a technology preview. this includes css properties that begin with the -moz- prefix (e.g. -moz-box-shadow), or javascript apis that begin with the moz prefix (e.g. canvasrenderingcontext.mozdrawtext). these apis may be removed or replaced with standard interfaces in future
releases of mozilla. jetpack the jetpack sdk and apis are not yet complete. the stable version 1.0 of the jetpack sdk is planned for later in 2010. documented apis which are shipped as part of the jetpack sdk are designed to work in future versions of firefox. achieving this compatibility may require rebuilding the extension with a new version of the jetpack sdk. javascript/xul interfaces tradition...
...ility may require rebuilding the extension with a new version of the jetpack sdk. javascript/xul interfaces traditional extensions written using xul overlays and xpcom have access to the full power of the mozilla platform. with the power, however, comes the understanding that the mozilla platform is constantly changing and many apis may change in future versions of firefox. in micro/maintenance
releases, there should be no incompatible changes to interfaces, except as a last resort when a security fix leaves no other option. this includes not only xpcom interfaces, but javascript functions, xbl bindings, and any other visible behavior. between major
releases, there is no guarantee of interface stability. changes should not be taken lightly, however: especially if a change is likely to affe...
Contributing to the Mozilla code base
! let the bug submitter, reviewer, and component owner know that you'd like to work on the bug. you might receive some extra information, perhaps also made the assignee. fix your pet peeve if there's something you'd like to fix about firefox, thunderbird, or your other favorite mozilla application, this can be a great place to start. there are a number of ways to do this: search bugzilla for
relevant keywords. see pages on bugzilla for further help learn the bugzilla component, with which your pet peeve is implemented, using the components list. browse this component on bugzilla for
related bugs ask in our matrix channels : #introduction:mozilla.org or #developers:mozilla.org find a bug we've identified as a good fit for new contributors. with more than a million bugs filed in bugzi...
...u have a mentored bug: ask your mentor. they will help, or can easily find out. it might be them! run hg blame on the file and look for the people who have touched the functions you're working on. they too are good candidates. running hg log and looking for regular reviewers might be a solution too. the bug itself may contain a clear indication of the best person to ask for a review are there
related bugs on similar topics? the reviewer in those bugs might be another good choice we have a list of modules, which lists peers and owners for the module. some of these will be good reviewers. in a worst case scenario, set the module owner as the reviewer, asking them in the comments to pick someone more suitable please select only one reviewer. step 4b: follow it up once you've asked for a...
Displaying Places information using views
ing nsinavhistoryresultobserver? creating custom tree views custom places tree views can be a lot of work. take a look at using the tree view above to get an idea of what's required. custom nsitreeviews in general are a lot of work, and if you are not familiar with creating custom nsitreeviews, see the custom tree views and tree view details pages in the xul tutorial. ...
...one strategy is to create your custom object(s) implementing each of these interfaces, support your custom behavior with them, but pass off everything else to a placestreeview instance that you would own. ...
Index
information about the construction of firefox add-ons, using the developer tools in firefox, and other topics. 3 building firefox with rust code build documentation, gecko, build, rust in may 2015 the rust programming language reached its 1.0 stability milestone, and various experiments with writing parts of gecko in rust began. rust code first shipped in august 2016 with the
release of firefox 48. it became a requirement for building gecko in february 2017 with firefox 54. 8 experimental features in firefox experimental, firefox, preferences, features this page lists features that are in nightly versions of firefox along with information on how to activate them, if necessary. 10 firefox ui considerations for web developers activity str...
...ide will help firefox developers working on front-end code produce code which is as performant as possible—not just on its own, but in terms of its impact on other parts of firefox. always keep in mind the side effects your changes may have, from blocking other tasks to interfering with other user interface elements. 169 privacy privacy, security this document lists privacy-
related documentation. 170 storage access policy: block cookies from trackers privacy, storage access policy, tracking protection firefox includes a new storage access policy that blocks cookies and other site data from third-party tracking resources. this new policy is designed as an alternative to the current policies, which have been available in firefox for many years. the ne...
Multiple Firefox profiles
iles for testing can keep you from losing your preferences, bookmarks, and history. it takes little time to set up a new profile, and once it is complete, all of your firefox versions will update separately and can be run simultaneously. available browser development channels there are four available browser channels, each at a different level of stability and development. ...
...erences, bookmarks, and history. it takes little time to set up a new profile, and once it is complete, all of your firefox versions will update separately and can be run simultaneously. available browser development channels there are four available browser channels, each at a different level of stability and development. the four channels are
release, beta, developer edition, and nightly. the
release channel is recommended for most users, as it is the "official
release" channel. however, for those more adventurous, you can try one of the other three channels to see what is coming in firefox and play around with emerging features. the beta channel contains the features that are expected to be in the next
release of firefox and are in final stages of testing. aurora contains experimental fe...
Performance
key points to keep in mind scripts registered during addon startup get executed during session restore. the more expensive they are to execute the longer it will take for the browser to become responsive after startup. frame scripts also get executed on non-restored tabs. all their overhead is thus not just incurred by active tabs but by the total number of tabs in a session. the following examples omit some boilerplate code for the sake of brevity the "better" examples also omit some best practices and only demonstrate how to fix the problem described in their respective subtopics. ...
...itative state and replicates it to the child processes in advance so they can act based on their local copy. see the previous chapter on how to efficiently replicate addon state to each process. clean up on addon unload bad: all the previous examples, *even the "better" ones* if your addon is restartless or uses the sdk then updates or the user turning it off and on will load to unload/
reload events. not handling those properly can lead to duplicate or conflicting code execution, especially when messages are sent. it can also lead to conflicts between the old and new code. under some circumstances it may even cause exceptions when attempting to register something twice under the same id. better: // addon.js function onunload() { services.mm.removedelayedframescript("resources:/...
mozbrowsercaretstatechanged
ble (true) or not (false.) cancopy: a boolean indicating whether the copy command is available (true) or not (false.) canpaste: a boolean indicating whether the paste command is available (true) or not (false.) reason a domstring that defines the reason for the state being changed. possible values are visibilitychange, updateposition, longpressonemptycontent, taponcaret, presscaret, and
releasecaret. zoomfactor a number defining the current zoom factor in the browser <iframe>. collapsed a boolean indicating whether the current selection is collapsed (true) or not (false.) caretvisible a boolean indicating whether the caret is currently visible (true) or not (false.) selectionvisible a boolean indicating whether the current selection is visible (true) or not (false.) selecti...
... a domstring containing the currently-selected text content. senddocommandmsg a method allowing you to issue a command via an anonymouse function, i.e. function(command). possible values are cut, copy, paste and selectall. ...
mozbrowsercontextmenu
<iframe>'s viewport. clienty the y value of the coordinate that was clicked inside the browser <iframe>'s viewport. systemtargets an array containing one or more menusystem objects (see the menusystem object, below), containing details of the standard menu(s) that will be shown. for example, if the user clicked on an image nested in an <a> tag, two menus are available — one with information
related to the image, and one for the link. contextmenu a menu object (see the menu object, below) representing a custom menu defined via <menu> / <menuitem> elements and pointed to via a contextmenu attribute on the dom element clicked on, which contains the menu's id. contextmenuitemselected an anonymous function that fires when a menu item is selected. the menusystem object an object defini...
...cted() function, to indicate which item has been selected. items an array of further menu objects, which indicate the menu options available in a menu, if the context menu being accessed is a menu. ...
mozbrowsermanifestchange
. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsermanifestchange event is fired when the manifest location of the app loaded in the browser <iframe> changes. by this, we are referring to the href of the manifest, as defined in <link
rel="manifest" href=" … ">. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether ...
... details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: href the url of the new app manifest. ...
mozbrowsermetachange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsermetachange event is fired when a <meta> element
related to web applications is added, removed or changed. see below for the applicable types. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read onl...
... representing the <meta> name attribute value, if included. if not included, the value returned is undefined. example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermetachange", function(event) { console.log("a meta tag has been " + event.details.type + ". ...
mozbrowseropensearch
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowseropensearch event is fired when a link to a search engine is found — i.e. when an instance of <link
rel="search" type="application/opensearchdescription+xml"> is encountered. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. ...
...eturns an anonymous javascript object with the following properties: title a domstring representing the title of the search engine. href a domstring representing url of the search engine. ...
overflow-clip-box
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the overflow-clip-box css property specifies
relative to which box the clipping happens when there is an overflow. it is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties. /* keyword values */ overflow-clip-box: padding-box; overflow-clip-box: content-box; /* two values */ overflow-clip-box: padding-box content-box; overflow-clip-box: content-box content-box; /* global values */ overflow-clip-box: inherit; overflow-clip-box: initial; overflow-clip-box: unset; no...
...is property that can be used elsewhere too. note that this property is activated by default only in the ua stylesheet and chrome contexts. initial valuepadding-boxapplies toall elementsinheritednomediavisualcomputed valueas specifiedanimation typediscretecanonical orderthe unique non-ambiguous order defined by the formal grammar syntax values padding-box this keyword makes the clipping be
related to the padding box. content-box this keyword makes the clipping be
related to the content box. formal syntax padding-box | content-box examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto...
Chrome-only CSS reference
ute.::-moz-tree-twistyactivated by the properties attribute.css -moz-bool-pref() @supports functionthe -moz-bool-pref() @supports condition is available to gecko chrome and ua stylesheets to check if a boolean preference is enabled.css <display-xul> component</display-xul>firefox supports the following -moz- prefixed xul display values:overflow-clip-boxthe overflow-clip-box css property specifies
relative to which box the clipping happens when there is an overflow. it is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties.overflow-clip-box-blockthe overflow-clip-box-block css property specifies
relative to which box the clipping happens when there is an overflow — in the block direction.overflow-clip-box-inlinethe overflow-clip-box-inline css property specifie...
...ive to which box the clipping happens when there is an overflow. it is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties.overflow-clip-box-blockthe overflow-clip-box-block css property specifies
relative to which box the clipping happens when there is an overflow — in the block direction.overflow-clip-box-inlinethe overflow-clip-box-inline css property specifies
relative to which box the clipping happens when there is an overflow — in the inline direction. ...
MozBeforePaint
your subsequent animation frames. whenever you're ready to refresh your animation, you call the window.requestanimationframe() method. once you've called this, the mozbeforepaint event will be fired one time, when it's time for animations to be updated for the window's next animation frame. the timestamp property of this event will be set to the time when the animation frame is sampled; this is
relevant when trying to synchronize mozrequestanimationframe animations with smil animations or css transitions. this allows multiple animations to remain in sync with one another within the context of a given window. frame rate control mozbeforepaint won't fire more than a fixed number of times per second, e.g. 50 or 60. this is intentional, because modern operating systems and hardware won't let...
...re won't let the browser display more frames than that anyway. limiting the frame rate avoids wasting work, thereby saving cpu usage and power and improving overall system performance. example this example performs a simple animation, moving a box a short distance after a short period of time. ...
Embedding the editor
ld be able to have multiple <editor>s per xul window should be able to embed an editable content frame in a native application embedders should be able to supply their own chrome (toolbars etc). meeting these objectives will also solve the following existing composer problems: composer should handle frameset documents composer should handle documents with <iframe>s. composer shouldn't
rely on certain xul document structure proposed solutions fixing editor rooting as described above, editor rooting needs to be changed so that an editor lives on top of an nsdocshell, rather than hanging off the nseditorboxobject. there is a docshell for each editable <iframe>. this will involve: making a new interface, nsieditorframe, that is implemented by nsdocshell or a
related class. you sho...
...a subset of nsieditorshell will probably move into this interface. ...
Getting from Content to Layout
he frame constructor implements nsimutationobserver which allows it to "watch" the content tree. nscssframeconstructor gets notified from the document's presshell (which implements nsidocumentobserver and observes the document) about all nodes in the document. the frame constructor takes these notifications and does the following: dispatches "restyle events" which trigger the reprocessing of
relevant css selectors and any restyling that needs to occur. adds and removes frames to make the frame tree a proper representation of the new content tree. restyling the restyletracker maintains a list of restyles to process. elements that need to be restyled are marked with flags (e.g element_has_pending_restyle) and are stored in the mpendingrestyles hashtable. a list of restyle roots (plac...
...restyletracker are dispensed with from various method on the presshell that involve reflow and flushing notifications. frame construction regardless of whether content nodes are inserted/appended/deleted, frames can be created and destroyed, based on whatever is optimal for the changes in the content tree. "frame construction items" are queued for each change. these items are then examined in
relation to the location in the content tree that is being modified and either the
relevant frames are created/destroyed or the logic moves up to the parent frame. to give a trivial example of when this might be necessary, consider: "<span>foo <div></div> bar</span>". separate frames are created for the pre and post-div parts of the <span>. if the <div> is removed, the frame construction code merg...
How to add a build-time test
, if one sets up the right variables, then the rules.mk file will do lots of magic and most of the heavy lifting. a simple example of adding a test is in . note that the following variables are supplied by the rules.mk file: cppsrcs, simple_programs, run_test_program. xpcshell tests here are the simple guidelines for adding an xpcshell test to the build system. for now, enclose your test-
related code (in the makefile) with ifdef enable_tests run the test program from the "check" target in the makefile. (example to run the testcookie program) in the test program: if the test fails, exit with a non-zero status and/or print the string "fail" to stdout if the test passes, exit with a zero status and don't print the string "fail" (bonus points for printing "pass" :) ) ...
...r example, to add an xpcshell test to a module, do the following: copy tools/test-harness/xpcshell-simple/example to yourmoduledir/tests_type, wheretests_type is something that describes your tests. you can of course use unit or test if you're not feeling creative. in <tt>yourmoduledir/tests_type/makefile.in</tt> change depth, module, and xpcshell_tests appropriately: depth should be a
relative path pointing to <tt>mozilla/</tt>, e.g. if you're in <tt>netwerk/test</tt>, set depth = ../.. module should be defined to test_yourmodule or just yourmodule -- either will work fine. xpcshell_tests be a list of subdirectories of the current directory which contain xpcshell tests. you can of course just use the onetests_type directory here, but if you want to subdivide your tests by fu...
How to get a stacktrace for a bug report
2. tell us the id of the report you submitted. to access all of your submitted reports type "about:crashes" into the firefox address bar and press enter. firefox should open a list of ids for your submitted crash reports. copy two or three of the ids for the appropriate crashes and paste them into your bugzilla report. please check the listed times to avoid copying the id of an un
related crash report. you can prefix a "bp-" to the beginning of an id to make bugzilla turn it into a link: bp-a70759c6-1295-4160-aa30-bc4772090918 how to get the crash id if firefox crashes on startup if firefox crashes on startup you can still access your submitted crash reports. crash reports are accessible from all firefox profiles, so if a new profile does not cras...
...s at this location depending on your operating system: windows : %appdata%\mozilla\firefox\crash reports\submitted\ os x : ~/library/application support/firefox/crash reports/submitted/ linux : ~/.mozilla/firefox/crash reports/submitted/ each file in this folder contains one submitted crash report id. you can check the modified or creation time for each file to discern which crash reports are
relevant to your bug report. alternative ways to get a stacktrace if the mozilla crash reporter doesn't come up or isn't available you will need to obtain a stacktrace manually: windows see the article create a stacktrace with windbg for information on how to do this. for a full process dump, see how to get a process dump with windows task manager [en-us] os x run /applications/utilities/conso...
Creating a New Protocol
toplevel protocol for tabs is pcontent. you should know what protocol will manage the new protocol and what lifetime issues that creates. if there is any doubt, ask on irc in the #content channel. building the new protocol to build the new protocol declaration and generate headers, make in ipc/ipdl: make -c objdir/ipc/ipdl if there are any protocol-level errors, the ipdl compiler will print the
relevant error messages and stop. to view the generated headers, look in objdir/ipc/ipdl/_ipdlheaders . creating the implementation the c++ implementation inherits from the abstract ipdl-generated classes pnewprotocolparent and pnewprotocolchild. it must implement abstract methods for receiving the appropriate messages on each side. the method signatures can be read from the generated pnewprotocolpar...
...ate messages on each side. the method signatures can be read from the generated pnewprotocolparent.h and pnewprotocolchild.h headers. writing the tests protocols which are managed by pbrowser must be tested using the mochitest-chrome test framework with a <browser remote="true">. it is acceptable to use synchronous calls on jpw wrappers for testing purposes. it may be possible to test protocols un
related to a particular window using the xpcshell testing framework, which has additional primitives in electrolysis for launching and running js commands in a content process. ...
JavaScript-DOM Prototypes in Mozilla
t id that identifies class info defined in nsdomclassinfo). when a class prototype name is registered (nsglobalnamestruct::etypeclassproto), the nsscriptnamespacemanager is given the nsiid of the interface that is inherited by the class which the registered name is a prototype of (e.g. ns_get_iid(nsidomnode) for node). nsscriptnamespacemanager also deals with other types of names, but those are un
related to the dom object prototype setup, so we will ignore those here. once the registration is done, the nsdomclassinfo code uses the registry every time a named property is resolved on a global object (because of this, the nsscriptnamespacemanager needs to be pretty fast at looking things up in its registry; that's why it is a hash table). when a property is resolved on the global object, the ns...
...lve() will be called for every name on the parent chain). the result of this recursion is that by resolving the name htmlimageelement, we'll create the constructor htmlimageelement, htmlelement, element, and node, and the prototype properties on all those constructor will be correctly set up. this means that the next time the name of a class constructor is resolved in the same scope, say htmlancho
relement, the code will resolve the name htmlancho
relement, find the parent name, which is htmlelement, and resolve that, but since we've already resolved htmlelement as a result of resolving the name htmlimageelement earlier, the recursion will stop right there. ok, so that's how class constructor and their prototype properties are set up, what about the actual prototype chain of a xpconnected dom ...
JavaScript OS.Constants
e main thread to initialize os.constants for use in the main thread, add the following snippet to your code: components.classes["@mozilla.org/net/osfileconstantsservice;1"]. getservice(components.interfaces.nsiosfileconstantsservice). init(); from a chrome worker no initialization is required. module os.constants is always available for chrome workers. os.constants.sys constants
related to system configuration. name the name of the operating system (e.g. "darwin"). debug set to true on debug build configurations, non-existent otherwise. os.constants.path paths of well-known files and directories. libxul the path to the file containing libxul. useful, for instance, to access the platform code from javascript in conjunction with js...
... o_nofollow do not follow symbolic links. o_nonblock do not block on open or for data to become available. o_rdonly open the file for read only. o_rdwr open the file for read and write. o_rsync o_shlock atomically obtain a shared lock. o_symlink allow opening of symbolic links. o_sync (linux only) open for pu
rely synchronous access. o_trunc truncate the file. o_wronly open the file for write only. os.constants.win constants for interacting with the windows api. os.constants.win is undefined on non-windows platforms. useful mostly in conjunction with js-ctypes. (tbd) ...
OSFile.jsm
javascript module os.file contains primitives for manipulating files out of the main thread. f.a.q. what is os.file? os.file is a new api designed for efficient, off-main thread, manipulation of files by privileged javascript code. this api is intended to replace, in time, most xpcom-based manipulation of files (nsifile, subsets of nsiioservice, etc.) by javascript code. what are the
relationships with the html5 file api? none, really. the file api is designed for high-level, highly-restricted manipulation of files by web applications. os.file is designed for efficient, unrestricted, manipulation of files by firefox itself and by add-ons. why is off main thread file i/o important? one thing that all developers need to remember is that the duration of a file i/o operation is un...
...or this reason, api clients can also spawn their own worker threads and make use of os.file directly from these threads. ...
L10n Checks
to do that, you must have python 2.5, 2.6, or 2.7 installed on your machine. once python is installed, the easiest way to install l10n checks (on mac or linux) is to just run: $ sudo easy_install -u l10n-checks or, if you're on windows: $ easy_install -u l10n-checks installation (development versions) l10n checks needs to be installed, and it requires that you have python and mercurial installed on your machine. ...
...ch 100% in general; mid 80s should be the target, though. options reference locale in the source and xpi modes you can change the default reference locale (en-us) by setting the -r parameter, e.g.: check-l10n-completeness -r pl browser/locales/l10n.ini ../l10n/ de output mode you can change the look and feel of the output by setting the -o parameter to 0 (tree; default), 1 (full tree) or 2 (full
relative paths), e.g.: check-l10n-completeness -o 2 browser/locales/l10n.ini ../l10n/ de en-us in the locale directory in the source mode you can tell l10n checks to look for the en-us locale in the directory containing all other locales instead of the directory containing the source by setting the -l parameter (useful for e.g. "kompozer"), e.g.: check-l10n-completeness -l browser/locales/l10n.ini .
Initial setup
for your locale. if a community already exists, reach out to them and ask how you can help. if a community doesn't exist, send an email to the new-locales newsgroup for additional guidance. accounts there are a handful of accounts that you need to be aware of as you begin. they're not required for you to begin contributing, but will be required when you are preparing to produce an official
release. for now, simply be aware that these will become important as your efforts progress. these accounts will store your code, contributions, and help you produce an official localization. hg (mercurial) mercurial is the revision control environment that houses the main mozilla source code as well as localized code for each official mozilla localization. you will need this for localizing mozil...
...nal account. mozilla ldap you will need a mozilla ldap account once you're ready to have your localization registered on the main mozilla repositories. add a request about creating your ldap account to the new locales newsgroup. locale-specific bugzilla component having a bugzilla component specific to your locale will help us to track your localization's progress from first steps to official
release. it will also notify us when you're having problems unique to your localization team's work. add a request about creating your locale's bugzilla component to the new locales newsgroup. local environment tools similar to accounts, there is a number of environment tools that you should install on your personal computer. these tools will help you to store your contributions, build mozilla app...
Translation phase
you've come here: to localize mozilla projects. this is where the technical aspect of the process begins to divide. at mozilla, we localize many different projects that can be categorized into three different groups. each group of projects employs a different type of l10n tool for, you guessed it, localizing the projects. the l10n tools are meant to help you maintain your localized content from
release to
release and leverage already localized materials when localizing new content. here we'll identify those groups of projects and the l10n tools associated with them. along the way we'll point you to basic, technical tutorials on localizing for that particular project group. it's up to you and your community to determine which l10n tool will best suit your needs. as you gain more experience,...
...d in the leading-edge stuff that people are doing with mozilla firefox and the open web. in-product pages a set of pages used to interact with and give information to the end-user as part of their first experience with their mozilla applications. if you are creating your own localization, there are a number of mozilla websites that need to be localized before your efforts become an officially
released localization. see the list of localized mozilla websites. you should also read more information on localizing mozilla web projects. add-ons l10n for add-ons is handled by at least two other organizations/services called babelzilla and adofex. they both have created comprehensive programs and l10n tools for localizing any and all third-party add-ons for mozilla applications. visit t...
Localization quick start guide
l10n for short)! whether you're here to start up your own localization in the mozilla project or to join the efforts of an existing localization, you've come to the right place. this guide is filled with all of the basic, technical information you need to get involved in the mozilla l10n program. we will take you through the steps to get started, from the initial environment setup to testing and
releasing your own localization. along the way, you'll learn about the variety of projects you can contribute to and the tools used to localize them. when we get to specific examples, we'll take them from the firefox project, as it is the most widely localized project within mozilla. as you near the end of this guide, you should be able to make a change to firefox in your local setting and then see ...
...ace. in closing, when you finish this guide, you will have all the tools necessary to start contributing! remember, this guide will instruct you on the technical aspects of mozilla l10n only. visit the l10n process page to learn about the whole process. initial setup tech prep work before localizing. translation phase l10n tools tutorials for translation. qa phase l10n testing tutorials.
release phase steps to shipping your localization work. these four stages make up tech side of the l10n program. to learn more about any of these, click on any of the links above. to get the big picture, we suggest you start with the green bubble and move from stage to stage. note: this guide is written for two types of contributors: those starting a new localization and those joining an existing...
Creating localizable web applications
printf(_("%s mb>"), $size); snippet 2. good: function num_format($num, $decimals) { $locale_info = localeconv(); return number_format($num, $decimals, $locale_info['decimal_point'], $locale_info['thousands_sep']); } printf(_("%s mb"), num_format($size, 1)); wrap as few html tags as possible when wrapping the localizable content with the gettext function calls, put all the code that ir
relevant to localization outside the function call. snippet 1. bad: <?= _("<a href=\"https://addons.mozilla.org/firefox/downloads/latest/10900\" class=\"get-personas\" id=\"download\"><span>get personas for firefox - free</span>");?><span class="arrow"></span></a> snippet 2. good: <a href="https://addons.mozilla.org/firefox/downloads/latest/10900" class="get-personas" id="download"> <span><?= ...
...u can explain where the string will appear in the application, or what the variables used in the string will be replaced with. put comments in the same line as the gettext function call (inline comments, in php these are /* ... */), or one line directly above the gettext function call (block comments, in php they start with # ... or // ...). in either way, use a consistent prefix for localization-
related comments, e.g. "l10n". when extracting strings with xgettext you will be able to include only comments starting with this prefix using the --add-comments=prefix option, for example xgettext --add-comments=l10n. snippet 1. bad: <h1> <a href="<?= $locale_conf->url('/') ?>"> <img src="/static/img/logo.png" alt="<?= _("mozilla labs personas"); ?>" /> </a> </h1> snippet 2. good: <h1> ...
Creating localizable web content
to mdn, addons.mozilla.org, or other external resources, are there translated equivalents we can use). if there are alternatives, use them by adding the $lang; parameter in the urls evaluate the impact of new pages on all our web properties, especially links to community sites and redirects. sometimes you can leave some freedom of modification for a block of text so that the localizers link to
relevant local resources. images check that images are not going to be a problem for the audience (cultural references, positionning, mirroring for rtl, text in images...) and spot what sizes/margins can be tweaked by css or have to be fixed for all locales but english don't use text in icons images 1&2. bad: image 3. good: image 4. good: this icon is recognized as the international...
...bol for information. it can stay this way. use localized screenshots if possible screenshots are important informative graphics, often times explaining how to achieve something in a desktop or web application. as such, they should be perceived as an essential part of the content and should be localized. image 1. bad. if the screenshot shows the application that the website directly
relates to (firefox on mozilla.com/firefox, personas on getpersonas.com), try to use screenshots from the localized version. image 2. acceptable. if however the screenshot shows a third-party application or website, it's acceptable to use the english version if it's not available in the target language. ...
Mozilla Framework Based on Templates (MFBT)
so its functionality is currently sparse. feel free to file bugs to add new functionality to it, or to move existing functionality into it, as needed. mfbt code goes to some length to document all its interfaces in comments, including examples when possible. it also attempts to define its functionality in well-named files, such that simply skimming the contents of mfbt/ will quickly suggest the
relevant header to examine. therefore this document primarily attempts to direct readers to the correct file to read those comments. feel free to file a documentation bug if you think this approach could be improved, and feel free to make improvements to this document if you see them. functionality types and type manipulation standardinteger.h implements the <stdint.h> interface. (the <stdint.h> s...
...vides various operations for examining and working upon double-precision floating point values, and for producing various special floating point values. core types.h further provides macros to define imported and exported c symbols. attributes.h implements various function and class attribute macros. the function macros control inlining, note whether a function returns, and enforce various c++-
related restrictions on inheritance and use. the class macros permit controlling the inheritability of a class. likely.h provides moz_likely and moz_unlikely macros to annotate conditions with their expected truthiness. util.h implements various other bits of useful functionality. (this header will likely be further split up so that its functionality is less grab-bag.) debugging assertions.h prov...
Updates
this page is not maintained frequently. please follow our monthly irc meeting for the latest updates. march 22, 2011 firefox 4.0 has been
released! this new version comes with several bug fixes and new features for mathml. some improvements are particularly worth noting: a new html parser, which lets you use mathml inside non-xhtml documents. complete support for stix fonts 1.0. better rendering of mathematical symbols, especially stretchy operators. october 21, 2010 mathml 3.0 is now a w3c recommendation! june 11, 2010 stix fonts version 1.0 are now compatible with trunk. may 28, 2010 stix fonts version 1.0
released. april 2010 new web pages for the mozilla mathml project! documentation is now available on mdc and wiki.mozilla.org. feel free to complete and improve i...
...onts version 1.0
released. april 2010 new web pages for the mozilla mathml project! documentation is now available on mdc and wiki.mozilla.org. feel free to complete and improve it! may 8, 2007 mozilla ceo speaks out on the future of firefox: the complete 8,000 word interview. interview to the apc magazine where mitchell baker mentions roger sidje's work on mathml. june 5, 2002 mozilla 1.0
released "by virtue of embedding gecko, mozilla 1.0 and products based on mozilla code support more web standards, more deeply, more consistently across more platforms than any others. mozilla 1.0 features full support for html 4.0, xml 1.0, resource description framework (rdf), cascading style sheets level 1 (css1), and the w3c document object model level 1 (dom1) [...] as well as support for displ...
Mozilla Development Tools
the various development tools that we operate and/or maintain here at mozilla.org. naturally, source code for all of these tools is also available. the tools needed to build mozilla are described on the build page for your platform. mozilla source code (mercurial and cvs) "trunk" development for gecko 1.9.1/firefox 3.5 and beyond uses the mercurial source code version control system. earlier
releases and other products use the cvs version control system. if you are doing active development, checking out source code from one of these is preferable to downloading an archived snapshot, as you get up-to-the-minute changes. mxr you can browse the up-to-the-minute latest version of the source code online through a massively-hyperlinked source code browser (based on lxr) that lets you cros...
...tinderbox is for knowing when the tree is in flames. it is our home-grown web-based tool for watching the progress of the continuous builds that we run on multiple platforms. it is how we are able to tell when a checkin has broken the build on some platform, and how we know which person needs to be viciously flogged. bugzilla bugzilla is where developers can report bugs in the mozilla source
releases, and browse an online database of already-reported bugs. doctor doctor is a web interface to cvs. it lets developers and others edit pages on the mozilla.org web site without having to use cvs. doctor lets you edit pages in wysiwyg mode if the pages contain the <?doctor enable_wysiwyg_mode ?> processing instruction. access doctor by clicking the "edit this page" link at the bottom of an...
Mozilla Style System Documentation
of the style data for an element depends on the style data for that element's parent. likewise, some of the style data for a pseudo-element depends on the data for the pseudo-elements parent element. thus we create a style context tree so that the style contexts can find their ancestors and their descendants easily. however, siblings in the style context tree are unordered, since the order is not
relevant. thus the parent style context is an argument to the functions that create style contexts. if the parent is not given, the style context is taken to be the root of the style context tree. the functions that form the style context automatically adds the context to the tree correctly. dynamic changes describe nsframemanager::reresolvestylecontext and nsiframe::getparentstylecontextframe ...<...
...already. the walking stops when all of the properties are filled in or when the root of the rule tree is reached. then the style struct is computed from the declaration and stored at the appropriate location in the rule tree or on the style context. problems: dynamic style changes often destroy too much data. css stylesheet backend css stylesheet loading [this section needs to be written. i'm
reluctant to write it both since i don't know much about it.] problems:a bunch the code needs to be rewritten to prevent stylesheets from blocking the parser and to reduce string copying (although that partly goes with parsing).] parsing stylesheet representation problems: the stylesheet representation uses way too much memory. other nsistylesheet implementations problems: some of the html styl...
Intel Power Gadget
on mac and linux, tools/power/rapl is probably a better tool to use. understanding the power gadget output the following screenshot (from the mac version) demonstrates the available measurements. ...
...on mac and linux, tools/power/rapl is probably a better tool to use. understanding the power gadget output the following screenshot (from the mac version) demonstrates the available measurements. ...
Memory Profiler
he buttons in the profiler panel. start - start profiling stop - stop profiling reset - clear profile data when profiler is stopped profile data is accumulated and resumed after start. use reset to start a new recording. understanding the profiles traditional memory analysis tools look at the data. they build the referring-to, namely retaining graphs. this is helpful in exploring the
relationships among objects and identifying memory leaks. however, the information exposed in this way is usually a snapshot and the history of how memory has been used goes missing. moreover, they usually don't keep tracks of how objects are allocated. developers have to infer how an object might be allocated and freed by himself/herself. another common approach is to plot the allocations or the me...
... the history of how memory has been used goes missing. moreover, they usually don't keep tracks of how objects are allocated. developers have to infer how an object might be allocated and freed by himself/herself. another common approach is to plot the allocations or the memory usages along the timeline. this gives some intuition of how and when a bulk of objects are allocated. however, it still
relies on developers' wisdom, and sometimes chances, to dig out the problematical code snippet. this memory profiler is designed to solve the inconveniences and limitations. the goal is to identify the memory eager codes directly. the profiler is designed at the very beginning to support not only javascript but also native codes. naturally, not only javascript objects but also native allocations ar...
Profiling with the Firefox Profiler
-profiling. nightly builds are already built with the appropriate flags. you'll need to have adb and arm-eabi-addr2line (which is part of the android ndk) in your bash path, so use locate arm-eabi-addr2line (on linux) or mdfind name:arm-eabi-addr2line (on os x) and stick an export to its location in ~/.bash_profile. the extension will invoke bash to use adb and addr2line. install the latest pre-
release build in your host machine's firefox browser that has your phone reachable via adb. this will add a icon in the top right of the browser. set devtools.debugger.remote-enabled to true in about:config for fennec. select target mobile usb and press connect. the first run will take an additional 1 minute or so to pull in the required system libraries. profiling firefox startup start your f...
...idual composites large enough to be clicked). this will activate the "layertree" tab: in this screenshot, composite #143 has been selected. the layer tree structure can be seen in the left panel. it contains, for each layer, the type of the layer, and various metrics about the layer, such as the visible region and any transforms. in the right panel, a visualization of the layer tree (based enti
rely on the aforementioned metrics) is shown. hovering over a layer in the left panel highlights the layer in the right panel. this is useful for identifying what content each layer corresponds to. here, i'm hovering over the last layer in the layer tree (a paintedlayercomposite), and a strip at the top of the right panel is highlighted, telling me that this layer is for the system notification bar i...
about:memory
it is present in all builds and does not require any preparation to be used. how to generate memory reports let's assume that you want to measure firefox's memory usage. perhaps you want to investigate it yourself, or perhaps someone has asked you to use about:memory to generate "memory reports" so they can investigate a problem you are having. ...
...ment (particularly on mac). it only really matters on 32-bit platforms such as win32. there is also "vsize-max-contiguous" (not measured on all platforms, and not shown in this example), which indicates the largest single chunk of available virtual address space. if this number is low, it's likely that memory allocations will fail due to lack of virtual address space quite soon. various graphics-
related measurements ("gfx-*"). the measurements taken vary between platforms. graphics is often a source of high memory usage, and so these measurements can be helpful for detecting such cases. ...
perf
note: the power profiling overview is worth reading at this point if you haven't already. it may make parts of this document easier to understand. energy estimates perf can access the intel rapl energy estimates. the following example shows how to invoke it for this purpose. ...
...es can be used to get variations. the output will look like the following. performance counter stats for 'system wide': 51.58 joules power/energy-pkg/ [100.00%] 14.80 joules power/energy-cores/ [100.00%] 9.93 joules power/energy-gpu/ [100.00%] 27.38 joules power/energy-ram/ [100.00%] 5.003049064 seconds time elapsed it's not clear from the output, but the following
relationship holds. energy-pkg >= energy-cores + energy-gpu the measurement is in joules, which is usually less useful than watts. for these reasons rapl is usually a better tool for measuring power consumption on linux. wakeups perf can also be used to do high-context profiling of wakeups. ...
powermetrics
it is most useful for getting cpu, gpu and wakeup measurements in a precise and easily scriptable fashion (unlike activity monitor and top) especially in combination with rapl via the mach power command. this document describes the version of powermetrics that comes with mac os 10.10. the one that comes with 10.9 is less powerful. note: the power profiling overview is worth reading at this point if you haven't already. it may make parts of this document easier to understand. quick start powermetrics provides a vast number of measurements. ...
.... it may make parts of this document easier to understand. quick start powermetrics provides a vast number of measurements. the following command encompasses the most useful ones: sudo powermetrics --samplers tasks --show-process-coalition --show-process-gpu -n 1 -i 5000 --samplers tasks tells it to just do per-process measurements. --show-process-coalition tells it to group coalitions of
related processes, e.g. the firefox parent process and child processes. --show-process-gpu tells it to show per-process gpu measurements. -n 1 tells it to take one sample and then stop. -i 5000 tells it to use a sample length of 5 seconds (5000 ms). change this number to get shorter or longer samples. the following is example output from such an invocation: *** sampled system activity (fri sep ...
tools/power/rapl
note that if you do change this file, its contents may reset when the machine is next rebooted. you must be running linux kernel version 3.14 or later for rapl to work. otherwise, it will fail with an error message explaining this requirement. windows unfortunately, rapl does not work on windows, and porting it would be difficult because windows does not have apis that allow easy access to the
relevant model-specific registers. output the following is 10 seconds of output from a default invocation of rapl. total w = _pkg_ (cores + _gpu_ + other) + _ram_ w #01 5.17 w = 1.78 ( 0.12 + 0.10 + 1.56) + 3.39 w #02 9.43 w = 5.44 ( 1.44 + 1.20 + 2.80) + 3.98 w #03 14.26 w = 10.21 ( 5.47 + 0.19 + 4.55) + 4.04 w #04 10.02 w = 6.15 ( 2.62 + 0.43 + 3.10) + 3.86 w #05 14.63 w = 1...
...in _pkg_, _gpu_ and _ram_ are present so that each column's name has five characters. the total power is the sum of the package power and the ram power. the package estimate is divided into three parts: cores, gpu, and "other". "other" is computed as the package power minus the cores power and gpu power. if the processor does not support gpu or ram estimates then " n/a " will be printed in the
relevant column instead of a number, and it will contribute zero to the total. once sampling is finished — either because the user interrupted it, or because the requested number of samples has been taken — the following summary data is shown: 10 samples taken over a period of 10.000 seconds distribution of 'total' values: mean = 8.85 w std dev = 3.50 w 0th percentile...
Phishing: a short definition
in 2014, the msci estimated an annual global impact of phishing, and various forms of identity theft, to be as high as $5 billion usd. the impact has not improved much since. phishing is an attempt to collect sensitive information, such as usernames, passwords, and financial details by disguising as a trustworthy entity online. a
relatively simple, yet effective, phishing scheme is sending an email with a fake invoice of a person’s favorite shopping site. this email will usually contain a link pretending to lead to the original service, but in reality, taking the victim to an attacker-controlled website. the login portal might resemble the trusted website's login page very closely, and convince users to enter their credentials, letting others hijack their account. past and curren...
...t of the most common approaches. shifting blame to users some quick-to-implement, and cost-effective solutions, hold users accountable for their actions instead of restricting what’s technically possible. earlier responses by affected banks, and payment providers, was to attempt educating users to not click links in emails, along with requesting to verify email legitimacy through checking for
relevant personal information. another solution is to strengthen logins with pictures, or colored words, often chosen when signing up for a service. users look for these when logging in, and only enter their credentials when they recognize the user defined pictures or words. a study on the efficacy of security indicators, presented at the 2007 ieee symposium on security and privacy, suggests that t...
Research and prep
it is one of the most customizable and localizable parts of the product l10n process, as it goes beyond string translation. ...
...nguage, and know your users. this is, therefore, meant to be a guideline for how you should be formulating your recommendations. here's the basic process: file a bug under mozilla localizations>[your_locale] to request updates to your locale's productization preferences. if this is your first localization for a product, the l10n drivers will file this bug as part of the new product localization
release process. it is your l10n team's responsibility to perform research and identify the most appropriate web services for your region and present them in your bug as your informed recommendations. if there's no existing collaboration with the site provider and mozilla, ask for permission from the site provider to include it. ensure that your suggestions follow these parameters: search there a...
A guide to searching crash reports
ones in the following screenshot. by default, the "signature facet" tab is selected. ("facet" is a term that means "group".) in these results, the found crash reports are grouped according to crash signature and ranked by group size. 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. the numbers are large because this search matched all firefox crash reports from the past seven days. the first group has over 100,000 crash reports, which accounts for 7.77% of all matching crashes. this indicates there are over 1.3 million crash reports matching this search. you can reorder the groups in various ways by clicking on the column headers. the links within ...
...own by default. but there are many other interesting ways to group searches. facets in the search form to do a search with non-signature grouping first click on the "more options..." text, which reveals the additional fields shown in the following screenshot. (the "show columns" and "sort by" fields are straightforward. they apply to the "crash reports" tab of any search results, and are not
related to grouping.) the "facet on" field is the one that controls grouping. by default, it contains the value "signature", which explains why we saw a "signature facet" tab in the earlier search results. but we can change the values in this field and get different facet tabs in the search results. grouping by platform for example, if we start with a default search for all firefox crashes in the ...
Leak And Bloat Tests
ccounts", "account1,account2"); user_pref("mail.accountmanager.defaultaccount", "account2"); user_pref("mail.accountmanager.localfoldersserver", "server1"); user_pref("mail.identity.id1.fullname", "tinderbox"); user_pref("mail.identity.id1.smtpserver", "smtp1"); user_pref("mail.identity.id1.useremail", "tinderbox@invalid.com"); user_pref("mail.identity.id1.valid", true); user_pref("mail.root.none-
rel", "[profd]mail"); user_pref("mail.root.pop3-
rel", "[profd]mail"); user_pref("mail.server.server1.directory-
rel", "[profd]mail/local folders"); user_pref("mail.server.server1.hostname", "local folders"); user_pref("mail.server.server1.name", "local folders"); user_pref("mail.server.server1.type", "none"); user_pref("mail.server.server1.username", "nobody"); user_pref("mail.server.server2.check_new...
...d]mail"); user_pref("mail.server.server1.directory-
rel", "[profd]mail/local folders"); user_pref("mail.server.server1.hostname", "local folders"); user_pref("mail.server.server1.name", "local folders"); user_pref("mail.server.server1.type", "none"); user_pref("mail.server.server1.username", "nobody"); user_pref("mail.server.server2.check_new_mail", false); user_pref("mail.server.server2.directory-
rel", "[profd]mail/tinderbox"); user_pref("mail.server.server2.download_on_biff", true); user_pref("mail.server.server2.hostname", "tinderbox"); user_pref("mail.server.server2.login_at_startup", false); user_pref("mail.server.server2.name", "tinderbox@invalid.com"); user_pref("mail.server.server2.type", "pop3"); user_pref("mail.server.server2.username", "tinderbox"); user_pref("mail.smtp.defaultserve...
NSPR Poll Method
t for read ready (that is, pr_poll_read is set in in_flags) and the layer has input data buffered, the poll method would set the pr_poll_read event in *out_flags. it can determine that without asking the underlying network transport. the current implementation of pr_poll (the primary user of the poll method) requires that the events in *out_flags reflect the caller's view. ...
..., pr_poll_read is set in in_flags) and the layer has input data buffered, the poll method would set the pr_poll_read event in *out_flags. it can determine that without asking the underlying network transport. the current implementation of pr_poll (the primary user of the poll method) requires that the events in *out_flags reflect the caller's view. this requirement may be
relaxed in a future nspr
release. to remain compatible with this potential semantic change, nspr clients should only use *out_flags as described in the how to use the poll method section below. return value if the poll method stores a nonzero value in *out_flags, the return value will be the value of in_flags. (note: this may change in a future nspr
release if we make the semantic change to *out_flags mentioned above. the...
NSPR build instructions
configure options although nspr uses autoconf, its configure script has two default values that are different from most open source projects. if the os vendor provides a compiler (for example, sun and hp), nspr uses that compiler instead of gcc by default. nspr build generates a debug build by default. --disable-debug --enable-optimize specify these two options to generate an optimized (
release) build. these two options can actually be used independently, but it's not recommended. --enable-64bit on a dual 32-bit/64-bit platform, nspr build generates a 32-bit build by default. to generate a 64-bit build, specify the --enable-64bit configure option. --target=x86_64-pc-mingw32 for 64-bit builds on windows, when using the mozillabuild environment. --enable-win32-target=win95 this...
...indows for historical reasons. we recommend most applications use the "win95" configuration. the "win95" configuration supports all versions of windows. the "win95" name is historical; it should have been named "win32". to generate a "win95" configuration, specify the --enable-win32-target=win95 configure option. --enable-debug-rtl this option is only used on windows. nspr debug build uses the
release c run-time library by default. to generate a debug build that uses the debug c run-time library, specify the --enable-debug-rtl configure option. makefile targets all (default) clean realclean distclean install
release running the test programs the tests were built above, in the pr/tests directory. on mac os x, they can be executed with the following: /bin/sh: $ cd pr/tests ...
Long Long (64-bit) Integers
where 64-bit integers are desired, use of nspr's implementation is recommended to ensure cross-platform compatibility. most of the 64-bit integer operations are implemented as macros. the specific implementation of each macro depends on whether the compiler for the target platform supports 64-bit integers. ...
... supports 64-bit integers. ...
PR_AttachThread
native thread that was not created with nspr. pr_attachthread informs nspr about the new thread by associating a prthread object with the native thread. the thread object is automatically destroyed when it is no longer needed. you don't need to call pr_attachthread unless you create your own native thread. pr_init calls pr_attachthread automatically for the primordial thread. ...
...r needed. you don't need to call pr_attachthread unless you create your own native thread. pr_init calls pr_attachthread automatically for the primordial thread. note: as of nspr
release v3.0, pr_attachthread and pr_detachthread are obsolete. a native thread not created by nspr is automatically attached the first time it calls an nspr function, and automatically detached when it exits. in nspr
release 19980529b and earlier, it is necessary for a native thread not created by nspr to call pr_attachthread before it calls any nspr functions, and call pr_detachthread when it is done calling nspr functions. ...
PR_Unlock
returns the function returns one of the following values: if successful, pr_success. if unsuccessful (for example, if the caller does not own the lock), pr_failure. ...
... returns the function returns one of the following values: if successful, pr_success. if unsuccessful (for example, if the caller does not own the lock), pr_failure. ...
PR_WaitCondVar
#include <prcvar.h> prstatus pr_waitcondvar( prcondvar *cvar, printervaltime timeout); parameters pr_waitcondvar has the following parameters: cvar the condition variable on which to wait. timeout the value pr_interval_no_timeout requires that a condition be notified (or the thread interrupted) before it will resume from the wait. the value pr_interval_no_wait causes the thread to
release the lock, possibly causing a rescheduling within the runtime, then immediately attempt to reacquire the lock and resume. returns the function returns one of the following values: if successful, pr_success. if unsuccessful (for example, if the caller has not locked the lock associated with the condition variable or the thread was interrupted with pr_interrupt), pr_failure. the details c...
...ss. if unsuccessful (for example, if the caller has not locked the lock associated with the condition variable or the thread was interrupted with pr_interrupt), pr_failure. the details can be determined with pr_geterror. description before the call to pr_waitcondvar, the lock associated with the condition variable must be held by the calling thread. after a call to pr_waitcondvar, the lock is
released and the thread is blocked in a "waiting on condition" state until another thread notifies the condition or a caller-specified amount of time expires. when the condition variable is notified, a thread waiting on that condition moves from the "waiting on condition" state to the "ready" state. when scheduled, the thread attempts to reacquire the lock that it held when pr_waitcondvar was called...
NSPR
e mozilla clients, many of red hat's and oracle's server applications, and other software offerings. documentation about nspr this topic describes, in general terms, the goals of nspr and a bit about how it does it. nspr api reference the reference describes each api public macro, structure and function in the nspr api. nspr build instructions how to checkout and build from source. nspr
release process how to prepare an nspr
release. legacy nspr content older nspr content is available in svn for browsing and/or migration to this site getting nspr nspr is available in various source and binary packages, depending on your platform: windows: build the source package, using the nspr build instructions. mac: install the macports nspr package, or the homebrew nspr package. ubun...
...ibraries) to compile programs using nspr mozilla-nspr-debuginfo : debug information (including build symbols) for package mozilla-nspr mozilla-nspr-debuginfo-32bit : debug information (including build symbols) for package mozilla-nspr-32bit mozilla-nspr-debugsource : debug sources for all of the above community view mozilla forums... mailing list newsgroup rss feed
related topics necko, nss ...
Building NSS
ny options, it may be complex to build. please read these instructions carefully before attempting to build. build environment nss needs a c and c++ compiler. it has minimal dependencies, including only standard c and c++ libraries, plus zlib. for building, you also need make. ideally, also install gyp and ninja and put them on your path. this is recommended, as the build is faster and more
reliable. windows nss compilation on windows uses the same shared build system as mozilla firefox. you must first install the windows prerequisites, including mozillabuild. you can also build nss on the windows subsystem for linux, but the resulting binaries aren't usable by other windows applications. get the source nss and nspr use mercurial for source control like other mozilla projects. to c...
... mozilla firefox. you must first install the windows prerequisites, including mozillabuild. you can also build nss on the windows subsystem for linux, but the resulting binaries aren't usable by other windows applications. get the source nss and nspr use mercurial for source control like other mozilla projects. to check out the latest sources for nss and nspr--which may not be part of a stable
release--use the following commands: hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss to get the source of a specific
release, see nss
releases. build build nss using our build script: nss/build.sh this builds both nspr and nss. build with make alternatively, there is a make target called "nss_build_all", which produces a similar result. ...
Cryptography functions
publickeynickname mxr 3.4 and later pk11_setslotpwvalues mxr 3.2 and later pk11_setsymkeynickname mxr 3.4 and later pk11_setsymkeyuserdata mxr 3.11 and later pk11_setwrapkey mxr 3.2 and later pk11_sign mxr 3.2 and later pk11_signatu
relen mxr 3.2 and later pk11_symkeyfromhandle mxr 3.2 and later pk11_tokenexists mxr 3.2 and later pk11_tokenkeygen mxr 3.6 and later pk11_tokenkeygenwithflags mxr 3.10.2 and later pk11_tokenrefresh mxr 3.7.1 and later pk11_traversecer...
... seckey_ecparamstokeysize mxr 3.12 and later seckey_destroypublickeylist mxr 3.4 and later seckey_destroysubjectpublickeyinfo mxr 3.2 and later seckey_getpublickeytype mxr 3.3 and later seckey_publickeystrengthinbits mxr 3.8 and later seckey_signatu
relen mxr 3.11.2 and later ...
JSS FAQ
jss has two. but jss combines two of the nss callbacks into one. nss's three ssl cert callbacks are: ssl_authcertificatehook sets a callback to authenticate the peer's certificate. it is called instead of nss's routine for authenticating certificates. ssl_badcerthook sets a callback that is called when nss's routine fails to authenticate the c...
... the token name is different depending on which application you are running. in jss, the token is called "internal key storage token". you can look it up by name using cryptomanager.gettokenbyname(), but a better way is to call cryptomanager.getinternalkeystoragetoken(), which works no matter what the token is named. in general, a key is a handle to an underlying object on a pkcs #11 token, not me
rely a java object residing in memory. symmetric key usage: basically encrypt/decrypt is for data and wrap/unwrap is for keys. jss 3.2 has jca support. when will jss have jsse support? not in the near future due to pluggability is disabled in the jsse version included in j2se 1.4.x for export control reasons. ...
NSS Developer Tutorial
ed or removed. under certain circumstances, it is safe to add new members to an exported struct at the end. opaque structs give us complete freedom to change them, but require applications to call nss functions, to allocate and free them. enums the numeric values of public enumerators cannot be changed. to stress this fact, we often explicitly assign numeric values to enumerators, rather than
relying on the values assigned by the compiler. 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. public headers are in the exports variable. private headers,which may be included by files in other directories, are in the private_exports variable. private headers, that are only included by f...
...ehavior. we would need to add a new function to provide the desired behavior. similarly, new options often need to be disabled by default. nss review/feature approval process nss doesn’t have 'super reviewers'. we wish to increase the number of nss developers, who have broad understanding of nss. one review is usually enough for the review to pass. for critical code reviews, such as a patch
release of a stable branch, two reviews may be more reasonable. for new features, especially those that appear controversial, try to find a reviewer from a different company or organization than your own, to avoid any perceptions of bias. update nss in mozilla-inbound and mozilla-central the procedure is documented at https://developer.mozilla.org/docs/updating_nspr_or_nss_in_mozilla-central. if...
nss tech note8
sion lifetime) each of these variables applied to both client and server sessions. that is, the client session lifetime was not separately settable from the server session lifetime. these two variables were private, declared in a private header file. there was no api function by which client programs could set these values. however since nss was delivered as archive libraries, client programs me
rely declared these two variables for themselves, and then were able to alter those variables directly. for server programs, the function for initializing the server session cache would set these two variables according to two of the arguments to that function. so, ssl protocol code that wanted to cache a sid would do these steps, whether for client or for server: for ssl2: sid->lastaccesstime...
... (*ss->sec.cache)(sid); the cache api was defined such that the caller must set creationtime properly, and may set expirationtime to the desired value or to zero. if zero, then the called cache function would compute the correct expiration time by adding the chosen timeout (from one of those two global variables) to the sid's creationtime, giving the expirationtime. however, none of the callers
relied on the ability of the respective cache functions to be able to compute the expiration time. all callers computed the expiration times explicitly, as shown above. the server side of the session cache code was largely rewritten for nss 3.4. the objectives were to make the server session cache faster, and to fix bugs that caused corruption in multi-process servers, and also to allow separate v...
Notes on TLS - SSL 3.0 Intolerant Servers
nvm stronghold/2.2 webmail v. 3.6.1 by infinite technologies (* update available) n.b. there might be servers other than those listed above which exhibit this problem. if you find such a server, feel free to add it to this page. for up-to-date information, you can read this bug 59321 which keeps a list of tls/ssl 3.0 intolerant servers. users: how to avoid this problem? netscape 6.1 preview
release 1, or mozilla 0.9.1 and earlier these versions shipped with the tls option turned on as the default but with no way to deal with the problem servers. if you are using these old versions, please update to the latest netscape or mozilla versions. you can also avoid such a problem by editing an existing profile -- check the preference option setting at: edit | preferences | privacy and security...
...hich corrects this problem. there will be other network clients which implement tls/ssl 3.0 specification correctly and have a problem with your site. let's not perpetuate the problem servers. contact the manufacturer and inquire if there is a new version available which fixes this problem. post a note on your site instructing users of old versions of browsers like netscape 6.0/6.01/6.1 preview
release 1 and mozilla 0.9.1 and earlier to turn off the tls option at: edit | preferences | privacy and security | ssl | enable tls. however, this is a temporary workaround at best. we recommend strongly that you urge users to upgrade to the latest netscape version (or at least netscape 6.1) since the newer versions have the graceful rollback implemented in the code. if you have questions concerning...
Migration to HG
each project now lives in its own separate space, they can be found at: https://hg.mozilla.org/projects/nspr/ https://hg.mozilla.org/projects/nss/ https://hg.mozilla.org/projects/jss/ https://hg.mozilla.org/projects/python-nss/ this migration has been used as an opportunity to change the layout of the source directories. for nspr, "mozilla/nsprpub" has been removed from the directory hierarchy, all files now live in the top directory of the nspr repository. likewise for nss and jss, "mozilla/security" has been removed and files now live at the top level. ...
...it architectures # set build_opt=1 to get an optimized build make nss_build_all note that the jss project has been given a private copy of the former mozilla/security/coreconf directory, allowing it to remain stable, and only update its build system as necessary. because of the changes described above, we have decided to use a new series of (minor) version numbers. the first
releases using the new code layout will be nspr 4.10 and nss 3.15 ...
FC_SignFinal
description fc_signfinal finishes a multi-part signing operation by returning the complete signature and clearing the operation context. ...
... description fc_signfinal finishes a multi-part signing operation by returning the complete signature and clearing the operation context. ...
FC_Verify
description fc_verify verifies a signature in a single-part operation, where the signature is an appendix to the data. ...
... description fc_verify verifies a signature in a single-part operation, where the signature is an appendix to the data. ...
FC_VerifyFinal
description fc_verifyfinal finishes a multi-part signature verification operation. ...
... description fc_verifyfinal finishes a multi-part signature verification operation. ...
FC_VerifyRecover
name fc_verifyrecover - verify data in a single recoverable operation. syntax ck_rv fc_verifyrecover( ck_session_handle hsession, ck_byte_ptr psignature, ck_ulong ussignatu
relen, ck_byte_ptr pdata, ck_ulong_ptr pusdatalen ); parameters hsession [in] session handle. psignature [in] mechanism to be used for the signing operation. ussignatu
relen [in] handle of the key to be usedn. pdata [out] pointer to the buffer or null. pusdatalen [in, out] pointer to the size of the output buffer, replaced by the length of the signature if the operation is successful. ...
...o be usedn. pdata [out] pointer to the buffer or null. pusdatalen [in, out] pointer to the size of the output buffer, replaced by the length of the signature if the operation is successful. description fc_verifyrecover verifies data in a single operation where the (digest) data can be recovered from the signature. if psignature is null only the length of the signature is returned in *pussignatu
relen. a user must log into the token (to assume the nss user role) before calling fc_verifyrecover. return value examples see also nsc_verifyrecover ...
NSS environment variables
(definition for nss 3.12.6 and above) sets how tls renegotiation is handled [1|u|u]: ssl_renegotiate_unrestricted server and client are allowed to renegotiate without any restrictions. this setting was the default prior 3.12.5 and makes products vulnerable. [0|n|n]: ssl_renegotiate_never never allow renegotiation - that was the default for 3.12.5
release. [3|t|t]: ssl_renegotiate_transitional disallows unsafe renegotiation in server sockets only, but allows clients to continue to renegotiate with vulnerable servers. this value should only be used during the transition period when few servers have been upgraded. [2|r|r]: ssl_renegotiate_requires_xtn (default) only allows renegotiation if the...
... as vc8 and vc9) that do not understand /pdb:none 3.11 moz_debug_flags string when moz_debug_symbols is set, you may use moz_debug_flags to specify alternative compiler flags to produce symbolic debugging information in a particular format. 3.12.8 nsdistmode string on operating systems other than windows, this controls whether copies, absolute symlinks, or
relative symlinks of the output files should be published to mozilla/dist. the possible values are: copy: copies of files are published absolute_symlink: symlinks whose targets are absolute pathnames are published if not specified, default to
relative symlinks (symlinks whose targets are
relative pathnames). on windows, copies of files are always published. before 3.0 ...
NSS tools : crlutil
mailing lists: pki-devel@redhat.com and pki-users@...
...l from db: crlutil -d -n nickname [-d keydir] [-p dbprefix] * erasing crls from db: crlutil -e [-d keydir] [-p dbprefix] * import crl from file: crlutil -i -i crl [-t crltype] [-u url] [-d keydir] [-p dbprefix] [-b] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora. the most closely-
related project is dogtag pki, with a project wiki at [1]http://pki.fedoraproject.org/wiki/. for information specifically about nss, the nss project wiki is located at [2]http://www.mozilla.org/projects/security/pki/nss/. the nss site
relates directly to nss code changes and
releases. mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss too...
OLD SSL Reference
this ssl reference into the format described in the mdn style guide. if you are inclined to help with this migration, your help would be very much appreciated. upgraded documentation may be found in the current nss reference ssl reference newsgroup: mozilla.dev.tech.crypto writer: sean cotter manager: wan-teh chang chapter 1 overview of an ssl application ssl and
related apis allow compliant applications to configure sockets for authenticated, tamper-proof, and encrypted communications. this chapter introduces some of the basic ssl functions. chapter 2, "getting started with ssl" illustrates their use in sample client and server applications. initialization initializing caches configuration communication ...
... validating certificates cert_verifycertnow cert_verifycertname cert_checkcertvalidtimes nss_cmpcertchainwcanames manipulating certificates ...
NSS tools : crlutil
mailing lists: pki-devel@redhat.com ...
...e [-d keydir] [-p dbprefix] * erasing crls from db: crlutil -e [-d keydir] [-p dbprefix] * import crl from file: crlutil -i -i crl [-t crltype] [-u url] [-d keydir] [-p dbprefix] [-b] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora. the most closely-
related project is dogtag pki, with a project wiki at [1]http://pki.fedoraproject.org/wiki/. for information specifically about nss, the nss project wiki is located at [2]http://www.mozilla.org/projects/security/pki/nss/. the nss site
relates directly to nss code changes and
releases. mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki autho...
Rhino documentation
faq answers to frequently asked questions about rhino. rhino history history of the beast. ...
... faq answers to frequently asked questions about rhino. rhino history history of the beast. ...
Rhino history
when netscape stopped work on "javagator," as it was called, somehow rhino escaped the axe (rumor had it that the executives "forgot" it existed). ...
...ely leaked memory since most jvms don't really collect unused classes or the strings that are interned as a result of loading a class file. so in fall of 1998, rhino added an interpretive mode. the classfile generation code was moved to an optional, dynamically-loaded package. compilation is faster and when scripts are no longer in use they can be collected like any other java object. rhino was
released to mozilla.org in april 1998. originally rhino classfile generation had been held back from
release. however the licensees of rhino have now agreed to
release all of rhino to open source, including class file generation. since its
release to open source, rhino has found a variety of uses and an increasing number of people have contributed to the code. ...
Rhino overview
ebugger for scripts executed with rhino language the javascript language itself is standardized by standard ecma-262 ecmascript: a general purpose, cross-platform programming language. rhino 1.3 and greater conform to edition 3 of the standard. rhino 1.6 and greater implement ecma-357 ecmascript for xml (e4x). see the specification for more information on the standard, and rhino version 1.6r1
release notes for details on the implementation in rhino. in addition, rhino has implemented javaadapters, which allows javascript to implement any java interface or extend any java class with a javascript object. see the enum.js example for more information. numerous books and tutorials on javascript are available. javascript: the definitive guide is recommended, and contains a chapter on rhino. ...
...gator. embeddings that trust the javascript code they execute may ignore the security features. embeddings that run untrusted javascript code must do two things to enable the security features. first, every context that is created must be supplied an instance of an object that implements the securitysupport interface. this will provide rhino the support functionality it needs to perform security-
related tasks. second, the value of the property security.requiresecuritydomain should be changed to true in the resource bundle org.mozilla.javascript.resources.security. the value of this property can be determined at runtime by calling the issecuritydomainrequired method of context. setting this property to true requires that any calls that compile or evaluate javascript must supply a security do...
Rhino serialization
however, serialization of code in compilation mode has some significant limitations. serialization provides a way to save the state of an object and write it out to a file or send it across a network connection. simple serialization example the rhino shell has two new top-level functions, serialize and deserialize. ...
...); print(g()); $ java -classpath 'js.jar;.'org.mozilla.javascript.tools.shell.main test2.js 3 now the function f is compiled to a java class, but that class is then made available in the classpath so serialization works. this isn't that interesting an example since compiling a function to a class and then loading it accomplishes the same as serializing an interpreted function, but it becomes more
relevant if you wish to serialize javascript objects that have references to compiled functions. original document information author: norris boyd last updated date: november 15, 2006 copyright information: portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a creative commons license | details. ...
Shumway
enderer — and what it means for the community of developers currently creating the adobe flash platform. the project is not exactly a developer tool but it is something that content creators should test against (and report bugs or performance issues to). for even more information, please refer to the external links. the whats and whys of shumway shumway is a renderer for adobe flash built enti
rely in web standards (javascript, webgl, and others). it is currently available as an extension and as a component in firefox's nightly builds that can be enabled through about:config (you need to find the shumway.disabled preference and set it to false). it is expected to be included in firefox at some point to allow plugin-free compatibility with swf-based games and animations. shumway has certain...
...m of the screen to enable or disable various shumway options. note: if your applet runs at an abnormal speed, try toggling "turbo" at the bottom of the inspector window. you may wish to do this before opening your swf file. limitations of shumway might be encountered through testing. there are two places where shumway bugs are tracked: github (via issues and pull requests) manages problems
relating to shumway, itself. bugzilla is intended for problems with integrating shumway into firefox. end-users and less involved developers may report issues by hovering over "shumway" within flash content, clicking "report problems", and filling the form. performance and compatibility issues with flash content should be reported through github. from the main page for shumway at github, click on...
64-bit Compatibility
ix this is to make types explicit, such as: const uintptr_t pointer_tagbits = 3 or by using a cast inside the macro. this sort of bug happens surprisingly often - see bug 501324, bug 512866 for example. amd64 pointers if mucking with pointers on amd64 (or em64-t/intel64), it is important to keep in mind an invariant that bits 63-48 must be sign-extended from bit 47. if you use these bits to squir
rel away a payload, they must be adjusted before attempting to dereference the pointer. for more information and platform specific details on virtual address widths, see this article on wikipedia. builtins and calls when passing arguments to lirwriter::inscall(), there are four types: argsize_f - floating point value argsize_i - 32-bit integer argsize_q - 64-bit integer argsize_p - 32-bit intege...
...d. mucking with native integers in lir the following opcodes can be used to safely load, modify, and compare native integers. for such opcodes there are two forms, an "undecorated" form which is 32-bit, and a form decorated with a "q" or "qi" that is 64-bit. to make it easier to generate platform specific code, these opcodes have aliases decorated with a "p". ...
Statistics API
there are several ways to get access to this data: the environment variable moz_gctimer controls text dumping of gc stats. moz_gctimer may be none, stderr, stdout, or a filename. if a filename is given, data is appended to that file. when logging to a file is used in combination with multi-process firefox (e10s) it is necessary to set security.sandbox.content.level = 0, otherwise the content process will crash. ...
... done in each slice. in between slices, other browser code is allowed to run. the slices array describes how long each slice took and what work was done during the slice. each element of the slices array is an object with these fields: slice: integer - the slice index, starting at 0. pause: number (milliseconds) - the slice duration. when: number (milliseconds) - the time this slice started,
relative to the first slice's start time. reason: string - a string describing the api that initiated this gc slice. page_faults: integer - number of page faults incurred during the processing of this slice. start_timestamp: integer (microseconds) - time of slice start from epoch. end_timestamp: integer (microseconds) - time of slice end from epoch. times: object - a map from phase names to the ...
JS::Value
js::value is the type of javascript values in the jsapi. a c++ variable of type js::value represents a value in javascript: a string, number, object (including arrays and functions), boolean, symbol, null, or undefined. js::value is a class whose internal structure is an implementation detail. embeddings should not
rely on observed representation details or upon the size of js::value. the data in a js::value can be accessed using these member functions: js type js::value type tests constructor accessors mutators null val.isnull() js::nullvalue() n/a val.setnull() undefined val.isundefined() js::undefinedvalue() n/a val.setundefined() boolean val.isboolean(), val.istrue(), val.isfalse() js::booleanvalue(bool),...
...uses of this method should be replaced with v.isobjectornull(). ...
JS_SetGCCallback
h garbage collection is happening. status jsgcstatus one of the jsgcstatus constants, described below, indicating the stage of gc. description js_setgccallback sets a callback function which the garbage collector calls at several points during garbage collection. rt is the runtime in which you specify the callback. cb is a pointer to the new callback function to use. callback
related to finalization is separated to js_setfinalizecallback in jsapi 13. obsolete since jsapi 13 js_setgccallback returns a pointer to the previously used callback function upon completion. the application may store this return value in order to restore the original callback when the new callback is no longer needed. to restore the original callback, call js_setgccallback a second time, and pas...
...a js_threadsafe build, a jsgc_begin callback can happen on one thread before or while a jsgc_end callback for the previous gc cycle runs on another thread. in a js_threadsafe build, the jsgc_end callback is called after each stop-the-world rendezvous during which one or more garbage collection cycles finished. the callback executes on the same thread that performed gc, after the gc lock has been
released. other threads may be running in active requests. see also mxr id search for js_setgccallback js_setfinalizecallback bug 723286 ...
JS_SetGCZeal
syntax void js_setgczeal(jscontext *cx, uint8_t zeal, uint32_t frequency); name type description cx jscontext * a context. the gc zeal level of the associated jsruntime is set. zeal uint8_t the desired level of garbage collection. frequency uint32_t with some zeal levels, a gc is triggered every frequency allocations. ...
...ncremental gc in two slices: 1) mark all 2) new marking and finish. 10 incremental gc in multiple slices. 11 verify post write barriers between instructions. 12 verify post write barriers between paints. 13 check internal hashtables on minor gc. 14 perform a shrinking collection every frequency allocations. with gc zeal enabled, gc-
related crashes are much easier to reproduce (they happen more
reliably) and debug (they happen sooner, closer to the source of the bug). the drawback is that gc zeal can cause javascript code to run extremely slowly. regularly running your test suite with gc zeal enabled at level 2 is a good practice. this function is available only in debug builds. to enable this function in an optimized build, def...
JS_SetOptions
anchcallback may be called with a null script parameter, by native code that loops intensively. mxr id search for jsoption_native_branch_callback jsoption_dont_report_uncaught when returning from the outermost api call, prevent uncaught exceptions from being converted to error reports. ...
...ght when returning from the outermost api call, prevent uncaught exceptions from being converted to error reports. mxr id search for jsoption_dont_report_uncaught jsoption_
relimit added in spidermonkey 1.8 throw an exception if a regular expression backtracks more than n3 times, where n is the length of the input string. mxr id search for jsoption_
relimit jsoption_anonfunfix added in spidermonkey 1.8 disallow function () {} in statement context, per ecma-262 edition 3. this behavior is the default in
releases where this option has been removed. mxr id search for jsoption_anonfunfix jsoption_jit obsolete since jsapi 11 added in spidermonkey 1.8.1 enables the jit compilation of code in the context...
JS_SetParent
ch to set the parent. this must be an object that has not yet been exposed to script. see the description for details. parent js::handleobject pointer to the parent object to use. description js_setparent sets an object's parent. each object may have at most one parent, which is another object. applications that use spidermonkey's security features typically use the parent
relation to determine both (a) what security principals are attached to the currently executing script; and (b) what security principals are attached to the object being accessed. (for some function objects, the parent chain is also used to implement lexical scoping, but this should be considered an implementation detail.) ordinarily an application sets a new object's parent by passing the parent ob...
...s the preferred approach. but an application may instead use js_setparent after the object is created. applications can get an object's parent using js_getparent. scripts can determine an object's parent by using the __parent__ property, but scripts cannot assign to the __parent__ property. in fact, once an object is exposed to a script, the object's parent must not change. the javascript engine
relies on this invariant. js_setparent has no way to check that this is the case, but nonetheless, applications must not call js_setparent on an object that has already been exposed to a script. if an application does this, the behavior is undefined. on success, js_setparent returns js_true. otherwise, it reports an error or sets an exception and returns js_false. see also mxr id search for js_s...
Property attributes
er is a javascript function, not a c/c++ function. see js_defineproperty for details. mxr id search for jsprop_setter jsprop_shared the property is shared. this is usually the right thing for properties that have getters or setters. this has three effects: the javascript engine does not set aside any memory for the property's value. the value is determined enti
rely by the getter. (the property has no stored value.) assignment via the prototype chain is affected. assigning to obj.x, where obj inherits a non-shared property from its prototype, creates a new own data property on obj; the prototype's .x is not shared with its children. if the inherited property is shared, the setter is called instead. if the property is also jsprop_permanent, then ce...
...s flag when calling js_define* apis to reify lazily-defined properties. jsprop_resolving is used only with property-defining apis. it tells the engine to skip the resolve hook when performing the lookup at the beginning of property definition. this keeps the resolve hook from accidentally triggering itself: unchecked recursion. for enumerate hooks, triggering the resolve hook would be me
rely silly, not fatal, except in some cases involving non-configurable properties. added in spidermonkey 45 mxr id search for jsprop_resolving jsprop_ignore_enumerate ignore the value in jsprop_enumerate. this flag only valid when defining over an existing property. added in spidermonkey 38 mxr id search for jsprop_ignore_enumerate jsprop_ignore_readon...
Thread Sanitizer
d on the thread sanitizer wiki. public builds note: no public builds are available at this time yet. manual build build prerequisites note: this section assumes you're using linux to build. threadsanitizer does not work on mac osx yet. llvm/clang the tsan instrumentation is implemented as an llvm pass and integrated into clang. the version of clang you need to use depends on what firefox
release you are compiling if you are building from mozilla-central, you must use clang 3.6 or later. clang 3.4 + tsan cannot compile firefox due to an internal compiler error; some versions of clang 3.5 packaged by linux distros do not work for the same reason. you can check which version of clang you have by running the command: clang -v if you are not building from mozilla-central and ar...
...t compile firefox due to an internal compiler error; some versions of clang 3.5 packaged by linux distros do not work for the same reason. you can check which version of clang you have by running the command: clang -v if you are not building from mozilla-central and are building firefox 39 or earlier, you must use clang 3.3. you can find precompiled binaries for llvm/clang 3.3 on the llvm
releases page. we recommend using clang 3.6 or later. building firefox getting the source if you don't have a source code repository clone yet, you need to get yourself a clone of mozilla-central. adjusting the build configuration create the build configuration file .mozconfig with the following content in your mozilla-central directory: mk_add_options moz_objdir=@topsrcdir@/objdir-ff-tsan mk...
Zest implementation
the first version of zest has been
released but is intentionally very basic. future versions of zest are planned which will significantly increase the scope of the language. the first version is aimed at creating scripts for reproducing basic security vulnerabilities includes a java reference implementation, which conforms to jsr 223 has been included in a proof-of-concept owasp zap add-on the next version is underdevelopment - more details soon. ...
...ly very basic. ...
Mozilla Projects
the set of macro expansions that contain any location. this information allows c++ to be automatically rewritten in a precise way. the inputs driving the rewriting would normally be provided by a program-analysis system outside of pork. (see dehydra, treehydra). rhino rhino is an open-source implementation of javascript written enti
rely in java. it is typically embedded into java applications to provide scripting to end users. it is embedded in j2se 6 as the default java scripting engine. shumway this article will help you understand shumway — mozilla's open standards-based flash renderer — and what it means for the community of developers currently creating the adobe flash platform...
...rs. it is embedded in j2se 6 as the default java scripting engine. shumway this article will help you understand shumway — mozilla's open standards-based flash renderer — and what it means for the community of developers currently creating the adobe flash platform. spidermonkey: the mozilla javascript runtime standalone source code
releases can be found on the
releases page. thread sanitizer thread sanitizer (tsan) is a fast data race detector for c/c++ programs. it uses a compile-time instrumentation to check all non-race-free memory access at runtime. unlike other tools, it understands compiler-builtin atomics and synchronization and therefore provides very accurate results with no r...
Using RAII classes in Mozilla
we have two techniques for avoiding this problem: static analysis and runtime assertions. ...
...d. ensuring raii classes are not used as temporaries a common mistake when using raii classes is to accidentally forget to name object, which causes its scope to be different from what is intended. for example, instead of writing: autolock lock(mmutex); which causes the lock to be held until the end of the block, one might write: autolock(mmutex); which erroneously causes the lock to be
released at the end of the statement. we have two techniques for avoiding this problem: static analysis and runtime assertions. static analysis static analysis passes are run on our testing infrastructure using our clang plugin, you can also run them locally marking a raii class for the static analysis is very simple, and performing this marking causes the static analysis to produce a build-time ...
A Web PKI x509 certificate primer
mation. cas apply to have their root certificates included by default in mozilla products by following the mozilla ca certificate policy and applying for inclusion as per ca:how_to_apply. users may override the default root certificate settings using the certificate manager. some organizations make use of the set of cas included in mozilla's products. ...
... generate your ca root update *.example.com and *.example.net below to match your domains. ...
Signing Mozilla apps for Mac OS X
mac os x's gatekeeper functionality prevents users from launching applications that haven't been code-signed, in order to help keep their computers secure. firefox and thunderbird
releases are both signed before shipping; this article describes the process. signing mozilla apps without the signing server firefox and thunderbird are built using mozilla's
release automation infrastructure. on mac os x, part of this infrastructure is automatic signing of the ".app" folder using apple's codesign tool. for projects that don't use mozilla's
release automation and would like to be signed for secure launching on os 10.8 mountain lion and later, this guide should provide some insight into how to make sure applications are signed correctly using apple's codesign tool. apple's code signing gui...
...e on the subject. getting a signing certificate in order to code-sign an application, you need a signing certificate. while testing and debugging for test and debug purposes, the easiest way to get a signing certificate is to use apple's keychain feature to create one. there are good instructions available under "to use the certificate assistant to create a self-signed signing identity". for
release creating a developer id requires a paid apple developer account. once you have that you can do the following to create your id: open the developer certificate utility. click "certificates" from the left hand menu. click "create a certificate" at the top right corner select the "developer id" radio button and uncheck the "developer id installer certificate" box. click "create" and foll...
Gecko events
event constants are defined in nsiaccessibleevent interface. event_dom_create an object has been created. is supported: yes event_dom_destroy an object has been destroyed. is supported: yes event_dom_significant_change an object's properties or content have changed significantly so that the type of object has really changed, and therefore the accessible should be destroyed or recreated. ...
...ling_end scrolling has ended on a scroll bar is supported: yes event_minimize_start a window object is about to be minimized or maximized is supported: no event_minimize_end a window object has been minimized or maximized is supported: no event_document_load_start is supported: yes event_document_load_complete the loading of the document has completed. is supported: yes event_document_
reload the document contents are being
reloaded. is supported: yes event_document_load_stopped the loading of the document was interrupted. is supported: yes event_document_attributes_changed the document wide attributes of the document object have changed. is supported: no event_document_content_changed the contents of the document have changed. is supported: no event_property_changed is...
Implementation Details
es to get information of supported interfaces for interested at api: core: gecko interfaces windows: msaa, ia2, ienumvariant and isimpledom* interfaces linux: at-spi roles refer to specific pages to get information of supported roles for interested at api: gecko msaa ia2 at-spi states refer to specific pages to get information of supported states for interested at api: gecko msaa ia2 at-spi
relations refer to specific pages to get information of supported
relations for interested at api: gecko msaa ia2 at-spi attributes object attributes refer to specific pages to get information of supported object attributes for interested at api: gecko msaa ia2 at-spi text attributes refer to specific pages to get information of supported text attributes for interested at api: gecko msaa - doesn...
...find the content window so that they know where to start grabbing the accessible tree, in order to load the current document into a buffer in their own process. refer to specific pages for interested at api. msaa/iaccessible2 at-spi avoiding memory leaks it is the assistive technology's responsibility to watch for events that indicate when windows or content subtrees are being destroyed, and to
release all accessible objects
related to that window. in addition, state_defunct is set on objects that should be
released by the assistive technology. mutation events should be watched to invalidate the cache. under msaa/ia2, watch for event_hide under atk/at-spi, watch for children-changed:remove to help developers in that regard, there is memory leak monitor, a firefox extension. ...
Feed content access API
nsifeedentry represents a single entry in an rss or atom feed. ...
... nsifeedentry represents a single entry in an rss or atom feed. ...
Mork
starting with mozilla 1.9, it was phased out in favor of sqlite, a more widely-supported file format. the information on this page was constructed by reading the source code of the mork database in mozilla and attempting to codify what it parses as faithfully as possible. in a few cases, constructs that the parser supported but were never used in mozilla's code are left unspecified. mork structure mork is a schema-less database format. ...
...es as faithfully as possible. in a few cases, constructs that the parser supported but were never used in mozilla's code are left unspecified. mork structure mork is a schema-less database format. at its core, it can be viewed as a set of rows, collections of name-value pairs, which can be organized into various tables. rows need not be in a table, nor need they be in only one table. values are me
rely an opaque sequence of bytes, so their actual content is dependent on the mork consumer. except when parsing values, whitespace ('\b', '\t', '\r', '\n', '\f', ' ', and '\x7f'), line continuations ('\\' followed by a newline), and comments (c++ or c style) can be ignored. in practice, only c++-style comments, and the standard whitespace characters ('\t', ' ', '\r', '\n') appear to be used. the gra...
Places Developer Guide
it encompasses history, bookmarks, tags, favicons, and annotations. ...
...rk(bookmarks.toolbarfolder, // the id of the folder the livemark will be placed in "my livemark title", // the title of the livemark siteuri, // the uri of the site. a nsiuri object. feeduri, // the uri of the actual feed. a nsiuri object. bookmarks.default_index); // the position of the livemark in its parent folder. ...
Using the Places livemark service
you can also use it to check whether an item is a livemark. livemarks are bookmark folders that contain the most recent items from an rss feed. initiating the livemark service before using the livemark service, you need to obtain an instance: var livemarkservice = components.classes["@mozilla.org/browser/livemark-service;2"] .getservice(components.interfaces.nsilivemarkservice); creating a new livemark the nsilivemarkservice.createlivemark() method creates a new livemark. ...
...il. accessing a livemark's feed uri nsilivemarkservice.getfeeduri() gets the uri of the syndication feed associated with a livemark container. var feeduri = livemarkservice.getfeeduri(newlvmkid); //newlvmkid = see "create a new livemark" for more detail. nsilivemarkservice.setfeeduri() sets the uri of feed associated with a livemark container. note: the caller is responsible for
reloading the livemark after changing its feed uri (since the contents are likely to be different given a different feed). livemarkservice.setfeeduri(newlvmkid, uri("http://foo.example.com/rss.xml")); //newlvmkid = see "create a new livemark" for more detail. update behavior five seconds after the browser starts up, the livemark service's update timer is started. the update timer fi...
FUEL
the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/fuel/application;1"].getservice(components.interfaces.fueliapplication); ...
...the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/fuel/application;1"].getservice(components.interfaces.fueliapplication); ...
XML Extras
tprequest. other test cases for each of the implemented components listed above exist in extensions/xmlextras/tests/. more exhaustive test suites need to be created, however. if you'd like to help out with qa, you can do one of the following: sign up as the qa owner for any of the implemented components. the qa owner will manage the tests associated with their component, act as qa contact for
related bugs and help with regression testing. contribute a test suite or individual tests that use the implemented components. file bugs for new test you have, and/or check them into extensions/xmlextras/tests/. file bugs against the implemented components. bugs should be filed against the xml component in the browser product. documentation probably the best way to learn how to use these techno...
...nst the implemented components. bugs should be filed against the xml component in the browser product. documentation probably the best way to learn how to use these technologies is through examples. there are some in extensions/xmlextras/tests/. if you follow that link to look at the examples you will need to look at page source for the html documents. for xmlhttprequest object you can mostly
rely on the microsoft xmlhttprequest documentation, with some caveats: all functions and property names begin with a lower case letter and the object creation is different. some properties are not implemented. thad hoffman has written a document that shows how you can mimic xml data islands in mozilla. edmond woychowsky has also written articles on xml data islands in mozilla: "make xml data islands...
Avoiding leaks in JavaScript XPCOM components
reference counting reference counting is a simple solution to the problem of allowing multiple owners to influence the lifetime of an object. in this strategy, the object has a member that is the number of other objects that "own" it. when this count goes to zero, the object destroys itself. this is the strategy used by xpcom, partly because it can be used through a very simple api, addref and
release. in c++, we use nscomptr to help manage ownership, and we use macros to implement addref and
release. the major problem with reference counting is that it can cause leaks through ownership cycles. if object a owns object b, and object b owns object a, then neither one will ever be destroyed. this tends to be solved in one of two ways: either break the cycle at some point or ensure that the cy...
...f the objects are reference counted has the same problem as a reference cycle in a reference-counted system. consider the example where j is implemented in javascript and n is implemented in c++. j has a pointer to n, so the wrapper wrapping n owns a reference to n as long as j is reachable from a garbage collection root. n has a pointer to j, so the wrapper wrapping j exists as long as n doesn't
release the pointer, and creates a garbage collection root that roots j. thus j is always reachable from a garbage collection root, and we have a cycle. i actually can't find an example of this simple leak pattern that occurred in mozilla's codebase. but it certainly could. however, it's easy to inadvertently create this same type of leak when using closures. in javascript, as in many interpreted l...
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. ...
... « 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. ...
How to build a binary XPCOM component using Visual Studio
t is to use the gecko sdk. on windows, the sdk is built using a microsoft compiler, so you need to use one too. this tutorial uses microsoft’s free visual c++ express and the sample project in the next paragraph. you could try to use a different vendor's compiler, but you are going to need to build the sdk from source code. not the simplest thing to do and it may be incompatible with production
releases of firefox, thunderbird, and xulrunner from mozilla. for example, xulrunner 1.8.0.4 which has a pre-built sdk at gecko-sdk-win32-msvc-1.8.0.4.zip. extract the sdk to a folder. the tutorial assumes the folder is called xulrunner-1.8.0.4, but you can call yours whatever you want. you also need a couple of pre-built libraries (glib-1.2.dll & libidl-0.6.dll) from the wintools.zip archive. copy g...
...built libraries (glib-1.2.dll & libidl-0.6.dll) from the wintools.zip archive. copy glib-1.2.dll & libidl-0.6.dll into the bin subfolder of gecko-sdk. note: wintools.zip seems old and lots of newer mdc documentation refers to moztools.zip archive, but the version of xpidl.exe that comes with the gecko-sdk crashes with the dll’s from moztools. recap: use the right gecko sdk for your xulrunner
release use a microsoft compiler use pre-built glib-1.2.dll & libidl-0.6.dll libraries from wintools.zip download the sample project here is what the folder structure looks like: create a vc++ project visual studio project and file templates (or wizards) for creating xpcom modules and components do not currently exist. for now, you can use the included xpcom project that contains a simple xpc...
PyXPCOM
pyxpcom is a bridging technology between xpcom and python. this article gives you a head start to pyxpcom. note: the links to part ii and iii of this series are broken and i cannot find them on the ibm site. please update this page if/when the links can be found. history pyxpcom was initially developed by activestate tool corporation, and came out of their komodo project. current
releases are now integrated with the mozilla build system. 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 bui...
...uild system. ...
NS_NewLocalFile
file that provides a platform independent representation of a file path. #include "nsxpcom.h" #include "nsilocalfile.h" nsresult ns_newlocalfile( const nsastring& apath, prbool afollowlinks, nsilocalfile** aresult ); parameters apath [in] a utf-16 string object that specifies an absolute filesystem path. this path does not need to reference an existing file. it is an error to pass a
relative filesystem path. afollowlinks [in] this attribute will determine if the nsilocalfile instance will automatically resolve symbolic links. this parameter has no effect on unix systems. on windows, passing true causes shortcuts to be automatically resolved, and on macos, passing true causes finder aliases to be automatically resolved. aresult [out] a reference to the newly created nsiloca...
...be automatically resolved, and on macos, passing true causes finder aliases to be automatically resolved. aresult [out] a reference to the newly created nsilocalfile instance. return values the ns_newlocalfile function returns ns_ok if successful. otherwise, it returns an error code. ns_error_file_unrecognized_path indicates that the specified path is invalid. this error is returned if a
relative file path is passed to ns_newlocalfile. remarks on unix systems, the prefix "~/" is supported as a shorthand for the user's home directory. example code // create a local file that references c:\foo.txt nsresult rv; nscomptr<nsilocalfile> file; rv = ns_newlocalfile(nsembedstring(l"c:\\foo.txt"), pr_false, getter_addrefs(file)); if (ns_failed(rv)) return rv; note...
NS_NewNativeLocalFile
e.h" nsresult ns_newnativelocalfile( const nsacstring& apath, prbool afollowlinks, nsilocalfile** aresult ); parameters apath [in] a string object that specifies an absolute filesystem path. this string should be encoded using ascii or the multibyte character coding corresponding to the native filesystem. this path does not need to reference an existing file. it is an error to pass a
relative filesystem path. afollowlinks [in] this attribute will determine if the nsilocalfile instance will automatically resolve symbolic links. this parameter has no effect on unix systems. on windows, passing true causes shortcuts to be automatically resolved, and on macos, passing true causes finder aliases to be automatically resolved. aresult [out] a reference to the newly created nsiloca...
...omatically resolved, and on macos, passing true causes finder aliases to be automatically resolved. aresult [out] a reference to the newly created nsilocalfile instance. return values the ns_newnativelocalfile function returns ns_ok if successful. otherwise, it returns an error code. ns_error_file_unrecognized_path indicates that the specified path is invalid. this error is returned if a
relative file path is passed to ns_newnativelocalfile. remarks on unix systems, the prefix "~/" is supported as a shorthand for the user's home directory. if you use this function on windows 2000 or later, you would not be able to handle file names containing characters outside the default code page even though the os has no problem dealing with them. do not use this function (on windows) unless i...
nsAutoRef
nsautoref<t> is a template class implementing an object that holds a handle to a resource that must be
released, typically on destruction of the object. nsautoref has a role similar to nsautoptr and nsrefptr but does not require that the handle is a pointer to an object that was created with new or has addref() and
release() methods. nsautoref is therefore useful for managing a reference to a foreign object. no copy constructor nor copy assignment operators are available, so the handle to the resource will be held until
released on destruction of the nsautoref or until explicitly reset() or transferred through provided methods. ...
...reference to a foreign object. no copy constructor nor copy assignment operators are available, so the handle to the resource will be held until
released on destruction of the nsautoref or until explicitly reset() or transferred through provided methods. in order to use nsautoref<t> for a class t associated with a particular resource type, the type of the handle to the resource and the method for
releasing the resource must be provided for class t. this is usually done by providing a specialization of nsautoreftraits<t>. nsautoref is defined in xpcom/base/nsautoref.h. see also nsautoreftraits, nscountedref ...
nsAutoRefTraits
nsautoreftraits<t> is a template class describing traits of resources held by objects of class nsautoref<t> and/or nscountedref<t>. when the handle to the resource is a pointer to t the specialization may be derived from nspointerreftraits<t>, so that only definitions of the
release(t*) static method and possibly the addref(t*) static method need to be added. addref(t*) is necessary for nscountedref<t> but not for nsautoref<t>. ...
...o t the specialization may be derived from nspointerreftraits<t>, so that only definitions of the
release(t*) static method and possibly the addref(t*) static method need to be added. addref(t*) is necessary for nscountedref<t> but not for nsautoref<t>. for example: ns_specialize_template class nsautoreftraits<prfiledesc> : public nspointerreftraits<prfiledesc> { public: static void
release(prfiledesc *ptr) { pr_close(ptr); } }; or ns_specialize_template class nsautoreftraits<fcpattern> : public nspointerreftraits<fcpattern> { public: static void
release(fcpattern *ptr) { fcpatterndestroy(ptr); } static void addref(fcpattern *ptr) { fcpatternreference(ptr); } }; nsautoreftraits is described in xpcom/base/nsautoref.h. see also nsautoref, nscountedref ...
RefPtr
refptr (formerly known as nsrefptr, see bug 1207245) is a general class to implement reference counting pointers for objects. it is similar to nscomptr, but does not require that the type be an xpcom interface. like with nscomptr, it is the responsibility of the object itself to implement reference counting. this is done using the functions addref() and
release(), which respectively modify a variable of type nsautorefcnt, which basically is a wrapper around a count of the number of references refering to the class. when should i use nscomptr versus refptr? the rules are simple: use nscomptr to hold pointers to xpcom interfaces, and use refptr to hold pointers to concrete class, even if the concrete class implements one or more xpcom interfaces. so for xpcom interfaces: nscomptr<n...
...nters to concrete class, even if the concrete class implements one or more xpcom interfaces. so for xpcom interfaces: nscomptr<nsisupports> a; nscomptr<nsifoo> foo; and for concrete classes: refptr<nsfoo> foo; // class that implements nsifoo; refptr<bar> bar; // some random class that i want ref-counted but has nothing to do with xpcom: // just implement addref() and
release() and it will work with refptr it is important that nscomptr is not used to hold a pointer to a concrete class since this can cause compile time errors or runtime errors. bug 756640 is on file to enforce this rule but hasn't yet been fixed. while refptr should not generally be used to hold a pointer to an xpcom interface, this is flexible. there are no technical problems with doing so, and...
IAccessibleComponent
lor. return value s_ok. foreground() returns the foreground color of this object. [propget] hresult foreground( [out] ia2color foreground ); parameters foreground the returned color is the foreground color of this object or, if that is not supported, the default foreground color. return value s_ok. locationinparent() returns the location of the upper left corner of the object's bounding box
relative to the immediate parent object. the coordinates of the bounding box are given
relative to the parent's coordinate system. the coordinates of the returned position are
relative to this object's parent or
relative to the screen on which this object is rendered if it has no parent. if the object is not on any screen the returned position is (0,0). [propget] hresult locationinparent( [out] lon...
...coordinate system. the coordinates of the returned position are
relative to this object's parent or
relative to the screen on which this object is rendered if it has no parent. if the object is not on any screen the returned position is (0,0). [propget] hresult locationinparent( [out] long x, [out] long y ); parameters x the x coordinate of the upper left corner of the object's bounding box
relative to the immediate parent object. y the y coordinate of the upper left corner of the object's bounding box
relative to the immediate parent object. return value s_ok. ...
imgIRequest
nd have thus called setsize() on the container. status_load_partial 0x2 used internally by imgrequest to flag that a request is being cancelled as a result of a failure of a proxy holder and not an internal failure. at least i think that's what it does. regardless, there's no reason for this flag to be public, and it should either go away or become a private state flag within imgrequest. do not
rely on it. status_load_complete 0x4 the data has been fully loaded to memory, but not necessarily fully decoded. status_error 0x8 an error occurred loading the image. status_frame_complete 0x10 the first frame has been completely decoded. status_decode_complete 0x20 the whole image has been decoded. cors_none 1 cors modes images can be loaded with. by default, all images are loaded with ...
...tatus_decode_complete 0x20 the whole image has been decoded. cors_none 1 cors modes images can be loaded with. by default, all images are loaded with cors_none and cannot be used cross-origin in context like webgl. if an html img element has the crossorigin attribute set, the imgirequest will be validated for cross-origin usage with cors, and, if successful, will have its cors mode set to the
relevant type. cors_anonymous 2 cors_use_credentials 3 methods cancelandforgetobserver() cancels this request as in nsirequest.cancel(); further, also nulls out decoderobserver so it gets no further notifications from us. note: you should not use this in any new code; instead, use cancel(). note that cancel() is asynchronous, which means that some time after you call it, the listener/observ...
nsIAccessNode
accessibility clients to get style, window, markup and other information about a dom node. when accessibility is active in gecko, every dom node can have one nsiaccessnode. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) the nsiaccessnode implementations are instantiated lazily. the nsiaccessnode tree for a given dom window has a one to one
relationship to the dom tree. if the dom node for this access node is "accessible", then a queryinterface to nsiaccessible will succeed. method overview nsiaccessnode getchildnodeat(in long childnum); obsolete since gecko 2.0 nsidomcssprimitivevalue getcomputedstylecssvalue(in domstring pseudoelt, in domstring propertyname); domstring getcomputedstylevalue(in domstring p...
...essiblescrolltype.constants for available constants). exceptions thrown ns_error_failure indicates that the access node is unattached from the accessible tree. scrolltopoint() moves the top left of an object to a specified location. void scrolltopoint( in unsigned long acoordinatetype, in long ax, in long ay ); parameters acoordinatetype specifies whether the coordinates are
relative to the screen or the parent object (for available constants refer to nsiaccessiblecoordinatetype.constants. ax defines the x coordinate. ay defines the y coordinate. exceptions thrown ns_error_failure indicates that the access node is unattached from the accessible tree. remarks the main application of access node tree is it's used by isimpledom* interfaces on windows. ...
nsIAccessibleEvent
w handler, among other things. read only. domnode nsidomnode the nsidomnode associated with the event. may return null if accessible for event has been shut down. read only. eventtype unsigned long the type of event, based on the enumerated event values defined in this interface. read only. isfromuserinput boolean returns true if the event was caused by explicit user input, as opposed to pu
rely originating from a timer or mouse movement. constants constant gecko version description 1.7 - 1.8.1 1.9 - 1.9.2 2.0 event_show 0x8002 0x0001 an object has been created. event_hide 0x8003 0x0002 an object has been destroyed. event_reorder 0x8004 0x005c 0x0003 an object's children have changed. event_active_decendent_changed 0x0007 0x0004 the active descendant of a componen...
...crolling has started on a scroll bar. event_scrolling_end 0x0027 0x0024 scrolling has ended on a scroll bar. event_minimize_start 0x0028 0x0025 a window object is about to be minimized or maximized. event_minimize_end 0x0029 0x0026 a window object has been minimized or maximized. event_document_load_complete 0x002b 0x0027 the loading of the document has completed. event_document_
reload 0x002c 0x0028 the document contents are being
reloaded. event_document_load_stopped 0x002d 0x0029 the loading of the document was interrupted. event_document_attributes_changed 0x002e 0x002a the document wide attributes of the document object have changed. event_document_content_changed 0x002f 0x002b the contents of the document have changed. event_property_changed 0x0030 0x0...
nsIAccessibleHyperLink
tput of the html:a tag. with an image map, reflects the actual areas within the map. read only. note: renamed from anchors in gecko 1.9 exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. endindex long the end offset of the hyperlink accessible within the parent accessible. the returned value is
related to the nsiaccessiblehyperlink interface of the object that owns this hyperlink. read only. note: the link itself is represented by one embedded character within the parent text, so the endindex should be startindex + 1. exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. selected boolean ...
...inks can only be focused if they have the tabindex attribute set. also, state_focused should then be set on the accessible for this link. exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. startindex long the offset of the hyperlink accessible within the parent accessible. the returned value is
related to the nsiaccessiblehyperlink interface of the object that owns this hyperlink. read only. exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. valid boolean determines whether the hyperlink is valid, for example points to a valid url. read only. note: currently only used with aria links...
nsICommandLine
ts have been handled. void removearguments( in long astart, in long aend ); parameters astart the index to the first argument to remove from the command line; this is 0-based, and the name of the application is not included. aend the index to the last argument to remove from the command line. resolvefile() resolves a file-path argument into an nsifile object. ...
...nsiuri resolveuri( in astring aargument ); parameters aargument the command-line argument to resolve. return value a platform-specific uri. see also sample js component that implements a command-line flag. ...
nsIDOMEvent
mous content. read only. istrusted boolean read only. originaltarget nsidomeventtarget the original target of the event, before any retargetings. read only. target nsidomeventtarget used to indicate the eventtarget to which the event was originally dispatched. read only. timestamp domtimestamp used to specify the time (in milliseconds
relative to the epoch) at which the event was created. due to the fact that some systems may not provide this information the value of timestamp may be not available for all events. when not available, a value of 0 will be returned. examples of epoch time are the time of the system start or 0:0:0 utc 1st january 1970. read only. type domstring the name of the event (case-insensitive). ...
...r ); parameters amsg aiter return value native code only!duplicateprivatedata void duplicateprivatedata(); parameters none. violates the xpcom interface guidelines getinternalnsevent() nseventptr getinternalnsevent(); parameters none. return value getpreventdefault() note: use the defaultprevented attribute instead. this method will be removed in future
releases, see bug 691151. boolean getpreventdefault(); parameters none. return value initevent() this method is used to initialize the value of an event created through the documentevent interface. this method may only be called before the event has been dispatched via the dispatchevent method, though it may be called multiple times during that phase if necessary. if called multiple times th...
nsIDOMMozTouchEvent
this is a random number that is guaranteed to remain the same for each finger during all moztouchmove events between the corresponding moztouchdown and moztouchup e...
... see also mouse gesture events touch events event ...
nsIDebug2
read only. see also nsidebug ...
...changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) attributes attribute type description assertioncount long the number of assertions since process start. this is normally zero in
release builds, but does include calls to nsidebug.assertion(). read only. isdebugbuild boolean whether xpcom was compiled with debug defined. this often cor
relates to whether other code (for example, firefox, xulrunner) was compiled with debug defined. read only. see also nsidebug ...
nsIDocShell
_page_load 2 returned by the busyflags attribute when the nsidocshell has started loading a document from the network, but no data has been received yet. busy_flags_page_loading 4 returned by the busyflags attribute when the nsidocshell is receiving data from the network. load_cmd_normal 0x1 returned by the loadtype attribute for normal loads. load_cmd_
reload 0x2 returned by the loadtype attribute for
reloads. load_cmd_history 0x4 returned by the loadtype attribute for history navigation. load_cmd_pushstate 0x8 returned by the loadtype attribute when the page has used history.pushstate() character set source constants these constants are not exposed to script. they are used internally as values for the par...
...void addstate( in nsivariant adata, in domstring atitle, in domstring aurl, in boolean areplace ); parameters adata the state object to pass to the popstate event. it must be possible to serialise this in less than 640k characters. atitle gecko currently ignores this parameter. aurl the url associated with the new history entry. for instance, if the user tries to
reload the page, then this is the url that will be
reloaded. areplace whether to modify the current history entry instead of creating a new one. beginrestore() begin firing webprogresslistener notifications for restoring a page presentation. this method will post an event to complete the simulated load after returning to the event loop. void beginrestore( in nsicontentviewer viewer, in b...
nsIEditorSpellCheck
rameters editor the nsieditor on which to enable spell checking. enableselectionchecking if true, the spell checker is initialized only for checking the current selection; otherwise, it's initialized for checking the entire document. this affects the behavior of getnextmisspelledword()). for spell checking clients with no modal ui (such as inline spell checkers), this flag is not
relevant. removewordfromdictionary() removes a word from the current personal dictionary. void removewordfromdictionary( in wstring word ); parameters word the word to remove from the current personal dictionary. replaceword() call this function to modally replace one (or all) occurrences of a word with another word. void replaceword( in wstring misspelledword, in wstring replacewor...
...le, to skip blockquotes in email from spell checking). call this before calling initspellchecker(); calling it after initialization will have no effect. void setfilter( in nsitextservicesfilter filter ); parameters filter an nsitextservicesfilter describing the filter to apply. this filter lets you avoid spell checking specific parts of the document. uninitspellchecker() call this to
release the spell checking object. it will also save the current selected language as the default for future use. if you have called canspellcheck() but not initspellchecker(), you can still call this function to clear the cached spell check object, and no preferences are saved. void uninitspellchecker(); parameters none. updatecurrentdictionary() updates the dictionary in use to be sure it correspo...
nsIFeedTextConstruct
extension elements also include "type" parameters, and this interface could be used to represent those as well. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamonkey 1.1) implemented by: @mozilla.org/feed-textconstruct;1, but users usually don't need to create instances of this directly. various other feed-
related interfaces, such as nsifeed, nsifeedentry, and nsifeedcontainer have attributes that return objects implementing nsifeedtextconstruct. method overview nsidomdocumentfragment createdocumentfragment(in nsidomelement element); astring plaintext(); attributes attribute type description base nsiuri if the text construct contains html or xht...
... interfaces, such as nsifeed, nsifeedentry, and nsifeedcontainer have attributes that return objects implementing nsifeedtextconstruct. method overview nsidomdocumentfragment createdocumentfragment(in nsidomelement element); astring plaintext(); attributes attribute type description base nsiuri if the text construct contains html or xhtml,
relative references in the content should be resolved against this base uri. lang astring the language of the text (such as "en-us" for u.s. english). text astring the actual text content. this string may contain markup if the type is either "html" or "xhtml". type astring the type of content described; one of "text", "html", or "xhtml". methods cr...
nsIMsgDBView
; void geturisforselection([array, size_is(count)] out string uris, out unsigned long count); void getindicesforselection([array, size_is(count)] out nsmsgviewindex indices, out unsigned long count); void loadmessagebymsgkey(in nsmsgkey amsgkey); void loadmessagebyviewindex(in nsmsgviewindex aindex); void loadmessagebyurl(in string aurl); void
reloadmessage(); void
reloadmessagewithallparts(); void selectmsgbykey(in nsmsgkey key); void selectfoldermsgbykey(in nsimsgfolder afolder, in nsmsgkey akey); void ondeletecompleted(in boolean succeeded); nsmsgviewindex findindexfromkey(in nsmsgkey amsgkey, in boolean aexpand); void expandandselectthreadbyindex(in nsmsgviewindex aindex, in boolean...
... loadmessagebyviewindex() loads a message into the message pane. void loadmessagebyviewindex(in nsmsgviewindex aindex); parameters aindex the index of the message to load. nsmsgviewindex is defined as a unsigned long in mailnewstypes2.idl. loadmessagebyurl() loads a message into the message pane. void loadmessagebyurl(in string aurl); parameters aurl the url of the message
reloadmessage()
reload the currently shown message. void
reloadmessage();
reloadmessagewithallparts()
reload the currently shown message with fetchcompletemessage set to true. this forces everything to be re-downloaded. void
reloadmessagewithallparts(); selectmsgbykey() selects a message based on its key. used by "go to folder" feature and "remember last selected message" feature. if key i...
nsIPluginHost
nenabledfortype(in string amimetype); native code only! void loadplugins(); native code only! void newpluginnativewindow(out nspluginnativewindowptr apluginnativewindow); native code only! void parsepostbuffertofixheaders(in string ainpostdata, in unsigned long ainpostdatalen, out string aoutpostdata, out unsigned long aoutpostdatalen); native code only! void
reloadplugins(in boolean
reloadpages); void setisscriptableinstance(in nsiplugininstance ainstance, in boolean ascriptable); native code only! obsolete since gecko 2.0 void setupplugininstance(in string amimetype, in nsiuri aurl, in nsiplugininstanceowner aowner); native code only! void stopplugininstance(in nsiplugininstance ainstance); native code only! void us...
...he output buffer. on failure outpostdata and outpostdatalen will be set in 0. void parsepostbuffertofixheaders( in string ainpostdata, in unsigned long ainpostdatalen, out string aoutpostdata, out unsigned long aoutpostdatalen ); parameters ainpostdata the post data. ainpostdatalen the length ainpostdata. aoutpostdata the buffer. aoutpostdatalen the length of aoutpostdata.
reloadplugins() causes the plugins directory to be searched again for new plugin libraries. void
reloadplugins( in boolean
reloadpages ); parameters
reloadpages indicates whether currently visible pages should also be
reloaded. native code only!setisscriptableinstance obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still...
Component; nsIPrefBranch
pref_int 64 long data type. pref_bool 128 long data type. methods addobserver() adds a preference change observer. on preference changes, the following arguments will be passed to nsiobserver.observe(): asubject - the nsiprefbranch object (this). atopic - the string defined by ns_prefbranch_prefchange_topic_id adata - the name of the preference which has changed,
relative to the "root" of the asubject branch. asubject.get*pref(adata) will get the new value of the modified preference. for example, if your observer is registered with addobserver("bar.", ...) on a branch with root "foo.", modifying the preference "foo.bar.baz" will trigger the observer, and adata parameter will be "bar.baz". void addobserver( in string adomain, in nsiobserver aobserver, ...
...rvers may be changed during the dispatch of nspref:changed notification. however, the observers are not guaranteed to be notified in any particular order, so you can't be sure whether the added/removed observer will be called during the notification when it is added/removed. it is possible to change preferences during the notification. it is not safe to change observers during this callback in
releases before gecko 1.9. if you want a safe way to remove a preference observer, please use an nsitimer. see also nsiprefservice ...
nsIPrefBranch2
eak); void removeobserver(in string adomain, in nsiobserver aobserver); methods addobserver() add a preference change observer. on preference changes, the following arguments will be passed to nsiobserver.observe(): asubject - the nsiprefbranch object (this). atopic - the string defined by ns_prefbranch_prefchange_topic_id adata - the name of the preference which has changed,
relative to the "root" of the asubject branch. asubject.get*pref(adata) will get the new value of the modified preference. for example, if your observer is registered with addobserver("bar.", ...) on a branch with root "foo.", modifying the preference "foo.bar.baz" will trigger the observer, and adata parameter will be "bar.baz". void addobserver( in string adomain, in nsiobserver aobserver, ...
...rvers may be changed during the dispatch of nspref:changed notification. however, the observers are not guaranteed to be notified in any particular order, so you can't be sure whether the added/removed observer will be called during the notification when it is added/removed. it is possible to change preferences during the notification. it is not safe to change observers during this callback in
releases before gecko 1.9. if you want a safe way to remove a preference observer, please use an nsitimer. ...
nsIPrincipal
ng description getpreferences() returns the security preferences associated with this principal. 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. id a semi-unique id
relating to either the fingerprint or the origin. subjectname a name identifying the entity the principal represents; this may be an empty string. 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. istrusted true if the certificate ...
...to an unknown, hence assumed minimally privileged, security context) is not equal to any other principal (including other null principals), and therefore does not subsume anything but itself. both codebase and certificate principals are subsumed by the system principal, but no codebase or certificate principal yet subsumes() any other codebase or certificate principal. this may change in a future
release; note that nsiprincipal is unfrozen, not slated to be frozen. xxxbz except see bug 147145! note: for the future: perhaps we should consider a certificate principal for a given uri subsuming a codebase principal for the same uri? not sure what the immediate benefit would be, but i think the setup could make some code (e.g. maybedowngradetocodebase) clearer. boolean subsumes( in nsiprincipal ...
nsIProtocolHandler
er. current versions of firefox assume that the uri has uri_loadable_by_anyone set, but this will not work starting with the mozilla 2 platform. scheme acstring the scheme for this protocol ("file", "http", and so forth). read only. constants constant value description uri_std 0 a standard full uri with authority component and understanding
relative uris; this includes http and ftp, for example. uri_no
relative 1<<0 the protocol doesn't support
relative uris (for example, about and javascript). uri_noauth 1<<1 the protocol doesn't have an authority component (for example, file). uri_inherits_security_context 1<<4 uris for this protocol have no inherent security context, so documents loaded usi...
...be %xx escaped. aorigincharset the character set of the document from which this uri string originated. this corresponds to the character set that should be used when communicating this uri to an origin server. if this is null, then utf-8 encoding is assumed and no character transformation is not performed. abaseuri if null, aspec must specify an absolute uri. otherwise, aspec may be resolved
relative to abaseuri, depending on the protocol. if the protocol has no concept of
relative uris, this parameter is ignored. return value the new uri object suitable for loading using the protocol. see also nsiproxiedprotocolhandler adding a new protocol to mozilla writing a firefox protocol handler custom about: urls - similar to adding new protocol but adding onto the existing about: prot...
nsISHEntry
nt. obsolete since gecko 1.8 expirationstatus boolean indicates whether the page is already expired in cache. id unsigned long an id to help identify this entry from others during subframe navigation. layouthistorystate nsilayouthistorystate layouthistorystate for scroll position and form values. loadtype unsigned long the loadtype for this entry. this is typically loadhistory except when
reload is pressed, it has the appropriate
reload flag. owner nsisupports get the owner, if any, that was associated with the channel that the document that was loaded to create this history entry came from. pageidentifier unsigned long an integer that should be the same for two entries attached to the same docshell only if the two entries are entries for the same page in the sense that one could...
...es the xpcom interface guidelines hasdetachededitor() boolean hasdetachededitor(); parameters none. return value true if this shistory entry is storing a detached editor. hasdynamicallyaddedchild() boolean hasdynamicallyaddedchild(); parameters none. return value true if any of the child entries returns true when isdynamicallyadded() is called on it. isdynamicallyadded() returns true if the
related docshell was added because of dynamic addition of an iframe/frame. boolean isdynamicallyadded(); parameters none. return value violates the xpcom interface guidelines seteditordata() sets the owning pointer to the editor data assosicated with this shistory entry. unless forgeteditordata() is called, this shentry will destroy the editor data when it is destroyed. void seteditordata( ...
nsISHistory
shistory;1. 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 available in session history. read only. index long the index of the current document in session history. read only. maxlength long used to get/set th...
...g numentries ); parameters numentries the number of toplevel documents to be purged from history. during purge operation, the latest documents are maintained and older numentries documents are removed from history. exceptions thrown ns_error_failure numentries is invalid or out of bounds with the size of history. ns_success_loss_of_insignificant_data purge was vetoed.
reloadcurrententry() void
reloadcurrententry(); parameters none. removeshistorylistener() called to remove a listener for the session history component. listeners are notified when pages are loaded from history. note: a listener object must implement nsishistorylistener and nssupportsweakreference. void removeshistorylistener( in nsishistorylistener alistener ); parameters alistener list...
nsIScriptableIO
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! 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. nsiscriptableio provides a convenient api for cr...
...ws platform-independent path construction. you may specify an empty filename string if you wish to get a reference to the directory itself. nsifile getfile( in astring alocation, in astring afilename ); parameters alocation a location key identifying a known standard directory. the afilename parameter is treated as being local to this directory. afilename the
relative path of the file to generate a reference for. return value returns an nsifile object referencing the specified file location. exceptions thrown ns_error_invalid_arg alocation was null. getfilewithpath() returns a file reference using an absolute file path to locate the file. note: you should avoid using this method, since file paths are platform-dependent and non-portable. i...
nsISelection2
de, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than me
rely overlapping it. resultcount returns the number of ranges that overlap (or touch) the input range. results returns the ranges that overlap (or touch) the input range. native code only!getrangesforintervalcomarray void getrangesforintervalcomarray( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray...
...sidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than me
rely overlapping it. results returns the ranges that overlap (or touch) the input range. scrollintoview() scrolls a region of the selection, so that it is visible in the scrolled view. void scrollintoview( in short aregion, in boolean aissynchronous, in short avpercent, in short ahpercent ); parameters aregion the region inside the selection to scroll into view (see selection regi...
nsIServiceManager
tories to obtain services. because services are instantiated lazily, methods are provided to test whether or not a service has already been instantiated. users of the service manager must first obtain a pointer to the global service manager by calling ns_getservicemanager. after that, they can request specific services by calling getservice(). when they are finished they should call nsisupports.
release() on the service as they would with any interface pointer. in some language bindings, such as javascript, this step is unnecessary. and, moreover such languages typically offer more convenient mechanisms to acquire references to xpcom services and components. a user of a service may keep references to services until application shutdown. this interface was frozen for gecko 1.0. see bug 9914...
...lly offer more convenient mechanisms to acquire references to xpcom services and components. a user of a service may keep references to services until application shutdown. this interface was frozen for gecko 1.0. see bug 99147 for details. from gecko 2.0 interfaces are no longer frozen. see also ns_getservicemanager do_getservice mozilla::services c++ namespace services.jsm nsisupports.
release() ...
nsISmsRequestManager
nsismsrequestmanager dom/sms/interfaces/nsismsrequestmanager.idlscriptable used to manage sms
related requests and notifications for the websms api 1.0 66 introduced gecko 13.0 inherits from: nsisupports last changed in gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) implemented by: @mozilla.org/sms/smsrequestmanager;1. 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 n...
... constant value description success_no_error 0 no_signal_error 1 not_found_error 2 unknown_error 3 internal_error 4 methods addrequest() track an already existing request object. long addrequest( in nsidommozsmsrequest arequest ); parameters arequest an smsrequest. return value the request id. createrequest() create ...
nsIStandardURL
inherits from: nsimutable last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/network/standard-url;1. ...
... originated. this corresponds to the charset that should be used when communicating this uri to an origin server, for example. if null, then provide abaseuri implements this interface, the origin charset of abaseuri will be assumed, otherwise defaulting to utf-8 (that is, no charset transformation from aspec). abaseuri if null, aspec must specify an absolute uri. otherwise, aspec will be resolved
relative to abaseuri. see also nsiurl ...
nsITransactionList
dex); boolean itemisbatch(in long aindex); attributes attribute type description numitems long the number of transactions contained in this list. read only. methods getchildlistforitem() returns the list of children associated with the item at aindex. implementations may return null if there are no children, or an empty list. the list returned is addref'd so it is up to the caller to
release the transaction when it is done. nsitransactionlist getchildlistforitem( in long aindex ); parameters aindex the index of the item in the list. return value the nsitransactionlist of children associated with the item at aindex. getitem() returns the transaction at the given index in the list. note that a null can be returned here if the item is a batch. the transaction returned is addref...
...done. nsitransactionlist getchildlistforitem( in long aindex ); parameters aindex the index of the item in the list. return value the nsitransactionlist of children associated with the item at aindex. getitem() returns the transaction at the given index in the list. note that a null can be returned here if the item is a batch. the transaction returned is addref'd so it is up to the caller to
release the transaction when it is done. nsitransaction getitem( in long aindex ); parameters aindex the index of the item in the list. return value missing description getnumchildrenforitem() returns the number of child (auto-aggreated) transactions the item at aindex has. long getnumchildrenforitem( in long aindex ); parameters aindex the index of the item in the list. return value the nu...
nsIWebProgressListener
ebprogresslistener.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. inherits from: nsisupports last changed in gecko 15 (firefox 15 / thunderbird 15 / seamonkey 2.12) nsiwebprogress describes the parent-child
relationship of nsiwebprogress instances. method overview void onlocationchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri alocation, [optional] in unsigned long aflags); void onprogresschange(in nsiwebprogress awebprogress, in nsirequest arequest, in long acurselfprogress, in long amaxselfprogress, in long acurtotalprogress, in long amaxtotalprogress); ...
... .getinterface(ci.nsidomwindowutils) .outerwindowid; sendasyncmessage("myaddonmessage", { name: "onlocationchange", outerwindowid: outerwindowid, uri: auri.spec, charset: auri.charset, flag: aflag, }); }, // for definitions of the remaining functions see
related documentation onprogresschange: function(awebprogress, arequest, curself, maxself, curtot, maxtot) {}, onstatuschange: function(awebprogress, arequest, astatus, amessage) {}, onsecuritychange: function(awebprogress, arequest, astate) {} } let filter = cc["@mozilla.org/appshell/component/browser-status-filter;1"] .createinstance(ci.nsiwebprogress); filter.addprogre...
nsIWifiAccessPoint
des information about a single access point. 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) attributes attribute type description mac acstring the wifi access point's mac address. this string is in the format "xx-xx-xx-xx-xx-xx". read only. ...
...this string is null if not available. read only. note: this is a conversion of the ssid into a "displayable" string. for comparisons, you should instead use the rawssid attribute. ...
nsIXULBrowserWindow
seamonkey also store their nsixulbrowserwindow reference in the global xulbrowserwindow object accessible from javascript code. 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. see the documentation for xulbrowserwindow for details. method overview astring onbefo
relinktraversal(in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); void setjsdefaultstatus(in astring status); void setjsstatus(in astring status); void setoverlink(in astring link, in nsidomelement element); methods onbefo
relinktraversal() called before traversing a link to determine the appropriate target into which to load the link. this may be use...
...linkuri the uri of the link that is about to be traversed. linknode the nsidomnode representing the dom node in which the link is located. ...
nsIZipWriter
https://developer.mozilla.org/docs/xpcom_interface_reference/nsifile if (entry.path == xpi.path) { cu.reporterror('skipping entry - will not add this entry to the zip file - as this is the zip itself: "' + xpi.path + '" leafname:"' + xpi.leafname + '"'); continue; } if (entry.isdirectory()) { dirarr.push(entry); } var
relpath = entry.path.replace(dirarr[0].path, ''); //need
relative because we need to use this for telling addentryfile where in the zip it should create it, and because zip is a copy of the directory cu.reporterror('+' +
relpath); //makes it
relative to directory the parent dir (dir[0]) so it can succesfully populate files with same names but different folders in this parent dir, needed b...
...e need to use this for telling addentryfile where in the zip it should create it, and because zip is a copy of the directory cu.reporterror('+' +
relpath); //makes it
relative to directory the parent dir (dir[0]) so it can succesfully populate files with same names but different folders in this parent dir, needed because recursviely going through all dirs var saveinzipas =
relpath.substr(1); //need to get ride of the first '\' forward slash at start otherwise it puts every file added in a folder of its own. saveinzipas = saveinzipas.replace(/\\/g,'/'); //remember must use forward slash (/) cu.reporterror('--' + saveinzipas); zw.addentryfile(saveinzipas, ci.nsizipwriter.compression_none, entry, false); } } zw.close() }...
XPCOM Interface Reference
this is a reference to the xpcom interfaces provided by the mozilla platform. ...
...mozithirdpartyutilmozivisitinfomozivisitinfocallbackmozivisitstatuscallbacknsiabcardnsiaboutmodulensiabstractworkernsiaccelerometerupdatensiaccessnodensiaccessibilityservicensiaccessiblensiaccessiblecaretmoveeventnsiaccessiblecoordinatetypensiaccessibledocumentnsiaccessibleeditabletextnsiaccessibleeventnsiaccessiblehyperlinknsiaccessiblehypertextnsiaccessibleimagensiaccessibleprovidernsiaccessible
relationnsiaccessibleretrievalnsiaccessiblerolensiaccessiblescrolltypensiaccessibleselectablensiaccessiblestatechangeeventnsiaccessiblestatesnsiaccessibletablensiaccessibletablecellnsiaccessibletablechangeeventnsiaccessibletextnsiaccessibletextchangeeventnsiaccessibletreecachensiaccessiblevaluensiaccessiblewin32objectnsialertsservicensiannotationobservernsiannotationservicensiappshellnsiappshellservi...
NS_ADDREF
summary macro addrefs the argument. do not use when the pointer might be null; use ns_if_addref in those cases. ...
... summary macro addrefs the argument. do not use when the pointer might be null; use ns_if_addref in those cases. ...
XPCOM string functions
e string classes rather than directly using these functions. ns_cstringappenddatathe ns_cstringappenddata function appends data to the existing value of a nsacstring instance. ...
...ng instance to utf-16 and stores the result in a nsastring instance. ns_stringappenddatathe ns_stringappenddata function appends data to the existing value of a nsastring instance. this is a low-level api.ns_stringclonedatathe ns_stringclonedata function returns a null-terminated, heap allocated copy of the string's internal buffer.ns_stringcontainerfinishthe ns_stringcontainerfinish function
releases any memory allocated by a nsstringcontainer instance. this is a low-level api.ns_stringcontainerinitthe ns_stringcontainerinit function initializes a nsstringcontainer instance for use as a nsastring. this is a low-level api.ns_stringcopythe ns_stringcopy function copies the value from one nsastring instance to another. this is a low-level api.ns_stringcutdatathe ns_stringcutdata function re...
Using nsIPasswordManager
i just had to use the password manager for a project i was working on, so i thought i'd braindump my notes to the wiki while i was at it. this code is tested, but ba
rely, and i am by no means an expert on this area. review and cleanup would be appreciated. zachlipton 22:52, 18 july 2006 (pdt) the code on this page will work with applications using toolkit 1.8 and below such as firefox 2.0.0.x and thunderbird 2.0.0.x. for similar functionality in toolkit 1.9, see using nsiloginmanager. working with password manager extensions often need to secu
rely store passwords to external sites, web applications, and so on. to do so secu
rely, they can use nsipasswordmanager, which provides for secure storage of sensitive password information. getting nsipasswordmanager to get a component impleme...
...ponents.classes["@mozilla.org/passwordmanager;1"] .getservice(components.interfaces.nsipasswordmanager); storing a password to store a password in the password manager, you need three things: a hostname/url (you'll need this to retrieve the password again later), a username, and a password. of this information, the password is the only data that will be stored secu
rely. adding a password to the password manager is easy: passwordmanager.adduser('host', 'username', 'password'); since there's no provision to include names of html input fields, no password stored by this interface will be used to fill in passwords on web pages. nsiloginmanager, available in toolkit 1.9, does let you include input field names. retrieving a password retrieving a password from the p...
XPCOM
moved across platforms (such as windows and os x) without adaptation, those written in a compiled language (such as c++) require recompilation when moving to a different platform. often, compiled xpcom components are called 'binary' or 'native'.xpcom category image-sniffing-servicesin versions of firefox prior to firefox 3, extensions could add decoders for new image types. however, such decoders
relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed.xpcom gluethe xpcom glue is a static library which component developers and embedders can link against. it allows developers to link only against the frozen xpcom method symbols and maintain compatibility with multiple versions of xpcom.xpcom guidethese articles provide tutorials and u...
...es, xpcom must be a fairly self-contained library, so as not to encumber clients with any unnecessary external dependencies.xpcom thread synchronizationxpcom thread synchronization primitives have the same semantics as those in nspr, and each method of these synchronization objects (e.g. mutex::lock()) has a matching function in nspr (pr_lock()). this is no accident, as mozilla:: primitives are me
rely bare-minimum wrappers around nspr's.xptcall faqxptcall is a small low level xpcom method call library. it is implemented using platform specific c/c++ and assembly language code. it is used to facilitate cross language and cross thread method calls. porting this code is required in order to make mozilla run on any given platform.xptcall porting guideoriginal author: john bandhauer, 31 may 1999.x...
Mozilla technologies
format, adding support for animated images. apng is a simpler alternative to mng, providing a spec suitable for the most common usage of animated images on the internet.docshelldocshell is the second iteration of what originally started out as webshell. ...
...starting with mozilla 1.9, it was phased out in favor of sqlite, a more widely-supported file format.placesplaces is the bookmarks and history management system introduced in firefox 3. it offers increased flexibility and complex querying to make handling the places the user goes easier and more convenient. it also includes new features including favicon storage and the ability ...
The Valgrind Test Job
this job only runs on linux64, which is the platform best suited to running valgrind. running the valgrind test job locally valgrind works best on linux. it also works on mac, though sometimes not as well. building you need a valgrind-enabled build of firefox. add the following lines to your mozconfig file. ac_add_options --enable-valgrind ac_add_options --disable-jemalloc running to run the valgrind test job locally, run the following command. mach valgrind-test see also the general instructions for using valgrind with mozilla code. ...
...m libraries can generally be ignored, because they are out of our control and the kind of thing we suppress on the test machines. errors in mozilla code should probably be reported in bugs! if you need help or experience problems if you need help with the valgrind test job, please contact nicholas nethercote or gary kwong. julian seward can also help with valgrind issues. alternatively, bugs
relating to the test job can be filed in the "testing" product, under the "general" component. please cc :njn and :gkw on any such bugs. ...
Autoconfiguration in Thunderbird
account autoconfiguration functionality. the goal of autoconfiguration is to make it very easy for users to configure the connection of thunderbird to their email servers. in many cases, people should be able to download and install thunderbird, enter their real name, email address and password in the account setup wizard and have a fully functioning mail client and get and send their mail as secu
rely as possible. see also: for instructions for users, see automatic account configuration on the thunderbird knowledge base. the configuration file description and definition the original project page on the mozilla wiki for background, design, implementation and project details this document describes how autoconfiguration in thunderbird works, and what to do to allow mail servers to be au...
... the imap/pop/smtp login name is neither "hero" nor "hero@example.com", but "u67578"), you need to set up a configuration server, which does the email address -> login name lookup. if you host customer domains, i.e. you are "hoster.com", but your customers have "fred@flintstone.com" and "louis@kent.com" as domains, with only a few users per domain, you need to set up a configuration server (or
rely on dns mx). if you are a small company installing thunderbird on your employees' desktops, you can place a configuration file in the thunderbird installation folder. ispdb database url is <https://autoconfig.thunderbird.net/v1.1/>, append domain name, e.g. <https://autoconfig.thunderbird.net/v1.1/freenet.de>. current process: file a bug in bugzilla, product "webtools", component "ispdb d...
Mail and RDF
folder datasource notifies rdf content observers of the changes. content observers update ui. an aside: rational behind the design after reviewing this design, it might seem unnecessary to have the double-levels of notification/registration. why can't folders directly notify the rdf content observers when things change? here is the rational behind this design: it keeps all rdf datasource-
related code in one place and out of the messages and folders themselves. this allows the mail code to be mostly free of rdf. the actual dependancies on rdf are small, so it makes sense to keep rdf out of folders and messages. there should be a non-rdf mechanism for folder change notification. there are times (for example, from javascript/xul) where we want folder notifications that have nothing to ...
...rily burdening them with an unnecessary api. the folders or the mail session would have to know about every rdf observer on each datasource. this means the folder would have to notify each of those observers. this design allows each datasource to manage its own observers, and lets each mail session manage a list of folder listeners without necessarily knowing that some of these listeners are rdf-
related. please comment ! alec flett last modified: thu oct 7 11:33:42 pdt 1999 ...
Zombie compartments
firefox’s javascript memory is segregated into zones and compartments. roughly speaking, all memory used by javascript code that is from a particular origin (i.e. website) goes into its own compartment. firefox’s own javascript code also gets one or more compartments and so do add-on scripts. multiple compartments can share a zone, where a zone keeps track of things that can easily and secu
rely be shared between
related compartments such as string data and type information. 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) c...
...eactive checking if you look at about:memory and you see a compartment for www.foo.com, but you closed your last www.foo.com tab a while ago, there's a good chance you're seeing a zombie compartment. follow these steps to make a more conclusive diagnosis. restart the browser. open the page that you think might cause a zombie compartment. open about:memory in another tab to confirm that the
relevant compartment is present. close the first page. minimize memory usage and remeasure in about:memory. it might be worth refreshing multiple times just to be sure. if the compartment is still present in about:memory, that's very suspicious. you could try waiting 20 minutes or so, then
reload about:memory again. some zombie compartments stick around for a limited time before disappearing, o...
Flash Activation: Browser Comparison - Plugins
the firefox flash roadmap includes links to roadmaps and posts from other vendors. ui comparison mozilla firefox in-page ui is displayed when ...
...the firefox flash roadmap includes links to roadmaps and posts from other vendors. ui comparison mozilla firefox in-page ui is displayed when the site attempts to use flash. an icon also appears on the l...
DOM Inspector internals - Firefox Developer Tools
erlay.xul this imports the scripts the top-level inspector needs, including dependencies. additionally, it defines the content in the main body of the dom inspector window, namely, the panelset, document and object viewer panels, and the document browser pane. (the browser pane is not a viewer panel in the sense that document and object panels are, i.e., the sorts of panels as defined above in
relation to the panelset; "pane" is used here with regard to the browser pane in a loose sense to describe the generic ui fixture.) toolboxoverlay.xul this overlay fills in the inspector toolbox, including toolbar buttons and the location bar and its "inspect" button. toolboxoverlay.xul also defines the structure of the menubar, without defining the contents of any of the menus themselves. p...
... ...
Inspecting web app manifests - Firefox Developer Tools
pp manifests using the firefox devtools application panel. when you open the application panel’s manifest view on a page that doesn't have an app manifest successfully deployed, you'll get the following output shown: deploying a manifest to get a manifest deployed successfully, you need to include a <link> element in the <head> of your document that points to your .webmanifest file: <link
rel="manifest" href="/manifest.webmanifest"> the .webmanifest extension is recommended in the spec, and should be served with an application/manifest+json mime type, although browsers generally tend to support manifests with other appropriate extensions like .json (mime type: application/json). you also need to make sure the json inside the file is of the correct format. you can test this using the...
... deployed successfully, you should end up with a display like the following on the manifest view: from here, you can inspect all the information in the manifest in an easy-to-digest way, making sure that it is all correct. it provides a link to the manifest file at the top which when clicked on brings up the json in a new tab. it also loads all the icon files into the view, so you can see the
relative size of them all, and any other information associated with them. list of manifest members we won't provide an exhaustive list of all the members that can appear in a web manifest here; you can already find that in our web manifest documentation. ...
Set a breakpoint - Firefox Developer Tools
ressing ctrl + b (windows/linux) or cmd + b (macos). the line number is highlighted in blue: in addition, if the line contains multiple function calls, each one will be given a small blue arrow icon to the left of it. these are called column breakpoints, and allow you to set the breakpoint to happen exactly on any one of the function calls in the line (or multiple calls), by clicking on each
relevant one. conditional breakpoints a conditional breakpoint is one where the code will pause execution when it is reached, only if a certain condition is met, such a variable having a certain value at the time. you can set a conditional breakpoint using the context menu (see above), or by highlighting the line you want to break at in the source pane and pressing ctrl + shift + b (windows/linux) ...
...ition. inline variable preview new in firefox 71, the source pane now gives you an inline preview of the variables on each line of code you've stepped through: this is a very useful timesaver when stepping through your code. previously you’d have to scroll through the scopes panel to find variable values, or hover over a variable in the source pane. now when execution pauses, you can view
relevant variables immediately. note: there is also a new option in the context menu for the actual code in the source pane — hide inline preview/show inline preview — which allows you to turn the inline variables on/off. ...
Set a logpoint - Firefox Developer Tools
n't want to pause execution. rather than sprinkle console.log() statements throughout your code, you can use a special type of breakpoint, the logpoint. logpoints print a message to the console panel instead of pausing code execution. the logpoint is especially useful in cases where breaking the execution breaks testing procedures, such as when you are debugging popup windows, or executing focus-
related logic. to create a logpoint: right click on a line number in the debugger panel and pick add log action from the context menu. create an expression inline. the result is logged in the console panel every time the line with the logpoint executes. you can use any variable or function available in the current scope. working with logpoints when you set a logpoint, the indicator is ...
...) when should you use logpoints? when you want to know that a specific line in your code has executed, but you don’t want to break code execution, set a logpoint. logpoints are useful to log the value of a variable at a specific point in the code. it’s faster than changing the underlying source code itself to add calls to the console.log method. if you need to execute additional logic
related to the source code and you can’t change the source code itself, you can use a logpoint. note that you can use logpoints with source-mapped code, as well as with your unmapped source files. ...
JSON viewer - Firefox Developer Tools
firefox includes a json viewer. if you open a json file in the browser, or view a remote url with the content-type set to application/json, it is parsed and given syntax highlighting. ...
... firefox includes a json viewer. if you open a json file in the browser, or view a remote url with the content-type set to application/json, it is parsed and given syntax highlighting. ...
Network request details - Firefox Developer Tools
p=\"this is not a p3p policy! ...
...ocked time spent in a queue waiting for a network connection. the browser imposes a limit on the number of simultaneous connections that can be made to a single server. in firefox this defaults to 6, but can be changed using the network.http.max-persistent-connections-per-server preference. if all connections are in use, the browser can't download more resources until a connection is
released. dns resolution time taken to resolve a host name. connecting time taken to create a tcp connection. sending time taken to send the http request to the server. waiting waiting for a response from the server. receiving time taken to read the entire response from the server (or cache). server timing new in firefox 71, the ...
Examine and edit HTML - Firefox Developer Tools
s can happen for different reasons such as using display: none or that the element doesn't have any dimensions. there is an ellipsis shown between the opening and closing tag of an element when the node is collapsed if it has larger contents. now children are indicated in the tree with this icon: at the right side of some nodes there are markers shown indicating different pieces of information
related to it: event the element has one or several event listeners attached to it. clicking the marker opens a tooltip listing the event listeners and allows you for each listener to switch to the line of javascript code in the debugger where the listener is defined. scroll the element is a scroll container, i.e. it has overflow: scroll or overflow: auto applied to it, and i...
... when you're editing html, the context menu you'll see is the normal one for working with editable text: copy and paste you can use the popup menu to copy nodes in the html tree and paste them into the desired location. drag and drop you can reorganize the html content of a page by moving nodes in the html tree. just click and hold on any element and drag it up or down in the tree. when you
release the mouse button, the element will be inserted at the corresponding position: you can cancel the drag and drop by pressing the esc key. inserting new nodes there's a "+" icon at the top of the markup view: click this icon to insert an empty <div> into the document as the last child of the currently selected element. you can then edit the new node's content and styling just as you woul...
Paint Flashing Tool - Firefox Developer Tools
repainting that it needs to do. it tries to work out which parts of the screen are "damaged" and repaint only those. the browser also splits its model of the page into layers that it expects will be updated independently of each other. layers are painted independently and then composited, so a change in the appearance of one layer does not trigger a repaint in any other layers, and when only the
relation of two layers changes (in an animation, for example) no repaints are required at all. the choices made by a web developer can hinder the browser here, causing it to trigger more repaints, and for more of the screen, than necessary. this can then cause a site to be slow responding to user input (also known as "janky"). that's where the paint flashing tool helps: by showing you the areas that...
...use into the space below: now switch paint flashing on, and try it again. you should see that the margin-left version triggers a series of repaints as the element moves, while the transform version only causes repaints in the start and end positions. why? well, when you use transform, the browser creates a separate layer for the element. so when the element is moved, all that's changed is the
relation of the two layers to each other, which is handled in composition: neither layer needs a repaint. in this case, with a simple style, the extra repaints don't make much of a difference. but if the style were computationally expensive to paint, they might. it's difficult to know what optimizations the browser will make to minimize repaints, and they are subject to change from one version to th...
Call Tree - Firefox Developer Tools
f time is calculated as the time spent in that particular function, excluding its children. this comes from the captured stacks where this function is the leafmost function. self cost is calculated from self time as a percentage of the total number of samples in the selected portion of the recording. in the current version of the call tree, these are the most important columns. functions with a
relatively high self cost are good candidates for optimization, either because they take a long time to run, or because they are called very often. the inverted call tree is a good way to focus on these self cost values. this screenshot tells us something we probably already knew: bubble sort is a very inefficient algorithm. we have about six times as many samples in bubble sort as in selection s...
...n sort(unsorted) { console.log(bubblesort(unsorted)); console.log(selectionsort(unsorted)); console.log(quicksort(unsorted)); } it would certainly be worthwhile considering more efficient ways of implementing this. one thing to be aware of here is that idle time is classified as gecko, so parts of your profile where your javascript isn't running will contribute gecko samples. these aren't
relevant to the performance of your site. by default, the call tree doesn't split platform data out into separate functions, because they add a great deal of noise, and the details are not likely to be useful to people not working on firefox. if you want to see the details, check "show gecko platform data" in the settings. using an inverted, aka bottom-up, call tree an inverted call tree rever...
Animating CSS properties - Firefox Developer Tools
sight to diagnose and fix performance problems. if you want to play along, the demo website is here. it looks like this: it has two controls: a button to start/stop the animation, and a radio group to choose to animate using margin, or to animate using transform. there are a number of elements, and we've added a linear-gradient background and a box-shadow to each element, because they are both
relatively expensive effects to paint. there's also a video version of this walkthrough: animating using margin leaving the "use margin" option set, start the animation, open the performance tool, and make a recording. you'll only need to record a few seconds. open up the first recording. exactly what you'll see depends a lot on your machine and system load, but it will be something like this: ...
...ighted a paint operation, and the box on the right tells us it took 13.11ms. with only 16.7ms in our total budget, it's not surprising we are missing a consistently high frame rate. you can experiment with this: try removing the box shadow using the page inspector, and see how that affects paint time. but next, we'll see how using transform instead of margin eliminates those expensive paints enti
rely. animating using transform now switch the radio button in the web page to "use transform", and make a new recording. it will look something like this: waterfall overview compared with the version that uses margin, we're seeing a lot less green and a lot more pink, which could be either layout or style recalculation. frame rate compared with the version that uses margin, this is looki...
Waterfall - Firefox Developer Tools
message to the main thread. one of: serialize data in worker the worker is serializing a message to be sent to the main thread. deserialize data in worker the worker is deserializing a message received from the main thread. the markers, and their colors, are the same in the waterfall tool as in the waterfall overview, making is easy to cor
relate from one to the other. filtering markers you can control which markers are displayed using a button in the toolbar: waterfall patterns exactly what you'll see in the waterfall is very dependent on the kind of thing your site is doing: javascript-heavy sites will have a lot of orange, while visually dynamic sites will have a lot of purple and green. but there are common patterns which can...
...em in every frame. if you're seeing drops in the frame rate, especially during graphically-intensive operations and transitions, check the waterfall for long green markers. garbage collection red markers in the waterfall represent garbage collection (gc) events, in which spidermonkey (the javascript engine in firefox) walks the heap looking for memory that's no longer reachable and subsequently
releasing it. gc is
relevant to performance because while it's running the javascript engine must be paused, so your program is suspended and will be completely unresponsive. to help reduce the length of pauses, spidermonkey implements incremental gc: this means that it can perform garbage collection in fairly small increments, letting the program run in between. sometimes, though, it needs to perfo...
Console messages - Firefox Developer Tools
d once and this counter appears to indicate how many times it was encountered. filename and line number for javascript, css and console api messages, the message can be traced to a specific line of code. the console then provides a link to the filename and line number that generated the message. by default, the console is cleared each time you navigate to a new page or
reload the current page. to override this behavior, enable persist logs in the console settings menu (gear icon). the context menu options listed below are available on all message categories. additional context menu options are described in the subsection for the message category they apply to. copy message copies the selected message to the clipboard. select all selects all messages available ...
... sites and certification authorities are encouraged to switch to stronger hash algorithms in future. see the weak signature algorithm article for more details. note that the sha-1 certificate may not be your site's own certificate, but may be the certificate belonging to a certification authority that was used to sign your site's certificate. bug 863874 is the meta-bug for logging
relevant security messages to the web console. if you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies. logging messages logged from shared workers, service workers, add-ons, and chrome workers are not shown by default. use the filtering feature to show them. the logging category includes messages logg...
AnalyserNode.frequencyBinCount - Web APIs
half that of the analysernode.fftsize. this generally equates to the number of data values you will have to play with for the visualization. syntax var arraylength = analysernode.frequencybincount; value an unsigned integer, equal to the number of values that analysernode.getbytefrequencydata() and analysernode.getfloatfrequencydata() copy into the provided typedarray. for technical reasons
related to how the fast fourier transform is defined, it is always half the value of analysernode.fftsize. therefore, it will be one of 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, and 16384. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph styl...
..., 1024, 2048, 4096, 8192, and 16384. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for
relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { ...
AnalyserNode - Web APIs
s even if the output is not connected. ...
... creating audio visualizations. basic usage the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for
relevant code). var audioctx = new(window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); // ... analyser.fftsize = 2048; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); analyser.getbytetimedomaindata(dataarray); // get a canvas defined with id "oscilloscope" var canvas = document.getelementbyid("oscilloscope"); ...
AnimationEvent - Web APIs
the animationevent interface represents events providing information
related to animations. ...
... the animationevent interface represents events providing information
related to animations. ...
AudioListener - Web APIs
it is important to note that there is only one listener per context and that it isn't an audionode. properties the position, forward, and up value are set and retrieved using different syntaxes. retrieval is done by accessing, for example, audiolistener.positionx, while setting the same property is done with audiolistener.positionx.value. ...
...g a doppler effect. audiolistener.speedofsound is a double value representing the speed of sound, in meters per second. in a previous version of the specification, the dopplerfactor and speedofsound properties and the setposition() method could be used to control the doppler effect applied to audiobuffersourcenodes connected downstream — these would be pitched up and down according to the
relative speed of the pannernode and the audiolistener. these features had a number of problems: only audiobuffersourcenodes were pitched up or down, not other source nodes. the behavior to adopt when an audiobuffersourcenode was connected to multiple pannernodes was unclear. because the velocity of the panner and the listener were not audioparams, the pitch modification could not be smoothly ap...
AudioNode - Web APIs
rface is a generic interface for representing an audio processing module. examples include: an audio source (e.g. an html <audio> or <video> element, an oscillatornode, etc.), the audio destination, intermediate processing module (e.g. ...
...can be used to generate sound. on the other hand, a destination node has no outputs; instead, all its inputs are directly played back on the speakers (or whatever audio output device the audio context uses). in addition, there are processing nodes which have inputs and outputs. the exact processing done varies from one audionode to another but, in general, a node reads its inputs, does some audio-
related processing, and generates new values for its outputs, or simply lets the audio pass through (for example in the analysernode, where the result of the processing is accessed separately). the more nodes in a graph, the higher the latency will be. for example, if your graph has a latency of 500ms, when the source node plays a sound, it will take half a second until that sound can be heard on yo...
AudioParam - Web APIs
an audioparam can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern. there are two kinds of audioparam, a-rate and k-rate parameters: an a-rate audioparam takes the current audio parameter value for each sample frame of the audio signal. a k-rate audioparam uses the same initial audio parameter value for the whole block processed, that is 128 sample frames. in other words, the same value applies to every frame in the audio as it's processed by the node. ...
...re examples of k-rate audioparam's, as the values are set for the entire audio block at once. var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); specifications specification status comment web audio apithe definition of 'audioparam' in that specification. working draft ...
AudioTrackList.getTrackById() - Web APIs
ating 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. if no match is found, this method returns null. the tracks are searched in their natural order; that is, in the order defined by the media resource itself, or, if the resource doesn't define an order, the
relative order in which the tracks are declared by the media resource. example this example suggests a hypothetical game in which movies are used as cut-scenes or other key set pieces within the game. each movie has one audio track for each character, as well as one for the music, sound effects, and so forth. this function allows the game to disable a specific character's audio in order to adjust t...
...ggests a hypothetical game in which movies are used as cut-scenes or other key set pieces within the game. each movie has one audio track for each character, as well as one for the music, sound effects, and so forth. this function allows the game to disable a specific character's audio in order to adjust the movie's performance based on occurrences within the game; if the character's dialog isn't
relevant, it gets left out. obviously that would require some clever graphic design to make work, but... it's a hypothetical game. function disablecharacter(videoelem, charactername) { videoelem.audiotracks.gettrackbyid(charactername).enabled = false; } this short function gets the audiotracklist containing the video's audio tracks using htmlmediaelement.audiotracks, then calls gettrackbyid() on...
AuthenticatorAssertionResponse.userHandle - Web APIs
the same value may be found on the id property of the options.user object (used for the creation of the publickeycredential instance). note: an authenticatorassertionresponse instance is available on publickeycredential.response after calling navigator.credentials.get(). ...
...frame> for example. syntax userhandle = authenticatorassertionresponse.userhandle value an arraybuffer object which is an opaque identifier for the current user. this is not human-readable and does not contain any personally identifying information (e.g. ...
AuthenticatorResponse.clientDataJSON - Web APIs
; value an arraybuffer. properties after the clientdatajson object is converted from an arraybuffer to a javascript object, it will have the following properties: type a string which is either "webauthn.get" when an existing credential is retrieved or "webauthn.create" when a new credential is created. challenge the base64url encoded version of the cryptographic challenge sent from the
relying party's server. the original value is passed via publickeycredentialrequestoptions.challenge or publickeycredentialcreationoptions.challenge. origin the fully qualified origin of the requester which has been given by the client/browser to the authenticator. we should expect the
relying party's id to be a suffix of this value. tokenbindingid optional an object describing the state of the...
...ublickeycredentialrequestoptions.challenge or publickeycredentialcreationoptions.challenge. origin the fully qualified origin of the requester which has been given by the client/browser to the authenticator. we should expect the
relying party's id to be a suffix of this value. tokenbindingid optional an object describing the state of the token binding protocol for the communication with the
relying party. it has two properties: status: a string which is either "supported" which indicates the client support token binding but did not negotiate with the
relying party or "present" when token binding was used already id: a domstring which is the base64url encoding of the token binding id which was used for the communication. should this property be absent, it would indicate that t...
BluetoothCharacteristicProperties - Web APIs
stic configuration descriptor. indicateread only returns a boolean that is true if indications of the characteristic value with acknowledgement is permitted. notifyread only returns a boolean that is true if notifications of the characteristic value without acknowledgement is permitted. readread only returns a boolean that is true if the reading of the characteristic value is permitted.
reliablewriteread only returns a boolean that is true if
reliable writes to the characteristic is permitted. writableauxiliariesread only returns a boolean that is true if
reliable writes to the characteristic descriptor is permitted. writeread only returns a boolean that is true if the writing to the characteristic with response is permitted. writewithoutresponseread only returns a boolea...
... full support 56notes disabled notes linux and versions of windows earlier than 10.disabled from version 56: this feature is behind the #enable-experimental-web-p...
CSS - Web APIs
methods the css interface is a utility interface and no object of this type can be created: only static methods are defined on it. static methods no inherited static methods. ...
... methods the css interface is a utility interface and no object of this type can be created: only static methods are defined on it. static methods no inherited static methods. css.registerproperty() registers custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value. ...
CSSPrimitiveValue - Web APIs
lock or to set a specific style property explicitly within the block. an instance of this interface might be obtained from the getpropertycssvalue() method of the cssstyledeclaration interface. a cssprimitivevalue object only occurs in a context of a css property. conversions are allowed between absolute values (from millimeters to centimeters, from degrees to radians, and so on) but not between
relative values. (for example, a pixel value cannot be converted to a centimeter value.) percentage values can't be converted since they are
relative to the parent value (or another property value). there is one exception for color percentage values: since a color percentage value is
relative to the range 0-255, a color percentage value can be converted to a number (see also the rgbcolor interface). ...
...meter value.) percentage values can't be converted since they are
relative to the parent value (or another property value). there is one exception for color percentage values: since a color percentage value is
relative to the range 0-255, a color percentage value can be converted to a number (see also the rgbcolor interface). ...
Using dynamic styling information - Web APIs
ise style details to the stylesheet. however, there are cases where actually obtaining or manipulating the rules can be useful (whether for whole stylesheets or individual elements), and that is described in further detail below. note also that, as with individual element's dom styles, when speaking of manipulating the stylesheets, this is not actually manipulating the physical document(s), but me
rely the internal representation of the document. the basic style object exposes the stylesheet and the cssstylesheet interfaces. those interfaces contain members like insertrule, selectortext, and parentstylesheet for accessing and manipulating the individual style rules that make up a css stylesheet. to get to the style objects from the document, you can use the document.stylesheets property and ...
...ment.stylesheets collection, the style object is accessed from the document or from the elements to which that style is applied. it represents the in-line styles on a particular element. ...
Manipulating video using canvas - Web APIs
idth="160" height="96"></canvas> </div> <script type="text/javascript" src="processor.js"></script> </body> </html> the key bits to take away from this are: this document establishes two canvas elements, with the ids c1 and c2. canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-keying effect; c2 is p
reloaded with the still image that will be used to replace the green background in the video. the javascript code is imported from a script named processor.js. the javascript code the javascript code in processor.js consists of three methods. initializing the chroma-key player the doload() method is called when the xhtml document initially loads. this method's job is to prepare the variables n...
...es for each pixel, and compares the values against predetermined numbers that are used to detect the green screen that will be replaced with the still background image imported from foo.png. every pixel in the frame's image data that is found that is within the parameters that are considered to be part of the green screen has its alpha value replaced with a zero, indicating that the pixel is enti
rely transparent. as a result, the final image has the entire green screen area 100% transparent, so that when it's drawn into the destination context in line 13, the result is an overlay onto the static backdrop. the resulting image looks like this: this is done repeatedly as the video plays, so that frame after frame is processed and displayed with the chroma-key effect. view the full source ...
Compositing example - Web APIs
function createcanvas() { var canvas = document.createelement("canvas"); canvas.style.background = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; canvas.style.margin = "5px"; canvas.width = width/2; canvas.height = height/2; return canvas; } function runcomposite() { var dl = document.cre...
... var lightmix = function() { var ctx = canvas2.getcontext("2d"); ctx.save(); ctx.globalcompositeoperation = "lighter"; ctx.beginpath(); ctx.fillstyle = "rgba(255,0,0,1)"; ctx.arc(100, 200, 100, math.pi*2, 0, false); ctx.fill() ctx.beginpath(); ctx.fillstyle = "rgba(0,0,255,1)"; ctx.arc(220, 200, 100, math.pi*2, 0, false)...
Drawing shapes with canvas - Web APIs
g, we need to talk about the canvas grid or coordinate space. our html skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high. to the right, you see this canvas with the default grid overlayed. normally 1 unit in the grid corresponds to 1 pixel on the canvas. the origin of this grid is positioned in the top left corner at coordinate (0,0). all elements are placed
relative to this origin. so the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default. drawing rectangles unlike svg, <canvas> only supports two primitive shapes...
...rectangle. there are three functions that draw rectangles on the canvas: fillrect(x, y, width, height) draws a filled rectangle. strokerect(x, y, width, height) draws a rectangular outline. clearrect(x, y, width, height) clears the specified rectangular area, making it fully transparent. each of these three functions takes the same parameters. x and y specify the position on the canvas (
relative to the origin) of the top-left corner of the rectangle. width and height provide the rectangle's size. below is the draw() function from the previous page, but now it is making use of these three functions. rectangular shape example <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getel...
Optimizing canvas - Web APIs
d all co-ordinates used in calls to drawimage() using math.floor(), for example. don’t scale images in drawimage cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in drawimage(). use multiple layered canvases for complex scenes in your application, you may find that some objects need to move or change frequently, while others remain
relatively static. a possible optimization in this situation is to layer your items using multiple <canvas> elements. for example, let's say you have a game with a ui on top, the gameplay action in the middle, and a static background on the bottom. in this case, you could split your game into three <canvas> layers. the ui would change only upon user input, the gameplay layer would change with every ...
...er input, the gameplay layer would change with every new frame, and the background would remain generally unchanged. <div id="stage"> <canvas id="ui-layer" width="480" height="320"></canvas> <canvas id="game-layer" width="480" height="320"></canvas> <canvas id="background-layer" width="480" height="320"></canvas> </div> <style> #stage { width: 480px; height: 320px; position:
relative; border: 2px solid black; } canvas { position: absolute; } #ui-layer { z-index: 3; } #game-layer { z-index: 2; } #background-layer { z-index: 1; } </style> use plain css for large background images if you have a static background image, you can draw it onto a plain <div> element using the css background property and position it under the canvas. this will negate the need to...
Canvas API - Web APIs
guides and tutorials canvas tutorial a comprehensive tutorial covering both the basic usage of the canvas api and its advanced features. html5 canvas deep dive a hands-on, book-length introduction to the canvas api and webgl. canvas handbook a handy reference for the canvas api...
...= 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces
related to the webglrenderingcontext are referenced under webgl. canvascapturemediastream is a
related interface. guides and tutorials canvas tutorial a comprehensive tutorial covering both the basic usage of the canvas api and its advanced features. html5 canvas deep dive a hands-on, book-length introduction to the canvas api and webgl. canvas handbook a handy reference for the canvas api. demo: a basic ray-caster a demo of ray-tracing animation using canvas. manipulating video us...
DataTransfer.effectAllowed - Web APIs
the datatransfer.effectallowed property specifies the effect that is allowed for a drag operation. the copy operation is used to indicate that the data being dragged will be copied from its present location to the drop location. the move operation is used to indicate that the data being dragged will be moved, and the link operation is used to indicate that some form of
relationship or connection will be created between the source and drop locations. this property should be set in the dragstart event to set the desired drag effect for the drag source. within the dragenter and dragover event handlers, this property will be set to whatever value was assigned during the dragstart event, thus effectallowed may be used to determine which effect is permitted. assigning a value to effectallowed in...
... living standard html 5.1the definition of 'effectallowed' in that...
DataTransfer.setDragImage() - Web APIs
r during the drag. this image is created automatically, so you do not need to create it yourself. however, if a custom image is desired, the datatransfer.setdragimage() method can be used to set the custom image to be used. the image will typically be an <image> element but it can also be a <canvas> or any other visible element. the method's x and y coordinates define how the image should appear
relative to the mouse pointer. these coordinates define the offset into the image where the mouse cursor should be. for instance, to display the image so that the pointer is at its center, use values that are half the width and height of the image. this method must be called in the dragstart event handler. syntax void datatransfer.setdragimage(img | element, xoffset, yoffset); arguments img |...
... living standard html 5.1the definition of 'setdragimage()' in tha...
Detecting device orientation - Web APIs
in particular, hand-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height. there are two javascript events that handle orientation information. ...
...the device. orientation example this example will work on any browser supporting the deviceorientation event and running on a device able to detect its orientation. ...
DirectoryEntrySync - Web APIs
ot exist. security_err the browser determined that it was not safe to look up the metadata. [ todo: explain why ] getfile() depending on how you've set the options parameter, the method either creates a file or looks up an existing file. void getfile ( in domstring path, in optional flags options ) raises (fileexception); parameter path either an absolute path or a
relative path from the directory to the file to be looked up or created. you cannot create a file whose immediate parent does not exist. create the parent directory first. options an object literal describing the behavior of the method. if the file does not exist, it is created. object literal condition result create: true exclusive: true path already exists an er...
...t referred to by path. [ todo: explain why ] type_mismatch_err the path supplied exists, but it is not a directory. getdirectory() creates or looks up a directory. the method is similar to getfile() with directoryentrysync being passed. void getdirectory ( in domstring path, in optional flags options ) raises (fileexception); parameter path either an absolute path or a
relative path from the directory to the file to be looked up or created. you cannot create a file whose immediate parent does not exist. create the parent directory first. options an object literal describing the behavior of the method if the file does not exist. object literal condition result create: true exclusive: true path already exists an error is thrown. ...
Document: keyup event - Web APIs
bubbles yes cancelable yes interface keyboardevent event handler property onkeyup the keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered. for example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. an uppercase "a" is reported as 65 by all events. note: if you're looking for a way to react to changes in an input's value, you should use the input event. some changes are not detectable by keyup, for example pasting text from the context menu in a text input. ...
...text menu in a text input. since firefox 65, the keydown and keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details). 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> <...
DynamicsCompressorNode - Web APIs
mount of change, in db, needed in the input for a 1 db change in the output. dynamicscompressornode.reduction read only is a float representing the amount of gain reduction currently applied by the compressor to the signal. dynamicscompressornode.attack read only is a k-rate audioparam representing the amount of time, in seconds, required to reduce the gain by 10 db. dynamicscompressornode.
release read only is a k-rate audioparam representing the amount of time, in seconds, required to increase the gain by 10 db. methods no specific methods; inherits methods from its parent, audionode. example the below code demonstrates a simple usage of createdynamicscompressor() to add compression to an audio track. for a more complete example, have a look at our basic compressor example (vie...
... into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); sourc...
EffectTiming.fill - Web APIs
that css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px ...
...f: center; color: white; font: bold 2em "lucida grande", "open sans", sans-serif; } while there's other css involved in this example, the part that really matters for our purposes is the css that styles the "box" element that we'll be animating. that css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; margin: 0; position:
relative; background-color: #2233ff; display: flex; justify-content: center; } all this does is specify the size, border, and color information, as well as indicate that the box should be centered both vertically and horizontally inside its container. note that there's no rotation applied. javascript content now let's check out the javascript. first we'll define the two objects that describe...
Element: click event - Web APIs
click fires after both the mousedown and mouseup events have fired, in that order. ...
... click fires after both the mousedown and mouseup events have fired, in that order. ...
Element.getClientRects() - Web APIs
objects that indicate the bounding rectangles for each css border box in a client. syntax let rectcollection = object.getclientrects(); return value the returned value is a collection of domrect objects, one for each css border box associated with the element. ...
...th the element. each domrect object contains read-only left, top, right and bottom properties describing the border box, in pixels, with the top-left
relative to the top-left of the viewport. for tables with captions, the caption is included even though it's outside the border box of the table. when called on svg elements other than an outer-<svg>, the "viewport" that the resulting rectangles are
relative to is the viewport that the element's outer-<svg> establishes (and to be clear, the rectangles are also transformed by the outer-<svg>'s viewbox transform, if any). originally, microsoft intended this method to return a textrectangle object for each line of text. however, the cssom working draft specifies that it returns a domrect for each border box. for an inline element, the two definiti...
Element.insertAdjacentElement() - Web APIs
'afterbegin': just inside the targetelement, before its first child. 'beforeend': just inside the targetelement, after its last child. 'afterend': after the targetelement itself. element the element to be inserted into the tree. ...
... 'afterbegin': just inside the targetelement, before its first child. 'beforeend': just inside the targetelement, after its last child. 'afterend': after the targetelement itself. element the element to be inserted into the tree. ...
Element.insertAdjacentText() - Web APIs
'afterbegin': just inside the element, before its first child. 'beforeend': just inside the element, after its last child. 'afterend': after the element itself. element a domstring representing the text to be inserted into the tree. return value void. ...
... 'afterbegin': just inside the element, before its first child. 'beforeend': just inside the element, after its last child. 'afterend': after the element itself. element a domstring representing the text to be inserted into the tree. return value void. ...
ErrorEvent - Web APIs
the errorevent interface represents events providing information
related to errors in scripts or in files. ...
... the errorevent interface represents events providing information
related to errors in scripts or in files. ...
ExtendableEvent - Web APIs
er, 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. note: the behaviour described in the above paragraph was fixed in firefox 43 (see bug 1180274.) this interface inherits from the event interface. ...
...ched, or else when any exception occurs. the code snippet also shows a best practice for versioning caches used by the service worker. though there's only one cache in this example, the same approach can be used for multiple caches. it maps a shorthand identifier for a cache to a specific, versioned cache name. note: in chrome, logging statements are visible via the "inspect" interface for the
relevant service worker accessed via chrome://serviceworker-internals. 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.lo...
FetchEvent() - Web APIs
tchevent = new fetchevent(type, init); parameters type a domstring object specifying which event the object represents. this is always fetch for fetch events. init optional an object conforming to the fetcheventinit dictionary, containing options to apply to the event object. options are as follows: clientid read only the client that the current service worker is controlling. ...
...ing object specifying which event the object represents. this is always fetch for fetch events. init optional an object conforming to the fetcheventinit dictionary, containing options to apply to the event object. options are as follows: clientid read only the client that the current service worker is controlling. is
reload read only a boolean that signifies whether the page was
reloaded or not when the event was dispatched. true if yes, and false if not. typically, pressing the refresh button in a browser is a
reload, while clicking a link and pressing the back button is not. if not present, it defaults to false. p
reloadresponse read only a promise which returns a previously-loaded response to the client. replacesclientid read only a domstring which identifies the...
FetchEvent.respondWith() - Web APIs
resolved url. if the response.url value is the empty string, then the fetchevent.request.url is used as the final url. in the past the fetchevent.request.url was used as the final url in all cases. the provided response.url was effectively ignored. this means, for example, if a service worker intercepts a stylesheet or worker script, then the provided response.url will be used to resolve any
relative @import or importscripts() subresource loads (bug 1222008). for most types of network request this change has no impact because you can't observe the final url. there are a few, though, where it does matter: if a fetch() is intercepted, then you can observe the final url on the result's response.url. if a worker script is intercepted, then the final url is used to set self.location and...
...ipts() subresource loads (bug 1222008). for most types of network request this change has no impact because you can't observe the final url. there are a few, though, where it does matter: if a fetch() is intercepted, then you can observe the final url on the result's response.url. if a worker script is intercepted, then the final url is used to set self.location and used as the base url for
relative urls in the worker script. if a stylesheet is intercepted, then the final url is used as the base url for resolving
relative @import loads. note that navigation requests for windows and iframes do not use the final url. the way the html specification handles redirects for navigations ends up using the request url for the resulting window.location. this means sites can still provide an "...
Fetch API - Web APIs
with network requests). this will allow them to be used wherever they are needed in the future, whether it’s for service workers, cache api, and other similar things that handle or modify requests and responses, or any kind of use case that might require you to generate your responses programmatically (that is, the use of computer program or personal programming instructions). it also defines
related concepts such as cors and the http origin header semantics, supplanting their separate definitions elsewhere. for making a request and fetching a resource, use the windoworworkerglobalscope.fetch() method. it is implemented in multiple interfaces, specifically window and workerglobalscope. this makes it available in pretty much any context you might want to fetch resources in. the fetch() m...
...see the interface pages for more details. fetch interfaces windoworworkerglobalscope.fetch() the fetch() method used to fetch a resource. headers represents response/request headers, allowing you to query them and take different actions depending on the results. request represents a resource request. response represents the response to a request. fetch mixin body provides methods
relating to the body of the response/request, allowing you to declare what its content type is and how it should be handled. specifications specification status comment fetch living standard initial definition ...
Using files from web applications - Web APIs
r's computer. when you have a file object you'd like to reference by url from html, you can create an object url for it like this: const objecturl = window.url.createobjecturl(fileobj); the object url is a string identifying the file object. each time you call url.createobjecturl(), a unique object url is created even if you've created an object url for that file already. each of these must be
released. while they are
released automatically when the document is unloaded, if your page uses them dynamically you should
release them explicitly by calling url.revokeobjecturl(): url.revokeobjecturl(objecturl); example: using object urls to display images this example uses object urls to display image thumbnails. in addition, it displays other file information including their names and sizes. ...
...ts node.appendchild() method. for each file in the filelist represented by files: create a new list item (<li>) element and insert it into the list. create a new image (<img>) element. set the image's source to a new object url representing the file, using url.createobjecturl() to create the blob url. set the image's height to 60 pixels. set up the image's load event handler to
release the object url since it's no longer needed once the image has been loaded. this is done by calling the url.revokeobjecturl() method and passing in the object url string as specified by img.src. append the new list item to the list. here is a live demo of the code above: example: uploading a user-selected file another thing you might want to do is let the user upload the selected...
File - Web APIs
ile() api on an htmlcanvaselement. a file object is a specific kind of a blob, and can be used in any context that a blob can. in particular, filereader, url.createobjecturl(), createimagebitmap(), and xmlhttprequest.send() accept both blobs and files. see using files from web applications for more information and examples. ...
...operties file.prototype.lastmodified read only returns the last modified time of the file, in millisecond since the unix epoch (january 1st, 1970 at midnight). file.prototype.lastmodifieddate read only returns the last modified date of the file referenced by the file object. file.prototype.nameread only returns the name of the file referenced by the file object. file.prototype.webkit
relativepath read only returns the path the url of the file is
relative to. file implements blob, so it also has the following properties available to it: file.prototype.size read only returns the size of the file in bytes. file.prototype.type read only returns the mime type of the file. instance methods the file interface doesn't define any methods, but inherits methods from the blo...
FileSystemDirectoryEntry.getDirectory() - Web APIs
directoryentry interface's method getdirectory() returns a filesystemdirectoryentry object corresponding to a directory contained somewhere within the directory subtree rooted at the directory on which it's called. syntax filesystemdirectoryentry.getdirectory([path][, options][, successcallback][, errorcallback]); parameters path optional a usvstring representing an absolute path or a path
relative to the directory on which the method is called, describing which directory entry to return. absolute paths may not be able to be used, for security reasons. options optional an object based on the filesystemflags dictionary, which allows you to specify whether or not to create the entry if it's missing and if it's an error if the file already exists. these options are currently not useful ...
...ack, as appropriate. true true path exists the errorcallback is called with an appropriate error, such as fileerror.path_exists_err. true true path doesn't exist the file or directory is created, then a filesystemfileentry or a filesystemdirectoryentry is passed to the successcallback, as appropriate. [1] when create is false, the value of exclusive is ir
relevant and ignored. example in this example, a function is presented whose job it is to locate within a user's app data directory a json file containing a user dictionary for a specified language, then load that dictionary. let dictionary = null; function loaddictionaryforlanguage(appdatadirentry, lang) { dictionary = null; appdatadirentry.getdirectory("dictionaries", {}, function(direntry...
FileSystemDirectoryEntry.getFile() - Web APIs
} the filesystemdirectoryentry interface's method getfile() returns a filesystemfileentry object corresponding to a file contained somewhere within the directory subtree rooted at the directory on which it's called. syntax filesystemdirectoryentry.getfile([path][, options][, successcallback][, errorcallback]); parameters path optional a usvstring specifying the path,
relative to the directory on which the method is called, describing which file's entry to return. options optional an object based on the filesystemflags dictionary, which allows you to specify whether or not to create the entry if it's missing and if it's an error if the file already exists. these options are currently not useful in web contexts. successcallback optional a method to be called once the filesystemfile...
...ack, as appropriate. true true path exists the errorcallback is called with an appropriate error, such as fileerror.path_exists_err. true true path doesn't exist the file or directory is created, then a filesystemfileentry or a filesystemdirectoryentry is passed to the successcallback, as appropriate. [1] when create is false, the value of exclusive is ir
relevant and ignored. example in this example, a function is presented whose job it is to locate within a user's app data directory a json file containing a user dictionary for a specified language, then load that dictionary. let dictionary = null; function loaddictionaryforlanguage(appdatadirentry, lang) { dictionary = null; appdatadirentry.getdirectory("dictionaries", {}, function(direntry...
FileHandle API - Web APIs
ehandle object as it can generate file objects which inherit their own name and type from those values. that said, as the name does not match any real filename it can be an empty string, for example, and it doesn't even have to be unique. note: the above code only creates a "temporary file" that exists only while you hold the filehandle instance. if you want a file to survive a page refresh/app
relaunch, you need to store the handle in a more permanent location, like the database itself. see file storage below to learn more about this. perform read and write operations to read or write within a handled file, it is required to get a lockedfile. the filehandle.open() method provides such an object which can be readonly or readwrite. any attempt to perform a write action on a readonly locke...
...progress.max = event.total; } } action.onsuccess = function () { console.log('yeah \o/ just read a 1gb file'); } action.onerror = function () { console.log('oups :( unable to read a 1gb file') } file storage when a file handle is created, the associated file only exists as a "temporary file" as long as you hold the filehandle instance. if you want a file to survive a page refresh/app
relaunch, you need to store the handle in a database (not necessarily the one used to create the filehandle object). var idbreq = window.indexeddb.open('myfilestoragedatabase'); // if necessary, let's create a datastore for the files idbreq.onupgradeneeded = function () { this.result.createobjectstore('files'); } idbreq.onsuccess = function () { var db = this.result; // let's create a new f...
Introduction to the File and Directory Entries API - Web APIs
it was built on the file writer api, which, in turn, was built on file api. each of the apis adds different functionality. ...
...s with other apis the file and directory entries api is case-sensitive the file and directory entries api is a virtual representation of a file system the api doesn't give you access to the local file system, nor is the sandbox really a section of the file system. instead, it is a virtualized file system that looks like a full-fledged file system to the web app. it does not necessarily have a
relationship to the local file system outside the browser. what this means is that a web app and a desktop app cannot share the same file at the same time. the api does not let your web app reach outside the browser to files that desktop apps can also work on. you can, however, export a file from a web app to a desktop app. for example, you can use the file api, create a blob, redirect an iframe to...
Geolocation API - Web APIs
webextensions that wish to use the geolocation object must add the "geolocation" permission to their manifest. the user's operating system will prompt the user to allow location access the first time it is requested. concepts and usage you will often want to retrieve a user's location information in your web app, for example to plot their location on a map, or display personalized information
relevant to their location. the geolocation api is accessed via a call to navigator.geolocation; this will cause the user's browser to ask them for permission to access their location data. if they accept, then the browser will use the best available functionality on the device to access this information (for example, gps). the developer can now access this location information in a couple of diffe...
...ts the position of a user. a geolocationposition instance is returned by a successful call to one of the methods contained inside geolocation, inside a success callback, and contains a timestamp plus a geolocationcoordinates object instance. geolocationcoordinates represents the coordinates of a user's position; a geolocationcoordinates instance contains latitude, longitude, and other important
related information. geolocationpositionerror a geolocationpositionerror is returned by an unsuccessful call to one of the methods contained inside geolocation, inside an error callback, and contains an error code and message. navigator.geolocation the entry point into the api. returns a geolocation object instance, from which all other functionality can be accessed. dictionaries positionopt...
GlobalEventHandlers.onanimationcancel - Web APIs
first is the box itself, with all its properties, including animation, defined. we go ahead and describe the animation in-pla...
...the box that we're animating. first is the box itself, with all its properties, including animation, defined. we go ahead and describe the animation in-place here because the animation is intended to begin as soon as the page loads, rather than based on an event. #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position:
relative; background-color: #2233ff; display: flex; justify-content: center; animation: 5s ease-in-out 0s infinite alternate both slidebox; } the animation's keyframes are described next, plotting a course from the top-left corner of the content box to the bottom-right corner. @keyframes slidebox { from { left:0; top:0; } to { left:calc(100% - var(--boxwidth)); top:ca...
GlobalEventHandlers.onanimationend - Web APIs
first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. tha...
... animating. first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't want the box to start animating right away. we'll add the animation style later to start animating the box. #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position:
relative; background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next. first, the "slideanimation" class, which establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slidebox" keyframe set. the keyframes are defined next; they describe an animation which causes the box to migrate from...
GlobalEventHandlers.onanimationiteration - Web APIs
first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that'...
... animating. first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't want the box to start animating right away. we'll add the animation style later to start animating the box. #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position:
relative; background-color: #2233ff; display: flex; justify-content: center; animation: 2s ease-in-out 0s infinite alternate both paused slidebox; } the animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner. @keyframes slidebox { from { left:0; top:0; } to { l...
GlobalEventHandlers.onanimationstart - Web APIs
first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. tha...
... animating. first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't want the box to start animating right away. we'll add the animation style later to start animating the box. #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position:
relative; background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next. first, the "slideanimation" class, which establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slidebox" keyframe set. the keyframes are defined next; they describe an animation which causes the box to migrate from...
HTMLAudioElement - Web APIs
the htmlaudioelement interface provides access to the properties of <audio> elements, as well as methods to manipulate them. it's based on, and inherits properties and methods from, the htmlmediaelement interface. ...
...the audio stream created by calling mozwriteaudio(). mozsetup() sets up the audio stream to allow writing, given the number of audio channels (1 or 2) and the sample rate in khz. mozwriteaudio() writes a batch of audio frames to the stream at the current offset, returning the number of bytes actually written to the stream. examples basic usage you can create a htmlaudioelement enti
rely with javascript using the audio() constructor: var audioelement = new audio('car_horn.wav'); then you can invoke the play() method on the element audioelement.play(); a common gotcha is trying to play an audio element immediately on page load. modern browser's default autoplay policy will block that from happening. refer to firefox and chrome for best practices and work arounds. some of ...
HTMLBaseElement - Web APIs
the htmlbaseelement interface contains the base uri for a document. this object inherits all of the properties and methods as described in the htmlelement interface. ...
...ont-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbaseelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlbaseelement.href is a domstring that reflects the href html attribute, containing a base url for
relative urls in the document. htmlbaseelement.target is a domstring that reflects the target html attribute, containing a default target browsing context or frame for elements that do not have a target reference specified. methods no specific method; inherits attributes from its parent, htmlelement. specifications specification status comment html living standardthe de...
HTMLBodyElement - Web APIs
the htmlbodyelement interface provides special properties (beyond those inherited from the regular htmlelement interface) for manipulating <body> elements. ...
...t is raised, indicating that a promise was rejected but the rejection was not handled. windoweventhandlers.onunload is an eventhandler representing the code to be called when the unload event is raised. specifications specification status comment html living standardthe definition of 'htmlbodyelement' in that specification. living standard technically, the event-
related properties onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onlanguagechange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload, have been moved to windoweventhandlers. htmlbodyelement implements this interface. html 5.1the definition of 'htmlbodyelement' in that specification. recommendation html...
HTMLButtonElement - Web APIs
the htmlbuttonelement interface provides properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <button> elements. ...
...abled, meaning that it does not accept any clicks. htmlbuttonelement.form read only is a htmlformelement reflecting the form that this button is associated with. if the button is a descendant of a form element, then this attribute is the id of that form element. if the button is not a descendant of a form element, then the attribute can be the id of any form element in the same document it is
related to, or the null value if none matches. htmlbuttonelement.formaction is a domstring reflecting the uri of a resource that processes information submitted by the button. if specified, this attribute overrides the action attribute of the <form> element that owns this element. htmlbuttonelement.formenctype is a domstring reflecting the type of content that is used to submit the form to the se...
HTMLElement.offsetLeft - Web APIs
the htmlelement.offsetleft read-only property returns the number of pixels that the upper left corner of the current element is offset to the left within the htmlelement.offsetparent node. for block-level elements, offsettop, offsetleft, offsetwidth, and offsetheight describe the border box of an element
relative to the offsetparent. however, for inline-level elements (such as span) that can wrap from one line to the next, offsettop and offsetleft describe the positions of the first border box (use element.getclientrects() to get its width and height), while offsetwidth and offsetheight describe the dimensions of the bounding border box (use element.getboundingclientrect() to get its position). therefore, a box with the left, top, width and height of offsetleft, offsettop, offsetwidth and ...
...ght describe the dimensions of the bounding border box (use element.getboundingclientrect() to get its position). therefore, a box with the left, top, width and height of offsetleft, offsettop, offsetwidth and offsetheight will not be a bounding box for a span with wrapped text. syntax left = element.offsetleft; left is an integer representing the offset to the left in pixels from the closest
relatively positioned parent element. example var colortable = document.getelementbyid("t1"); var toleft = colortable.offsetleft; if (toleft > 5) { // large left offset: do something here } this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span. <div style="width: 300px; border-color:blue...
HTMLFieldSetElement - Web APIs
the htmlfieldsetelement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <fieldset> elements. ...
...ield set. the type of this property depends on the version of the spec that is implemented by the browser. htmlfieldsetelement.formread only an htmlformcontrolscollection or htmlcollection referencing the containing form element, if this element is in a form. if the field set is not a descendant of a form element, then the attribute can be the id of any form element in the same document it is
related to, or the null value if none matches. htmlfieldsetelement.name a domstring reflecting the name html attribute, containing the name of the field set. this can be used when accessing the field set in javascript. it is not part of the data which is sent to the server. htmlfieldsetelement.typeread only the domstring "fieldset". htmlfieldsetelement.validationmessage a domstring representin...
HTMLImageElement.align - Web APIs
the obsolete align property of the htmlimageelement interface is a string which indicates how to position the image
relative to its container. you should instead use the css propertiy vertical-align, which does in fact also work on images despite its name. you can also use the float property to float the image to the left or right margin. the align property reflects the html align content attribute. syntax htmlimageelement.align = alignmode; alignmode = htmlimageelement.align; value a domstring specifying one of the following strings which set the alignment mode for the image. baseline alignment these three values specify the alignment of the element
relative to the text baseline. these should be replaced by using the css vertical-align property. bottom the bottom edge of the i...
... object should be aligned vertically with the current baseline. top the top edge of the object should be aligned vertically with the current baseline. it may be worth noting that vertical-align offers several additional options for its value; you may wish to consider these when changing your code to use it. floating images horizontally the left and right properties don't affect the baseline-
relative alignment. instead, they cause the image to "float" to the left or right margin, allowing the following text to flow around the image. you should instead use the css float property, specifying as the value either left or right. left floats the image over to place the left edge flush against the curent margin. any text that follows will flow against the image's right edge. right floats ...
HTMLImageElement.sizes - Web APIs
ce character, then the source size value to use for the image when the media condition evaluates to true. media conditions each source size descriptor consists of a media condition as defined by the media queries standard. because a source size descriptor is used to specify the width to use for the image during layout of the page, the media condition is typically (but not necessarily) based enti
rely on width information. see syntax in using media queries for details on how to construct a media condition. source size values the source size value is a css length. it may be specified using font-
relative units (such as em or ex), absolute units (such as px or cm), or the vw unit, which lets you specify the width as a percentage of the viewport width (1vw being 1% of the viewport width). not...
... 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 ...
HTMLImageElement.x - Web APIs
the x and y properties are only valid for an image if its display property has the computed value table-column or table-column-group. in other words: it has either of those values set explicitly on it, or it has inherited it from a containing element, or by being located within a column described by either <col> or <colgroup>. syntax let imagex = htmlimageelement.x; value an integer value indicating the distance in pixels from the left edge of the element's nearest root element and the left edge of the <img> element's border box. ...
... located within a column described by either <col> or <colgroup>. syntax let imagex = htmlimageelement.x; value an integer value indicating the distance in pixels from the left edge of the element's nearest root element and the left edge of the <img> element's border box. the nearest root element is the outermost <html> element that contains the image. if the image is in an <iframe>, its x is
relative to that frame. in the diagram below, the left border edge is the left edge of the blue padding area. so the value returned by x would be the distance from that point to the left edge of the content area. note: the x property is only valid if the computed value of the image's display property is either table-column or table-column-group; in other words, either of those are set directly o...
HTMLImageElement.y - Web APIs
the x and y properties are only valid for an image if its display property has the computed value table-column or table-column-group. in other words: it has either of those values set explicitly on it, or it has inherited it from a containing element, or by being located within a column described by either <col> or <colgroup>. syntax let imagey = htmlimageelement.y; value an integer value indicating the distance in pixels from the top edge of the element's nearest root element to the top edge of the <img> element's border box. ...
...ing located within a column described by either <col> or <colgroup>. syntax let imagey = htmlimageelement.y; value an integer value indicating the distance in pixels from the top edge of the element's nearest root element to the top edge of the <img> element's border box. the nearest root element is the outermost <html> element that contains the image. if the image is in an <iframe>, its y is
relative to that frame. in the diagram below, the top border edge is the top edge of the blue padding area. so the value returned by y would be the distance from that point to the top edge of the content area. note: the y property is only valid if the computed value of the image's display property is either table-column or table-column-group; in other words, either of those are set directly on t...
HTMLImageElement - Web APIs
the htmlimageelement interface represents an html <img> element, providing the properties and methods used to manipulate image elements. ...
...e <map> element, such as #my-map-element. the <map> in turn contains <area> elements indicating the clickable areas in the image. htmlimageelement.width an integer value that reflects the width html attribute, indicating the rendered width of the image in css pixels. htmlimageelement.x read only an integer indicating the horizontal offset of the left border edge of the image's css layout box
relative to the origin of the <html> element's containing block. htmlimageelement.y read only the integer vertical offset of the top border edge of the image's css layout box
relative to the origin of the <html> element's containing block. obsolete properties htmlimageelement.align a domstring indicating the alignment of the image with respect to the surrounding context. the possible value...
HTMLLegendElement - Web APIs
the htmllegendelement is an interface allowing to access properties of the <legend> elements. it inherits properties and methods from the htmlelement interface. ...
...m that this legend belongs to. if the legend has a fieldset element as its parent, then this attribute returns the same value as the form attribute on the parent fieldset element. otherwise, it returns null. htmllegendelement.accesskey is a domstring representing a single-character access key to give access to the element. htmllegendelement.align is a domstring representing the alignment
relative to the form set methods no specific method; inherits methods from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmllegendelement' in that specification. living standard html 5.1the definition of 'htmllegendelement' in that specification. recommendation html5the definiti...
HTMLModElement - Web APIs
the htmlmodelement interface provides special properties (beyond the regular methods and properties available through the htmlelement interface they also have available to them by inheritance) for manipulating modification elements, that is <del> and <ins>. ...
...tmlmodelement.cite is a domstring reflecting the cite html attribute, containing a uri of a resource explaining the change. htmlmodelement.datetime is a domstring reflecting the datetime html attribute, containing a date-and-time string representing a timestamp for the change. specifications specification status comment html living standardthe definition of 'htmlancho
relement' in that specification. living standard no change from html5. html5the definition of 'htmlancho
relement' in that specification. recommendation no change from document object model (dom) level 2 html specification. document object model (dom) level 2 html specificationthe definition of 'htmlmodelement' in that specification. obsolete no change from document...
HTMLObjectElement - Web APIs
the htmlobjectelement interface provides special properties and methods (beyond those on the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <object> element, representing external resources. ...
...der html attribute, specifying the width of a border around the object. htmlobjectelement.code is a domstring representing the name of an applet class file, containing either the applet's subclass, or the path to get to the class, including the class file itself. htmlobjectelement.codebase is a domstring that reflects the codebase html attribute, specifying the base path to use to resolve
relative uris. htmlobjectelement.codetype is a domstring that reflects the codetype html attribute, specifying the content type of the data. htmlobjectelement.contentdocument read only returns a document representing the active document of the object element's nested browsing context, if any; otherwise null. htmlobjectelement.contentwindow read only returns a windowproxy representing the wi...
HTMLScriptElement - Web APIs
cript files should be served with the application/javascript mime type, but browsers are lenient and block them only if the script is served with an image type (image/*), video type (video/*), audio type (audio/*), or text/csv. if the script is blocked, its element receives an error event; otherwise, it receives a load event. ...
... may be specified with the async attribute, so legacy browsers that only support defer (and not async) fall back to the defer behavior instead of the default blocking behavior. note: the exact processing details for these attributes are complex, involving many different aspects of html, and therefore are scattered throughout the specification. these algorithms describe the core ideas, but they
rely on the parsing rules for <script> start and end tags in html, in foreign content, and in xml; the rules for the document.write() method; the handling of scripting; and so on. htmlscriptelement.crossorigin is a domstring reflecting the cors setting for the script element. for scripts from other origins, this controls if error information will be exposed. htmlscriptelement.text is a dom...
HTMLStyleElement.media - Web APIs
the htmlstyleelement.media property specifies the intended destination medium for style information. syntax medium = style.media style.media = medium parameters medium is a string describing a single medium or a comma-separated list. ...
...he htmlstyleelement.media property specifies the intended destination medium for style information. syntax medium = style.media style.media = medium parameters medium is a string describing a single medium or a comma-separated list. ...
HTMLVideoElement - Web APIs
the htmlvideoelement interface provides special properties and methods for manipulating video objects. it also inherits properties and methods of htmlmediaelement and htmlelement. the list of supported media formats varies from one browser to the other. you should either provide your video in a single format that all the
relevant browsers supports, or provide multiple video sources in enough different formats that all the browsers you need to support are covered. ...
...s of htmlmediaelement and htmlelement. the list of supported media formats varies from one browser to the other. you should either provide your video in a single format that all the
relevant browsers supports, or provide multiple video sources in enough different formats that all the browsers you need to support are covered. ...
In depth: Microtasks and the JavaScript runtime environment - Web APIs
bout how the javascript runtime operates under the hood that may be useful to understand. that's what this section covers introduction javascript is an inherently single-threaded language. it was designed in an era in which this was a positive choice; there were few multi-processor computers available to the general public, and the expected amount of code that would be handled by javascript was
relatively low at that time. as time passed, of course, we know that computers have evolved into powerful multi-core systems, and javascript has become one of the most prolifically-used languages in the computing world. a vast number of the most popular applications are based at least in part on javascript code. to support this, it was necessary to find ways to allow for projects to escape the limit...
... ...
History.go() - Web APIs
method loads a specific page from the session history. you can use it to move forwards and backwards through the history depending on the value of a parameter. this method is asynchronous. add a listener for the popstate event in order to determine when the navigation has completed. syntax history.go([delta]) parameters delta optional the position in the history to which you want to move,
relative to the current page. a negative value moves backwards, a positive value moves forwards. so, for example, history.go(2) moves forward two pages and history.go(-2) moves back two pages. if no value is passed or if delta equals 0, it has the same result as calling location.
reload(). examples to move back one page (the equivalent of calling back()): history.go(-1) to move forward a page, ju...
... living standard no change from html5. ...
History.pushState() - Web APIs
anges to the method. alternatively, you could pass a short title for the state to which you're moving. url optional the new history entry's url is given by this parameter. note that the browser won't attempt to load this url after a call to pushstate(), but it might attempt to load the url later, for instance after the user restarts the browser. the new url does not need to be absolute; if it's
relative, it's resolved
relative to the current url. the new url must be of the same origin as the current url; otherwise, pushstate() will throw an exception. if this parameter isn't specified, it's set to the document's current url. description in a sense, calling pushstate() is similar to setting window.location = "#foo", in that both will also create and activate another history entry associat...
...t url. in contrast, setting window.location keeps you at the same document only if you modify only the hash. you don't have to change the url if you don't want to. in contrast, setting window.location = "#foo"; only creates a new history entry if the current hash isn't #foo. you can associate arbitrary data with your new history entry. with the hash-based approach, you need to encode all of the
relevant data into a short string. note that pushstate() never causes a hashchange event to be fired, even if the new url differs from the old url only in its hash. examples this creates a new browser history state setting the state, title, and url. javascript const state = { 'page_id': 1, 'user_id': 5 } const title = '' const url = 'hello-world.html' history.pushstate(state, title, url) spec...
IDBCursor.update() - Web APIs
can't call update() (or idbcursor.delete()) on cursors obtained from idbindex.openkeycursor(). for such needs, you have to use idbindex.opencursor() instead. note: this feature is available in web workers. syntax var anidbrequest = myidbcursor.update(value); parameters value the new value to be stored at the current position. return value an idbrequest object on which subsequent events
related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbcursor's transaction is inactive. readonlyerror the transaction mode is read only. invalidstateerror the cursor was created using idbindex.openkeycursor, is currently being iter...
...s cursor's position. datacloneerror the data being stored could not be cloned by the internal structured cloning algorithm. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. if the albumtitle of the current cursor is "a farewell to kings", we update year the album was
released using var request = cursor.update();. note that you cannot change primary keys using cursor.update(), hence us not changing the album title; this would ruin the integrity of the data. in such a situation, you would have to delete the record altogether and then add a new one using idbobjectstore.add. note also that you can't directly put cursor.value into an update call, hence the below exam...
IDBDatabase.transaction() - Web APIs
s a transaction object (idbtransaction) containing the idbtransaction.objectstore method, which you can use to access your object store. note: this feature is available in web workers. syntax idbdatabase.transaction(storenames); idbdatabase.transaction(storenames, mode); parameters "durability" -- the durability constrints for the transction. valid values are: "default", "strict", and "
relaxed". storenames the names of object stores that are in the scope of the new transaction, declared as an array of strings. specify only the object stores that you need to access. if you need to access only one object store, you can specify its name as a string. therefore the following lines are equivalent: var transaction = db.transaction(['my-store-name']); var transaction = db.transact...
...u don't provide the parameter, the default access mode is readonly. to avoid slowing things down, don't open a readwrite transaction unless you actually need to write into the database. if you need to open the object store in readwrite mode to change data, you would use the following: var transaction = db.transaction('my-store-name', "readwrite"); as of firefox 40, indexeddb transactions have
relaxed durability guarantees to increase performance (see bug 1112702), which is the same behaviour as other indexeddb-supporting browsers. previously in a readwrite transaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk. in firefox 40+ the complete event is fired after the os has been told to write the data but potentially before that data has...
IDBDatabaseException - Web APIs
the indexeddb api, an idbdatabaseexception object represents exception conditions that can be encountered while performing database operations. attributes attribute type description code unsigned short the most appropriate error code for the condition. message domstring error message describing the exception raised. constants note: do not
rely on the numeric values of the constants, which might change as the specifications continue to change. use the constant names instead. constant value description abort_err 8 a request was aborted, for example, through a call to idbtransaction.abort. constraint_err 4 a mutation operation in the transaction failed because a constraint was not satisf...
... read_only_err 9 a mutation operation was attempted in a read_only transaction. timeout_err 10 a lock for the transaction could not be obtained in a reasonable time. transaction_inactive_err 7 a request was made against a transaction that is either not currently active or is already finished. unknown_err 1 the operation failed for reasons un
related to the database itself, and it is not covered by any other error code--for example, a failure due to disk io errors. ver_err 12 a request to open a database with a version lower than the one it already has. this can only happen with idbopendbrequest. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute...
IDBRequest.error - Web APIs
in chrome 48+/firefox 58+ this property returns a domexception because domerror has been removed from the dom standard. ...
... constrainterror if you insert data that doesn't conform to a constraint. it's an exception type for creating stores and indexes. you get this error, for example, if you try to add a new key that already exists in the record. quotaexceedederror if you run out of disk quota and the user declined to grant you more space. unknownerror if the operation failed for reasons un
related to the database itself. a failure due to disk io errors is such an example. noerror if the request succeeds. versionerror if you try to open a database with a version lower than the one it already has. in addition to the error codes sent to the idbrequest object, asynchronous operations can also raise exceptions. the list describes problems that could occur when...
IDBTransaction - Web APIs
ata is done within transactions. you use idbdatabase to start transactions, idbtransaction to set the mode of the transaction (e.g. is it readonly or readwrite), and you access an idbobjectstore to make a request. you can also use an idbtransaction object to abort transactions. note: this feature is available in web workers. ...
... this can be prevented by using preventdefault() on the error event on the request. an explicit abort() call from script. an uncaught exception in the request's success/error handler. an i/o error (e.g. an actual failure to write to disk, or other os/hardware failure). quota exceeded. a user agent crash. firefox durability guarantees note that as of firefox 40, indexeddb transactions have
relaxed durability guarantees to increase performance (see bug 1112702.) previously in a readwrite transaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk. in firefox 40+ the complete event is fired after the os has been told to write the data but potentially before that data has actually been flushed to disk. the complete event may thus be deliv...
InstallEvent - Web APIs
stall handler, the installevent interface represents an install action that is dispatched on the serviceworkerglobalscope of a serviceworker. as a child of extendableevent, it ensures that functional events such as fetchevent are not dispatched during installation. this interface inherits from the extendableevent interface. ...
...cached, or when any exception occurs. the code snippet also shows a best practice for versioning caches used by the service worker. although this example has only one cache, you can use this approach for multiple caches. the code maps a shorthand identifier for a cache to a specific, versioned cache name. note: logging statements are visible in google chrome via the "inspect" interface for the
relevant service worker accessed via chrome://serviceworker-internals. 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(...
LockManager.request() - Web APIs
ate. valid values are: mode optional: either "exclusive" or "shared". the default value is "exclusive". ifavailable optional: if true, the lock request will only be granted if it is not already held. if it cannot be granted, the callback will be invoked with null instead of a lock instance. the default value is false. steal optional: if true, then any held locks with the same name will be
released, and the request will be granted, preempting any queued requests for it. the default value is false. signal optional: an abortsignal (the signal property of an abortcontroller); if specified and the abortcontroller is aborted, the lock request is dropped if it was not already granted. callback … return value a promise that resolves with undefined when the request is granted. ex...
...avigator.locks.request('my_resource', {mode: 'exclusive'}, async lock => { // write code here. }); } ifavailable example to grab a lock only if it isn't already being held, use the ifavailable option. in this function await means the method will not return until the callback is complete. since the lock is only granted if it was available, this call avoids needing to wait on the lock being
released elsehwere. await navigator.locks.request('my_resource', {ifavailable: true}, async lock => { if (!lock) { // the lock was not granted - get out fast. return; } // the lock was granted, and no other running code in this origin is holding // the 'my_res_lock' lock until this returns. }); signal example to only wait for a lock for a short period of time, use the signal opti...
MediaDevices.ondevicechange - Web APIs
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, ...
...the fulfillment handler is called when the device list is ready. the list is passed into the fulfillment handler as an array of mediadeviceinfo objects, each describing one media inp...
MediaDevices - Web APIs
ission through a prompt, turns on a camera and/or a microphone on the system and provides a mediastream containing a video track and/or an audio track with the input. example 'use strict'; // put variables in global scope to make them available to the browser console. ...
... candidate recommendation initial definition ...
MediaError.message - Web APIs
syntax var errormessage = mediaerror.message; value a domstring providing a detailed, specific explanation of what went wrong and possibly how it might be fixed. this is not simply a generic description of the mediaerror.code property's value, but instead goes deeper into the specifics of this particular error and its circumstances. ...
...fic details are available, this string is empty. example this example creates a <audio> element, establishes an error handler for it, then lets the user click buttons to choose whether to assign a valid audio file or a missing file to the element's src attribute. the error handler simply outputs a message to a box onscreen describing the error, including both the code and the message. only the
relevant parts of the code are displayed; you can see the complete source code here. the example creates an <audio> element and lets the user assign either a valid music file to it, or a link to a file which doesn't exist. this lets us see the behavior of the error event handler, which is received by an event handler we add to the <audio> element itself. the error handler looks like this: audioe...
Media Capture and Streams API (Media Stream) - Web APIs
see an example in get the video. ...
... and video data. it provides the interfaces and methods for working with the streams and their constituent tracks, the constraints associated with data formats, the success and error callbacks when using the data asynchronously, and the events that are fired during the process. concepts and usage the api is based on the manipulation of a mediastream object representing a flux of audio- or video-
related data. see an example in get the video. a mediastream consists of zero or more mediastreamtrack objects, representing various audio or video tracks. each mediastreamtrack may have one or more channels. the channel represents the smallest unit of a media stream, such as an audio signal associated with a given speaker, like left or right in a stereo audio track. mediastream objects have a sing...
MessageEvent - Web APIs
essage). cross-worker/document messaging (see the above two entries, but also worker.postmessage(), worker.onmessage, serviceworkerglobalscope.onmessage, etc.) broadcast channels (see broadcastchannel.postmessage()) and broadcastchannel.onmessage). webrtc data channels (see rtcdatachannel.onmessage). ...
...channel.postmessage()) and broadcastchannel.onmessage). webrtc data channels (see rtcdatachannel.onmessage). the action triggered by this event is defined in a function set as the event handler for the
relevant message event (e.g. using an onmessage handler as listed above). note: this feature is available in web workers. ...
Microdata DOM API - Web APIs
l when scripts can use it to expose information to the user, for example offering it in a form that can be used by other applications. the document.getitems(typenames) method provides access to the top-level microdata items. it returns a nodelist containing the items with the specified types, or all types if no argument is specified. each item is represented in the dom by the element on which the
relevant itemscope attribute is found. these elements have their element.itemscope idl attribute set to true. the type(s) of items can be obtained using the element.itemtype idl attribute on the element with the itemscope attribute. methods document . 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 ty...
...elements that add a property named name. collection[name] returns a propertynodelist object containing any elements that add a property named name. the name index has to be one of the values listed in the names list. collection . names returns an array with the property names of the elements in the collection. propertynodelist . getvalues() returns an array of the various values that the
relevant elements have. the object's supported property indices are as defined for htmlcollection objects. the supported property names consist of the property names of all the elements represented by the collection, in tree order, ignoring later duplicates. the names attribute must return a live read only array object giving the property names of all the elements represented by the collection,...
MouseEvent.initMouseEvent() - Web APIs
nymore as it is deprecated. instead use specific event constructors, like mouseevent(). the page on creating and triggering events gives more information about the way to use these. syntax event.initmouseevent(type, canbubble, cancelable, view, detail, screenx, screeny, clientx, clienty, ctrlkey, altkey, shiftkey, metakey, button,
relatedtarget); parameters type the string to set the event's type to. possible types for mouse events include: click, mousedown, mouseup, mouseover, mousemove, mouseout. canbubble whether or not the event can bubble. sets the value of event.bubbles. cancelable whether or not the event's default action can be prevented. sets the value of event.cancelable. view the event's abstractview. you...
...ng the event. sets the value of mouseevent.ctrlkey. altkey whether or not alt key was depressed during the event. sets the value of mouseevent.altkey. shiftkey whether or not shift key was depressed during the event. sets the value of mouseevent.shiftkey. metakey whether or not meta key was depressed during the event. sets the value of mouseevent.metakey. button the event's mouse button.
relatedtarget the event's
related eventtarget. only used with some event types (e.g., mouseover and mouseout). in other cases, pass null. example html <div style="background:red; width:180px; padding:10px;"> <div id="out"></div> <input type="text"> </div> javascript document.body.onclick = function(){ e = arguments[0]; var dt = e.target,stag = dt.tagname.tolowercase(); document.gete...
Navigator - Web APIs
ndow.navigator property. properties doesn't inherit any properties, but implements those defined in navigatorid, navigatorlanguage, navigatoronline, navigatorcontentutils, navigatorstorage, navigatorstorageutils, navigatorconcurrenthardware, navigatorplugins, and navigatorusermedia. standard navigatorid.appcodename read only returns the internal "code" name of the current browser. do not
rely on this property to return the correct value. navigatorid.appname read only returns a domstring with the official name of the browser. do not
rely on this property to return the correct value. navigatorid.appversion read only returns the version of the browser as a domstring. do not
rely on this property to return the correct value. navigator.battery read only returns a batterymanager...
...the mime types supported by the browser. navigator.online read only returns a boolean indicating whether the browser is working online. navigator.permissions read only returns a permissions object that can be used to query and update permission status of apis covered by the permissions api. navigatorid.platform read only returns a string representing the platform of the browser. do not
rely on this function to return a significant value. navigatorplugins.plugins read only returns a pluginarray listing the plugins installed in the browser. navigatorid.product read only always returns 'gecko', on any browser. this property is kept only for compatibility purpose. navigator.serviceworker read only returns a serviceworkercontainer object, which provides access to registratio...
NavigatorID.userAgent - Web APIs
y for current and past versions of a browser. new browsers may start using the same ua, or part of it, as an older browser: you really have no guarantee that the browser agent is indeed the one advertised by this property. also keep in mind that users of a browser can change the value of this field if they want (ua spoofing). browser identification based on detecting the user agent string is un
reliable and is not recommended, as the user agent string is user configurable. for example: in firefox, you can change the preference general.useragent.override in about:config. some firefox extensions do that; however, this only changes the http header that gets sent, and doesn't affect browser detection performed by javascript code. opera 6+ allows users to set the browser identification strin...
...entification string via a menu. microsoft internet explorer uses the windows registry. safari and icab allow users to change the browser user agent string to predefined internet explorer or netscape strings via a menu. syntax var ua = navigator.useragent; value a domstring specifying the complete user agent string the browser provides both in http headers and in response to this and other
related methods on the navigator object. the user agent string is built on a formal structure which can be decomposed into several pieces of info. each of these pieces of info comes from other navigator properties which are also settable by the user. gecko-based browsers comply with the following general structure: useragent = appcodename/appversion number (platform; security; os-or-cpu; localizati...
NavigatorID - Web APIs
the navigatorid interface contains methods and properties
related to the identity of the browser. there is no object of type navigatorid, but other interfaces, like navigator or workernavigator, implement it. properties the navigatorid interface doesn't inherit any properties. navigatorid.appcodename read only always returns "mozilla", in any browser. this property is kept only for compatibility purposes. navigatorid.appname read only always returns "netscape", in any browser. this property is kept only for compatibility purposes. navigatorid.appversion read only returns either "4.0" or a string representing version information about the browser. do not
rely on this property to return a useful value. navigatorid.platform read only returns either the empty string or a string...
... navigatorid.product read only always returns "gecko", in any browser. this property is kept only for compatibility purposes. ...
Node.isConnected - Web APIs
isconnected read-only property of the node interface returns a boolean indicating whether the node is connected (directly or indirectly) to the context object, for example the document object in the case of the normal dom, or the shadowroot in the case of a shadow dom. syntax var isitconnected = nodeobjectinstance.isconnected return value a boolean that is true if the node is connected to its
relevant context object, and false if not. examples standard dom a standard dom example: let test = document.createelement('p'); console.log(test.isconnected); // returns false document.body.appendchild(test); console.log(test.isconnected); // returns true shadow dom a shadow dom example: // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create some css to apply to t...
...cted); // returns false document.body.appendchild(test); console.log(test.isconnected); // returns true shadow dom a shadow dom example: // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create some css to apply to the shadow dom var style = document.createelement('style'); console.log(style.isconnected); // returns false style.textcontent = ` .wrapper { position:
relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.6s all; positions: absolute; bottom: 20px; left: 10px; z-index: 3 } `; // attach the created style element to the shadow dom shadow.appendchild(style); console.log(style.isconnected); // retur...
Node - Web APIs
reference. in some cases, a particular feature of the base node interface may not apply to one of its child interfaces; in that case, the inheriting node may return null or throw an exception, depending on circumstances. for example, attempting to add children to a node type that cannot have children will throw an exception. ...
...enode() clone a node, and optionally, all of its contents. by default, it clones the content of the node. node.comparedocumentposition() compares the position of the current node against another node in any other document. node.contains() returns a boolean value indicating whether or not a node is a descendant of the calling node. node.getboxquads() returns a list of the node's css boxes
relative to another node. node.getrootnode() returns the context object's root which optionally includes the shadow root if it is available. node.haschildnodes() returns a boolean indicating whether or not the element has any child nodes. node.insertbefore() inserts a node before the reference node as a child of a specified parent node. node.isdefaultnamespace() accepts a namespace uri as an...
NodeIterator - Web APIs
rties this interface doesn't inherit any property. nodeiterator.root read only returns a node representing the root node as specified when the nodeiterator was created. nodeiterator.whattoshow read only returns an unsigned long being a bitmask made of constants describing the types of node that must to be presented. non-matching nodes are skipped, but their children may be included, if
relevant. the possible values are: constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningful only when creating a nodeiterator with an attr node as its root; in this case, it means that the attrib...
...l appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_processing_instruction 64 shows processinginstruction nodes. nodefilter.show_text 4 shows text nodes. nodeiterator.filter read only returns a nodefilter used to select the
relevant nodes. nodeiterator.expandentityreferences read only is a boolean indicating if, when discarding an entityreference its whole sub-tree must be discarded at the same time. nodeiterator.referencenode read only returns the node to which the iterator is anchored. nodeiterator.pointerbeforereferencenode read only returns a boolean flag that indicates whether the nodeiterator is anc...
Notification.close() - Web APIs
is used to close/remove a previously displayed notification. note: this api shouldn't be used just to have the notification removed from the screen after a fixed delay since this method will also remove the notification from any notification tray, preventing users from interacting with it after it was initially shown. a valid use for this api would be to remove a notification that is no longer
relevant (e.g. the user already read the notification on the webpage in the case of a messaging app or the following song is already playing in a music app). syntax notification.close(); parameters none. returns void. examples in the following snippet, we have a simple function that when called creates an options object and then a new notification. at the end of the function, it also calls c...
... a messaging app or the following song is already playing in a music app). syntax notification.close(); parameters none. returns void. examples in the following snippet, we have a simple function that when called creates an options object and then a new notification. 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. n...
Using the Payment Request API - Web APIs
or. this takes two mandatory parameters and one option parameter: methoddata — an object containing information concerning the payment provider, such as what payment methods are supported, etc. details — an object containing information concerning the specific payment, such as the total payment amount, tax, shipping cost, etc. options (optional) — an object containing addtional options
related to the payment. so for example, you could create a new paymentrequest instance like so: var request = new paymentrequest(buildsupportedpaymentmethoddata(), buildshoppingcartdetails()); the functions invoked inside the constructor simply return the required object parameters: function buildsupportedpaymentmethoddata() { // example supported payment metho...
.../ paymentrequest object, because paymentrequest.show() can be // called only once per instance. request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); }); } note: see our feature detect support demo for the full code. checking whether users can make payments checking whether users can make payments is always useful. here's a couple of
related techniques. customizing the payment button one useful technique to employ is customizing the payment request button depending on whether users can make payments. in the following snippet we do just this — depending on whether the user can make a fast payment or needs to add payment credentials first, the title of the checkout button changes between "fast checkout with w3c" and "setup w3c...
Performance - Web APIs
it's part of the high resolution time api, but is enhanced by the performance timeline api, the navigation timing api, the user timing api, and the resource timing api. an object of this type can be obtained by calling the window.performance read-only attribute. note: this interface and its members are available in web workers, except where indicated below. also, note that performance markers and measures are per context. if you create a mark on the main thread (or other worker), you cannot see it in a worker thread, and vice versa. properties the performance interface doesn't inherit any properties. ...
...erit any properties. 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. not available in workers. performance.timing read only a legacy performancetiming object containing latency-
related performance information. not available in workers. performance.memory read only a non-standard extension added in chrome, this property provides an object with basic memory usage information. you should not use this non-standard api. performance.timeorigin read only returns the high resolution timestamp of the start time of the performance measurement. methods the performance int...
Performance API - Web APIs
scope is a window, the value is the time the browser context was created and if the scope is a worker, the value is the time the worker was created. the tojson() method returns a serialization of the performance object, for those attributes that can be serialized. properties the performance interface has two properties. the timing property returns a performancetiming object containing latency-
related performance information such as the start of navigation time, start and end times for redirects, start and end times for responses, etc. the navigation property returns a performancenavigation object representing the type of navigation that occurs in the given browsing context, such as the page was navigated to from history, the page was navigated to by following a link, etc. interfaces ...
...me, start and end times for redirects, start and end times for responses, etc. the navigation property returns a performancenavigation object representing the type of navigation that occurs in the given browsing context, such as the page was navigated to from history, the page was navigated to by following a link, etc. interfaces performance provides methods and properties containing timing-
related performance information for the given page. performanceentry provides methods and properties the encapsulate a single performance metric that is part of the performance timeline. performanceframetiming provides methods and properties containing frame timing data about the browser's event loop. performancemark an abstract interface for performance entries with an entry type of "mark". en...
Pointer Lock API - Web APIs
the mouse without end. without pointer lock, the rotation or manipulation stops the moment the pointer reaches the edge of the browser or screen. game players can now click buttons and swipe the mouse cursor back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse focus away from the game. basic concepts pointer lock is
related to mouse capture. mouse capture provides continued delivery of events to a target element while a mouse is being dragged, but it stops when the mouse button is
released. pointer lock is different from mouse capture in the following ways: it is persistent: pointer lock does not
release the mouse until an explicit api call is made or the user uses a specific
release gesture. it is not limit...
... requestpointerlock() the pointer lock api, similar to the fullscreen api, extends dom elements by adding a new method, requestpointerlock(). ...
PublicKeyCredentialCreationOptions.challenge - Web APIs
this value (among other client data) will be signed by the authenticator, using its private key, and must be sent back for verification to the server as part of authenticatorattestationresponse.attestationobject. note: when the credential is retrieved with a navigator.credentials.get() call, the signature of the challenge is contained in authenticatorassertionresponse.signature. ...
... note: when the credential is retrieved with a navigator.credentials.get() call, the signature of the challenge is contained in authenticatorassertionresponse.signature. note: a challenge will be at least 16 bytes long. syntax challenge = publickeycredentialcreationoptions.challenge value a buffersource which is at least 16 bytes long. contains a cryptographic challenge emitted from the
relying party's server which must be signed by the authenticator's private key and sent back (within the response) to the
relying party's server for verification. examples var publickey = { challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each ...
PublicKeyCredentialRequestOptions.challenge - Web APIs
this value (among other client data) will be signed by the authenticator's private key and produce authenticatorassertionresponse.signature which should be sent back to the server as part of the response. note: when the credential is created with a navigator.credentials.create() call, the signature of the challenge is contained within authenticatorattestationresponse.attestationobject. ...
...the credential is created with a navigator.credentials.create() call, the signature of the challenge is contained within authenticatorattestationresponse.attestationobject. note: a challenge will be at least 16 bytes long. syntax challenge = publickeycredentialrequestoptions.challenge value a buffersource which is at least 16 bytes long. contains a cryptographic challenge emitted from the
relying party's server which must be signed by the authenticator's private key and sent back (within the response) to the
relying party's server for verification. examples var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the ser...
PublicKeyCredentialRequestOptions - Web APIs
the publickeycredentialrequestoptions dictionary of the web authentication api holds the options passed to navigator.credentials.get() in order to fetch a given publickeycredential. properties publickeycredentialrequestoptions.challenge a buffersource, emitted by the
relying party's server and used as a cryptographic challenge. this value will be signed by the authenticator and the signature will be sent back as part of authenticatorassertionresponse.signature. ...
... and the signature will be sent back as part of authenticatorassertionresponse.signature. publickeycredentialrequestoptions.timeout optional a numerical hint, in milliseconds, which indicates the time the caller is willing to wait for the retrieval operation to complete. this hint may be overridden by the browser. publickeycredentialrequestoptions.rpid optional a usvstring which indicates the
relying party's identifier (ex. "login.example.org"). if this option is not provided, the client will use the current origin's domain. publickeycredentialrequestoptions.allowcredentials optional an array of credentials descriptor which restricts the acceptable existing credentials for retrieval. publickeycredentialrequestoptions.userverification optional a string qualifying how the user verificat...
RTCConfiguration - Web APIs
vers. if this isn't specified, the connection attempt will be made with no stun or turn server available, which limits the connection to local peers. icetransportpolicy optional the current ice transport policy; this must be one of the values from the rtcicetransportpolicy enumeration. if the policy isn't specified, all is assumed by default, allowing all candidates to be considered. a value of
relay limits the candidates to those
relayed through another server, such as a stun or turn server. peeridentity optional a domstring which specifies the target peer identity for the rtcpeerconnection. if this value is set (it defaults to null), the rtcpeerconnection will not connect to a remote peer unless it can successfully authenticate with the given name. rtcpmuxpolicy optional the rtcp mux ...
... defines string constants which can be used to limit the transport policies of the ice candidates to be considered during the connection process. constant description "all" all ice candidates will be considered. "public" only ice candidates with public ip addresses will be considered. removed from the specification's may 13, 2016 working draft. "
relay" only ice candidates whose ip addresses are being
relayed, such as those being passed through a turn server, will be considered. rtcrtcpmuxpolicy enum the rtcrtcpmuxpolicy enum defines string constants which specify what ice candidates are gathered to support non-multiplexed rtcp. <<<add a link to info about multiplexed rtcp. constant description "negotiate"...
RTCIceCandidate.address - Web APIs
opology, and so forth. it can also be used for fingerprinting purposes. the candidate ip addresses are always exposed to the application through address, and unsavory applications can in turn potentially reveal the address to the user. this can occur without the remote peer's consent. applications being built with user privacy and security in mind can choose to limit the permitted candidates to
relay candidates only. doing so prevents the remote user's address from being exposed, but reduces the pool of available candidates to choose from. to do this, configure the ice agent's ice transport policy using rtcconfiguration, like this: var rtcconfig = { iceservers: [ { urls: "turn:myturn.server.ip", username: "username", credential: "password" } ], icetransportp...
...dates only. doing so prevents the remote user's address from being exposed, but reduces the pool of available candidates to choose from. to do this, configure the ice agent's ice transport policy using rtcconfiguration, like this: var rtcconfig = { iceservers: [ { urls: "turn:myturn.server.ip", username: "username", credential: "password" } ], icetransportpolicy: "
relay" } by setting rtcconfiguration.icetransportpolicy to "
relay", any host candidates (candidates where the ip address is the peer's own ip address) are left out of the pool of candidates, as are any other candidates which aren't
relay candidates. usage notes consider this sdp attribute line (a-line) which describes an ice candidate: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 t...
RTCOutboundRtpStreamStats.sliCount - Web APIs
this is a very technical part of how video codecs work. for details, see rfc 4585: 6.3.2. note: this value is only present for...
... this is a very technical part of how video codecs work. for details, see rfc 4585: 6.3.2. note: this value is only present for video media. ...
RTCPeerConnection.createAnswer() - Web APIs
answer to be delivered to the other peer. example here is a segment of code taken from the code that goes with the article signaling and video calling. this code comes from the handler for the message sent to carry an offer to another peer across the signaling channel. ...
...}) .catch(handlegetusermediaerror); this asks rtcpeerconnection to create and return a new answer. ...
RTCPeerConnection.createOffer() - Web APIs
ure there is at least one transceiver set to receive video that has not been stopped, and if there isn't one, one will be created. note: you shouldn't use this legacy property. instead, use rtcrtptransceiver to control whether or not to accept incoming video. voiceactivitydetection optional some codecs and hardware are able to detect when audio begins and ends by watching for "silence" (or
relatively low sound levels) to occur. this reduces network bandwidth used for audio by only sending audio data when there's actually something to broadcast. however, in some cases, this is unwanted. for example, in the case of music or other non-voice transmission, this can cause loss of important low-volume sounds. also, emergency calls should never cut audio when quiet. this option defaults to tru...
...ng the state of the system to determine resource availability in order to generate the offer failed for some reason. example here we see a handler for the negotiationneeded event which creates the offer and sends it to the remote system over a signaling channel. note: keep in mind that this is part of the signaling process, the transport layer for which is an implementation detail that's enti
rely up to you. in this case, a websocket connection is used to send a json message with a type field with the value "video-offer" to the other peer. the contents of the object being passed to the sendtoserver() function, along with everything else in the promise fulfillment handler, depend enti
rely on your design. mypeerconnection.createoffer().then(function(offer) { return mypeerconnection.
RTCRtpReceiver.getCapabilities() static function - Web APIs
pabilities the browser has for receiving the specified media kind over an rtcpeerconnection. if the browser doesn't have any support for the given media kind, the returned value is null. 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. it is enti
rely possible that certain combinations of options may fail to work when you actually try to use them. calling rtcrtpreceiver.getcapabilities() doesn't prime the browser in any way to handle media. nothing is loaded, fetched, or otherwise prepared. it's simply a means of determining what might be usable before starting to try to access media. because the set of capabilities available tend to be sta...
...ecause the set of capabilities available tend to be stable for a length of time (people don't install and uninstall codecs and the like very often), the media capabilities can in whole or in part provide a cross-origin method for identifying a user. for that reason, in privacy-sensitive contexts, the browser may choose to obscure the capabilities; this might be done, for example, by leaving out ra
rely-used codec configurations. example the function below returns a boolean indicating whether or not the device supports receiving h.264 video on a webrtc connection. since rtcrtpreceiver.getcapabilities() actually only indicates probable support, attempting to receive h.264 video might still fail even after getting a positive response from this function. function canreceiveh264() { let cap...
RTCRtpSender.getCapabilities() static function - Web APIs
t capabilities the browser has for sending the specified media kind over an rtcpeerconnection. if the browser doesn't have any support for the given media kind, the returned value is null. 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. it is enti
rely possible that certain combinations of options may fail to work when you actually try to use them. calling rtcrtpsender.getcapabilities() doesn't prime the browser in any way to handle media. nothing is loaded, fetched, or otherwise prepared. it's simply a means of determining what might be usable before starting to try to access media. because the set of capabilities available tend to be stabl...
...ecause the set of capabilities available tend to be stable for a length of time (people don't install and uninstall codecs and the like very often), the media capabilities can in whole or in part provide a cross-origin method for identifying a user. for that reason, in privacy-sensitive contexts, the browser may choose to obscure the capabilities; this might be done, for example, by leaving out ra
rely-used codec configurations. example the function below returns a boolean indicating whether or not the device supports sending h.264 video on an rtcrtpsender. since rtcrtpsender.getcapabilities() actually only indicates probable support, h.264 support might still fail even after getting a positive response from this function. function cansendh264() { let capabilities = rtcrtpsender.getcap...
RTCStats.timestamp - Web APIs
the timestamp property of the rtcstats dictionary is a domhighrestimestamp object specifying the time at which the data in the object was sampled. for reports
related to rtcp packets, for instance, this indicates the time at which the data covered by the statistics was received at the corresponding endpoint. the time is given in milliseconds elapsed since the unix epoch (the first moment of january 1, 1970, utc). ...
...conds elapsed since the unix epoch (the first moment of january 1, 1970, utc). syntax var timestamp = rtcstats.timestamp; value a domhighrestimestamp value indicating the time at which the activity described by the statistics in this object was recorded, in milliseconds elapsed since the beginning of january 1, 1970, utc. this should be accurate to within a few milliseconds but may not be enti
rely pricise, either because of hardware or operating system limitations or because of fingerprinting protection in the form of reduced clock precision or accuracy. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcstats.timestamp' in that specification. candidate recommendation initial definition. ...
RTCStats - Web APIs
s object. type a domstring indicating the type of statistics the object contains, taken from the enum type rtcstatstype. the statistics type hierarchy the various dictionaries that are used to define the contents of the objects that contain each of the various types of statistics for webrtc are structured in such a way that they build upon the core rtcstats dictionary, each layer adding more
relevant information. rtcstats is the foundation of all webrtc statistics objects rtcrtpstreamstats adds to rtcstats information that applies to all rtp endpoints (that is, both local and remote endpoints, and regardless of whether the endpoint is a sender or a receiver) rtcreceivedrtpstreamstats further adds statistics measured at the receiving end of an rtp stream, regardless of...
...s of whether the endpoint is a sender or a receiver) rtcreceivedrtpstreamstats further adds statistics measured at the receiving end of an rtp stream, regardless of whether it's local or remote. rtcinboundrtpstreamstats contains statistics that can only be measured on a receiver at the local end of the rtp connection. rtcoutboundrtpstreamstats contains statistics
related to the receiver at the remote end of the rtp stream. rtcsentrtpstreamstats offers statistics
related to the sending end of an rtp stream. rtcoutboundrtpstreamstats contains statistics about the local sending endpoint of an rtp stream. rtcremoteoutboundrtpstreamstats holds statistics
related to the remote sending end an rtp stream. ...
Range - Web APIs
et read only returns a number representing where in the startcontainer the range starts. constructor range() returns a range object with the global document as its start and end. methods there are no inherited methods. range.setstart() sets the start position of a range. range.setend() sets the end position of a range. range.setstartbefore() sets the start position of a range
relative to another node. range.setstartafter() sets the start position of a range
relative to another node. range.setendbefore() sets the end position of a range
relative to another node. range.setendafter() sets the end position of a range
relative to another node. range.selectnode() sets the range to contain the node and its contents. range.selectnodecontents() sets the range to contain ...
...ents of a range from the document tree into a documentfragment. range.insertnode() insert a node at the start of a range. range.surroundcontents() moves content of a range into a new node. range.compareboundarypoints() compares the boundary points of the range with another range. range.clonerange() returns a range object with boundary points identical to the cloned range. range.detach()
releases the range from use to improve performance. range.tostring() returns the text of the range. range.comparenode() returns a constant representing whether the node is before, after, inside, or surrounding the range. range.comparepoint() returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the range. range.createcontextualfragment() returns a documentfrag...
ReadableStreamBYOBReader - Web APIs
supplied by the developer (e.g. a custom readablestream() constructor). constructor readablestreambyobreader() creates and returns a readablestreambyobreader object instance. properties readablestreambyobreader.closed read only allows you to write code that responds to an end to the streaming process. returns a promise that fulfills if the stream becomes closed or the reader's lock is
released, or rejects if the stream errors. methods readablestreambyobreader.cancel() cancels the stream, signaling a loss of interest in the stream by a consumer. the supplied reason argument will be given to the underlying source, which may or may not use it. readablestreambyobreader.read() returns a promise providing access to the next chunk in the stream's internal queue. readablestreamby...
... rejects if the stream errors. methods readablestreambyobreader.cancel() cancels the stream, signaling a loss of interest in the stream by a consumer. the supplied reason argument will be given to the underlying source, which may or may not use it. readablestreambyobreader.read() returns a promise providing access to the next chunk in the stream's internal queue. readablestreambyobreader.
releaselock()
releases the reader's lock on the stream. examples tbd. specifications specification status comment streamsthe definition of 'readablestreambyobreader' in that specification. living standard initial definition ...
ReadableStreamDefaultReader - Web APIs
d stream data supplied from a network (e.g. a fetch request). constructor readablestreamdefaultreader() creates and returns a readablestreamdefaultreader object instance. properties readablestreamdefaultreader.closed read only allows you to write code that responds to an end to the streaming process. returns a promise that fulfills if the stream becomes closed or the reader's lock is
released, or rejects if the stream errors. methods readablestreamdefaultreader.cancel() cancels the stream, signaling a loss of interest in the stream by a consumer. the supplied reason argument will be given to the underlying source, which may or may not use it. readablestreamdefaultreader.read() returns a promise providing access to the next chunk in the stream's internal queue. readablest...
...if the stream errors. methods readablestreamdefaultreader.cancel() cancels the stream, signaling a loss of interest in the stream by a consumer. the supplied reason argument will be given to the underlying source, which may or may not use it. readablestreamdefaultreader.read() returns a promise providing access to the next chunk in the stream's internal queue. readablestreamdefaultreader.
releaselock()
releases the reader's lock on the stream. examples in the following example, an artifical response is created to stream html fragments fetched from another resource to the browser. it demonstrates the usage of a readablestream in combination with a uint8array. fetch("https://www.example.org/").then((response) => { const reader = response.body.getreader(); const stream = new re...
Reporting API - Web APIs
(each endpoint will receive a specified proportion of report traffic) and safeguarding against failure (fallback endpoints can be specified to use if the primary ones fail). note: there is no absolute guarantee of report delivery — a report could still fail to be collected if a serious error occurs. reports sent to endpoints can be retrieved independently of the running of the websites they
relate to, which is useful — a crash for example could bring down a web site and stop anything running, but a report could still be obtained to give the developer some clues as to why it happened. reporting observers reports can also be obtained via reportingobserver objects created via javascript inside the website you are aiming to get reports on. this method is not as failsafe as the report-to...
...ts. report an object representing a single report. reporting api dictionaries reportingobserveroptions allows options to be set in the constructor when creating a reporting observer. available report types the spec defines the following report types: deprecation report indicates that a webapi or other browser feature being used in the website is expected to stop working in a future
release. indicated by a report.body property with a deprecationreportbody return value. intervention report indicates that a request made by the website has been denied by the browser, e.g. for security or user annoyance reasons. indicated by a report.body property with a interventionreportbody return value. crash report indicates that the website stopped running due to a browser crash. indicated...
SVGAElement - Web APIs
the svgaelement interface provides access to the properties of <a> element, as well as methods to manipulate them. properties this interface also inherits properties from its parent, svggraphicselement, and implements properties from svgurireference and htmlhyperlinkelementutils. svgaelement.download see htmlancho
relement.download. svgaelement.href see htmlancho
relement.href. svgaelement.hreflang is a domstring that reflects the hreflang attribute, indicating the language of the linked resource. 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). typically used for tracking. svgaelement.referrerpolicy ...
...omstring that reflects the hreflang attribute, indicating the language of the linked resource. 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). typically used for tracking. svgaelement.referrerpolicy see htmlancho
relement.referrerpolicy. svgaelement.
rel see htmlancho
relement.
rel. svgaelement.
rellist see htmlancho
relement.
rellist. svgaelement.target read only it corresponds to the target attribute of the given element. svgaelement.text is a domstring being a synonym for the node.textcontent property. svgaelement.type is a domstring that reflects the type attribute, indicating the mime type of the li...
SVGRenderingIntent - Web APIs
the svgrenderingintent interface defines the enumerated list of possible values for rendering-intent attributes or descriptors. ...
... value description rendering_intent_unknown 0 the type is not one of predefined types. it is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. rendering_intent_auto 1 corresponds to the value auto. rendering_intent_perceptual 2 corresponds to the value perceptual. rendering_intent_
relative_colorimetric 3 corresponds to the value
relative-colorimetric. rendering_intent_saturation 4 corresponds to the value saturation. rendering_intent_absolute_colorimetric 5 corresponds to the value absolute-colorimetric. properties this interface doesn't implement any specific properties. methods this interface doesn't implement any specific method...
Screen Capture API - Web APIs
the screen capture api introduces additions to the existing media capture and streams api to let the user select a screen or portion of a screen (such as a window) to capture as a media stream. this stream can then be recorded or shared with others over the network. screen capture api concepts and usage the screen capture api is
relatively simple to use. its sole method is mediadevices.getdisplaymedia(), whose job is to ask the user to select a screen or portion of a screen to capture in the form of a mediastream. to start capturing video from the screen, you call getdisplaymedia() on the instance of media navigator.mediadevices: capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); the promise returned by getdisplaymedia() resolves to a mediastream which st...
...if it should only be visible while the mouse is in motion. mediatrackconstraints.displaysurface a constraindomstring indicating what type of display surface is to be captured. the value is one of application, browser, monitor, or window. mediatrackconstraints.logicalsurface indicates whether or not the video in the stream represents a logical display surface (that is, one which may not be enti
rely visible onscreen, or may be completely offscreen). a value of true indicates a logical display surface is to be captured. mediatracksettings mediatracksettings.cursor a string which indicates whether or not the display surface currently being captured includes the mouse cursor, and if so, whether it's only visible while the mouse is in motion or if it's always visible. the value is one of ...
Storage API - Web APIs
alled its box. each site storage unit has exactly one box into which all of its data is placed, and has a box mode that describes the data retention policy for that box. there are two modes: "best-effort" the user agent will try to retain the data contained in the box for as long as it can, but will not warn users if storage space runs low and it becomes necessary to clear the box in order to
relieve the storage pressure. "persistent" the user agent will retain the data as long as possible, clearing all "best-effort" boxes before considering clearing a box marked "persistent". if it becomes necessary to consider clearing persistent boxes, the user agent will notify the user and provide a way to clear one or more persistent boxes as needed. to change an origin's box mode requires permi...
...istent-storage" feature. data persistence and clearing if the site or app has the "persistent-storage" feature permission, it can use the storagemanager.persist() method to request that its box be made persistent. it's also possible for the user agent to decide to make the site's storage unit persistent due to usage characteristics or other metrics. the "persistent-storage" feature's permission-
related flags, algorithms, and types are all set to the standard defaults for a permission, except that the permission state must be the same across the entire origin, and that if the permission state isn't "granted" (meaning that for whatever reason, access to the persistent storage feature was denied), the origin's site storage unit's box mode is always "best-effort". note: see using the permissi...
Storage Access API - Web APIs
equires access to its first-party storage. as an example, federated logins often require access to authentication cookies stored in first-party storage, and will require the user to sign in on each site separately (or completely break) if those cookies are not available. in the case of breakage, site owners have often encouraged users to add their site as an exception or to disable the policy enti
rely. as a consequence, users who wish to continue to interact with embedded content are forced to greatly
relax their blocking policy for resources loaded from all embedded origins and possibly across all websites. the storage access api is intended to solve this problem; embedded cross-origin content can request unrestricted access to its first-party storage on a site-by-site basis via the documen...
...s are automatically denied unless the embedded content is currently processing a user gesture such as a tap or click. this also prevents embedded content on the page from spamming the browser or user with excessive access requests. origins that have never been interacted with as a first party do not have a notion of first-party storage. from the user’s perspective, they only have a third-party
relationship with that origin. access requests are automatically denied if the browser detects that the user hasn’t interacted with the embedded content in a first-party context recently (in firefox, "recently" is "within 30 days"). the browser may decide to involve the user in the decision of whether to grant an incoming storage access request. specifics regarding the lifetime of a storage grant...
Using writable streams - Web APIs
access to the underlying sink. write(chunk,controller) — a method that is called repeatedly every time a new chunk is ready to be written to the underlying sink (specified in the chunk parameter). close(controller) — a method that is called if the app signals that it has finished writing chunks to the stream. it should do whatever is necessary to finalize writes to the underlying sink, and
release access to it. abort(reason) — a method that will be called if the app signals that it wishes to abruptly close the stream and put it in an errored state. the constructor call in our example looks like this: const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // im...
...eady .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } so here we create a writer to write the chunks to the stream using writablestream.getwriter(). this creates a writablestreamdefaultwriter instance. we also create a new textencoder instance using the
relevant constructor to encode the message into chunks to be put into the stream. with the chunks encoded, we then call array/foreach on the resulting array. inside this block we use writablestreamdefaultwriter.ready to check whether the writer is ready to have another chunk written to it. ready returns a promise that fulfills when this is the case, inside of which we call writablestreamdefaultwrite...
Streams API - Web APIs
essure and queuing. writablestreamdefaultwriter represents a default writable stream writer that can be used to write chunks of data to a writable stream. writablestreamdefaultcontroller represents a controller allowing control of a writablestream's state. when constructing a writablestream, the underlying sink is given a corresponding writablestreamdefaultcontroller instance to manipulate.
related stream apis and operations bytelengthqueuingstrategy provides a built-in byte length queuing strategy that can be used when constructing streams. countqueuingstrategy provides a built-in chunk counting queuing strategy that can be used when constructing streams. extensions to other apis request when a new request object is constructed, you can pass it a readablestream in the body ...
...t when a new request object is constructed, you can pass it a readablestream in the body property of its requestinit dictionary. this request could then be passed to a windoworworkerglobalscope.fetch() to commence fetching the stream. body the response body returned by a successful fetch request is exposed by default as a readablestream, and can have a reader attached to it, etc. bytestream-
related interfaces important: these are not implemented anywhere as yet, and questions have been raised as to whether the spec details are in a finished enough state for them to be implemented. this may change over time. readablestreambyobreader represents a byob ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g. a custom readablestream() cons...
StyleSheet.media - Web APIs
the media property of the stylesheet interface specifies the intended destination media for style information. it is a read-only, array-like medialist object and can be removed with deletemedium() and added with appendmedium(). ...
... the media property of the stylesheet interface specifies the intended destination media for style information. it is a read-only, array-like medialist object and can be removed with deletemedium() and added with appendmedium(). ...
SubtleCrypto.deriveKey() - Web APIs
this shared secret as a symmetric key to secure their communication, or can use the secret as an input to derive such a key (for example, using the hkdf algorithm). ecdh is specified in rfc 6090. hkdf hkdf is a key derivation function. it's designed to derive key material from some high-entropy input, such as the output of an ecdh key agreement operation. it's not designed to derive keys from
relatively low-entropy inputs such as passwords. for that, use pbkdf2. hkdf is specified in rfc 5869. pbkdf2 pbkdf2 is also a key derivation function. it's designed to derive key material from some
relatively low-entropy input, such as a password. it derives key material by applying a function such as hmac to the input password along with some salt, and repeating this process many times. the more ...
... let...
Touch.clientX - Web APIs
the touch.clientx read-only property returns the x coordinate of the touch point
relative to the viewport, not including any scroll offset. syntax touchitem.clientx; return value a long representing the x coordinate of the touch point
relative to the viewport, not including any scroll offset. example this example illustrates using the touch object's touch.clientx and touch.clienty properties. the touch.clientx property is the horizontal coordinate of a touch point
relative to the browser's viewport excluding any scroll offset. the touch.clienty property is the vertical coordinate of the touch point
relative to the browser's viewport excluding any scroll offset . in this example, we assume the user initiates a touch on an element with an id of source, moves within the element or out of...
...when the touchend event handler is invoked, the changes in the touch.clientx and touch.clienty coordinates, from the starting touch point to the ending touch point, are calculated. ...
Touch.clientY - Web APIs
the touch.clienty read-only property returns the y coordinate of the touch point
relative to the browser's viewport, not including any scroll offset. syntax touchitem.clienty; return value a long value representing the y coordinate of the touch point
relative to the viewport, not including any scroll offset. example this example illustrates using the touch object's touch.clientx and touch.clienty properties. the touch.clientx property is the horizontal coordinate of a touch point
relative to the browser's viewport excluding any scroll offset. the touch.clienty property is the vertical coordinate of the touch point
relative to the browser's viewport excluding any scroll offset . in this example, we assume the user initiates a touch on an element with an id of source, moves within the e...
...when the touchend event handler is invoked, the changes in the touch.clientx and touch.clienty coordinates, from the starting touch point to the ending touch point, are calculated. ...
Touch.pageX - Web APIs
the touch.pagex read-only property returns the x coordinate of the touch point
relative to the viewport, including any scroll offset. syntax touchitem.pagex; return value a long representing the x coordinate of the touch point
relative to the viewport, including any scroll offset. example this example illustrates how to access the touch object's touch.pagex and touch.pagey properties. the touch.pagex property is the horizontal coordinate of a touch point
relative to the viewport (in css pixels), including any scroll offset. the touch.pagey property is the vertical coordinate of a touch point
relative to the viewport (in css pixels), including any scroll offset. in following simple code snippet, we assume the user initiates one or more touch contacts on the source element, moves the to...
...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. ...
Touch.pageY - Web APIs
the touch.pagey read-only property returns the y coordinate of the touch point
relative to the viewport, including any scroll offset. syntax touchitem.pagey; return value a long value that representes the y coordinate of the touch point
relative to the viewport, including any scroll offset. example this example illustrates how to access the touch object's touch.pagex and touch.pagey properties. the touch.pagex property is the horizontal coordinate of a touch point
relative to the viewport (in css pixels), including any scroll offset. the touch.pagey property is the vertical coordinate of a touch point
relative to the viewport (in css pixels), including any scroll offset. in following simple code snippet, we assume the user initiates one or more touch contacts on the source element, mo...
...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. ...
UIEvent.pageX - Web APIs
the non-standard, read-only uievent property pagex returns the horizontal coordinate of the event
relative to the whole document. this property was never part of any standard, and was only implemented across a subset of browsers, and only for a limited number of versions. a standardized version of pagex was added to the mouseevent interface, however, and is well-supported. you should not expect to find pagex on any non-mouse events. do not look for pagex on any non-mouse events in new code and update existing code as soon as possible. ...
...o the mouseevent interface, however, and is well-supported. you should not expect to find pagex on any non-mouse events. do not look for pagex on any non-mouse events in new code and update existing code as soon as possible. syntax var pos = event.pagex value an integer value, in pixels, indicating the x coordinate at which the mouse pointer was located when the event occurred. this value is
relative to the left edge of the entire document, regardless of the current horizontal scrolling offset of the document. examples for an example, see the documentation for the standard mouseevent.pagex property, which you should use instead. specifications this property is not part of any specification. see mouseevent.pagex instead. ...
UIEvent - Web APIs
ives from event. although the uievent.inituievent() method is kept for backward compatibility, you should create a uievent object using the uievent() constructor. several interfaces are direct or indirect descendants of this one: mouseevent, touchevent, focusevent, keyboardevent, wheelevent, inputevent, and compositionevent. ...
...ievent.cancelbubble is a boolean indicating whether the bubbling of the event has been canceled or not. uievent.detailread only returns a long with details about the event, depending on the event type. uievent.ischar read only returns a boolean indicating whether the event produced a key character or not. uievent.layerx read only returns the horizontal coordinate of the event
relative to the current layer. uievent.layery read only returns the vertical coordinate of the event
relative to the current layer. uievent.pagex read only returns the horizontal coordinate of the event
relative to the whole document. uievent.pagey read only returns the vertical coordinate of the event
relative to the whole document. uievent.sourcecapabilities read only returns an...
USBDevice - Web APIs
ltransferin() returns a promise that resolves with a usbtransferinresult when a command or status operation has been transmitted to the usb device. usbdevice.controltransferout() returns a promise that resolves with a usbtransferoutresult when a command or status operation has been transmitted from the usb device. usbdevice.close() returns a promise that resolves when all open interfaces are
released and the device session has ended. usbdevice.isochronoustransferin() returns a promise that resolves with a usbisochronousintransferresult when time sensitive information has been transmitted to the usb device. usbdevice.isochronoustransferout() returns a promise that resolves with a usbisochronousouttransferresult when time sensitive information has been transmitted from the usb device. ...
...t resolves with a usbisochronousintransferresult when time sensitive information has been transmitted to the usb device. usbdevice.isochronoustransferout() returns a promise that resolves with a usbisochronousouttransferresult when time sensitive information has been transmitted from the usb device. usbdevice.open() returns a promise that resolves when a device session has started. usbdevice.
releaseinterface() returns a promise that resolves when a cliamed interface is
released from exclusive access. usbdevice.reset() returns a promise that resolves when the device is reset and all app operations canceled and their promises rejected. usbdevice.selectalternateinterface() returns a promise that resolves when the specified alternative endpoint is selected. usbdevice.selectconfiguratio...
USBEndpoint - Web APIs
ptor defining this endpoint. this value is used to identify the endpoint when calling methods on usbdevice. usbendpoint.direction returns the direction in which this endpoint transfers data, one of: "in" - data is transferred from device to host. "out" - data is transferred from host to device. usbendpoint.type returns the type of this endpoint, one of: "bulk" - provides
reliable data transfer for large payloads. data sent through a bulk endpoint is guaranteed to be delivered or generate an error but may be preempted by other data traffic. "interrupt" - provides
reliable data transfer for small payloads. data sent through an interrupt endpoint is guaranteed to be delivered or generate an error and is also given dedicated bus time for transmission. "isoc...
...they are given dedicated bus time but if a deadline is missed the data is dropped. ...
VideoPlaybackQuality.corruptedVideoFrames - Web APIs
it is up to the user agent to determine whether or not to display a corrupted video frame. if a corrupted frame is dropped, then both corruptedvideoframes and droppedvideoframes are incremented. ...
... it is up to the user agent to determine whether or not to display a corrupted video frame. if a corrupted frame is dropped, then both corruptedvideoframes and droppedvideoframes are incremented. ...
VisualViewport - Web APIs
rget. visualviewport.offsetleft read only returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in css pixels. visualviewport.offsettop read only returns the offset of the top edge of the visual viewport from the top edge of the layout viewport in css pixels. visualviewport.pageleft read only returns the x coordinate of the visual viewport
relative to the initial containing block origin of the top edge in css pixels. visualviewport.pagetop read only returns the y coordinate of the visual viewport
relative to the initial containing block origin of the top edge in css pixels. visualviewport.width read only returns the width of the visual viewport in css pixels. visualviewport.height read only returns the height of the visual vie...
...in css pixels. visualviewport.width read only returns the width of the visual viewport in css pixels. visualviewport.height read only returns the height of the visual viewport in css pixels. visualviewport.scale read only returns the pinch-zoom scaling factor applied to the visual viewport. events listen to these events using addeventlistener() or by assigning an event listener to the
relevant oneventname property of this interface. resize fired when the visual viewport is resized. also available via the visualviewport.onresize property. scroll fired when the visual viewport is scrolled. also available via the visualviewport.onscroll property. examples hiding an overlaid box on zoom this example, taken from the visual viewport readme, shows how to write a simple bit of...
Visual Viewport API - Web APIs
thout affecting the layout viewport. what happens when a web page element needs to be visible on screen regardless of the visible portion of a web page? for example, what if you need a set of image controls to remain on screen regardless of the pinch zoom level of the device? current browsers vary in how they handle this. ...
... accessing the api window.visualviewport read only a read-only reference to the window's visualviewport object. if this property doesn't exist, the api is unsupported. interfaces visualviewport represents the visual viewport for a given window. ...
WebGLRenderingContext.makeXRCompatible() - Web APIs
*/ 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"); ...
...session and set the usingxr flag to true. if the other button was clicked, we ensure that xrsession is null and clear usingxr to false. then the startgame() function is called to trigger the beginning of gameplay. handlers are provided for both webglcontextlost and webglcontextrestored; in the first case, we make sure we're aware that the state can be recovered, while in the latter we actually
reload the scene to ensure we have the correct resources for the current screen or headset configuration. specifications specification status comment webxr device apithe definition of 'webglrenderingcontext.makexrcompatible()' in that specification. working draft initial definition ...
Hello vertex attributes - Web APIs
var linkerrlog = gl.getprograminfolog(program); cleanup(); document.queryselector("p").innerhtml = "shader program did not link successfully. ...
...shader program did not link successfully. ...
Introduction to WebRTC protocols - Web APIs
brtc api is built. ice interactive connectivity establishment (ice) is a framework to allow your web browser to connect with peers. there are many reasons why a straight up connection from peer a to peer b simply won’t work. it needs to bypass firewalls that would prevent opening connections, give you a unique address if like most situations your device doesn’t have a public ip address, and
relay data through a server if your router doesn’t allow you to directly connect with peers. ice uses stun and/or turn servers to accomplish this, as described below. stun session traversal utilities for nat (stun) (acronym within an acronym) is a protocol to discover your public address and determine any restrictions in your router that would prevent a direct connection with a peer. the client ...
...ho can connect to devices on the network. this can mean that even though we have the public ip address found by the stun server, not anyone can create a connection. in this situation we need to turn to turn. turn some routers using nat employ a restriction called ‘symmetric nat’. this means the router will only accept connections from peers you’ve previously connected to. traversal using
relays around nat (turn) is meant to bypass the symmetric nat restriction by opening a connection with a turn server and
relaying all information through that server. you would create a connection with a turn server and tell all peers to send packets to the server which will then be forwarded to you. this obviously comes with some overhead so it is only used if there are no other alternatives. sdp...
Using WebRTC data channels - Web APIs
once you've established a webrtc peer connection using the rtcpeerconnection interface, you're able to send and receive media data between the two peers on the connection. but there's a lot more you can do with webrtc. in this guide, we'll examine how to add a data channel to a peer connection, which can then be used to secu
rely exchange arbitrary data; that is, any kind of data we wish, in any format we choose. since all webrtc components are required to use encryption, any data transmitted on an rtcdatachannel is automatically secured using datagram transport layer security (dtls). see security below for more information. creating a data channel the underlying data transport used by the rtcdatachannel can be created in one of two ways: let webrtc create the transport and announce...
...plicated. concerns with large messages currently, it's not practical to use rtcdatachannel for messages larger than 64kib (16kib if you want to support cross-browser exchange of data). the problem arises from the fact that sctp—the protocol used for sending and receiving data on an rtcdatachannel—was originally designed for use as a signaling protocol. it was expected that messages would be
relatively small. support for messages larger than the network layer's mtu was added almost as an afterthought, in case signaling messages needed to be larger than the mtu. this feature requires that each piece of the message have consecutive sequence numbers, so they have to be transmitted one after another, without any other data interleaved between them. this eventually became a problem. over tim...
Writing WebSocket servers - Web APIs
nhbxbszsbub25jzq==", the sec-websocket-accept header's value is "s3pplmbitxaq9kygzzhzrbk+xoo=". once the server sends these headers, the handshake is complete and you can start swapping data! note: the server can send other headers like set-cookie, or ask for authentication or redirects via other status codes, before sending the reply handshake. keeping track of clients this doesn't directly
relate to the websocket protocol, but it's worth mentioning here: your server must keep track of clients' sockets so you don't keep handshaking again with clients who have already completed the handshake. the same client ip address can try to connect multiple times. however, the server can deny them if they attempt too many connections in order to save itself from denial-of-service attacks. for exam...
...eeds to pass the data around. tip: to avoid name conflict, it's recommended to make your subprotocol name part of a domain string. ...
The WebSocket API (WebSockets) - Web APIs
bsocket api is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. with this api, you can send messages to a server and receive event-driven responses without having to poll the server for a reply. note: while a websocket connection is functionally somewhat similar to standard unix-style sockets, they are not
related. interfaces websocket the primary interface for connecting to a websocket server and then sending and receiving data on the connection. closeevent the event sent by the websocket object when the connection closes. messageevent the event sent by the websocket object when a message is received from the server. guides writing websocket client applications writing websocket server...
...ds (stdin/stdout) as a websocket. ws: a popular websocket client & server library for node.js. jsonrpc-bidirectional: asynchronous rpc which, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client). cowboy: cowboy is a small, fast and modern http server for erlang/otp with websocket support.
related topics ajax javascript specifications specification status comments html living standardthe definition of 'websocket api' in that specification. living standard websockets candidate recommendation rfc 6455: the websocket protocol ietf rfc ...
Using the Web Animations API - Web APIs
ransitions, and leaves the door open to future animation effects. it is one of the most performant ways to animate on the web, letting the browser make its own internal optimizations without hacks, coercion, or window.requestanimationframe(). with the web animations api, we can move interactive animations from stylesheets to javascript, separating presentation from behavior. we no longer need to
rely on dom-heavy techniques such as writing css properties and scoping classes onto elements to control playback direction. and unlike pure, declarative css, javascript also lets us dynamically set values from properties to durations. for building custom animation libraries and creating interactive animations, the web animations api might be the perfect tool for the job. let's see what it can do! b...
...onfinish = endgame; drinking.onfinish = endgame; // ...or alice reaches the end of her animation alicechange.onfinish = endgame; better still, the web animations api also provides a finish promise that will resolve when the animation finishes, or reject if it is canceled. conclusion these are the basic features of the web animations api, most of which are already supported across the latest
release versions of firefox and chrome. by now you should be ready to "jump down the rabbit hole" of animating in the browser and ready to write your own animation experiments! if you're using the api and want to share, try using the #waapi hashtag. we will be watching and will write more tutorials to cover further features as support spreads! ...
Migrating from webkitAudioContext - Web APIs
t(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { var decodedbuffer = context.createbuffer(xhr.response, false); if (decodedbuffer) { // decoding was successful, do something useful with the audio buffer } else { alert("decoding the audio buffer failed"); } }; converting this code to use decodeaudiodata() is
relatively simple, as can be seen below: var xhr = new xmlhttprequest(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { context.decodeaudiodata(xhr.response, function onsuccess(decodedbuffer) { // decoding was successful, do something useful with the audio buffer }, function onfailure() { alert("decoding the audio buff...
...r example, the name of gainnode.gain is "gain". you can simply track where the audioparam object is coming from in your code if you need this information. the minvalue and maxvalue attributes are read-only values representing the nominal range for the audioparam. for example, for gainnode, these values are 0 and 1, respectively. note that these bounds are not enforced by the engine, and are me
rely used for informational purposes. as an example, it's perfectly valid to set a gain value to 2, or even -1. in order to find out these nominal values, you can consult the specification. the units attribute as implemented in webkitaudiocontext implementations is unused, and always returns 0. there is no reason why you should need this attribute. removal of mediaelementaudiosourcenode.mediael...
Web Audio API - Web APIs
rticle basic concepts behind web audio api. web audio api target audience the web audio api can seem intimidating to those that aren't familiar with audio or music terms, and as it incorporates a great deal of functionality it can prove difficult to get started if you are a developer. it can be used to simply incorporate audio into your website or application, by providing atmosphere like futu
relibrary.no, or auditory feedback on forms. however, it can also be used to create advanced interactive instruments. with that in mind, it is suitable for both developers and musicians alike. we have a simple introductory tutorial for those that are familiar with programming but need a good introduction to some of the terms and structure of the api. there's also a basic concepts behind web audio a...
...ions dictionary is used to provide options when instantiating a new audiocontext. audionode the audionode interface represents an audio-processing module like an audio source (e.g. an html <audio> or <video> element), audio destination, intermediate processing module (e.g. a filter like biquadfilternode, or volume control like gainnode). audioparam the audioparam interface represents an audio-
related parameter, like one of an audionode. it can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern. audioparammap provides a maplike interface to a group of audioparam interfaces, which means it provides the methods foreach(), get(), has(), keys(), and values(), as well as a size property. baseaudiocontext the ba...
WheelEvent - Web APIs
nterfaces. use this interface and avoid the non-standard ones. do not confuse the wheel event with the scroll event: the default action of a wheel event is implementation-defined. thus, a wheel event doesn't necessarily dispatch a scroll event. even when it does, that doesn't mean that the delta* values in the wheel event necessarily reflect the content's scrolling direction. ...
...scroll event. even when it does, that doesn't mean that the delta* values in the wheel event necessarily reflect the content's scrolling direction. therefore, do not
rely on delta* properties to get the content's scrolling direction. instead, detect value changes to scrollleft and scrolltop of the target in the scroll event. ...
Window.closed - Web APIs
has an opener using the window.opener property and that the opener isn't closed: // check that an opener exists and is not closed if (window.opener && !window.opener.closed) { window.opener.location.href = 'http://www.mozilla.org'; } note that popups can only access the window that opened them. ...
...sly opened popup in this example the function refreshpopupwindow() calls the
reload() method of the popup's location object to refresh its data. if the popup hasn't been opened yet or the user has closed it a new window is opened. const popupwindow = null; function refreshpopupwindow() { if (popupwindow && !popupwindow.closed) { // popupwindow is open, refresh it popupwindow.location.
reload(true); } else { // open a new popup window popupwindow = window.open('popup.html', 'datawindow'); } } specification specification status comment html living standardthe definition of 'window.closed' in that specification. living standard ...
Window.event - Web APIs
to change preferences in firefox, visit about:config.ie full support 4opera full support 7safari full support ...
...to change preferences in firefox, visit about:config.opera android full support 10.1safari ios full support 1samsung internet android ...
Window: load event - Web APIs
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" 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-l...
...abel>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.addeve...
Privileged features - Web APIs
minimizable this setting can only apply to dialog windows; minimizable requires dialog=yes. if minimizable is on, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. ...
...info and to be dismissed, closed. on mac systems, dialog windows have a different window border and they may get turned into a sheet. modal if on, the new window is said to be modal. the user cannot return to the main window until the modal window is closed. a typical modal window is created by the alert() function. the exact behavior of modal windows depends on the platform and on the mozilla
release version. note: as of gecko 1.9, the internet explorer equivalent to this feature is the window.showmodaldialog() method. for compatibility reasons, it's now supported in firefox. note also that starting in gecko 2.0, you can use window.showmodaldialog() without universalbrowserwrite privileges. titlebar by default, all new secondary windows have a titlebar. if set to no or 0, this fe...
Window.requestAnimationFrame() - Web APIs
request id, that uniquely identifies the entry in the callback list. this is a non-zero value, but you may not make any other assumptions about its value. you can pass this value to window.cancelanimationframe() to cancel the refresh callback request. example in this example, an element is animated for 2 seconds (2000 milliseconds). the element moves at a speed of 0.1px/ms to the right, so its
relative position (in css pixels) can be calculated in function of the time elapsed since the start of the animation (in milliseconds) with 0.1 * elapsed. the element's final position is 200px (0.1 * 2000) to the right of its initial position. const element = document.getelementbyid('some-element-you-want-to-animate'); let start; function step(timestamp) { if (start === undefined) start = tim...
...sed = timestamp - start; // `math.min()` is used here to make sure that the element stops at exactly 200px. element.style.transform = 'translatex(' + math.min(0.1 * elapsed, 200) + 'px)'; if (elapsed < 2000) { // stop the animation after 2 seconds window.requestanimationframe(step); } } window.requestanimationframe(step); notes edge versions below 17 and internet explorer do not
reliably fire requestanimationframe before the paint cycle. specification specification status comment html living standardthe definition of 'requestanimationframe' in that specification. living standard no change, supersedes the previous one. timing control for script-based animationsthe definition of 'requestanimationframe' in that specification. obso...
Window.resizeBy() - Web APIs
the window.resizeby() method resizes the current window by a specified amount. syntax window.resizeby(xdelta, ydelta) parameters xdelta is the number of pixels to grow the window horizontally. ydelta is the number of pixels to grow the window vertically. example // shrink the window window.resizeby(-200, -200); notes this method resizes the window
relative to its current size. to resize the window in absolute terms, use window.resizeto(). creating and resizing an external window for security reasons, it's no longer possible in firefox for a website to change the default size of a window in a browser if the window wasn’t created by window.open(), or contains more than one tab. see the compatability table for details on the change. even if you create window by window.open(...
...the compatability table for details on the change. even if you create window by window.open() it is not resizable by default. to make the window resizable, you must open it with the "resizable" feature. // create resizable window myexternalwindow = window.open("http://myurl.domain", "mywindowname", "resizable"); // resize window to 500x500 myexternalwindow.resizeto(500, 500); // make window
relatively smaller to 400x400 myexternalwindow.resizeby(-100, -100); the window you create must respect the same origin policy. if the window you open is not in the same orgin as the current window, you will not be able to resize, or access any information on, that window/tab. specifications specification status comment css object model (cssom) view modulethe definition...
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
ed where the nesting level is at least a certain depth. to implement a 0 ms timeout in a modern browser, you can use window.postmessage() as described here. note: the minimum delay, dom_min_timeout_value, is 4 ms (stored in a preference in firefox: dom.min_timeout_value), with a dom_clamp_timeout_nesting_level of 5. note: 4 ms is specified by the html5 spec and is consistent across browsers
released in 2010 and onward. prior to (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2), the minimum timeout value for nested timeouts was 10 ms. timeouts in inactive tabs throttled to ≥ 1000ms to reduce the load (and associated battery usage) from background tabs, timeouts are throttled to firing no more often than once per second (1,000 ms) in inactive tabs. firefox implements this behavior sin...
... in inactive tabs. firefox implements this behavior since version 5 (see bug 633421, the 1000ms constant can be tweaked through the dom.min_background_timeout_value preference). chrome implements this behavior since version 11 (crbug.com/66078). firefox for android uses a timeout value of 15 minutes for background tabs since bug 736602 in firefox 14, and background tabs can also be unloaded enti
rely. firefox 50 no longer throttles background tabs if a web audio api audiocontext is actively playing sound. firefox 51 further amends this such that background tabs are no longer throttled if an audiocontext is present in the tab at all, even if no sound is being played. these resolve a number of issues with apps which play note-based music not being able to time or synchronize the music proper...
WorkerNavigator - Web APIs
e permissions api. navigator.storageread only returns a storagemanager interface for managing persistance permissions and estimating available storage. inherited properties navigatorid.appcodename read only always returns 'mozilla', in any browser. this property is kept only for compatibility purposes. navigatorid.appname read only returns the official name of the browser. do not
rely on this property to return the correct value. navigatorid.appversion read only returns the version of the browser as a string. do not
rely on this property to return the correct value. navigatorconcurrenthardware.hardwareconcurrencyread only returns the number of logical processor cores available. navigatorlanguage.languageread only returns a domstring representing the language version...
... the browser. the null value is returned when this is unknown. navigatorlanguage.languagesread only returns an array of domstrings representing the languages known to the user, in order of preference. navigatoronline.onlineread only returns a boolean indicating whether the browser is online. navigatorid.platform read only returns a string representing the platform of the browser. do not
rely on this property to return the correct value. navigatorid.product read only always returns 'gecko', on any browser. this property is kept only for compatibility purposes. navigatorid.useragentread only returns the user agent string for the current browser. methods the workernavigator interface implements methods from the navigatorid, navigatorlanguage and navigatoronline interfaces. s...
WritableStreamDefaultWriter - Web APIs
suring that no other streams can write to the underlying sink. constructor writablestreamdefaultwriter() creates a new writablestreamdefaultwriter object instance. properties writablestreamdefaultwriter.closedread only allows you to write code that responds to an end to the streaming process. returns a promise that fulfills if the stream becomes closed or the writer's lock is
released, or rejects if the stream errors. writablestreamdefaultwriter.desiredsizeread only returns the desired size required to fill the stream's internal queue. writablestreamdefaultwriter.readyread only returns a promise that resolves when the desired size of the stream's internal queue transitions from non-positive to positive, signaling that it is no longer applying backpressure. m...
... signaling that it is no longer applying backpressure. methods writablestreamdefaultwriter.abort() aborts the stream, signaling that the producer can no longer successfully write to the stream and it is to be immediately moved to an error state, with any queued writes discarded. writablestreamdefaultwriter.close() closes the associated writable stream. writablestreamdefaultwriter.
releaselock()
releases the writer's lock on the corresponding stream. after the lock is
released, the writer is no longer active. if the associated stream is errored when the lock is
released, the writer will appear errored in the same way from now on; otherwise, the writer will appear closed. writablestreamdefaultwriter.write() writes a passed chunk of data to a writablestream and its underlyi...
HTML in XMLHttpRequest - Web APIs
you have to explicitly request a document by assigning the string "document" to the responsetype property of the xmlhttprequest object after calling open() but before calling send(). var xhr = new xmlhttprequest(); xhr.onload = function() { console.log(this.responsexml.title); } xhr.open("get", "file.html"); xhr.responsetype = "document"; xhr.send(); feature detection method 1 this method
relies on the "force async" nature of the feature. when you try to set responsetype of an xmlhttprequest object after it is opened as "sync". this throws an error in the browsers that implement the feature and works on others. function htmlinxhr() { if (!window.xmlhttprequest) return false; var req = new window.xmlhttprequest(); req.open('get', window.location.href, false); try { re...
...is throws an error in the browsers that implement the feature and works on others. function htmlinxhr() { if (!window.xmlhttprequest) return false; var req = new window.xmlhttprequest(); req.open('get', window.location.href, false); try { req.responsetype = 'document'; } catch(e) { return true; } return false; } view on jsfiddle this method is synchronous, does not
rely on external assets though it may not be as
reliable as method 2 described below since it does not check the actual feature but an indication of that feature. method 2 there are two challenges to detecting exactly if a browser supports html parsing in xmlhttprequest. first, the detection result is obtained asynchronously, because html support is only available in the asynchronous mode. second, ...
Using XMLHttpRequest - Web APIs
var oreq = new xmlhttprequest(); oreq.upload.addeventlistener("progress", updateprogress); oreq.upload.addeventlistener("load", transfercomplete); oreq.upload.addeventlistener("error", transferfailed); oreq.upload.addeventlistener("abort", transfercanceled); oreq.open(); note: progress events are not available for the file: protocol. note: starting in gecko 9.0, progress events can now be
relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. in this case, the progress event is automatically fired when the load event occurs for that packet. this lets you now
reliably monitor progress by only watching the "progress" event. note: as of gecko 12.0, if ...
...|*| https://www.gnu.org/licenses/gpl-3.0-standalone.html |*| |*| syntax: |*| |*| ajaxsubmit(htmlformelement); \*/ var ajaxsubmit = (function () { function ajaxsuccess () { /* console.log("ajaxsubmit - success!"); */ console.log(this.responsetext); /* you can get the serialized data through the "submitteddata" custom proper...
XRFrame.getPose() - Web APIs
the xrframe method getpose() returns the
relative position and orientation—the pose—of one xrspace to that of another space. with this, you can observe the motion of objects
relative to each other and to fixed locations throughout the scene. for example, to get the position of a controller
relative to the viewer's head, you would compare the controller's gripspace to the xrreferencespace of type viewer. syntax var xrpose = xrframe.getpose(space, basespace); parameters space an xrspace specifying the space for which to obtain an xrpose describing the item's position and orientation. basespace an xrspace to use as the base or origin for the purposes of computing the
relative position and orientation. return value an xrpose object specifying the position and orientat...
...of type viewer. syntax var xrpose = xrframe.getpose(space, basespace); parameters space an xrspace specifying the space for which to obtain an xrpose describing the item's position and orientation. basespace an xrspace to use as the base or origin for the purposes of computing the
relative position and orientation. return value an xrpose object specifying the position and orientation,
relative to the xrspace indicated by basespace. specifications specification status comment webxr device apithe definition of 'xrframe.getpose()' in that specification. working draft initial definition. ...
XRFrame - Web APIs
. events which communicate the tracking state of objects also provide an xrframe reference as part of their structure. ...
...acking state of objects also provide an xrframe reference as part of their structure. in addition to providing a reference to the xrsession for which this frame is to be rendered, the getviewerpose() method is provided to obtain the xrviewerpose describing the viewer's position and orientation in space, and getpose() can be used to create an xrpose describing the
relative position of one xrspace
relative to another. properties session read only the xrsession that for which this xrframe describes the tracking details for all objects. the information about a specific object can be obtained by calling one of the methods on the object. methods getpose() returns an xrpose object representing the spatial
relationship between the two specified xrspace objects. getviewerpose() returns ...
XRInputSource.targetRaySpace - Web APIs
d orientation of the target ray in the virtual space. its native origin tracks the position of the origin point of the target ray, and its orientation indicates the orientation of the controller device itself. these values, interpreted in the context of the input source's targetraymode, can be used both to fully interpret the device as an input source. <<<--- needs diagram showing targetrayspace
relative to gripspace and world space --->>> to obtain an xrspace representing the input controller's position and orientation in virtual space, use the gripspace property. syntax let targetrayspace = xrinputsource.targetrayspace; value an xrspace object—typically an xrreferencespace or xrboundedreferencespace—which represents the position and orientation of the input controller's target ray...
...an a gazing device, screen tap, or mouse click. for tracked pointers, a function myrendertargetrayasbeam() is called to render a beam from the input controller's virtual position outward in the direction it's pointing. the code should continue to perform tasks such as drawing controllers or any objects representative of the user's hands' positions in the virtual space, as well as any other input-
related tasks. function updateinputsources(session, frame, refspace) { for (let source of session.getinputsources()) { let targetraypose = frame.getpose(inputsource.targetrayspace, refspace); if (targetraypose) { if (source.targetraymode == "tracked-pointer") { myrendertargetrayasbeam(targetraypose); } } /* ... */ } } see the article inputs and input sourc...
XRInputSource - Web APIs
their fist, that action is called a primary squeeze action. a primary squeeze action should correspond to a gripping act in reality, such as taking hold of an object or pressing a trigger on a tool or weapon. when a squeeze action begins, such as by the user pressing the trigger or tightening their grip, a squeezestart event is sent to the xrsession. once the action is completed and the user has
released the trigger or the grip, a squeeze event is sent. this is followed by a squeezeend, which is also sent if the action is aborted rather than completed. if the device has a button or other pressable input control, it is a primary input source, and this button is a primary action. a primary action may occur when the user presses a button, clicks on a touchpad or the top button of a thumb stick...
... control, it is a primary input source, and this button is a primary action. a primary action may occur when the user presses a button, clicks on a touchpad or the top button of a thumb stick, or uses a hand gesture or spoken command that invokes the button-like action. when a primary action begins, a selectstart event is sent to the xrsession. when the action has completed (such as when the user
releases the button), a select event is sent. finally, once that is done—or if the user aborts the action—a selectend event is sent to the session object. an action may be aborted either by the user in some device-specific fashion or if the input device is disconnected before the action is completed. local coordinate system each input source has its own local coordinate system, which is descri...
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: reqfeatu
relist, optionalfeatures: optfeatu
relist }; xrpermissiondescriptor.optionalfeatures = optfeatu
relist; optfeatu
relist = 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. while further features may be defined in future editions of webxr, currently all permitted values come from the xrreference...
...origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable
relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a w...
XRPermissionDescriptor.requiredFeatures - Web APIs
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. this ensures that permissions are checked as applicable to ensure that those features are available upon request. syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeatu
relist, optionalfeatures: optfeatu
relist }; xrpermissiondescriptor.requiredfeatures = reqfeatu
relist; reqfeatu
relist = 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 th...
...origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable
relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a w...
XRPose.transform - Web APIs
this is the same pose that's returned by the frame's getpose() method. example this handler for the xrsession event select handles events for tracked pointers. ...
...this is the same pose that's returned by the frame's getpose() method. example this handler for the xrsession event select handles events for tracked pointers. ...
XRPose - Web APIs
the xrspace—which is either an xrreferencespace or an xrboundedreferencespace—defines the coordinate system used for the pose and, in the case of an xrviewerpose, its underlying views. to obtain the xrpose for the xrspace used as the local coordinate system of an object, call xrframe.getpose(), specifying that local xrspace and the space to which you wish to convert: thepose = xrframe.getpose(localspace, basespace); the pose for a viewer (or camera) is represented by the xrviewerpose subclass of xrpose. ...
...position the viewer based on movement or rotation which is being supplied from a source other than the xr device, such as keyboard or mouse inputs. see the article movement, orientation, and motion for further details and an example with thorough explanations of what's going on. properties xrpose.transform read only a xrrigidtransform which provides the position and orientation of the pose
relative to the base xrspace. xrpose.emulatedposition read only a boolean value which is false if the position and orientation given by transform is obtained directly from a full six degree of freedom (6dof) xr device (that is, a device which tracks not only the pitch, yaw, and roll of the head but also the forward, backward, and side-to-side motion of the viewer). if any component of the transfor...
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
the xrreferencespace interface's getoffsetreferencespace() method returns a new reference space object which describes the
relative difference in position between the object on which the method is called and a given point in 3d space. the object returned by getoffsetreferencespace() is an xrreferencespace if called on an xrreferencespace, or an xrboundedreferencespace if called on an object of that type. in other words, when you have an object in 3d space and need to position another object
relative to that one, you can call getoffsetreferencespace(), passing into it the position and orientation you want the second object to have
relative to the position and orientation of the object on which you call getoffsetreferencespace(). then, when drawing the scene, you can use the offset referen...
...this is demonstrated in the example implementing rotation based on non-xr inputs, which demonstrates a way to use this method to let the user use their mouse to pitch and yaw their viewing angle. ...
XRReferenceSpace: reset event - Web APIs
new origin at or near the user's current position. the webxr infrastructure or hardware drivers detected that the device had temporarily lost tracking, causing the hardware and software to be out of sync on position and orientation. note: a reset event will not occur if the reference space is able to regain tracking of its previous origin, since that means the origin has not been forced to be
relocated. this event is only fired when the origin has to be
relocated to recover from the tracking loss. manual resets if you've spent any time using a vr headset, you've had times when you've started it up and although you're facing straight ahead, the headset thinks you're looking at the sky or the floor; or times when you point the hand controller straight forward, but it thinks you're pointi...
...reference space as it makes small adjustments to its native origin over time to maintain the space's stability in the vicinity of the user; only large discontinuities will trigger a reset. examples to add a handler for the reset event, you can use either of two approaches. 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' in that specification. working draft initial definition. ...
XRRigidTransform - Web APIs
the transform of an xrview. the transform of an xrpose. the xrreferencespaceevent event's transform property, as found in the reset event received by an xrreferencespace. ...
.... that is, if applied to an object that had been previously transformed by the original transform, it will undo the transform and return the original object. usage notes when an xrrigidtransform is interpreted, the orientation is always applied to the affected object before the position is applied. example this code snippet creates an xrrigidtransform to specify the offset and orientation in
relation to the current reference space to use when creating a new reference space. it then requests the first animation frame callback by calling the session's requestanimationframe() method. xrsession.requestreferencespace(refspacetype) .then((refspace) => { xrreferencespace = refspace; xrreferencespace = xrreferencespace.getoffsetreferencespace( new xrrigidtransform(viewerstartpositio...
XRSession.onselectend - Web APIs
note: not to be confused with xrsession.onselectstart and xrsession.onselect. syntax xrsession.onselectend = function(event) { ... ...
... note: not to be confused with xrsession.onselectstart and xrsession.onselect. syntax xrsession.onselectend = function(event) { ... ...
XRWebGLLayerInit.ignoreDepthValues - Web APIs
rovided in the options passed into the xrwebgllayer() constructor to indicate that the depth buffer, if it exists, should be ignored while composing the scene. the depth buffer is typically used to assist in ordering vertices and, by extension, polygons while compositing, to ensure that the scene is correctly composited, with objects the correct distance away and with clipping and other distance-
related computations performed as accurately as possible. without the depth buffer, these computations must
rely enti
rely on the coordinates of each pixel. this property differs from depth in that depth requests a webgl layer that does not have a depth buffer at all, while ignoredepthvalues me
rely asks that the depth layer be ignored. syntax let layerinit = { ignoredepthvalues: boolvalue }; let ...
...accurately as possible. each entry in the depth buffer corresponds to the depth of the fragment whose color is at the same location in the color buffer, and must have a value between 0.0 and 1.0, where 0.0 corresponds to the distance specified in the xrsession object's renderstate record's depthnear and 1.0 represents the distance given by depthfar. ignoring depth values causes the compositor to
rely solely upon the
relative position of objects to establish depth, and may result in less effective and less comfortable 3d effects. the default is false (depth values are used by default). example in this example, a new xrwebgllayer is created for a webxr session, xrsession. it's configured to ignore depth values or an alpha channel. xrsession.updaterenderstate({ baselayer: new xrwebgllayer(...
Using the alert role - Accessibility
a script library like jquery: $("<p role='alert'>you must agree with our terms of service to create an account.</p>").appendto(document.body); example 3: adding alert role to an existing element sometimes it's useful to add an alert role to an element that is already visible on the page rather than creating a new element. this allows the developer to reiterate information that has become more
relevant or urgent to the user. for example, a form control may have instruction about the expected value. if a different value is entered, role="alert can be added to the instruction text so that the screen reader announces it as an alert. the pseudo code snippet below illustrates this approach: <p id="forminstruction">you must select at least 3 options</p> // when the user tries to submit the fo...
...used on does not have to be able to receive focus, as screen readers will automatically announce the alert regardless of where keyboard focus is currently located. ...
Using the aria-describedby attribute - Accessibility
this is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need. the aria-describedby attribute is not used only for form elements; it is also used to associate static text with widgets, groups of elements, panes, regions that have a heading, definitions, and more. ...
...mation entered and return you back to the main page</div> working examples: checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descriptions on an external resource—since it is an id, it must reference an element in the same dom document. used by aria roles all elements of the base markup
related aria techniques using the aria-labelledby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-describedby ...
Using the aria-valuetext attribute - Accessibility
dium, and large. in this case, the values of aria-valuenow could range from 1 through 3, which indicate the position of each value in the value space, but thearia-valuetext would be one of the strings: small, medium, or large. value string representation of a number possible effects on user agents and assistive technology if the aria-valuetext attribute is absent, assistive technologies will
rely solely on the aria-valuenow attribute for the current value. if aria-valuetext is specified, assistive technologies should render that value instead of the value of aria-valuenow. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: the snippet below shows ...
...k. the value of the slider is numeric, and the aria-valuetext attribute is used to provide the name of the day. the application would programmatically update aria-valuetext depending on aria-valuenow. ...
Using the group role - Accessibility
ary (such as the structures that are dynamically created by a script or assistive technologies); a group should not be considered a major perceivable section on a page. when the role is added to an element, the browser will send out an accessible group event to assistive technology products which can then notify the user about it. a group should be used to form a logical collection of items with
related functionality, such as children in a tree widget forming a collection of siblings in a hierarchy, or a collection of items having the same container in a directory. however, when a group is used in the context of list, authors must limit its children to listitem elements. group elements may be nested. proper handling of a group by assistive technologies is determined by the context in which ...
...enuitem">custom folder 2</li> <li role="menuitem">custom folder 3</li> </ul> <ul role="group"> <li role="menuitem">new folder</li> </ul> </div> working examples: file directory treeview example using computed properties navigation treeview example using declared properties notes group members that are outside of the dom subtree of the group need to have explicit
relationships assigned to them in order to participate in the group. aria attributes used group
related aria techniques region role compatibility tbd: add support information for common ua and at product combinations additional resources aria authoring practices – accessible name guidance by role – group ...
Using the log role - Accessibility
html source code. <div id="liveregion" class="region" role="log"></div> example 2: snippet from an example application this snippet creates the chat log in an ajax chat application. ...
...erlistregion" 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". with an area that has scrolling text, such as a stock ticker, the marquee role should be used instead. ...
Using the presentation role - Accessibility
this technique demonstrates how to use the presentation role and describes the effect it has on browsers and assistive technology. the presentation role is used to remove semantic meaning from an element and any of its
related child elements. for example, a table used for layout purposes could have the presentation role applied to the table element to remove any semantic meaning from the table element and any of its table
related children elements, such as table headers and table data elements. non-table
related elements should retain their semantic meaning, however. possible effects on user agents and assistive technology note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not no...
...information provided above is one of those opinions and therefore not normative. ...
Using the status role - Accessibility
ten presented as a status bar. when the role is added to an element, the browser will send out an accessible status event to assistive technology products which can then notify the user about it. status information content must be provided within a status object, and it should be ensured that this object does not receive focus. if another part of the page controls what appears in the status, the
relationship should be made explicit via the aria-controls attribute. assistive technologies may reserve some cells of a braille display to render the status. possible effects on user agents and assistive technology when the status role is added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having a status role in the operating...
...ive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: adding the status role in html the snippet below shows how the status role is added directly into the html source code. ...
x-ms-aria-flowfrom - Accessibility
e web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the x-ms-aria-flowfrom property specifies the id of the previous element in an alternative reading order, allowing assistive technology to override the general default of reading in document source order. the property serves to define element
relationships utilizing aria
relationship attributes and the aria-flowto property. this proprietary property is specific to internet explorer and microsoft edge. syntax x-ms-aria-flowfrom="elementid"; value the x-ms-aria-flowfrom property value uses an id selector to define which previous element the reading order will flow from. example <div tabindex="0" class="foo" id="element2" role="optio...
...ecific to internet explorer and microsoft edge. ...
ARIA: timer role - Accessibility
required javascript features keypress used to handle keyboard input and control the focus click, touch handle as appropriate for your widget as well changing attribute values aria-activedescendant is used to manage the focus inside the application container. set in response to keyboard or other application events that change focus or point of interaction. the timer role does not have a
related html widget and xxx. the author of the timer must take full responsibility for not letting users get stuck in a focus limbo or trap focus inside something the user cannot exit of. all aspects of interaction, including returning to the regular web content on other parts of the page, must be handled. use wisely, and cautiously! examples some prominent web timers include clocks, stop watches ...
...sequent calls, only the parts of the content that changed compared to the previous content will be announced. for instance, when the clock changes from "17:33" to "17:34", assistive technologies will only announce "4", which won't be very useful to users. one way around this would be to first clear the contents of the live region, and then inject the new content. however, this can sometimes be un
reliable, as it's dependent on the exact timing of these two updates. aria-atomic="true" ensures that each time the live region is updated, the entirety of the content is announced in full (e.g. "time: 17:34"). <div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div> accessibility concerns improperly using the timer role can unintentionally xxx specifications specifica...
ARIA: figure role - Accessibility
ve the accessibility of html by adding these roles and properties with javascript. ...
...er your html but are able to improve accessibility dynamically after the fact with javascript. if at all possible, you should use the appropriate semantic html elements to mark up a figure and its caption — <figure> and <figcaption>. for example, our above example should be rewritten as follows: <figure> <img src="diagram.png" alt="diagram showing the four layers of awesome and their
relative priority order — music, cats, nature, and ice cream"> <pre><code> let awesome = ['music', 'cats', 'nature', 'ice cream']; </code></pre> <figcaption>figure 1: the four layers of awesome.</figcaption> </figure> specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'figure' in that specification. re...
ARIA: grid role - Accessibility
uses fall into two categories: presenting tabular information (data grids) and grouping other widgets (layout grids). even though both data grids and layout grids employ the same aria roles, states, and properties, differences in their content and purpose surface factors that...
... <button id="2a" tabindex="-1">2a</button> </td> <td tabindex="-1"> <button id="2b" tabindex="-1">2b</button> </td> <!-- more columns --> </tr> </tbody> </table> description a grid widget contains one or more rows with one or more cells of thematically
related interactive content. while it does not imply a specific visual presentation, it implies a
relationship among elements. uses fall into two categories: presenting tabular information (data grids) and grouping other widgets (layout grids). even though both data grids and layout grids employ the same aria roles, states, and properties, differences in their content and purpose surface factors that are important to consider in keyboard interaction design. see aria authoring practices for more d...
ARIA: Main role - Accessibility
<div id="main" role="main"> <h1>avocados</h1> <!-- main section content --> </div> this is the main section of a document that discusses avocados. subsections of this document could discuss their history, the different types, regions where they grow, etc. description the main role is a navigational landmark role identifying the main content of a document. ...
...or "skip to main content" links.there should only be one main landmark role per document. the <main> element has a role of main. developers should always prefer using the correct semantic html element over using aria. documents and applications can be nested in the dom, which may lead to having more than one main element as dom descendants. if this is the case, include aria-owns to identify the
relationship of the main to it's document or application ancestor. example <body> <!-- primary navigation --> <div role="main"> <h1>the the first indochina war</h1> <!-- article content --> </div> <!-- sidebar and footer --> </body> accessibility concerns use only one main role per document the main landmark role should only be used once per document. if a document contains tw...
ARIA: rowgroup role - Accessibility
there is, however, no differentiation between different types of rowgroups. their elements must be contained in, or owned by, elements with either the table or grid role. using the native <thead>, <tfoot> , and <tbody> html elements, whenever possible, is strongly encouraged. to cre...
...erty. the table body is a separate rowgroup, with four rows currently in the dom. because not all the rows are in the dom, we've included the aria-rowindex property on every row. best practices only use table, tbody, thead, tr, th, td, and so on for data table structure. you can add these aria roles to ensure accessibility should the native semantics of the table be removed, such as with css. a
relevant use case for the aria table role is when the css's display property overrides the native semantics of a table, such as by display: grid. in this case, you can use the aria table roles to add in the semantics. <table role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <caption id="semantic_elements_table_desc">semantic elements ...
ARIA: table role - Accessibility
respectively, along with the aria-colindex or aria-rowindex on each cell. the aria-colindex or aria-rowindex is set to the position of a cell within the row or column, respectively. if the table includes cells that span multiple rows or multiple columns, then aria-rowspan or aria-colspan should be included as well. realize, it is much simpler to simply use the <table> element, along with all the
related semantic elements and attributes that are all supported by all assistive technologies. to create an interactive widget that has a tabular structure, use the grid pattern instead. if the interaction provides for the selection state of individual cells, if left to right and top to bottom navigation is provided, or if the user interface allows the rearranging of cell order or otherwise changing...
...ated by the aria-rowcount property, only four are currently visible. the columns are sortable, but not currently sorted, as indicated by the aria-sort property on the column headers. best practices only use table, tbody, thead, tr, th, td, etc., for data table structure. you can add these aria roles to ensure accessibility should the native semantics of the table be removed, such as with css. a
relevant use case for the aria table role is when css's display property overrides the native semantics of a table, such as by display: grid. in this case, you can use the aria table roles to re-add the semantics. added benefits none specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'aria table role' in that specificatio...
Basic form hints - Accessibility
when a screen reader user navigates a page, the screen reader will describe form controls. without a direct association between the control and its label, the screen reader has no way of knowing which label is the correct one. the example below shows a simple form with labels. note that each <input> element has an id, and each <label> element has a for attribute, indicating the id of the associated <input>. ...
...wai-aria, the accessible rich internet applications specification from the w3c's web accessibility initiative, provides the aria-labelledby attribute for these cases. the example below shows a radio button group implemented using an unordered list. note that on line 3, the <ul> element s...
ARIA - Accessibility
on the operating system and browser being used, as well as the kind of assistive technology interfacing with it. in addition, the version of the operating system, browser, and assistive technology are contributing factors. older software versions may not support certain aria roles, have only partial support, or misreport its functionality. it is also important to acknowledge that some people who
rely on assistive technology are
reluctant to upgrade their software, for fear of losing the ability to interact with their computer and browser. because of this, it is important to use semantic html elements whenever possible, as semantic html has far better support for assistive technology. it is also important to test your authored aria with actual assistive technology. much as how browser emulat...
...specification itself. ...
Keyboard-navigable JavaScript widgets - Accessibility
script via element.focus() tab navigable not present follows the platform convention of the element (yes for form controls, links, etc.). follows the platform convention of the element. negative (i.e. tabindex="-1") yes no; author must focus the element with focus() in response to arrow or other key presses. zero (i.e. tabindex="0") yes in tab order
relative to element's position in document (note that interactive elements like <a> have this behavior by default, they don't need the attribute). positive (e.g. tabindex="33") yes tabindex value determines where this element is positioned in the tab order: smaller values will position elements earlier in the tab order than larger values (for example, tabindex="7" will be positioned be...
...example, scrolling in response to the arrow keys) by using your event handler's return code. if your event handler returns false, the event will not be propagated beyond your handler. for example: <span tabindex="-1" onkeydown="return handlekeydown();"> if handlekeydown() returns false, the event will be consumed, preventing the browser from performing any action based on the keystroke. don't
rely on consistent behavior for key repeat, at this point unfortunately onkeydown may or may not repeat depending on what browser and os you're running on. ...
Color contrast - Accessibility
see the solution section below for further information. having good color contrast on your site benefits all your users, but it is particularly beneficial to users with certain types of color blindness and other similar conditions, who experience low contrast, and have trouble differentiating between similar colors. this is because they don't see bright and dark areas as readi...
... you should follow 1.4.11 (again, see below). to check your contrast as you make your color choices, use a tool such as webaim's color contrast checker. you can also check color contrast on the fly using firefox's developer tools — see our accessibility inspector guide, and in particular the section check for accessibility issues. try using it on the live examples in the description section.
related wcag success criteria 1.4.3 minimum contrast (aa) the color contrast between background and foreground content should be at a minimum level to ensure legibility: text and its background should have a contrast ratio of at least 4.5:1. heading (or just larger) text should have a ratio of at least 3:1. larger text is defined as at least 18pt, or 14pt bold. 1.4.6 enhanced contrast ...
-webkit-border-before - CSS: Cascading Style Sheets
values for one or more of: -webkit-border-before-width, -webkit-border-before-style, and -webkit-border-before-color. it maps to a physical border depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. it
relates to -webkit-border-after, -webkit-border-start, and -webkit-border-end, which define the other borders of the element. this property is on the standard track as border-block-start. syntax values one or more of the following, in any order: <'border-width'> see border-width <'border-style'> see border-style <'color'> see color formal definition initial valueas each of the properti...
... ...
::before (:before) - CSS: Cascading Style Sheets
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. this method can often be used to add small touches to the ui and improve user experience. ...
...dotted; } result to-do list in this example we will create a simple to-do list using pseudo-elements. this method can often be used to add small touches to the ui and improve user experience. ...
::first-line (:first-line) - CSS: Cascading Style Sheets
ment, and the font size of the text. /* selects the first line of a <p> */ p::first-line { color: red; } css3 introduced the ::first-line notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :first-line, introduced in css2. ...
...the ::first-line pseudo-element: all font-
related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family all background-
related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode the color property word-spacing, letter-spacing, text-decoration, text-transform, and line-height text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and v...
:target - CSS: Cascading Style Sheets
kground-color: gold; } /* add a pseudo-element inside the target element */ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; margin-right: .25em; } /* style italic elements within the target element */ p:target i { color: red; } result pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any javascript. this technique
relies on the ability of anchor links to point to elements that are initially hidden on the page. once targeted, the css changes their display so that they are shown. note: a more complete pure-css lightbox based on the :target pseudo-class is available on github (demo). html <ul> <li><a href="#example1">open example #1</a></li> <li><a href="#example2">open example #2</a></li> </ul> <div clas...
... quisque quis neque arcu, nec gravida magna.</figcaption> </figure> </div> css /* unopened lightbox */ .lightbox { display: none; } /* opened lightbox */ .lightbox:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* lightbox content */ .lightbox figcaption { width: 25rem; position:
relative; padding: 1.5em; background-color: lightpink; } /* close button */ .lightbox .close { position:
relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; con...
:visited - CSS: Cascading Style Sheets
the :visited css pseudo-class represents links that the user has already visited. for privacy reasons, the styles that can be modified using this selector are very limited. /* selects any <a> that has been visited */ a:visited { color: green; } styles defined by the :visited pseudo-class will be overridden by any subsequent link-
related pseudo-class (:link, :hover, or :active) that has at least equal specificity. to style links appropriately, put the :visited rule after the :link rule but before the :hover and :active rules, as defined by the lvha-order: :link — :visited — :hover — :active. styling restrictions for privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used: allowable css properties are color, backgroun...
..., border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color, and text-emphasis-color. allowable svg attributes are fill and stroke. the alpha component of the allowed styles will be ignored. the alpha component of the element's non-:visited state will be used instead, except when that component is 0, in which case the style set in :visited will be ignored enti
rely. although these styles can be change the appearance of colors to the end user, the window.getcomputedstyle method will lie and always return the value of the non-:visited color. note: for more information on these limitations and the reasons behind them, see privacy and the :visited selector. syntax :visited examples properties that would otherwise have no color or be transparent cannot...
speak-as - CSS: Cascading Style Sheets
<counter-style-name> the name of another counter style, specified as a <custom-ident>. if included, the counter will be spoken out in the form specified in that counter style, kind of like specifying the fallback descriptor. if the specified style does not exist, speak-as defaults to auto. accessibility concerns assistive technology support is very limited for the speak-as property. ...
...form specified in that counter style, kind of like specifying the fallback descriptor. if the specified style does not exist, speak-as defaults to auto. accessibility concerns assistive technology support is very limited for the speak-as property. do not
rely on it to convey information critical to understanding the page's purpose. ...
@font-face - CSS: Cascading Style Sheets
ovide their own fonts, @font-face makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). the ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without
relying on an internet connection. it's common to use both url() and local() together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device. the @font-face at-rule may be used not only at the top level of a css, but also inside any css conditional-group at-rule. font mime types format ...
...conditional-group at-rule. font mime types format mime type truetype font/ttf opentype font/otf web open font format font/woff web open font format 2 font/woff2 notes web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless http access controls are used to
relax this restriction. @font-face cannot be declared within a css selector. for example, the following will not work: .classname { @font-face { font-family: myhelvetica; src: local("helvetica neue bold"), local("helveticaneue-bold"), url(mgopenmodernabold.ttf); font-weight: bold; } } formal syntax @font-face { [ font-family: <family-name>; ] | [ src: <sr...
size - CSS: Cascading Style Sheets
to the jis standard dimensions: 257mm x 364mm. letter this keyword is a equivalent to the dimensions of letter paper in north america i.e. 8.5in x 11in. legal this keyword is a equivalent to the dimensions of legal papers in north america i.e. 8.5in x 14in. ledger this keyword is a equivalent to the dimensions of ledger pages in north america i.e. 11in x 17in. ...
...a equivalent to the dimensions of letter paper in north america i.e. 8.5in x 11in. legal this keyword is a equivalent to the dimensions of legal papers in north america i.e. 8.5in x 14in. ledger this keyword is a equivalent to the dimensions of ledger pages in north america i.e. 11in x 17in. ...
CSS Animations tips and tricks - CSS: Cascading Style Sheets
n a stopped animation again. run an animation again the css animations specification doesn't offer a way to run an animation again. there's no magic resetanimation() method on elements, and you can't even just set the element's animation-play-state to "running" again. instead, you have to use clever tricks to get a stopped animation to replay. here's one way to do it that we feel is stable and
reliable enough to suggest to you. html content first, let's define the html for a <div> we wish to animate and a button that will play (or replay) the animation. <div class="box"> </div> <div class="runbutton">click me to run the animation</div> css content now we'll define the animation itself using css. some css that's not important (the style of the "run" button itself) isn't shown here, fo...
...".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. if instead you'd like the animation to complete and then come to a stop you have to try a different approach. the main tricks are: make your animation as self-contained as possible. this means you should not
rely on animation-direction: alternate. instead you should explicitly write a keyframe animation that goes through the full animation in one forward repetition. use javascript and clear the animation being used when the animationiteration event fires. the following demo shows how you'd achieve the aforementioned javascript technique: .slidein { animation-duration: 5s; animation-name: slidein;...
Using multi-column layouts - CSS: Cascading Style Sheets
t takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do. unfortunately this is impossible to do with css and html without forcing column breaks at fixed positions, or seve
rely restricting the markup allowed in the text, or using heroic scripting. this limitation is solved by adding new css properties to extend the traditional block layout mode. using columns column count and width two css properties control whether and how many columns will appear: column-count and column-width. the column-count property sets the number of columns to a particular number. e.g., ex...
...dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> css #column_gap { column-count: 5; column-gap: 2em; } result graceful degradation the column properties will just be ignored by non-columns-supporting browsers. therefore it's
relatively easy to create a layout that will display in a single column in those browsers and use multiple columns in supporting browsers. conclusion css3 columns are a layout primitive that will help web developers make the best use of screen real estate. imaginative developers may find many uses for them, especially with the automatic height balancing feature. ...
CSS Multi-column Layout - CSS: Cascading Style Sheets
umns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance. basic example in the following example the column-count property has been applied to the element with a class of container. as the value of column-count is 3, the content is arranged into 3 columns of equal size.
relationship to fragmentation multiple-column layout is closely
related to paged media, in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. therefore the properties now defined in the css fragmentation specification are required in order to control how content breaks between columns. reference multiple-column layout properties column...
... printed page becomes a fragment of an overall document. therefore the properties now defined in the css fragmentation specification are required in order to control how content breaks between columns. reference multiple-column layout properties column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns
related css fragmentation properties break-after break-before break-inside orphans widows guides basic concepts of multicol an overview of the multiple-column layout specification styling columns how to use column rules and manage the spacing between columns. spanning and balancing how to make elements span across all columns and controlling the way columns are filled. handling ov...
Ordering Flex Items - CSS: Cascading Style Sheets
ay of the items the flex-direction property can take one of four values: row column row-reverse column-reverse the first two values keep the items in the same order that they appear in the document source order and display them sequentially from the start line. the second two values reverse the items by switching the start and end lines. remember that the start line
relates to writing modes. the row-
related examples above demonstrate how row and row-reverse work in a left-to-right language such as english. if you are working in a right-to-left language like arabic then row would start on the right, row-reverse on the left. this can seem like a neat way to display things in reverse order however you should be mindful that the items are only visually displayed ...
...property. the card is going to be our flex container, with flex-direction set to column. i then give the date an order of -1. this pulls it up above the heading. these small tweaks are the sort of cases where the order property makes sense. keep the logical order as the reading and tab order of the document, and maintain that in the most accessible and structured fashion. then use order for pu
rely visual design tweaks. when doing so take care that you are not reordering items that could be accessed by the keyboard as a user is tabbing around. especially when using newer layout methods you should ensure that your browser testing includes testing the site using keyboard only, rather than a mouse or touchscreen. you will quickly see if your development choices make getting around the content...
Typical use cases of Flexbox - CSS: Cascading Style Sheets
rowser support, the reason you'd choose to use flexbox is because you want to lay a collection of items out in one direction or another. as you lay out your items you want to control the dimensions of the items in that one dimension, or control the spacing between items. these are the uses that flexbox was designed for. you can read more about the difference between flexbox and css grid layout in
relationship of flexbox to other layout methods, where we discuss how flexbox fits into the overall picture of css layout. in reality we also often use flexbox for jobs that might be better done by grid layout, as a fallback for grid, and also in order to get alignment capabilities. this is something that may well change once box alignment is implemented in block layout. in this guide i look at some...
...bject flexes to take up the remaining space. in the live example below you can see our media object. i have used the alignment properties to align the items on the cross axis to flex-start, and then set the .content flex item to flex: 1. as with our column layout card pattern above, using flex: 1 means this part of the card can grow. some things that you might want to try in this live example
relate to the different ways you might want to constrain the media object in your design. to prevent the image growing too large, add a max-width to the image. as that side of the media object is using the initial values of flexbox it can shrink but not grow, and uses a flex-basis of auto. any width or max-width applied to the image will become the flex-basis. .image img { max-width: 100px; } y...
In Flow and Out of Flow - CSS: Cascading Style Sheets
m document flow. using position: fixed also removes the item from flow, however the offsets are based on the viewport rather than the containing block. when taking an item out of flow with positioning, you will need to manage the possibility of content overlapping. out of flow essentially means that the other elements on your page no longer know that element exists so will not respond to it.
relative positioning and flow if you give an item
relative positioning with position:
relative it remains in flow, however you are then able to use the offset values to push it around. the space that it would have been placed in normal flow is reserved however, as you can see in the example below. when you do anything to remove, or shift an item from where it would be placed in normal flow, you c...
...r ensuring that an element with position: absolute does not sit on top of some other content. for this reason methods which remove elements from being in-flow should be used with understanding of the effect that they have. summary in this guide we have covered the ways to take an element out of flow in order to achieve some very specific types of positioning. in the next guide we will look at a
related issue, that of creating a block formatting context, in formatting contexts explained. see also learn layout: positioning ...
Variable fonts guide - CSS: Cascading Style Sheets
fferent weight and width combinations throughout the publication — giving a much wider range of styles than currently typical on the web (or indeed practical for performance reasons alone). a note about font families, weights, and variants you might notice that we have been talking about having a specific font file for every weight and style (i.e. bold and italic and bold italic), rather than
relying upon the browser to synthesize them. the reason for this is that most typefaces have very specific designs for bolder weights and italics that often include completely different characters (lower-case 'a' and 'g' are often quite different in italics, for example). in order to most accurately reflect the typeface design and avoid differences between browsers and how they may or may not synthes...
...hat the typeface designer imagines. there may be some that become fairly common — or even become registered — but only time will tell. grade grade may become one of the more common custom axes as it has a known history in typeface design. the practice of designing different grades of a typeface was often done in reaction to intended use and printing technique. the term 'grade' refers to the
relative weight or density of the typeface design, but differs from traditional 'weight' in that the physical space the text occupies does not change, so changing the text grade doesn't change the overall layout of the text or elements around it. this makes grade a useful axis of variation as it can be varied or animated without causing reflow of the text itself. font-variation-settings: 'grad' 88; ...
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
do so. logical and physical properties and values css is full of physical positioning keywords – left and right, top and bottom. if we position an item using absolute positioning, we use these physical keywords as offset values to push the item around. in the code snippet below, the item is placed 20 pixels from the top, and 30 pixels from the left of the container: .container { position:
relative; } .item { position: absolute; top: 20px; left: 30px; } <div class="container"> <div class="item">item</div> </div> another place you might see physical keywords in use, is when using text-align: right to align text to the right. there are also physical properties in css. we add margins, padding, and borders using these physical properties of margin-left, padding-left, and so on.
...px; } <div class="container"> <div class="item">item</div> </div> another place you might see physical keywords in use, is when using text-align: right to align text to the right. there are also physical properties in css. we add margins, padding, and borders using these physical properties of margin-left, padding-left, and so on. we call these keywords and properties physical because they
relate to the screen you are looking at. left is always left, no matter what direction your text is running. this can become an issue when developing a site that has to work in multiple languages, including languages that have text starting on the right, rather than the left. browsers are pretty good at dealing with text direction, and you don’t even need to be working in a rtl language to take a ...
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
r example. the key here is to keep testing, a very simple test is to tab around the document. does that order still make sense? check that you do not end up leaping from the top to the bottom of the layout in a peculiar way. if so that would be a sign that you need to address something about the layout. returning to the source if at any time in the design process you find yourself using grid to
relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. the nice thing about using css grid layout is that you should be able to move an item in the source to match the logical order, without needing to make big changes to your layout. this is a huge improvement over a float-based layout for example, where document source ma...
... elements do not. if the subgrid value of display becomes implemented, it would be possible to make these children of a grid item participate in the overall grid layout by declaring the ul element a subgrid. currently the only way to do this is to use display: contents to cause the box generated by the ul to disappear from the dom. for more information about this interaction see the guide on the
relationship of grid layout to other layout methods and the section on display: contents. given that interoperable support for display: contents is limited and we do not yet have subgrids, there is a definite temptation when developing a site using css grid layout to flatten out the markup, to remove semantic elements in order to make it simpler to create a layout. an example would be where some con...
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
rates how we can use a grid layout to rearrange our layout for different breakpoints. in particular i am changing the location of that ad block, as appropriate in my different column setups. i find this named areas method very helpful at a prototyping stage, it is easy to play around with the location of elements. you could always begin to use grid in this way for prototyping, even if you can’t
rely on it fully in production due to the browsers that visit your site. a flexible 12-column layout if you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. we can create this type of system using css grid layout. as a simple example, i am creating a 12-column flexible grid that has 12 1fr-unit colum...
...on the grid at each breakpoint. we have been able to inherit the placement set up for earlier breakpoints – an advantage of working “mobile first”. we are also able to take advantage of grid auto-placement. by keeping elements in a logical order, auto-placement does quite a lot of work for us in placing items onto the grid. in the final example in this guide we will create a layout that enti
rely
relies on auto-placement. a product listing with auto-placement many layouts are essentially sets of “cards” – product listings, image galleries, and so on. a grid can make it very easy to create these listings in a way that is responsive without needing to add media queries to make it so. in this next example i’m combining css grid and flexbox layouts to make a simple product listing ...
CSS Grid Layout - CSS: Cascading Style Sheets
like tables, grid layout enables an author to align elements into columns and rows. however, many more layouts are either possible or easier with css grid than they were with tables. for example, a grid container's child elements could position themselves so they actually overlap and layer, similar to css positioned elements. basic example the example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. items have been placed onto the grid using line-based placement. ...
...ows grid-auto-flow grid grid-row-start grid-column-start grid-row-end grid-column-end grid-row grid-column grid-area row-gap column-gap gap css functions repeat() minmax() fit-content() css data types <flex> glossary entries grid grid lines grid tracks grid cell grid area gutters grid axis grid row grid column guides basic concepts of grid layout
relationship of grid layout to other layout methods layout using line-based placement grid template areas layout using named grid lines auto-placement in css grid layout box alignment in css grid layout css grid, logical values and writing modes css grid layout and accessibility css grid and progressive enhancement realising common layouts using css grid subgrid external resources css...
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
in this guide we take a look at these. 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. this is mostly due to the fact that there are four longhand values each for margin, border, and padding side, plus all the shorthand values. mappings for margins, borders, and padding the specification details mappings for each logical value to a physical counterpart. ...
...green solid border on the top and bottom of the box, and a 4px dotted purple border on the left and right. .box { border-block: 2px solid green; border-inline-width: 4px; border-inline-style: dotted; border-inline-color: rebeccapurple; } note: these two value shorthands shipped in firefox 66, check browser support before using as other browsers may not have implemented them yet. flow
relative border-radius properties the specification has fairly recently added flow-
relative values for the border-radius longhands. these have not yet been implemented by any browser. the below example, in a horizontal writing-mode, would set the top-right border radius to 1em, the bottom-right to 0, the bottom-left to 20px and the top-left to 40px. .box { border-end-start-radius: 1em; border-e...
Stacking context example 2 - CSS: Cascading Style Sheets
cking context are collapsed on their parent. ...
...ackground-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } </style></head> <body> <br /> <div id="div1"><br /> <span class="bold">div #1</span><br /> position:
relative; <div id="div2"><br /> <span class="bold">div #2</span><br /> position: absolute;<br /> z-index: 2; </div> </div> <br /> <div id="div3"><br /> <span class="bold">div #3</span><br /> position:
relative;<br /> z-index: 1; <div id="div4"><br /> <span class="bold">div #4</span><br /> ...
Overview of CSS Shapes - CSS: Cascading Style Sheets
the box. to explore the box values in more detail see our guide covering shapes from box values. shapes from images an interesting way to generate your path is to use an image with an alpha channel — the text will then wrap around the non-transparent parts of the image. this allows the overlay of wrapped content around an image, or the use of an image which is never displayed on the page pu
rely as a method of creating a complex shape without needing to carefully map a polygon. note that images used in this way must be cors compatible, otherwise shape-outside will act as if none had been given as the value, and you will get no shape. in this next example, we have an image with a fully transparent area, and we are using an image as the url value for shape-outside. the shape is created ...
...erted into the document, an empty <div> or <span> perhaps, but our preference is to use generated content. this means we can keep things used for styling inside the css. in this next example, we use generated content to insert an element with height and width of 150px. we can then use basic shapes, box values or even the alpha channel of an image to create a shape for the text to wrap around.
relationship to clip-path the basic shapes and box values used to create shapes are the same as those used as values for clip-path. therefore if you want to create a shape using an image, and also clip away part of that image, you can use the same values. the image below is a square image with a blue background. we have defined a shape using shape-outside: ellipse(40% 50%); and also used clip-path:...
Shapes From Images - CSS: Cascading Style Sheets
hics programme. if i set shape-image-threshold to 0.3 then i see the shape, if i set it to something smaller than 0.2 i do not get the shape. using images with generated content in the above example i have both used the image as the value of shape-outside and also added it to the page. many demos do this as it helps to show the shape we are following, however the shape-outside property is not
related to the image that is displayed on the page and so you do not need to display an image to use an image to create a shape. you do need something to float, but that could be some generated content as in the below example. i am floating generated content and using a larger star image to shape my content without displaying any image on the page. creating shapes using a gradient as a css gradi...
...ide. the linear gradient goes from purple to transparent, so by changing the value of shape-image-threshold i can decide how transparent the pixels need to be that create my shape. you can play with that value in the example below to see how the diagonal line will move across the shape depending on that value. you could also try removing the background image completely, thus using the gradient pu
rely to create the shape and not displaying it on the page at all. in this next example i am using a radial gradient with an ellipse, once again using a transparent part of the gradient to create the shape. you can experiment directly in these live examples, to see how changing the gradient will change the path of your shape. ...
Pseudo-classes - CSS: Cascading Style Sheets
a css pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). for example, :hover can be used to change a button's color when the user's pointer hovers over it. /* any button over which the user's pointer is hovering */ button:hover { color: blue; } pseudo-classes let you apply a style to an element not only in
relation to the content of the document tree, but also in
relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not). note: in contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element. syntax s...
...ined :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where(). changed :empty to behave like :-moz-only-whitespace . no significant change for other pseudo-classes defined in selectors level 3 and html5 (though semantic meaning not taken over). html5 recommendation copies the
relevant section from the canonical (whatwg) html spec. css basic user interface module level 3 recommendation defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, but without the associated semantic meaning. selectors level 3 recommendation defined :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type...
CSS reference - CSS: Cascading Style Sheets
ta type defined for each specified property. style rule examples strong { color: red; } div.menu-bar li:hover > ul { display: block; } for a beginner-level introduction to the syntax of selectors, see our guide on css selectors. be aware that any syntax error in a rule definition invalidates the entire rule. invalid rules are ignored by the browser. note that css rule definitions are enti
rely (ascii) text-based, whereas dom-css / cssom (the rule management system) is object-based. at-rule syntax as the structure of at-rules varies widely, please see at-rule to find the syntax of the specific one you want. keyword index note: the property names in this index do not include the javascript names where they differ from the css standard names. --webkit-line-clampa:activeadditi...
...reate other, more complex selectors. universal selector *, ns|*, *|*, |* type selector elementname class selector .classname id selector #idname attribute selector [attr=value] grouping selectors selector list a, b specifies that both a and b elements are selected. this is a grouping method to select several matching elements. combinators combinators are selectors that establish a
relationship between two or more simple selectors, such as "a is a child of b" or "a is adjacent to b." adjacent sibling combinator a + b specifies that the elements selected by both a and b have the same parent and that the element selected by b immediately follows the element selected by a horizontally. general sibling combinator a ~ b specifies that the elements selected by both a and b shar...
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
sing the background-size property. this article describes how scaling of svg images is handled when using these properties. the algorithm, in summary the algorithm can for the most part be summarized by these four rules. there are some edge cases that aren't covered by these rules, but this covers the majority of cases. if background-size specifies a fixed dimension (that is, percentages and
relative units are fixed by their context), that dimension wins. if the image has an intrinsic ratio (that is, its width:height ratio is constant, such as 16:9, 4:3, 2.39:1, 1:1, and so forth), the rendered size preserves that ratio. if the image specifies a size, and the size isn't modified by constrain or cover, that specified size wins. if none of the above cases are met, the image is rendered ...
...rly, if the image has one dimension specified but no intrinsic ratio, rule 4 applies, and the image is scaled to cover the entire background area. background: url(100px-wide-no-height-or-ratio.svg); background-size: contain; the rendered output looks like this: source: one specified dimension with intrinsic ratio things change when you specify an intrinsic ratio. in this case, rule 1 isn't
relevant, so rule 2 is applied: we try to preserve any intrinsic ratio (while respecting contain or cover). for example, preserving a 3:4 intrinsic aspect ratio for a 300x200 box with contain means drawing a 150x200 background. contain case background: url(100px-height-3x4-ratio.svg); background-size: contain; the rendered output looks like this: notice how the entire image is rendered, fittin...
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
normally it would contain a label and a checkbox. checkbox-label div { color: black; -moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; } <div>lorem</div> firefox checkmenuitem div { color: black; height: 20px; -moz-appearance: checkmenuitem; -webkit-appearance:...
... firefox range-thumb div { color: black; -moz-appearance: range-thumb; -webkit-appearance: range-thumb; } <div>lorem</div> firefox rating-level-indicator div{ color: black; -moz-appearance: rating-level-indicator; -webkit-appearance: rating-level-indicator; } <div>lorem</div> safari
relevancy-level-indicator div{ color: black; -moz-appearance:
relevancy-level-indicator; -webkit-appearance:
relevancy-level-indicator; } <div>lorem</div> safari scale-horizontal div { color: transparent; -moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; } <div>lorem</div> firefox scalet...
background-attachment - CSS: Cascading Style Sheets
nd us a pull request. 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. values fixed the background is fixed
relative to the viewport. even if an element has a scrolling mechanism, the background doesn't move with the element. (this is not compatible with background-clip: text.) local the background is fixed
relative to the element's contents. if the element has a scrolling mechanism, the background scrolls with the element's contents, and the background painting area and background positioning area are r...
...(it is effectively attached to the element's border.) formal definition initial valuescrollapplies toall elements. ...
background - CSS: Cascading Style Sheets
und-attachment: scrollbackground-color: transparentapplies toall elements. ...
...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 specifiedbackground-attachment: as specifiedbackground-color: computed coloranimation typeas each of the properties of the shorthand:background-color: a colorbackground-image: discretebackground-clip: discretebackground-po...
border-image-width - CSS: Cascading Style Sheets
ottom, the second to the left and right. when three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom. when four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise). values <length-percentage> the width of the border, specified as a <length> or a <percentage>. percentages are
relative to the width of the border image area for horizontal offsets and the height of the border image area for vertical offsets. must not be negative. <number> the width of the border, specified as a multiple of the corresponding border-width. must not be negative. auto the width of the border is made equal to the intrinsic width or height (whichever is applicable) of the corresponding border-...
... border-image-slice. if the image does not have the required intrinsic dimension, the corresponding border-width is used instead. formal definition initial value1applies toall elements, except internal table elements when border-collapse is collapse. it also applies to ::first-letter.inheritednopercentagesrefer to the width or height of the border image areacomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples tiling a border image this example creates a border image using the following ".png" file, which is 90 by 90 pixels: thus, each circle in the source image is 30 by 30 pixels. html <p>lore...
Computed value - CSS: Cascading Style Sheets
he value that is transferred from parent to child during inheritance. it is calculated from the specified value by: handling the special values inherit, initial, unset, and revert. doing the computation needed to reach the value described in the "computed value" line in the property's definition table. ...
...ition table. the computation needed to reach a property's computed value typically involves converting
relative values (such as those in em units or percentages) to absolute values. for example, if an element has specified values font-size: 16px and padding-top: 2em, then the computed value of padding-top is 32px (double the font size). however, for some properties (those where percentages are
relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into percentage-computed values. additionally, unitless numbers specified on the line-height property become the computed value, as specified. the
relative values that remain in the computed value become absolute when the used value is determined. note: th...
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
how the children of that box behave. as an example, when we use display: flex we create a block-level container, with flex children. the children are described as participating in a flex formatting context. you can see this if you take a <span> — normally an inline-level element — and apply display: flex to it. the <span> becomes a block-level element. it behaves as block-level things do in
relationship to other boxes in the layout. it’s as if you had applied display: block to the span, however we also get the changed behavior of the children. the live example below has a <span> with display: flex applied. it has become a block-level box taking up all available space in the inline direction. you can now use justify-content: space-between; to put this space between the two flex items.
...lock-level box, which creates a grid formatting context for the direct children. using display: inline-grid will create an inline-level box, which creates a grid formatting context for the children. the two-value syntax as you can see from the above explanation, the display property has gained considerable new powers. in addition to indicating whether something is block-level or inline-level in
relationship to other boxes on the page, it now also indicates the formatting context inside the box it is applied to. in order to better describe this behavior, the display property has been refactored to allow for two values — an outer and inner value — to be set on it, as well as the single values we are used to. this means that instead of setting display: flex to create a block-level box wit...
display - CSS: Cascading Style Sheets
<display-box> these values define whether an element generates display boxes at all. valid <display-box> values: contents these elements don't produce a specific box by themselves. they are replaced by their pseudo-box and their child boxes. please note that the css display level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered pu
rely by css box concepts such as replaced elements. see appendix b: effects of display: contents on unusual elements for more details. due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. see the accessibility concerns section below for more details. none turns off the display of an element so that it has n...
...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 layout methods backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout
relationship to other layout methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid layout grids, logical values and writing modes css grid layout and acces...
<easing-function> - CSS: Cascading Style Sheets
function> css data type denotes a mathematical function that describes how fast one-dimensional values change during animations. this lets you vary the animation's speed over the course of its duration. the easing functions in the cubic-bezier subset of easing functions are often called "smooth" easing functions, because they can be used to smooth down the start and end of the animation. they cor
relate a time ratio to an output ratio, both expressed as <number>s. for these values, 0.0 represents the initial state, and 1.0 represents the final state. depending on the specific function used, the calculated output can sometimes grow to be greater than 1.0 or smaller than 0.0 during the course of an animation. this causes the animation to go farther than the final state, and then return. for ...
... <option>ease</option> <option>ease-in</option> <option>ease-in-out</option> <option>ease-out</option> <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option> <option>cubic-bezier(0, 1.1, 0.8, 4)</option> <option>steps(5, end)</option> <option>steps(3, start)</option> <option>steps(4)</option> </select> </li> </ul> css body > div { position:
relative; height: 100px; } div > div { position: absolute; width: 50px; height: 50px; background-color: blue; background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-radius: 50%; top: 25px; animation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; ...
flex - CSS: Cascading Style Sheets
valent to setting "flex: 0 1 auto". auto the item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. this is equivalent to setting "flex: 1 1 auto". none the item is sized according to its width and height properties. it is fully inflexible: it neither shrinks nor grows in
relation to the flex container. this is equivalent to setting "flex: 0 0 auto". <'flex-grow'> defines the flex-grow of the flex item. negative values are considered invalid. defaults to 1 when omitted. <'flex-shrink'> defines the flex-shrink of the flex item. negative values are considered invalid. defaults to 1 when omitted. <'flex-basis'> defines the flex-basis of the flex item. a preferred s...
...imum content size. to change this, set the item's min-width or min-height. ...
font-size-adjust - CSS: Cascading Style Sheets
/* use the specified font size */ font-size-adjust: none; /* use a font size that makes lowercase letters half the specified font size */ font-size-adjust: 0.5; /* global values */ font-size-adjust: inherit; font-size-adjust: initial; font-size-adjust: unset; the property is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters. ...
...tial valuenoneapplies toall elements. ...
font-variant-position - CSS: Cascading Style Sheets
these glyphs are typically used in <sub> and <sup> elements. ...
...ariant-position: initial; font-variant-position: unset; when the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs. these alternate glyphs share the same em-box and the same baseline as the rest of the font. they are me
rely graphically enhanced, and have no effect on the line-height and other box characteristics. syntax the font-variant-position property is specified as one of the keyword values listed below. values normal deactivates alternate superscript and subscript glyphs. sub activates subscript alternate glyphs. if, in a given run, one such glyph is not available for a character, all the characters...
grid-template-columns - CSS: Cascading Style Sheets
global values */ grid-template-columns: inherit; grid-template-columns: initial; grid-template-columns: unset; values none indicates that there is no explicit grid. any columns will be implicitly generated and their size will be determined by the grid-auto-columns property. <length> a non-negative length, giving the width of the column. <percentage> is a non-negative <percentage> value
relative to the inline size of the grid container. if the size of the grid container depends on the size of its tracks, then the percentage must be treated as auto. the intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage. <flex> is a non-negative dimen...
... explicitly, the sizes of the grid rows/columns will be taken from the parent grid’s definition. the subgrid value is from level 2 of the grid specification and currently only has implementation in firefox 71 and onwards. ...
grid-template-rows - CSS: Cascading Style Sheets
unset; this property may be specified as: either the keyword value none or a <track-list> value or an <auto-track-list> value. values none is a keyword meaning that there is no explicit grid. any rows will be implicitly generated and their size will be determined by the grid-auto-rows property. <length> is a non-negative length. <percentage> is a non-negative <percentage> value,
relative to the block size of the grid container. if the size of the grid container depends on the size of its tracks, then the percentage must be treated as auto. the intrinsic size contributions of the track may be adjusted to the size of the grid container, and increase the final size of the track by the minimum amount that would result in honoring the percentage. <flex> is a non-negative dimen...
...explicitly, the sizes of the grid rows/columns will be taken from the parent grid’s definition. the subgrid value is from level 2 of the grid specification and currently only has implementation in firefox 71 and onwards. ...
grid-template - CSS: Cascading Style Sheets
<string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?where <line-names> = '[' <custom-ident>* ']'...
...<string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?where <line-names> = '[' <custom-ident>* ']'<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-con...
margin-bottom - CSS: Cascading Style Sheets
is interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on non-replaced inline elements, such as <span> or <code>. syntax /* <length> values */ margin-bottom: 10px; /* an absolute length */ margin-bottom: 1em; /*
relative to the text size */ margin-bottom: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-bottom: auto; /* global values */ margin-bottom: inherit; margin-bottom: initial; margin-bottom: unset; the margin-bottom property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> ...
...th */ /* keyword values */ margin-bottom: auto; /* global values */ margin-bottom: inherit; margin-bottom: initial; margin-bottom: unset; the margin-bottom property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage,
relative to the width of the containing block. auto the browser selects a suitable value to use. see margin. formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentag...
margin-inline - CSS: Cascading Style Sheets
the margin-inline css shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. ...
...line css shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. ...
margin-top - CSS: Cascading Style Sheets
e for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on non-replaced inline elements, such as <span> or <code>. syntax /* <length> values */ margin-top: 10px; /* an absolute length */ margin-top: 1em; /*
relative to the text size */ margin-top: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-top: auto; /* global values */ margin-top: inherit; margin-top: initial; margin-top: unset; the margin-top property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the size of the ma...
...container's width */ /* keyword values */ margin-top: auto; /* global values */ margin-top: inherit; margin-top: initial; margin-top: unset; the margin-top property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage,
relative to the width of the containing block. auto the browser selects a suitable value to use. see margin. formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentag...
mask-border-width - CSS: Cascading Style Sheets
, the second to the left and right. when three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom. when four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise). values <length-percentage> the width of the mask border, specified as a <length> or a <percentage>. percentages are
relative to the width of the border area for horizontal offsets and the height of the border area for vertical offsets. must not be negative. <number> the width of the mask border, specified as a multiple of the corresponding border-width. must not be negative. auto the width of the mask border is made equal to the intrinsic width or height (whichever is applicable) of the corresponding mask-bord...
... is made equal to the intrinsic width or height (whichever is applicable) of the corresponding mask-border-slice. if the image does not have the required intrinsic dimension, the corresponding border-width is used instead. formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentages
relative to width/height of the mask border image areacomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typediscrete formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet. when it eventually starts to be supported, i...
mask-border - CSS: Cascading Style Sheets
and:mask-border-mode: alphamask-border-outset: 0mask-border-repeat: stretchmask-border-slice: 0mask-border-source: nonemask-border-width: autoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-border-slice: refer to size of the mask border imagemask-border-width:
relative to width/height of the mask border image areacomputed valueas each of the properties of the shorthand:mask-border-mode: as specifiedmask-border-outset: as specified, but with
relative lengths converted into absolute lengthsmask-border-repeat: as specifiedmask-border-slice: as specifiedmask-border-source: as specified, but with <url> values made absolutemask-border-width: as specified, but wi...
...[ / <'mask-borde...
mask-origin - CSS: Cascading Style Sheets
s the origin position of an image specified by the mask-image css property. for elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes box-decoration-break operates upon to determine the mask positioning area. syntax one or more of the keyword values listed below, separated by commas. ...
...ge css property. for elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes box-decoration-break operates upon to determine the mask positioning area. syntax one or more of the keyword values listed below, separated by commas. values content-box the position is
relative to the content box. padding-box the position is
relative to the padding box. for single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner. border-box the position is
relative to the border box. margin-box the position is
relative to the margin box. fill-box the position is
relative to the object bounding box. stroke-box the position is
relative to the stroke bounding box. view-box uses the neares...
min-block-size - CSS: Cascading Style Sheets
values the min-block-size property takes the same values as the min-width and min-height properties. formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of c...
...ize: 5em; /* <percentage> values */ min-block-size: 10%; /* keyword values */ min-block-size: max-content; min-block-size: min-content; min-block-size: fit-content(20em); /* global values */ min-block-size: inherit; min-block-size: initial; min-block-size: unset; if the writing mode is vertically oriented, the value of min-block-size
relates to the minimum width of the element; otherwise, it
relates to the minimum height of the element. a
related property is min-inline-size, which defines the other dimension of the element. values the min-block-size property takes the same values as the min-width and min-height properties. formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as min-width and min-heig...
min-inline-size - CSS: Cascading Style Sheets
values the min-inline-size property takes the same values as the min-width and min-height properties. formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of ...
... /* <percentage> values */ min-inline-size: 10%; /* keyword values */ min-inline-size: max-content; min-inline-size: min-content; min-inline-size: fit-content(20em); /* global values */ min-inline-size: inherit; min-inline-size: initial; min-inline-size: unset; if the writing mode is vertically oriented, the value of min-inline-size
relates to the minimum height of the element; otherwise, it
relates to the minimum width of the element. a
related property is min-block-size, which defines the other dimension of the element. values the min-inline-size property takes the same values as the min-width and min-height properties. formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-width and min-heig...
mix-blend-mode - CSS: Cascading Style Sheets
{ display: flex; flex: 1 auto; flex-direction: column; height: auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: center; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { position:
relative; background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto; } .r { transform-origin: center; transform: rotate(-30deg); fill: url(#red); } .g { transform-origin: center; transform: rotate(90deg); fill: url(#green); } .b { transform-ori...
...iv> </div> css .circle { width: 80px; height: 80px; border-radius: 50%; mix-blend-mode: screen; position: absolute; } .circle-1 { background: red; } .circle-2 { background: lightgreen; left: 40px; } .circle-3 { background: blue; left: 20px; top: 40px; } .isolate { isolation: isolate; /* without isolation, the background color will be taken into account */ position:
relative; } result using mix-blend-mode with svg svg <svg> <g class="isolate"> <circle cx="40" cy="40" r="40" fill="red"/> <circle cx="80" cy="40" r="40" fill="lightgreen"/> <circle cx="60" cy="80" r="40" fill="blue"/> </g> </svg> css circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* without isolation, the background color will be taken into account */ r...
object-position - CSS: Cascading Style Sheets
the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <position> values */ object-position: center top; object-position: 100px 50px; /* global values */ object-position: inherit; object-position: initial; object-position: unset; values <position> from one to four values that define the 2d position of the element.
relative or absolute offsets can be used. note: the position can be set so that the replaced element is drawn outside its box. 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 <posi...
... ...
offset-anchor - CSS: Cascading Style Sheets
or: bottom 10px right 20px; offset-anchor: right 3em bottom 10px; /* global values */ offset-anchor: inherit; offset-anchor: initial; offset-anchor: unset; values auto offset-anchor is given the same value as the element's transform-origin, unless offset-path is none, in which case it takes its value from offset-position. ...
...nate, to place an item
relative to the edges of an element's box. it can be defined using one to four values. for more specifics, see the <position> and background-position reference pages. note that the 3-value position syntax does not work for any usage of <position>, except for in background(-position). ...
opacity - CSS: Cascading Style Sheets
strictly between 0 and 1 the element is translucent (that is, content behind the element can be seen). 1 (default value) the element is fully opaque (visually solid). description opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. thus, the element and its children all have the same opacity
relative to the element's background, even if they have different opacities
relative to one another. using opacity with a value other than 1 places the element in a new stacking context. if you do not want to apply opacity to child elements, use the background property instead. for example: background: rgba(0, 0, 0, 0.4); accessibility concerns if text opacity is adjusted, it is important to ens...
..., guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial value1.0applies toall elementsinheritednocomputed valuethe specified value, clipped in the range [0,1]animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <div class="light">you can ba
rely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</div> css div { background-color: yellow; } .light { opacity: 0.2; /* ba
rely see the text over the background */ } .medium { opacity: 0.5; /* see the text more clearly over the background */ } .heavy { opacity: 0.9; /* see the text very clearly over the background */ } result ...
padding-block-end - CSS: Cascading Style Sheets
mode, directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ padding-block-end: 10px; /* an absolute length */ padding-block-end: 1em; /* a length
relative to the text size */ /* <percentage> value */ padding-block-end: 5%; /* a padding
relative to the block container's width */ /* global values */ padding-block-end: inherit; padding-block-end: initial; padding-block-end: unset; values the padding-block-end property takes the same values as the padding-left property. description this property corresponds to the padding-top, paddin...
... /* global values */ padding-block-end: inherit; padding-block-end: initial; padding-block-end: unset; values the padding-block-end property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it
relates to padding-block-start, padding-inline-start, and padding-inline-end, which define the other paddings of the element. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p cl...
padding-block-start - CSS: Cascading Style Sheets
e, directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ padding-block-start: 10px; /* an absolute length */ padding-block-start: 1em; /* a length
relative to the text size */ /* <percentage> value */ padding-block-start: 5%; /* a padding
relative to the block container's width */ /* global values */ padding-block-start: inherit; padding-block-start: initial; padding-block-start: unset; values the padding-block-start property takes the same values as the padding-left property. description this property corresponds to the padding-t...
...bal values */ padding-block-start: inherit; padding-block-start: initial; padding-block-start: unset; values the padding-block-start property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it
relates to padding-block-end, padding-inline-start, and padding-inline-end, which define the other paddings of the element. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="examp...
padding-block - CSS: Cascading Style Sheets
the padding-block css shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. ...
...tart and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. /* <length> values */ padding-block: 10px 20px; /* an absolute length */ padding-block: 1em 2em; /*
relative to the text size */ padding-block: 10px; /* sets both start and end values */ /* <percentage> values */ padding-block: 5% 2%; /*
relative to the nearest block container's width */ /* global values */ padding-block: inherit; padding-block: initial; padding-block: unset; these values corresponds to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direction, and text-orientation. constituent properties this property is a shorthand for the follow...
padding-inline-end - CSS: Cascading Style Sheets
ting mode, directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ padding-inline-end: 10px; /* an absolute length */ padding-inline-end: 1em; /* a length
relative to the text size */ /* <percentage> value */ padding-inline-end: 5%; /* a padding
relative to the block container's width */ /* global values */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset; values the padding-inline-end property takes the same values as the padding-left property. description this property corresponds to the padding-top, padd...
... global values */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset; values the padding-inline-end property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it
relates to padding-block-start, padding-block-end, and padding-inline-start, which define the other paddings of the element. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="examp...
padding-inline-start - CSS: Cascading Style Sheets
mode, directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ padding-inline-start: 10px; /* an absolute length */ padding-inline-start: 1em; /* a length
relative to the text size */ /* <percentage> value */ padding-inline-start: 5%; /* a padding
relative to the block container's width */ /* global values */ padding-inline-start: inherit; padding-inline-start: initial; padding-inline-start: unset; values the padding-inline-start property takes the same values as the padding-left property. description this property corresponds to the paddin...
...alues */ padding-inline-start: inherit; padding-inline-start: initial; padding-inline-start: unset; values the padding-inline-start property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it
relates to padding-block-start, padding-block-end, and padding-inline-end, which define the other paddings of the element. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="examp...
padding-inline - CSS: Cascading Style Sheets
the padding-inline css shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. ...
... and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. /* <length> values */ padding-inline: 10px 20px; /* an absolute length */ padding-inline: 1em 2em; /*
relative to the text size */ padding-inline: 10px; /* sets both start and end values */ /* <percentage> values */ padding-inline: 5% 2%; /*
relative to the nearest block container's width */ /* global values */ padding-inline: inherit; padding-inline: initial; padding-inline: unset; constituent properties this property is a shorthand for the following css properties: padding-inline-end padding-inline-start syntax values the padding-inline property takes the same values as the padding-left property. description values for th...
perspective-origin - CSS: Cascading Style Sheets
keywords, the following is also valid */ perspective-origin: y-position x-position; /* global values */ perspective-origin: inherit; perspective-origin: initial; perspective-origin: unset; values x-position indicates the position of the abscissa of the vanishing point. it can have one of the following values: <length-percentage> indicating the position as an absolute length value or
relative to the width of the element. the value may be negative. left, a keyword being a shortcut for the 0 length value. center, a keyword being a shortcut for the 50% percentage value. right, a keyword being a shortcut for the 100% percentage value. y-position indicates the position of the ordinate of the vanishing point. it can have one of the following values: <length-percentage> ...
...ative. left, a keyword being a shortcut for the 0 length value. center, a keyword being a shortcut for the 50% percentage value. right, a keyword being a shortcut for the 100% percentage value. y-position indicates the position of the ordinate of the vanishing point. it can have one of the following values: <length-percentage> indicating the position as an absolute length value or
relative to the height of the element. the value may be negative. top, a keyword being a shortcut for the 0 length value. center, a keyword being a shortcut for the 50% percentage value. bottom, a keyword being a shortcut for the 100% percentage value. formal definition initial value50% 50%applies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed val...
scroll-margin-inline-end - CSS: Cascading Style Sheets
he blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts
relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: ...
...the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most
relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline-end: 1rem; } .scroller > div:nth-child(3) { scroll-margin-inline-end: 2rem;...
scroll-margin-inline-start - CSS: Cascading Style Sheets
he blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts
relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: ...
...e scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most
relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin-values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline-start: 1rem; } .scroller > div:nth-child(3) { scroll-margin-inline-start...
scroll-snap-destination - CSS: Cascading Style Sheets
t; scroll-snap-destination: initial; scroll-snap-destination: unset; syntax values <position> specifies the offset of the snap destination from the start edge of the scroll container’s visual viewport. the first value gives the x coordinate of the snap destination, the second value its y coordinate. ...
...specifies the offset of the snap destination from the start edge of the scroll container’s visual viewport. the first value gives the x coordinate of the snap destination, the second value its y coordinate. ...
shape-margin - CSS: Cascading Style Sheets
in: 60%; /* global values */ shape-margin: inherit; shape-margin: initial; shape-margin: unset; values <length-percentage> sets the margin of the shape to a <length> value or to a <percentage> of the width of the element's containing block. ...
...the containing blockcomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples adding a margin to a polygon html <section> <div class="shape"></div> we are not quite sure of any one thing in biology; our knowledge of geology is
relatively very slight, and the economic laws of society are uncertain to every one except some individual who attempts to set them forth; but before the world was fashioned the square on the hypotenuse was equal to the sum of the squares on the other two sides of a right triangle, and it will be so after this world is dead; and the inhabitant of mars, if he exists, probably knows its truth as we kno...
translate - CSS: Cascading Style Sheets
centage> and single <length> values that specify the x, y, and z axis translation values (respectively) of a 3d translation. equivalent to a translate3d() (3d translation) function. none specifies that no translation should be applied. ...
...translate { translate: 200px 50px; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification. editor's draft initial 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 ...
vertical-align - CSS: Cascading Style Sheets
-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. values for inline elements parent-
relative values these values vertically align the element
relative to its parent element: baseline aligns the baseline of the element with the baseline of its parent. the baseline of some replaced elements, like <textarea>, is not specified by the html specification, meaning that their behavior with this keyword may vary between browsers. sub aligns the baseline of the element with the subscri...
...element with the baseline plus half the x-height of the parent. <length> aligns the baseline of the element to the given length above the baseline of its parent. a negative value is allowed. <percentage> aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property. a negative value is allowed. line-
relative values the following values vertically align the element
relative to the entire line: top aligns the top of the element and its descendants with the top of the entire line. bottom aligns the bottom of the element and its descendants with the bottom of the entire line. for elements that do not have a baseline, the bottom margin edge is used instead. values for table cells baselin...
WAI ARIA Live Regions/API Support - Developer guides
or can get the following object attributes from the event object, if they are defined on some ancestor element (closest ancestor wins): object attribute name possible values default value if not specified meaning aria markup if required container-live "off" | "polite" | "assertive" "off" interruption policy aria-live on ancestor element container-
relevant "[additions] [removals] [text]" | "all" "additions text" what types of mutations are possibly
relevant? 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. aria-
relevant on ancestor element container-busy "t...
... fired on the container object currently marked as busy, once it is no longer busy. this is especially important in atomic regions. the entire atomic region should be presented once when it is finally no longer busy. aria-busy on ancestor element container-atomic "true" | "false" "false" is this change inside a region that should always be presented at once. if yes, member-of
relation will point to the root of the region (see next section) aria-atomic on ancestor element member-of if container-atomic=true, points to an ancestor accessible object (thus it is actually an accessible
relation, not object attribute) not in atomic region if not provided points to the root of the atomic container that this object is in. this will always be an ancestor of the...
Ajax - Developer guides
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, including html or xhtml, css, javascript, dom, xml, xslt, and most importantly the xmlhttprequest object. when these technologies are combined in the ajax model, web applications are able to make quick, incremental updates to the user interface without
reloading the entire browser page. this makes the application faster and more responsive to user actions. although x in ajax stands for xml, json is used more than xml nowadays because of its many advantages such as being lighter and a part of javascript. both json and xml are used for packaging information in the ajax model. documentation getting started this article guides you through the ...
...uest, which originally supported only xml parsing. this feature allows web apps to obtain an html resource as a parsed dom using xmlhttprequest. view all... tools axios promise based http client, which uses xmlhttprequest internally. see also ajax: a new approach to web applications jesse james garrett, of adaptive path, wrote this article in february 2005, introducing ajax and its
related concepts. xmlhttprequest specification whatwg living standard ...
Content categories - Developer guides
every html element is a member of one or more content categories — these categories group elements that share common characteristics. this is a loose grouping (it doesn't actually create a
relationship among elements of these categories), but they help define and describe the categories' shared behavior and their associated rules, especially when you come upon their intricate details. it's also possible for elements to not be a member of any of these categories. there are three types of content categories: main content categories, which describe common rules shared by many elements. form-
related content categories, which describe rules common to form-
related elements. specific content categories, which describe rare categories shared only by a few elements, sometimes only in a...
... main content categories metadata content elements belonging to the metadata content category modify the presentation or the behavior of the rest of the document, set up links to other documents, or convey other out of band information. ...
Constraint validation - Developer guides
at is consistent with what is done on the client side. intrinsic and basic constraints in html5, basic constraints are declared in two ways: by choosing the most semantically appropriate value for the type attribute of the <input> element, e.g., choosing the email type automatically creates a constraint that checks whether the value is a valid e-mail address. by setting values on validation-
related attributes, allowing basic constraints to be described in a simple way, without the need for javascript. semantic input types the intrinsic constraints for the type attribute are: input type constraint description associated violation <input type="url"> the value must be an absolute url, as defined in the url living standard. typemismatch constraint viola...
...et, several values can be set, as a comma-separated list, for this input. if any of these do not satisfy the condition described here, the type mismatch constraint violation is triggered. note that most input types don't have intrinsic constraints, as some are simply barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct default. ...
HTML5 Parser - Developer guides
with the html5 standard, and enables a lot of new functionality as well. the new parser introduces these major improvements: you can now use svg and mathml inline in html5 pages, without xml namespace syntax. parsing is now done in a separate thread from firefox’s main ui thread, improving overall browser responsiveness. calls to innerhtml are a lot faster. dozens of long-standing parser
related bugs are now fixed. the html5 specification provides a more detailed description than previous html standards of how to turn a stream of bytes into a dom tree. this will result in more consistent behavior across browser implementations. in other words, in supporting html5, gecko, webkit, and internet explorer (ie) will behave more consistently with each other. changed parser behaviors som...
...o deal with legacy pages where authors have pasted partial svg fragments into html (who knows why) or used a <math> tag for non-mathml purposes, attempts to nest various common html elements as children of svg elements (without foreignobject) will immediately break out of svg or mathml context. this may make some typos have surprising effects. performance improvement with speculative parsing un
related to the requirements of html5 specification, the gecko 2 parser uses speculative parsing, in which it continues parsing a document while scripts are being downloaded and executed. this results in improved performance compared to older parsers, because most of the time, gecko can complete these tasks in parallel. to best take advantage of speculative parsing, and help your pages to load as qui...
User input and controls - Developer guides
modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example. this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies.
relevant apis and events include touch events, pointer lock api, screen orientation api, fullscreen api, drag & drop and more. user input and controls workflow the following diagram illustrates the typical workflow for implementing user input mechanisms: first of all, you need to decide which input mechanisms you want to cover in your application out of mouse, keyboard, finger touch and so on. once you decided the input mechanisms, yo...
...en) { elem.mozrequestfullscreen(); } else if (elem.webkitrequestfullscreen) { elem.webkitrequestfullscreen(); } note: to find more out about adding fullscreen functionality your application, read our documentation about using fullscreen mode. drag & drop drag & drop allows your application’s users to click and hold the mouse button down over an element, drag it to another location, and
release the mouse button to drop the element there. here is an example that allows a section of content to be dragged. <div draggable="true" ondragstart="event.datatransfer.setdata('text/plain', 'this text may be dragged')">
this text <strong>may</strong> be dragged.
</div> in which we: set the draggable attribute to true on the element that you wish to make draggable add a listener ...
Developer guides
loper guide events refer to two things: a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page; and the naming, characterization, and use of a large number of incidents of different types. ajax ajax is a term that defines a group of technologies allowing web applications to make quick, incremental updates to the user interface without
reloading the entire browser page. this makes the application faster and more responsive to user actions. graphics on the web modern web sites and applications often need to present graphics of varying sophistication. guide to web apis a list of all web apis and what they do. javascript javascript is the powerful scripting language used to create applications for the web. localizations and cha...
... ...
disabled - HTML: Hypertext Markup Language
not mutable, focusable, or even submitted with the form. the user can neither edit nor focus on the control, nor it's form control descendants. if the disabled attribute is specified on a form control, the element and its form control descendants do not participate in constraint validation. often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-
related ones. the disabled attribute is supported by <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> and <input>. this boolean disabled attribute indicates that the user cannot interact with the control or it's descendant controls. if this attribute is not specified, the control inherits its setting from the containing element, for example fieldset; if there is...
...onally, since the elements become immutable, most other attributes, such as pattern, have no effect, until the control is enabled. note: the required attribute is not permitted on inputs with the disabled attribute specified. usability browsers display disabled form controls greyed as disabled form controls are immutable, won't receive focus or any browsing events, like mouse clicks or focus-
related ones, and aren't submitted with the form. if present on a supporting elements, the :disabled pseudo class will match. if the attribute is not included, the :enabled pseudo class will match. if the element doesn't support the disabled attribute, the attribute will have no effect, including not leading to being matched by the :disabled and :enabled pseudo classes. constraint validation if th...
<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
interactive content, palpable content. permitted content zero or more <param> elements, then transparent. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts embedded content. dom interface htmlappletelement attributes align this attribute is used to position the applet on the page
relative to content that might flow around it. the html 4.01 specification defines values of bottom, left, middle, right, and top, whereas microsoft and netscape also might support absbottom, absmiddle, baseline, center, and texttop. alt this attribute causes a descriptive text alternate to be displayed on browsers that do not support java. page designers should also remember that content enclosed ...
...t> element may also be rendered as alternative text. archive this attribute refers to an archived or compressed version of the applet and its associated class files, which might help reduce download time. code this attribute specifies the url of the applet's class file to be loaded and executed. applet filenames are identified by a .class filename extension. the url specified by code might be
relative to the codebase attribute. codebase this attribute gives the absolute or
relative url of the directory where applets' .class files referenced by the code attribute are stored. datafld this attribute, supported by internet explorer 4 and higher, specifies the column name from the data source object that supplies the bound data. this attribute might be used to specify the various <param> e...
<area> - HTML: Hypertext Markup Language
g that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path. "unsafe-url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username). this case is unsafe because it can leak origins and paths from tls-protected resources to insecure origins.
rel for anchors containing the href attribute, this attribute specifies the
relationship of the target object to the link object. the value is a space-separated list of link types values. the values and their semantics will be registered by some authority that might have meaning to the document author. the default
relationship, if no other is given, is void. use this attribute only if the href attri...
... acts the same as _self. _top: show the resource in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). if there is no parent, acts the same as _self. use this attribute only if the href attribute is present. note: in newer browser versions (e.g. firefox 79+) setting target="_blank" on <area> elements implicitly provides the same
rel behavior as setting
rel="noopener". deprecated attributes name define a names for the clickable area so that it can be scripted by older browsers. nohref indicates that no hyperlink exists for the associated area. note: since html5, omitting the href attribute is sufficient. tabindex a numeric value specifying the position of the defined area in the browser tabbing orde...
<aside>: The Aside element - HTML: Hypertext Markup Language
asides are frequently presented as sidebars or call-out boxes. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, sectioning content, palpable content. permitted content flow content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content. ...
..., note, presentation, region, search dom interface htmlelement attributes this element only includes the global attributes. usage notes do not use the <aside> element to tag parenthesized text, as this kind of text is considered part of the main flow. examples using <aside> this example uses <aside> to mark up a paragraph in an article. the paragraph is only indirectly
related to the main article content: <article> <p> the disney movie <cite>the little mermaid</cite> was first
released to theatres in 1989. </p> <aside> <p> the movie earned $87 million during its initial
release. </p> </aside> <p> more info about the movie... </p> </article> specifications specification status comment html living...
<base>: The Document Base URL element - HTML: Hypertext Markup Language
there can be only one <base> element in a document. a document's used base url can be accessed by scripts with document.baseuri. if the document has no <base> elements, then baseuri defaults to location.href. content categories metadata content. permitted content none, it is an empty element. tag omission there must be no closing tag. permitted parents a <head> that doesn't contain another <base> element. ...
...le permitted aria roles no role permitted dom interface htmlbaseelement attributes this element's attributes include the global attributes. if either of the following attributes are specified, this element must come before other elements with attribute values of urls, such as <link>’s href attribute. href the base url to be used throughout the document for
relative urls. absolute and
relative urls are allowed. target a keyword or author-defined name of the default browsing context to show the results of navigation from <a>, <area>, or <form> elements without explicit target attributes. the following keywords have special meanings: _self (default): show the result in the current browsing context. _blank: show the result in a new, unnamed browsi...
<dfn>: The Definition element - HTML: Hypertext Markup Language
ting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role term permitted aria roles any dom interface htmlelement attributes this element's attributes include the global attributes. in html5, the title attribute has special meaning, as noted below. usage notes there are some not-enti
rely-obvious aspects to using the <dfn> element. we examine those here. specifying the term being defined the term being defined is identified following these rules: if the <dfn> element has a title attribute, the value of the title attribute is considered to be the term being defined. the element must still have text within it, but that text may be an abbreviation (perhaps using <abbr>) or anot...
...> (<strong><dfn id="definition-dfn"><dfn></dfn></strong>) is used to indicate the term being defined within the context of a definition phrase or sentence.</p> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. graece donan, latine voluptatem vocant. confecta res esset. duo reges: constructio interrete. scrupulum, inquam, abeunti; </p> <p>negare non possum. dat enim intervalla et
relaxat. quonam modo? equidem e cn. quid de pythagora? in schola desinis. </p> <p>ubi ut eam caperet aut quando? cur iustitia laudatur? aperiendum est igitur, quid sit voluptas; quid enim? non est igitur voluptas bonum. urgent tamen et nihil remittunt. quid enim possumus hoc agere divinius? </p> <p>because of all of that, we decided to use the <code><a href="#definition-dfn"><dfn></a></code> ...
<dl>: The Description List element - HTML: Hypertext Markup Language
useful when using microdata, or when global attributes apply to a whole group, or for styling purposes. <dl> <div> <dt>name</dt> <dd>godzilla</dd> </div> <div> <dt>born</dt> <dd>1952</dd> </div> <div> <dt>birthplace</dt> <dd>japan</dd> </div> <div> <dt>color</dt> <dd>green</dd> </div> </dl> notes do not use this element (nor <ul> elements) to me
rely create indentation on a page. although it works, this is a bad practice and obscures the meaning of description lists. to change the indentation of a description term, use the css margin property. accessibility concerns each screen reader announces <dl> content differently. some screen readers, such as voiceover on ios, will not announce that <dl> content is a list. because of this, make sure...
...d obscures the meaning of description lists. to change the indentation of a description term, use the css margin property. accessibility concerns each screen reader announces <dl> content differently. some screen readers, such as voiceover on ios, will not announce that <dl> content is a list. because of this, make sure each list item's content is written in such a way that it communicates its
relationship to the other list items in the list grouping. codepen - html buddies: dt & dd specifications specification status comment html living standardthe definition of '<dl>' in that specification. living standard html5the definition of '<dl>' in that specification. recommendation html 4.01 specificationthe definition of '<dl>' in...
<em>: The Emphasis element - HTML: Hypertext Markup Language
s of its contents, while the <i> element represents text that is set off from the normal prose, such a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (the title of a work, such as the name of a book or movie, should use <cite>.) this means the right one to use depends on the situation. neither is for pu
rely decorational purposes, that's what css styling is for. an example for <em> could be: "just do it already!", or: "we had to do something about it". a person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress. an example for <i> could be: "the queen mary sailed last night". here, there is no added emphasis or importance on the word "queen mary...
...nal purposes, that's what css styling is for. an example for <em> could be: "just do it already!", or: "we had to do something about it". a person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress. an example for <i> could be: "the queen mary sailed last night". here, there is no added emphasis or importance on the word "queen mary". it is me
rely indicated that the object in question is not a queen named mary, but a ship named queen mary. another example for <i> could be: "the word the is an article". example the <em> element is often used to indicate an implicit or explicit contrast. <p> in html 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content. </p> result specifications ...
<font> - HTML: Hypertext Markup Language
starting with html 4, html does not convey styling information anymore (outside the <style> element or the style attribute of each element). for any new web development, styling should be written using css only. ...
... face this attribute contains a comma-separated list of one or more font names. the document text in the default style is rendered in the first font face that the client's browser supports. if no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system. size this attribute specifies the font size as either a numeric or
relative value. numeric values range from 1 to 7 with 1 being the smallest and 3 the default. it can be defined using a
relative value, like +2 or -3, which set it
relative to the value of the size attribute of the <basefont> element, or
relative to 3, the default value, if none does exist. dom interface this element implements the htmlfontelement interface. ...
<i>: The Idiomatic Text element - HTML: Hypertext Markup Language
this is no longer true, as these tags now define semantics rather than typographic appearance. a browser will typically still display the contents of the <i> element in italic type, but is, by definition, no longer required to do so. to display text in italic type, author...
... of the <i> element in italic type, but is, by definition, no longer required to do so. to display text in italic type, authors should use the css font-style property. be sure the text in question is not actually more appropriately marked up with another element. use <em> to indicate stress emphasis. use <strong> to indicate importance, seriousness, or urgency. use <mark> to indicate
relevance. use <cite> to mark up the name of a work, such as a book, play, or song. use <dfn> to mark up the defining instance of a term. examples this example demonstrates using the <i> element to mark text that is in another language. <p>the latin phrase <i>veni, vidi, vici</i> is often mentioned in music, art, and literature.</p> result specifications specification ...
<input type="date"> - HTML: Hypertext Markup Language
he form control, and can't be styled or shown effectively. label { display: flex; align-items: center; } span::after { padding-left: 5px; } input:invalid + span::after { content: '✖'; } input:valid+span::after { content: '✓'; } important: client-side form validation is no substitute for validating on the server. it's easy for someone to modify the html, or bypass your html enti
rely and submit the data directly to your server. if your server fails to validate the received data, disaster could strike with data that is badly-formatted, too large, of the wrong type, etc. handling browser support as mentioned, the major problem with date inputs at the time of writing is browser support. as an example, the date picker on firefox for android looks like this: unsupporting br...
...lidity"></span> </label> <p> <button>submit</button> </p> </form> if you submit it, you'll see that the browser displays an error and highlights the input as invalid if your entry doesn't match the pattern ####-##-## (where # is a digit from 0 to 9). of course, this doesn't stop people from entering invalid dates, or incorrect formats. so we still have a problem. span { position:
relative; } span::after { right: -18px; position: absolute; } input:invalid + span::after { content: '✖'; } input:valid + span::after { content: '✓'; } at the moment, the best way to deal with dates in forms in a cross-browser way is to have the user enter the day, month, and year in separate controls, or to use a javascript library such as jquery date picker. examples in this exam...
<input type="file"> - HTML: Hypertext Markup Language
bkitdirectory attribute, if present, indicates that only directories should be available to be selected by the user in the file picker interface. see htmlinputelement.webkitdirectory for additional details and examples. note: though originally implemented only for webkit-based browsers, webkitdirectory is also usable in microsoft edge as well as firefox 50 and later. however, even though it has
relatively broad support, it is still not standard and should not be used unless you have no alternative. unique file type specifiers a unique file type specifier is a string that describes a type of file that may be selected by the user in an <input> element of type file. each unique file type specifier may take one of the following forms: a valid case-insensitive filename extension, starting...
...tmodified a number specifying the date and time at which the file was last modified, in milliseconds since the unix epoch (january 1, 1970 at midnight). lastmodifieddate a date object representing the date and time at which the file was last modified. this is deprecated and should not be used. use lastmodified instead. size the size of the file in bytes. type the file's mime type. webkit
relativepath a string specifying the file's path
relative to the base directory selected in a directory picker (that is, a file picker in which the webkitdirectory attribute is set). this is non-standard and should be used with caution. note: you can set as well as get the value of htmlinputelement.files in all modern browsers; this was most recently added to firefox, in version 57 (see bug 138...
<input type="password"> - HTML: Hypertext Markup Language
the element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("*") or a dot ("•"). this character will vary depending on the user agent and os. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ote: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. size the size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be
relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use). this does not set a limit on how many characters the user can enter into the field. it only specifies approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribut...
<input type="search"> - HTML: Hypertext Markup Language
ote: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. size the size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be
relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use). this does not set a limit on how many characters the user can enter into the field. it only specifies approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribut...
...in many cases, users should just be allowed to search for anything, but there are a few cases to consider, such as searches against data of a known format. note: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely. it's also possible for someone to simply bypass your html enti
rely and submit the data directly to your server. if your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database. a note on styling there are useful pseudo-classes available for styl...
<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
content categories metadata content. if the itemprop attribute is present: flow content, phrasing content. permitted content none, it is an empty element. tag omission as it is a void element, the start tag must be present and the end tag must not be present. permitted parents <meta charset>, <meta http-equiv>: a <head> element. if the http-equiv is not an encoding declaration, it can also be inside a <noscript> element, itself inside a <head> element. ...
...nts served with a text/html mime type — not in documents served with an xml mime type. default-style sets the name of the default css style sheet set. x-ua-compatible if specified, the content attribute must have the value "ie=edge". user agents are required to ignore this pragma. refresh this instruction specifies: the number of seconds until the page should be
reloaded - only if the content attribute contains a positive integer. the number of seconds until the page should redirect to another - only if the content attribute contains a positive integer followed by the string ';url=', and a valid url. accessibility concerns pages set with a refresh value run the risk of having the time interval being too short. people navigating with the aid o...
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
orresponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. usage notes the <strong> element is for content that is of "strong importance," including things of great seriousness or urgency (such as warnings). this could be a sentence that is of great importance to the whole page, or you could me
rely try to point out that some words are of greater importance compared to nearby content. typically this element is rendered by default using a bold font weight. however, it should not be used simply to apply bold styling; use the css font-weight property for that purpose. use the <b> element to draw attention to certain text without indicating a higher level of importance. use the <em> element to...
...ml 5 defines <strong> as representing "strong importance for its contents." this is an important distinction to make. while <em> is used to change the meaning of a sentence as spoken emphasis does ("i love carrots" vs. "i love carrots"), <strong> is used to give portions of a sentence added importance (e.g., "warning! this is very dangerous.") both <strong> and <em> can be nested to increase the
relative degree of importance or stress emphasis, respectively. examples basic example <p>before proceeding, <strong>make sure you put on your safety goggles</strong>.</p> the resulting output: labeling warnings <p><strong>important:</strong> before proceeding, make sure you add plenty of butter.</p> this results in: specifications specification status comment ...
<table>: The Table element - HTML: Hypertext Markup Language
bles • w3c wai web accessibility tutorials scoping rows and columns the scope attribute on header elements is redundant in simple contexts, because scope is inferred. however, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. in complex tables, scope can be specified so as to provide necessary information about the cells
related to a header. example <table> <caption>color names and values</caption> <tbody> <tr> <th scope="col">name</th> <th scope="col">hex</th> <th scope="col">hsla</th> <th scope="col">rgba</th> </tr> <tr> <th scope="row">teal</th> <td><code>#51f6f6</code></td> <td><code>hsla(180, 90%, 64%, 1)</code></td> <td><code>rgba(81, 246, 246, 1...
...ted tables assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way. this is typically indicated by the presence of the colspan and rowspan attributes. ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller,
related tables that don't have to
rely on using the colspan and rowspan attributes. in addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing. if the table cannot be broken apart, use a combination of the id and headers attributes...
<th> - HTML: Hypertext Markup Language
ative integer value that indicates for how many rows the cell extends. its default value is 1; if its value is set to 0, it extends until the end of the table section (<thead>, <tbody>, <tfoot>, even if implicitly defined), that the cell belongs to. values higher than 65534 are clipped down to 65534. scope this enumerated attribute defines the cells that the header (defined in the <th>) element
relates to. it may have the following values: row: the header
relates to all cells of the row it belongs to. col: the header
relates to all cells of the column it belongs to. rowgroup: the header belongs to a rowgroup and
relates to all of its cells. these cells can be placed to the right or the left of the header, depending on the value of the dir attribute in the <table> element. colgroup...
... auto the default value when this attribute is not specified is auto. deprecated attributes align obsolete since html5 this enumerated attribute specifies how the cell content's horizontal alignment will be handled. possible values are: left: the content is aligned to the left of the cell. ...
<tr>: The Table Row element - HTML: Hypertext Markup Language
hich sets the character to align the cells in each of the row's columns on (each row's centering that uses the same character gets aligned with others using the same character . typical values for this include a period (".") or comma (",") when attempting to align numbers or monetary values. if align is not set to char, this attribute is ignored. this attribute is not only obsolete, but was ra
rely implemented anyway. to achieve the same effect as the char attribute, set the css text-align property to the same string you would specify for the char property, such as text-align: ".". charoffobsolete since html5 a domstring indicating the number of characters on the tail end of the column's data should be displayed after the alignment character specified by the char attribute. for ...
...s—are in the first few lines of the code above. note the use of rowspan on to make the "name", "id", and "balance" headers occupy two rows instead of just one, and the use of colspan to make the "membership dates" header cell span across two columns. once again, we haven't touched the css. table { border: 1px solid black; } th, td { border: 1px solid black; } result the output is enti
rely unchanged, despite the addition of useful contextual information under the hood: basic styling as is the case with all parts of a table, you can change the appearance of a table row and its contents using css. any styles applied to the <tr> element will affect the cells within the row unless overridden by styles applied to those cells. let's apply a basic style to the table to adjust the ty...
hidden - HTML: Hypertext Markup Language
for example, it can be used to hide elements of the page that can't be used until the login process has been completed. browsers won't render elements with the hidden attribute set. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the hidden attribute must not be used to hide content just from one presentation. ...
...and elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit. elements and scripts may, however, refer to elements that are hidden in other contexts. for example, it would be incorrect to use the href attribute to link to a section marked with the hidden attribute. if the content is not applicable or
relevant, then there is no reason to link to it. it would be fine, however, to use the aria aria-describedby attribute to refer to descriptions that are themselves hidden. while hiding the descriptions implies that they are not useful on their own, they could be written in such a way that they are useful in the specific context of being referenced from the element that they describe. similarly, a c...
title - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. some typical uses: labeling <iframe> elements for assistive technology providing a programmatically associated label for an <input> element as a fallback for a real <label> labeling controls in data tables additional semantics are attached to the title attributes of the <link>, <abbr>, <input>, and <menuitem> elements. ...
...s: html <p>newlines in <code>title</code> should be taken into account, like <abbr title="this is a multiline title">example</abbr>.</p> result title attribute inheritance if an element has no title attribute, then it inherits it from its parent node, which in turn may inherit it from its parent, and so on. if this attribute is set to the empty string, it means its ancestors' titles are ir
relevant and shouldn't be used in the tooltip for this element. html <div title="cooltip"> <p>hovering here will show “cooltip”.</p> <p title="">hovering here will show nothing.</p> </div> result accessibility concerns use of the title attribute is highly problematic for: people using touch-only devices people navigating with keyboards people navigating with assistive technology s...
Microdata - HTML: Hypertext Markup Language
whatwg html standard and is used to nest metadata within existing content on web pages. search engines and web crawlers can extract and process microdata from a web page and use it to provide a richer browsing experience for users. search engines benefit greatly from direct access to this structured data because it allows search engines to understand the information on web pages and provide more
relevant results to users. microdata uses a supporting vocabulary to describe an item and name-value pairs to assign values to its properties. microdata is an attempt to provide a simpler way of annotating html elements with machine-readable tags than the similar approaches of using rdfa and classic microformats. at a high level, microdata consists of a group of name-value pairs. the groups are call...
...for some purposes, an ad-hoc vocabulary is adequate. for others, a vocabulary will need to be designed. where possible, authors are encouraged to re-use existing vocabularies, as this makes content re-use easier. localization in some cases, search engines covering specific regions may provide locally-specific extensions of microdata. for ...
Microformats - HTML: Hypertext Markup Language
microformats that provides a simpler way of annotating html structured syntax & vocabularies than previous approaches of using rdfa and microdata which require learning new attributes. microformats are supported by all major search engines. search engines benefit greatly from direct access to this structured data because it allows them to understand the information on web pages and provide more
relevant results to users. in addition to being machine-readable, their format is designed to be easily read by humans. to create a microformats object, h-* class names are used in the class attribute. to add a property to an object, the p-*, u-*, dt-*, e-* class names are used on one of the object's descendants. there are open source parsing libraries for most languages for microformats2. how...
...ings 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-
related.</p> </div> properties property description p-name event name (or title) p-summary short summary of the event dt-start datetime the event starts dt-end datetime the event ends p-location where the event takes place, optionally embedded h-card parsed h-event example <div class="h-event"> <h2 class="p-name">in...
Data URLs - HTTP
bottom</a>?arg=val this represents an html resource whose contents are: lots of text...<p><a name="bottom">bottom</a>?arg=val syntax the format for data urls is very simple, but it's easy to forget to put a comma before the "data" segment, or to incorrectly encode the data into base64 format. formatting in html a data url provides a file within a file, which can potentially be very wide
relative to the width of the enclosing document. as a url, the data should be formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise when using base64 encoding. length limitations although firefox supports data urls of essentially unlimited length, browsers are not required to support any particular maximum length of data. for example, the opera 11 browser ...
...ring (page-specific parameters, with the syntax <url>?parameter-data) with a data url will just include the query string in the data the url represents. security issues a number of security issues (e.g. phishing) have been associated with data urls, and navigating to them in the browser's top level. to mitigate such issues, top-level navigation to data:// urls has been blocked in firefox 59+ (
release version, nightly/beta from 58), and we hope to see other browsers follow suit soon. see blocking top-level navigations to data urls for firefox 58 for more details. specifications specification title rfc 2397 the "data" url scheme ...
MIME types (IANA media types) - HTTP
r common examples include application/pdf, application/pkcs8, and application/zip. audio list at iana audio or music data. examples include audio/mpeg, audio/vorbis. example reserved for use as a placeholder in examples showing how to use mime types. these should never be used outside of sample code listings and documentation. example can also be used as a subtype; for instance, in an example
related to working with audio on the web, the mime type audio/example can be used to indicate that the type is a placeholder and should be replaced with an appropriate one when using the code in the real world. font list at iana font/typeface data. common examples include font/woff, font/ttf, and font/otf. image list at iana image or graphical data including both bitmap and vector still images as...
... ...
CORS errors - HTTP
setting up such a cors configuration isn't necessarily easy and may present some challenges. in these pages, we'll look into some common cors error messages and how to resolve them. ...
...setting up such a cors configuration isn't necessarily easy and may present some challenges. in these pages, we'll look into some common cors error messages and how to resolve them. ...
Compression in HTTP - HTTP
whatever the intermediate nodes are, they leave the body untouched. all modern browsers and servers do support it and the only thing to negotiate is the compression algorithm to use. these algorithm are optimized for text. in the 1990s, compression technology was advancing at a rapid pace and numerous successive algorithms have been added to the set of possible choices. nowadays, only two are
relevant: gzip, the most common one, and br the new challenger. to select the algorithm to use, browsers and servers use proactive content negotiation. the browser sends an accept-encoding header with the algorithm it supports and its order of precedence, the server picks one, uses it to compress the body of the response and uses the content-encoding header to tell the browser the algorithm it has c...
...ompression. to do this, http uses a mechanism similar to the content negotiation for end-to-end compression: the node transmitting the request advertizes its will using the te header and the other node chooses the adequate method, applies it, and indicates its choice with the transfer-encoding header. in practice, hop-by-hop compression is transparent for the server and the client, and is ra
rely used. te and transfer-encoding are mostly used to send a response by chunks, allowing to start transmitting a resource without knowing its length. note that using transfer-encoding and compression at the hop level is so rare that most servers, like apache, nginx, or iis, have no easy way to configure it. such configuration usually happens at the proxy level. ...
Connection management in HTTP/1.x - HTTP
in its infancy, http used a single model to handle such connections. ...
...ecutive nodes, which is hop-by-hop and not end-to-end. the model used in connections between a client and its first proxy may differ from the model between a proxy and the destination server (or any intermediate proxies). the http headers involved in defining the connection model, like connection and keep-alive, are hop-by-hop headers with their values able to be changed by intermediary nodes. a
related topic is the concept of http connection upgrades, wherein an http/1.1 connection is upgraded to a different protocol, such as tls/1.0, websocket, or even http/2 in cleartext. this protocol upgrade mechanism is documented in more detail elsewhere. short-lived connections the original model of http, and the default one in http/1.0, is short-lived connections. each http request is completed on...
Content negotiation - HTTP
nd a privacy risk (http fingerprinting) as several representations of a given resource are sent, shared caches are less efficient and server implementations are more complex. the accept header the accept header lists the mime types of media resources that the agent is willing to process. it is comma-separated lists of mime types, each combined with a quality factor, a parameter indicating the
relative degree of preference between the different mime types. the accept header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an html page or an image, a video, or a script: it is different when fetching a document entered in the address bar or an element linked via an <img>, <video> or <audio> element. browsers are free to use the value o...
...é for instance. once a user has overridden the server-chosen language, a site should no longer use language detection and should stick with the explicitly-chosen language. in other words, only entry pages of a site should select the proper language using this header. the user-agent header though there are legitimate uses of this header for selecting content, it is considered bad practice to
rely on it to define what features are supported by the user agent. the user-agent header identifies the browser sending the request. this string may contain a space-separated list of product tokens and comments. a product token is a name followed by a '/' and a version number, like firefox/4.0.1. there may be as many of them as the user-agent wants. a comment is a free string delimited by parenth...
Accept-Charset - HTTP
the content-type response header, usually in a charset= parameter. browsers usually don't send this header, as the default value for each resource is usually correct and transmitting it would allow fingerprinting. if the server cannot serve any character encoding from this request header, it can theoretically send back a 406 not acceptable error code. but for a better user experience, this is ra
rely done and the accept-charset header is ignored. in early versions of http/1.1, a default character encoding was defined: iso-8859-1. this is no longer recommended, and now each content-type may have its own default. utf-8 is now well-supported and the overwhelmingly preferred character encoding. to guarantee better privacy through less configuration-based entropy, all browsers omit the accept-...
...ader name yes syntax accept-charset: <charset> // multiple types, weighted with the quality value syntax: accept-charset: utf-8, iso-8859-1;q=0.5 directives <charset> a character encoding name, like utf-8 or iso-8859-15. * any charset not mentioned elsewhere in the header; * is used as a wildcard. ;q=<weight> any encoding is placed in an order of preference, expressed using a
relative quality value called the weight. examples accept-charset: iso-8859-1 accept-charset: utf-8, iso-8859-1;q=0.5 accept-charset: utf-8, iso-8859-1;q=0.5, *;q=0.1 specifications specification title rfc 7231, section 5.3.3: accept-charset hypertext transfer protocol (http/1.1): semantics and context ...
Cache-Control - HTTP
is the only directive you need in preventing cached responses on modern browsers. max-age=0 is already implied. setting must-revalidate does not make sense because in order to go through revalidation you need the response to be stored in a cache, which no-store prevents. expiration max-age=<seconds> the maximum amount of time a resource is considered fresh. unlike expires, this directive is
relative to the time of the request. s-maxage=<seconds> overrides max-age or the expires header, but only for shared caches (e.g., proxies). ignored by private caches. max-stale[=<seconds>] indicates the client will accept a stale response. an optional value in seconds indicates the upper limit of staleness the client will accept. min-fresh=<seconds> indicates the client wants a response that w...
.... the seconds value indicates how long the client will accept a stale response. see "keeping things fresh with stale-while-revalidate" for more information. stale-if-error=<seconds> indicates the client will accept a stale response if the check for a fresh one fails. the seconds value indicates how long the client will accept the stale response after the initial expiration. revalidation and
reloading must-revalidate indicates that once a resource becomes stale, caches must not use their stale copy without successful validation on the origin server. proxy-revalidate like must-revalidate, but only for shared caches (e.g., proxies). ignored by private caches. immutable indicates that the response body will not change over time. the resource, if unexpired, is unchanged on the server...
CSP: style-src - HTTP
g or trailing whitespace. see unsafe inline script for an example. in csp 2.0, this applied only to inline scripts. csp 3.0 allows it in the case of script-src for external scripts. ...
...//example.com/ the following stylesheets are blocked and won't load: <link href="https://not-example.com/styles/main.css"
rel="stylesheet" type="text/css" /> <style> #inline-style { background: red; } </style> <style> @import url("https://not-example.com/styles/print.css") print; </style> as well as styles loaded using the link header: link: <https://not-example.com/styles/stylesheet.css>;
rel=stylesheet inline style attributes are also blocked: <div style="display:none">foo</div> as well as styles that are applied in javascript by setting the style attribute directly, or by setting csstext: document.queryselector('div').setattribute('style', 'display:none;'); document.queryselector('div').style.csstext = 'display:none;'; however, styles properties that are set directly on the el...
Large-Allocation - HTTP
to be performed, in megabytes. examples large-allocation: 0 large-allocation: 500 troubleshooting errors the large-allocation header throws warnings or error messages when used incorrectly. you'll encounter them in the web console. this page was loaded in a new process due to a large-allocation header. this message means that the browser saw the large-allocation header, and was able to
reload the page into a new process which should have more available contiguous memory. a large-allocation header was ignored due to the load being triggered by a non-get request. when a post request is used to load a document, that load cannot currently be redirected into a new process. this error is displayed when loading a document with a large-allocation header with a non-get http method. this c...
...ned tab or window. it can occur in these situations: the document with the large-allocation header was loaded in an <iframe>. firefox cannot move an iframe into a new process currently, so the document must load in the current process. the document with the large-allocation header was loaded in a window which was opened by window.open(), <a target="_blank"> or other similar methods without
rel="noopener" or the "noopener" feature being set. these windows must remain in the same process as their opener, as they can communicate, meaning that we cannot allow them to switch processes. the document with the large-allocation header has opened another window with window.open(), <a target="_blank"> or other similar methods without
rel="noopener" or the "noopener" feature being set. this is f...
Pragma - HTTP
the pragma http/1.0 general header is an implementation-specific header that may have various effects along the request-response chain. it is used for backwards compatibility with http/1.0 caches where the cache-control http/1.1 header is not yet present. note: pragma is not specified for http responses and is therefore not a
reliable replacement for the general http/1.1 cache-control header, although it does behave the same as cache-control: no-cache, if the cache-control header field is omitted in a request. use pragma only for backwards compatibility with http/1.0 clients. header type general header, but response behavior is not specified and thus implementation-specific. forbidden header name no cors-safelisted response header yes syntax pr...
...lity with http/1.0 clients. header type general header, but response behavior is not specified and thus implementation-specific. forbidden header name no cors-safelisted response header yes syntax pragma: no-cache directives no-cache same as cache-control: no-cache. forces caches to submit the request to the origin server for validation before
releasing a cached copy. examples pragma: no-cache specifications specification title rfc 7234, section 5.4: pragma hypertext transfer protocol (http/1.1): caching ...
Referrer-Policy - HTTP
ferrer-policy header does not share this misspelling. referrer-policy: no-referrer referrer-policy: no-referrer-when-downgrade referrer-policy: origin referrer-policy: origin-when-cross-origin referrer-policy: same-origin referrer-policy: strict-origin referrer-policy: strict-origin-when-cross-origin referrer-policy: unsafe-url directives no-referrer the referer header will be omitted enti
rely. no referrer information is sent along with requests. no-referrer-when-downgrade (default) this is the default behavior if no policy is specified, or if the provided value is invalid. the origin, path, and querystring of the url are sent as a referrer when the protocol security level stays the same (http→http, https→https) or improves (http→https), but isn't sent to less secure destinati...
...policies inside html. for example, you can set the referrer policy for the entire document with a <meta> element with a name of referrer: <meta name="referrer" content="origin"> or set it for individual requests with the referrerpolicy attribute on <a>, <area>, <img>, <iframe>, <script>, or <link> elements: <a href="http://example.com" referrerpolicy="origin"> alternatively, a noreferrer link
relation on an a, area, or link element can be set: <a href="http://example.com"
rel="noreferrer"> integration with css css can fetch resources referenced from stylesheets. these resources follow a referrer policy as well: external css stylesheets use the default policy (no-referrer-when-downgrade), unless it's overwritten via a referrer-policy http header on the css stylesheet’s response. f...
Sec-Fetch-Site - HTTP
this can happen when user had initiated this request by, e.g. ...
...this can happen when user had initiated this request by, e.g. directly entering a url in the address bar, opening a bookmark, or draging-and-dropping a file into the browser window. examples todo specifications specification title fetch metadata request headers the sec-fetch-site http request header ...
User-Agent - HTTP
for historical reasons, almost every browser today sends it. platform describes the native platform the browser is running on (windows, mac, linux, android, etc.), and if it's a mobile phone. firefox os phones simply say mobile — the web is the platform. note that platform can consist of multiple "; "-separated tokens. see below for further details and examples. rv:geckoversion indicates the
release version of gecko (such as "17.0"). in recent browsers, geckoversion is the same as firefoxversion. gecko/geckotrail indicates that the browser is based on gecko. (on desktop, geckotrail is always the fixed string 20100101.) firefox/firefoxversion indicates the browser is firefox, and provides the version (such as "17.0"). examples mozilla/5.0 (windows nt 6.1; win64; x64; rv:47.0) gecko/2...
...illa/5.0 (x11; linux x86_64) applewebkit/537.36 (khtml, like gecko) chrome/51.0.2704.103 safari/537.36 opera ua string the opera browser is also based on the blink engine, which is why it almost looks the same, but adds "opr/<version>". examples mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (khtml, like gecko) chrome/51.0.2704.106 safari/537.36 opr/38.0.2220.41 older, presto-based opera
releases used: opera/9.80 (macintosh; intel mac os x; u; en) presto/2.2.15 version/10.00 opera/9.60 (windows nt 6.0; u; en) presto/2.1.1 safari ua string in this example, the user agent string is mobile safari’s version. it contains the word "mobile". examples mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/13.1.1 mobile/15e148 safari/6...
451 Unavailable For Legal Reasons - HTTP
easons client error response code indicates that the user requested a resource that is not available due to legal reasons, such as a web page for which a legal action has been issued. status 451 unavailable for legal reasons example this example response is taken from the ietf rfc (see below) and contains a reference to monty python's life of brian. note: the link header might also contain a
rel="blocked-by"
relation identifying the entity and implementing blockage, not any other entity mandating it. any attempt to identify the entity ultimately responsible for the resource being unavailable belongs in the response body, not in the
rel="blocked-by" link. this includes the name of the person or organization that made a legal demand resulting in the content's removal. http/1.1 451 unavai...
..., not any other entity mandating it. any attempt to identify the entity ultimately responsible for the resource being unavailable belongs in the response body, not in the
rel="blocked-by" link. this includes the name of the person or organization that made a legal demand resulting in the content's removal. ...
HTTP
ication between web browsers and web servers, but it can also be used for other purposes. http follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response. http is a stateless protocol, meaning that the server does not keep any data (state) between two requests. though often based on a tcp/ip layer, it can be used on any
reliable transport layer, that is, a protocol that doesn't lose messages silently like udp does. rudp — the
reliable update of udp — is a suitable alternative. tutorials learn how to use http with guides and tutorials. overview of http the basic features of the client-server protocol: what it can do and its intended uses. http cache caching is very important for fast web sites. this art...
... load for a given page. with a few exceptions, policies mostly involve specifying server origins and script endpoints. tools & resources helpful tools and resources for understanding and debugging http. firefox developer tools network monitor mozilla observatory a project designed to help developers, system administrators, and security professionals configure their sites safely and secu
rely. redbot tools to check your cache-
related headers how browsers work a very comprehensive article on browser internals and request flow through http protocol. a must-read for any web developer. ...
CSS Houdini
up does a lot of work to ensure every feature is performant, handles all edge cases, and considers security, privacy, and accessibility. as you extend css with houdini, make sure to keep these considerations in mind, and start small before moving on to more ambitious projects. the houdini apis below you can find links to the main reference pages covering the apis that fall under the houdini umb
rella, along with links to guides to help you if you need guidance in learning how to use them. start by reading houdini, an introduction — this provides a brief history of houdini and an overview of its many features. css parser api an api exposing the css parser more directly, for parsing arbitrary css-like languages into a mildly typed representation. no guide or reference has currentl...
...und, border, or content via the paint() css function. css painting api reference css painting api guide worklets an api for running scripts in various stages of the rendering pipeline independent of the main javascript execution environment. worklets are conceptually similar to web workers, and are called by and extend the rendering engine. worklets reference other topics
related topics which may be of interest, since they can be used in tandem with houdini apis in interesting ways. composite scrolling and animation ...
JavaScript data types and data structures - JavaScript
then null is shown; object : typeof instance === "object". special non-data but structural type for any constructed object instance also used as data structures: new object, new array, new map, new set, new weakmap, new set, new date and almost everything made with new keyword; function : a non-data structure, though it also answers for typeof operator: typeof instance === "function". this is me
rely a special shorthand for functions, though every function constructor is derived from object constructor. keep in mind the only valuable purpose of typeof operator usage is checking the data type. if we wish to check any structural type derived from object it is pointless to use typeof for that, as we will always receive "object". the indeed proper way to check what sort of object we are using ...
...alues. keys are strings (or symbols), and values can be anything. this makes objects a natural fit for hashmaps. functions are regular objects with the additional capability of being callable. dates when representing dates, the best choice is to use the built-in date utility in javascript. indexed collections: arrays and typed arrays arrays are regular objects for which there is a particular
relationship between integer-key-ed properties and the length property. additionally, arrays inherit from array.prototype, which provides to them a handful of convenient methods to manipulate arrays. for example, indexof (searching a value in the array) or push (adding an element to the array), and so on. this makes arrays a perfect candidate to represent lists or sets. typed arrays are new to java...
Indexed collections - JavaScript
+ 1). remember, javascript array indexes are 0-based: they start at 0, not 1. this means that the length property will be one more than the highest index stored in the array: let cats = [] cats[30] = ['dusty'] console.log(cats.length) // 31 you can also assign to the length property. writing a value that is shorter than the number of stored items truncates the array. ...
... const arr = [1, 2, 3]; arr.property = "value"; console.log(arr.property); // logs "value" arrays and regular expressions when an array is the result of a match between a regular expression and a string, the array returns properties and elements that provide information about the match. an array is the return value of regexp.exec(), string.match(), and string.split(). for inf...
Loops and iteration - JavaScript
his expression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity. this expression can also declare variables. the conditionexpression expression is evaluated. if the value of conditionexpression is true, the loop statements execute. if the value of condition is false, the for loop terminates. (if the condition expression is omitted enti
rely, the condition is assumed to be true.) the statement executes. to execute multiple statements, use a block statement ({ ... }) to group those statements. if present, the update expression incrementexpression is executed. control returns to step 2. example in the example below, the function contains a for statement that counts the number of selected options in a scrolling list (a <select> e...
...inue statement the continue statement can be used to restart a while, do-while, for, or label statement. when you use continue without a label, it terminates the current iteration of the innermost enclosing while, do-while, or for statement and continues execution of the loop with the next iteration. in contrast to the break statement, continue does not terminate the execution of the loop enti
rely. in a while loop, it jumps back to the condition. in a for loop, it jumps to the increment-expression. when you use continue with a label, it applies to the looping statement identified with that label. the syntax of the continue statement looks like the following: continue [label]; example 1 the following example shows a while loop with a continue statement that executes when the value o...
Deprecated and obsolete features - JavaScript
you should work to remove their use from your code. regexp properties the following properties are deprecated. ...
...ring.prototype.match, and string.prototype.replace are deprecated. string.prototype.substr probably won't be removed anytime soon, but it's defined in annex b of the ecma-262 standard, whose introduction states: "… programmers should not use or assume the existence of these features and behaviours when writing new ecmascript code. …" obsolete features these obsolete features have been enti
rely removed from javascript and can no longer be used as of the indicated version of javascript. object property description __count__ returns the number of enumerable properties directly on a user-defined object. __parent__ points to an object's context. object.prototype.eval() evaluates a string of javascript code in the context of the specified ob...
Array.prototype.fill() - JavaScript
ence that object. polyfill if (!array.prototype.fill) { object.defineproperty(array.prototype, 'fill', { value: function(value) { // steps 1-2. if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this); // steps 3-5. var len = o.length >>> 0; // steps 6-7. ...
... object.defineproperty(array.prototype, 'fill', { value: function(value) { // steps 1-2. if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this); // steps 3-5. var len = o.length >>> 0; // steps 6-7. var start = arguments[1]; var
relativestart = start >> 0; // step 8. var k =
relativestart < 0 ? math.max(len +
relativestart, 0) : math.min(
relativestart, len); // steps 9-10. var end = arguments[2]; var
relativeend = end === undefined ? len : end >> 0; // step 11. var finalvalue =
relativeend < 0 ? math.max(len +
relativeend, 0) : math.min(
relativeend, len); // step 12. while (k < finalvalu...
Date.prototype.toLocaleDateString() - JavaScript
returns a string with a language sensitive representation of the date portion of this date. the new locales and options arguments let applications specify the language whose formatting conventions should be used and allow to customize the behavior of the function. in older implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation dependent. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax dateobj.tolocaledatestring([locales [, options]]) parameters the locales and options arguments customize the behavior of the function ...
...ve-examples and send us a pull request. syntax dateobj.tolocaledatestring([locales [, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose formatting conventions should be used. in implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation dependent. see the intl.datetimeformat() constructor for details on these parameters and how to use them. the default value for each date-time component property is undefined, but if the weekday, year, month, day properties are all undefined, then year, month, and day are assumed to be "numeric". return value a string representing the date portion of the given date instance ac...
Date.prototype.toLocaleString() - JavaScript
the tolocalestring() method returns a string with a language sensitive representation of this date. the new locales and options arguments let applications specify the language whose formatting conventions should be used and customize the behavior of the function. in older implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation-dependent. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax dateobj.tolocalestring([locales[, options]]) parameters the locales and options arguments customize the behavior of the function and l...
...ractive-examples and send us a pull request. syntax dateobj.tolocalestring([locales[, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose formatting conventions should be used. in implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation dependent. see the intl.datetimeformat() constructor for details on these parameters and how to use them. the default value for each date-time component property is undefined. but, if the weekday, year, month, and day properties are all undefined, then year, month, and day are assumed to be "numeric". return value a string representing the given date according to language-spec...
Date.prototype.toLocaleTimeString() - JavaScript
() method returns a string with a language sensitive representation of the time portion of this date. the new locales and options arguments let applications specify the language whose formatting conventions should be used and customize the behavior of the function. in older implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation dependent. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax dateobj.tolocaletimestring([locales[, options]]) parameters the locales and options arguments customize the behavior of the function a...
...ive-examples and send us a pull request. syntax dateobj.tolocaletimestring([locales[, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose formatting conventions should be used. in implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation dependent. see the intl.datetimeformat() constructor for details on these parameters and how to use them. the default value for each date-time component property is undefined, but if the hour, minute, second properties are all undefined, then hour, minute, and second are assumed to be "numeric". return value a string representing the time portion of the given date instance acc...
Date - JavaScript
e heart of a date object is utc, the basic methods to fetch the date and time or its components all work in the local (i.e. host system) time zone and offset. it should be noted that the maximum date is not of the same value as the maximum safe integer (number.max_safe_integer is 9,007,199,254,740,991). instead, it is defined in ecma-262 that a maximum of ±100,000,000 (one hundred million) days
relative to january 1, 1970 utc (that is, april 20, 271821 bce ~ september 13, 275760 ce) can be represented by the standard date object (equivalent to ±8,640,000,000,000,000 milliseconds). date format and time zone conversions there are a number of methods available to obtain a date in various formats, as well as to perform time zone conversions. particularly useful are the functions that output ...
... get the number of seconds since the ecmascript epoch let seconds = math.floor(date.now() / 1000) in this case, it's important to return only an integer—so a simple division won't do. it's also important to only return actually elapsed seconds. (that's why this code uses math.floor(), and not math.round().) specifications ...
Function.prototype.apply() - JavaScript
will actually add that array as a single element, instead of adding the elements individually. so you end up with an array inside an array. what if that is not what you want? concat does have the desired behaviour in this case, but it does not append to the existing array—it instead creates and returns a new array. but you wanted to append to the existing array... so what now? write a loop? su
rely not? apply to the rescue! const array = ['a', 'b']; const elements = [0, 1, 2]; array.push.apply(array, elements); console.info(array); // ["a", "b", 0, 1, 2] using apply and built-in functions clever usage of apply allows you to use built-in functions for some tasks that would probably have otherwise been written by looping over the array values. as an example, here are math.max/math.min,...
...n object (similar to java). 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. function.prototype.construct = function(aargs) { let onew = object.create(this.prototype); this.apply(onew, aargs); return onew; }; note: the object.create() method used above is
relatively new. for alternative methods, please consider one of the following approaches: using object.__proto__: function.prototype.construct = function (aargs) { let onew = {}; onew.__proto__ = this.prototype; this.apply(onew, aargs); return onew; }; using closures: function.prototype.construct = function(aargs) { let fconstructor = this, fnewconstr = function() { fconstructor.ap...
Function.prototype.bind() - JavaScript
the partial implementation creates functions that do not have immutable "poison pill" caller and arguments properties that throw a typeerror upon get, set, or deletion. (this could be added if the implementation supports object.definep...
...function and the number of pre-specified arguments—may return a non-zero length. the partial implementation creates bound functions whose name property is not derived from the original function name. according to ecma-262, name of the returned bound function should be "bound " + name of target function (note the space character). if you choose to use this partial implementation, you must not
rely on those cases where behavior deviates from ecma-262, 5th edition! thankfully, these deviations from the specification ra
rely (if ever) come up in most coding situations. if you do not understand any of the deviations from the specification above, then it is safe in this particular case to not worry about these noncompliant deviation details. if it's absolutely necessary and performance is not ...
Function.name - JavaScript
'oops!'); } may be compressed to: function a() {}; let b = new a(); if (b.constructor.name === 'foo') { console.log("'foo' is an instance of 'foo'"); } else { console.log('oops!'); } in the uncompressed version, the program runs into the truthy-branch and logs "'foo' is an instance of 'foo'". whereas, in the compressed version it behaves differently, and runs into the else-branch. if you
rely on function.name, like in the example above, make sure your build pipeline doesn't change function names, or don't assume a function to have a particular name. examples function statement name the name property returns the name of a function statement. function dosomething() {} dosomething.name; // "dosomething" function constructor name functions created with the syntax new function(...
...ance.constructor.name); // logs function name() you may also see from the es5 syntax example that in chrome or firefox our static definition of foo.name becomes writable. the built-in definition in the absence of a custom static definition is read-only: foo.name = 'hello'; console.log(foo.name); // logs "hello" if class foo has a static name() property but "foo" if not. therefore you may not
rely on the built-in function.name property to always hold a class's name. symbols as function names if a symbol is used a function name and the symbol has a description, the method's name is the description in square brackets. let sym1 = symbol("foo"); let sym2 = symbol(); let o = { [sym1]: function(){}, [sym2]: function(){} }; o[sym1].name; // "[foo]" o[sym2].name; // "" specifications ...
Intl - JavaScript
.listformat() constructor for objects that enable language-sensitive list formatting. intl.locale() constructor for objects that represents a unicode locale identifier. intl.numberformat() constructor for objects that enable language-sensitive number formatting. intl.pluralrules() constructor for objects that enable plural-sensitive formatting and language-specific rules for plurals. intl.
relativetimeformat() constructor for objects that enable language-sensitive
relative time formatting. static methods intl.getcanonicallocales() returns canonical locale names. 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 ...
...and lower case for everything else. for example: "hi": hindi (language) "de-at": german (language) as used in austria (region) "zh-hans-cn": chinese (language) written in simplified characters (script) as used in china (region) "en-emodeng": english (language) in the "early modern english" dialect (variant) the subtags identifying languages, scripts, regions (including countries), and (ra
rely used) variants in unicode bcp 47 locale identifiers are registered in the iana language subtag registry. this registry is periodically updated over time, and implementations may not always be up to date, so be careful not to
rely too much on tags being universally supported. bcp 47 also allows for extensions, each consisting of a single digit or letter (other than "x") and one or more two- to ...
Object.isFrozen() - JavaScript
ke non-writable object.isfrozen(nonwritable); // === false // changing that property to non-configurable // then makes the object frozen. object.defineproperty(nonwritable, 'e', { configurable: false }); // make non-configurable object.isfrozen(nonwritable); // === true // a non-extensible object with a non-configurable // but still writable property also isn't frozen. ...
...then makes the object frozen. object.defineproperty(nonwritable, 'e', { configurable: false }); // make non-configurable object.isfrozen(nonwritable); // === true // a non-extensible object with a non-configurable // but still writable property also isn't frozen. var nonconfigurable = {
release: 'the kraken!' }; object.preventextensions(nonconfigurable); object.defineproperty(nonconfigurable, '
release', { configurable: false }); object.isfrozen(nonconfigurable); // === false // changing that property to non-writable // then makes the object frozen. object.defineproperty(nonconfigurable, '
release', { writable: false }); object.isfrozen(nonconfigurable); // === true // a non-extensible object with a configurable // accessor property isn't frozen. var accessor = { get food() { return 'y...
Set - JavaScript
console.log([...myset]) // will show you exactly the same array as myarray remove duplicate elements from the array // use to...
...ray) myset.has('value1') // returns true // use the spread operator to transform a set into an array. ...
String.prototype.fontsize() - JavaScript
css properties. syntax str.fontsize(size) parameters size an integer between 1 and 7, a string representing a signed integer between 1 and 7. return value a string containing a <font> html element. description when you specify size as an integer, you set the font size of str to one of the 7 defined sizes. when you specify size as a string such as "-2", you adjust the font size of str
relative to the size set in the <basefont> tag. examples using fontsize() the following example uses string methods to change the size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(7)); // <font size="7">hello, world</fontsize> ...
... ...
WeakRef - JavaScript
ef takes careful thought, and it's best avoided if possible. constructor weakref() creates a new weakref object. instance methods weakref.prototype.deref() returns the weakref object's target object, or undefined if the target object has been reclaimed. avoid where possible correct use of weakref takes careful thought, and it's best avoided if possible. it's also important to avoid
relying on any specific behaviors not guaranteed by the specification. when, how, and whether garbage collection occurs is down to the implementation of any given javascript engine. any behavior you observe in one engine may be different in another engine, in another version of the same engine, or even in a slightly different situation with the same version of the same engine. garbage collection is a...
...get object will not be reclaimed until the end of the current javascript job (including any promise reaction jobs that run at the end of a script job). that is, you can only "see" an object get reclaimed between turns of the event loop. this is primarily to avoid making the behavior of any given javascript engine's garbage collector apparent in code — because if it were, people would write code
relying on that behavior, which would break when the garbage collector's behavior changed. (garbage collection is a hard problem; javascript engine implementers are constantly refining and improving how it works.) if multiple weakrefs have the same target, they're consistent with one another. the result of calling deref on one of them will match the result of calling deref on another of them (in the...
WebAssembly.CompileError() constructor - JavaScript
era for androidsafari on iossamsung internetnode.jscompileerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Instance() constructor - JavaScript
idopera for androidsafari on iossamsung internetnode.jsinstance() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Instance.prototype.exports - JavaScript
refox for androidopera for androidsafari on iossamsung internetnode.jsexportschrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.LinkError() constructor - JavaScript
dopera for androidsafari on iossamsung internetnode.jslinkerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Memory() constructor - JavaScript
roidopera for androidsafari on iossamsung internetnode.jsmemory() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0shared flagchrome full support 74edge ...
WebAssembly.Memory.prototype.buffer - JavaScript
irefox for androidopera for androidsafari on iossamsung internetnode.jsbufferchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Memory.prototype.grow() - JavaScript
dfirefox for androidopera for androidsafari on iossamsung internetnode.jsgrowchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Module() constructor - JavaScript
roidopera for androidsafari on iossamsung internetnode.jsmodule() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Module.customSections() - JavaScript
or androidopera for androidsafari on iossamsung internetnode.jscustomsectionschrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Module.exports() - JavaScript
refox for androidopera for androidsafari on iossamsung internetnode.jsexportschrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Module.imports() - JavaScript
refox for androidopera for androidsafari on iossamsung internetnode.jsimportschrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.RuntimeError() constructor - JavaScript
era for androidsafari on iossamsung internetnode.jsruntimeerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table() constructor - JavaScript
droidopera for androidsafari on iossamsung internetnode.jstable() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table.prototype.get() - JavaScript
idfirefox for androidopera for androidsafari on iossamsung internetnode.jsgetchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table.prototype.grow() - JavaScript
dfirefox for androidopera for androidsafari on iossamsung internetnode.jsgrowchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table.prototype.length - JavaScript
irefox for androidopera for androidsafari on iossamsung internetnode.jslengthchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table.prototype.set() - JavaScript
idfirefox for androidopera for androidsafari on iossamsung internetnode.jssetchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.compile() - JavaScript
refox for androidopera for androidsafari on iossamsung internetnode.jscompilechrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.instantiate() - JavaScript
x for androidopera for androidsafari on iossamsung internetnode.jsinstantiatechrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.validate() - JavaScript
efox for androidopera for androidsafari on iossamsung internetnode.jsvalidatechrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
parseInt() - JavaScript
sion in the process. this is because trailing non-numeric values, including "n", are discarded. octal interpretations with no radix although discouraged by ecmascript 3 and forbidden by ecmascript 5, many implementations interpret a numeric string beginning with a leading 0 as octal. the following may have an octal result, or it may have a decimal result. always specify a radix to avoid this un
reliable behavior. parseint('0e0') // 0 parseint('08') // 0, because '8' is not an octal digit. the ecmascript 5 specification of the function parseint no longer allows implementations to treat strings beginning with a 0 character as octal values. ecmascript 5 states: the parseint function produces an integer value dictated by interpretation of the contents of the string argument according t...
... 5 states: the parseint function produces an integer value dictated by interpretation of the contents of the string argument according to the specified radix. leading whitespace in string is ignored. if radix is undefined or 0, it is assumed to be 10 except when the number begins with the character pairs 0x or 0x, in which case a radix of 16 is assumed. this differs from ecmascript 3, which me
rely discouraged (but allowed) octal interpretation. many implementations have not adopted this behavior as of 2013. and, because older browsers must be supported, always specify a radix. a stricter parse function it is sometimes useful to have a stricter way to parse integers. regular expressions can help: function filterint(value) { if (/^[-+]?(\d+|infinity)$/.test(value)) { return numbe...
Greater than (>) - JavaScript
rator (>) returns true if the left operand is greater than the right operand, and false otherwise. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax x > y description the operands are compared using the abstract
relational comparison algorithm. see the documentation for the less than operator for a summary of this algorithm. examples string to string comparison console.log("a" > "b"); // false console.log("a" > "a"); // false console.log("a" > "3"); // true string to number comparison console.log("5" > 3); // true console.log("3" > 3); // false console.log("3" > 5)...
... ...
Greater than or equal (>=) - JavaScript
rns true if the left operand is greater than or equal to the right operand, and false otherwise. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax x >= y description the operands are compared using the abstract
relational comparison algorithm. see the documentation for the less than operator for a summary of this algorithm. examples string to string comparison console.log("a" >= "b"); // false console.log("a" >= "a"); // true console.log("a" >= "3"); // true string to number comparison console.log("5" >= 3); // true console.log("3" >= 3); // true console.log("3" >= 5); //...
... ...
Less than (<) - JavaScript
perator (<) returns true if the left operand is less than the right operand, and false otherwise. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax x < y description the operands are compared using the abstract
relational comparison algorithm, which is roughly summarised below: first, objects are converted to primitives using symbol.toprimitive. if both values are strings, they are compared as strings, based on the values of the unicode code points they contain. otherwise javascript attempts to convert non-numeric types to numeric values: boolean values true and false are converted to 1 and 0 res...
... ...
Less than or equal (<=) - JavaScript
eturns true if the left operand is less than or equal to the right operand, and false otherwise. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax x <= y description the operands are compared using the abstract
relational comparison algorithm. see the documentation for the less than operator for a summary of this algorithm. examples string to string comparison console.log("a" <= "b"); // true console.log("a" <= "a"); // true console.log("a" <= "3"); // false string to number comparison console.log("5" <= 3); // false console.log("3" <= 3); // true console.log("3" <= 5); /...
... ...
instanceof - JavaScript
in unexpected results. for instance, [] instanceof window.frames[0].array will return false, because array.prototype !== window.frames[0].array and arrays inherit from the former. this may not make sense at first, but for scripts dealing with multiple frames or windows, and passing objects from one context to another via functions, this will be a valid and strong issue. for instance, you can secu
rely check if a given object is, in fact, an array using array.isarray(myobj) for example, checking if a nodes is a svgelement in a different context, you can use mynode instanceof mynode.ownerdocument.defaultview.svgelement. note for mozilla developers: in code using xpcom, instanceof has special effect: obj instanceof xpcominterface (e.g. components.interfaces.nsifile) calls obj.queryinterface(...
... ...
this - JavaScript
/ 'this', the second is an array whose // members are used as the arguments in the function call add.apply(o, [10, 20]); // 34 note that in non–strict mode, with call and apply, if the value passed as this is not an object, an attempt will be made to convert it to an object. values null and undefined become the global object. primitives like 7 or 'foo' will be converted to an object using the
related constructor, so the primitive number 7 is converted to an object as if by new number(7) and the string 'foo' to an object as if by new string('foo'), e.g. function bar() { console.log(object.prototype.tostring.call(this)); } bar.call(7); // [object number] bar.call('foo'); // [object string] bar.call(undefined); // [object global] the bind method ecmascript 5 introduced function.pr...
...ode. 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()). ...
JavaScript reference - JavaScript
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...else switch throw try...catch declarations var let const...
... primary expressionsthis function class function* yield yield* async function await [] {} /ab+c/i ( ) null left-hand-side expressions property accessors new new.target super ...obj increment & decrement a++ a-- ++a --a unary operators delete void typeof + - ~ ! ...
JavaScript
eb apis and dom. the standard for javascript is ecmascript. as of 2012, all modern browsers fully support ecmascript 5.1. older browsers support at least ecmascript 3. on june 17, 2015, ecma international published the sixth major version of ecmascript, which is officially called ecmascript 2015, and was initially referred to as ecmascript 6 or es6. since then, ecmascript standards are on yearly
release cycles. this documentation refers to the latest draft version, which is currently ecmascript 2020. do not confuse javascript with the java programming language. both "java" and "javascript" are trademarks or registered trademarks of oracle in the u.s. and other countries. however, the two programming languages have a very different syntax, semantic, and use. looking to become a front-end w...
...with short lessons and interactive tests, guided by automated assessment. the first 40 lessons are free, and the complete course is available for a small one-time payment. togetherjs collaboration made easy. by adding togetherjs to your site, your users can help each other out on a website in real-time! stack overflow stack overflow questions tagged with "javascript". javascript versions and
release notes browse javascript's feature history and implementation status. jsfiddle edit javascript, css, html and get live results. use external resources and collaborate with your team online. plunker plunker is an online community for creating, collaborating on and sharing your web development ideas. edit your javascript, css, html files and get live results and file structure. jsbin js...
scope - Web app manifests
type string mandatory no the scope member is a string that defines the navigation scope of this web application's application context. it restricts what web pages can be viewed while the manifest is applied. if the user navigates outside the scope, it reverts to a normal web page inside a browser tab or window. if the scope is a
relative url, the base url will be the url of the manifest. ...
... the scope member is a string that defines the navigation scope of this web application's application context. it restricts what web pages can be viewed while the manifest is applied. if the user navigates outside the scope, it reverts to a normal web page inside a browser tab or window. if the scope is a
relative url, the base url will be the url of the manifest. ...
Animation performance and frame rate - Web Performance
sight to diagnose and fix performance problems. if you want to play along, the demo website is here. it looks like this: it has two controls: a button to start/stop the animation, and a radio group to choose to animate using margin, or to animate using transform. there are a number of elements, and we've added a linear-gradient background and a box-shadow to each element, because they are both
relatively expensive effects to paint. there's also a video version of this walkthrough: animating using margin leaving the "use margin" option set, start the animation, open the performance tool, and make a recording. you'll only need to record a few seconds. open up the first recording. exactly what you'll see depends a lot on your machine and system load, but it will be something like this: ...
...ighted a paint operation, and the box on the right tells us it took 13.11ms. with only 16.7ms in our total budget, it's not surprising we are missing a consistently high frame rate. you can experiment with this: try removing the box shadow using the page inspector, and see how that affects paint time. but next, we'll see how using transform instead of margin eliminates those expensive paints enti
rely. animating using transform now switch the radio button in the web page to "use transform", and make a new recording. it will look something like this: waterfall overview compared with the version that uses margin, we're seeing a lot less green and a lot more pink, which could be either layout or style recalculation. frame rate compared with the version that uses margin, this is looki...
CSS and JavaScript animation performance - Web Performance
components: a style describing the css animation, and a set of key frames that indicate the start and end states of the animation's style, as well as possible intermediate points. see using css animations for more details. in terms of performance, there is no difference between implementing an animation with css transitions or animations. both of them are classified under the same css-based umb
rella in this article. requestanimationframe the requestanimationframe() api provides an efficient way to make animations in javascript. the callback function of the method is called by the browser before the next repaint on each frame. compared to settimeout()/setinterval(), which need a specific delay parameter, requestanimationframe() is much more efficient. developers can create an animation by...
... ...
Critical rendering path - Web Performance
is complete, layout occurs, defining the location and size of all the render tree elements. once complete, the page is rendered, or 'painted' on the screen. document object model dom construction is incremental. the html response turns into tokens which turns into nodes which turn into the dom tree. a single dom node starts with a starttag token and ends with an endtag token. nodes contain all
relevant information about the html element. the information is described using tokens. nodes are connected into a dom tree based on token hierarchy. if another set of starttag and endtag tokens come between a set of starttag and endtags, you have a node inside a node, which is how we define the hierarchy of the dom tree. the greater the number of nodes, the longer the following events in the critic...
...cluded in the render tree. if there's a display: none; set on an element, neither it, nor any of its descendants, are in the render tree. layout once the render tree is built, layout becomes possible. layout is dependent on the size of screen. the layout step determines where and how the elements are positioned on the page, determining the width and height of each element, and where they are in
relation to each other. what is the width of an element? block level elements, by definition, have a default width of 100% of the width of their parent. an element with a width of 50%, will be half of the width of its parent. unless otherwise defined, the body has a width of 100%, meaning it will be 100% of the width of the viewport. this width of the device impacts layout. the viewport meta tag de...
Progressive web app structure - Progressive web apps (PWAs)
ut it. responsive: responsive web design also applies to progressive web apps, as both are mainly for mobile devices. there are so many varied devices with browsers — it's important to prepare your website so it works on different screen sizes, viewports or pixel densities, using technologies like viewport meta tag, css media queries, flexbox, and css grid. different concept: streams an enti
rely different approach to server- or client-side rendering can be achieved with the streams api. with a little help from service workers, streams can greatly improve the way we parse content. the app shell model requires all the resources to be available before the website can start rendering. it's different with html, as the browser is actually streaming the data already and you can see when the e...
...itle> <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 ...
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
two apis, one goal the push api and notifications api are two separate apis, but they work well together when you want to provide engaging functionality in your app. ...
...wn in the notification, delay defines a delay in seconds until the notification will be shown, and ttl is the time-to-live setting that keeps the notification available on the server for a specified amount of time, also defined in seconds. now, onto the next javascript file. server.js the server part is written in node.js and needs to be hosted somewhere suitable, which is a subject for an enti
rely separate article. we will only provide a high-level overview here. the web-push module is used to set the vapid keys, and optionally generate them if they are not available yet. const webpush = require('web-push'); if (!process.env.vapid_public_key || !process.env.vapid_private_key) { console.log("you must set the vapid_public_key and vapid_private_key "+ "environment variables. you can...
Progressive web apps (PWAs)
lly speaking it should have the following features: secure contexts (https), one or more service workers, and a manifest file. secure contexts (https) the web application must be served over a secure network. being a secure site is not only a best practice, but it also establishes your web application as a trusted site especially if users need to make secure transactions. most of the features
related to a pwa such as geolocation and even service workers are available only once the app has been loaded using https. service workers a service worker is a script that allows intercepting and control of how a web browser handles its network requests and asset caching. with service workers, web developers can create
reliably fast web pages and offline experiences. manifest file a json file th...
... make pwas installable with a properly-configured web manifest, and how the user can then install the pwa with the "add to home screen" feature of their browser.how to make pwas re-engageable using notifications and pushhaving the ability to cache the contents of an app to work offline is a great feature. allowing the user to install the web app on their home screen is even better. ...
gradientUnits - SVG: Scalable Vector Graphics
hat the attributes represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill or stroke property) and then applying the transform specified by attribute gradienttransform. percentages represent values
relative to the current svg viewport. objectboundingbox this value indicates that the user coordinate system for the attributes is established using the bounding box of the element to which the gradient is applied and then applying the transform specified by attribute gradienttransform. percentages represent values
relative to the bounding box for the object. with this value and gradienttransform...
...cular to the gradient vector in object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). when the object's bounding box is not square, the gradient normal which is initially perpendicular to the gradient vector within object bounding box space may render non-perpendicular
relative to the gradient vector in user space. if the gradient vector is parallel to one of the axes of the bounding box, the gradient normal will remain perpendicular. this transformation is due to application of the non-uniform scaling transformation from bounding box space to user space. radialgradient for <radialgradient>, gradientunits defines the coordinate system used for the attributes cx,...
kernelUnitLength - SVG: Scalable Vector Graphics
dinate, respectively, in the surface normal calculation formulas. the first number is the x value. the second number is the y value. if the y value is not specified, it defaults to the same value as x. by specifying value(s) for kernelunitlength, the kernel becomes defined in a scalable, abstract coordinate system. if the attribute is not specified, the x and y values represent very small deltas
relative to a given position, which might be implemented in some cases as one pixel in the intermediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable. if a negative or zero value is specified the default value will be used instead. value <number-optional-number> default value pixel in offscreen bitmap animatable ...
...dinate, respectively, in the surface normal calculation formulas. the first number is the x value. the second number is the y value. if the y value is not specified, it defaults to the same value as x. by specifying value(s) for kernelunitlength, the kernel becomes defined in a scalable, abstract coordinate system. if the attribute is not specified, the x and y values represent very small deltas
relative to a given position, which might be implemented in some cases as one pixel in the intermediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable. if a negative or zero value is specified the default value will be used instead. value <number-optional-number> default value pixel in offscreen bitmap animatabl...
patternUnits - SVG: Scalable Vector Graphics
the patternunits attribute indicates which coordinate system to use for the geometry properties of the <pattern> element. ...
...nt is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- all geometry properties are
relative to the current user space --> <pattern id="p1" x="12.5" y="12.5" width="25" height="25" patternunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- all geometry properties are
relative to the target bounding box --> <pattern id="p2" x=".125" y=".125" width=".25" height=".25" patternunits="objectboundingbox"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" width="80" h...
target - SVG: Scalable Vector Graphics
en _replace and _self has been made redundant by changes in the html definition of browsing contexts. use _self to replace the current svg document. _self the current svg image is replaced by the linked content in the same browsing context as the current svg image. _parent the immediate parent browsing context of the svg image is replaced by the linked content, if it exists and can be secu
rely accessed from this document. _top the content of the full active window or tab is replaced by the linked content, if it exists and can be secu
rely accessed from this document _blank a new un-named window or tab is requested for the display of the linked content, if this document can secu
rely do so. if the user agent does not support multiple windows/tabs, the result is the same as _top. <xm...
...if it does not exist, it is created (the same as '_blank', except that it now has a name). ...
viewBox - SVG: Scalable Vector Graphics
ers: min-x, min-y, width and height. the numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated svg element (not the browser viewport). ...
... of the square looks unchanged regardless of the viewbox --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a large viewbox the circle looks small as it is using user units for the r attribute: 4 resolved against 100 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- with
relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox` --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a small viewbox the circle looks large as it is using user units for the r attribute: 4 resolved against 10 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="-5 -5 10 10" ...
<a> - SVG: Scalable Vector Graphics
supported feature addressing the same use cases, see navigator.sendbeacon(). value type: <list-of-urls> ; default value: none; animatable: no referrerpolicy which referrer to send when fetching the url. value type: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; default value: none; animatable: no
rel the
relationship of the target object to the link object. value type: <list-of-link-types> ; default value: none; animatable: yes target where to display the linked url. value type: _self|_parent|_top|_blank|<name> ; default value: _self; animatable: yes type a mime type for the linked url. value type: <string> ; default value: none; animatable: yes xlink:href deprecated since svg 2 t...
..., aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <al...
<marker> - SVG: Scalable Vector Graphics
his attribute defines the coordinate system for the attributes markerwidth, markerheight and the contents of the <marker>. value type: userspaceonuse|strokewidth ; default value: strokewidth; animatable: yes markerwidth this attribute defines the width of the marker viewport. value type: <length> ; default value: 3; animatable: yes orient this attribute defines the orientation of the marker
relative to the shape it is attached to. value type: auto|auto-start-reverse|<angle> ; default value: 0; animatable: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. value type: (none| xminymin| xmidymin| xmaxymin| xminymid| xmidymid| xmaxymid| xminymax| xmidymax| xmaxymax) (meet|slice)? ; default ...
..., aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <al...
Same-origin policy - Web security
ser. any call to document.domain, including document.domain = document.domain, causes the port number to be overwritten with null. therefore, one cannot make company.com:8080 talk to company.com by only setting document.domain = "company.com" in the first. it has to be set in both so their port numbers are both null. note: when using document.domain to allow a subdomain to access its parent secu
rely, you need to set document.domain to the same value in both the parent domain and the subdomain. this is necessary even if doing so is simply setting the parent domain back to its original value. failure to do this may result in permission errors. cross-origin network access the same-origin policy controls interactions between two different origins, such as when you use xmlhttprequest or an <i...
...cess is often leaked by embedding. for example, you can read the dimensions of an embedded image, the actions of an embedded script, or the availability of an embedded resource. here are some examples of resources which may be embedded cross-origin: javascript with <script src="…"></script>. error details for syntax errors are only available for same-origin scripts. css applied with <link
rel="stylesheet" href="…">. due to the
relaxed syntax rules of css, cross-origin css requires a correct content-type header. restrictions vary by browser: internet explorer, firefox, chrome, safari (scroll down to cve-2010-0051) and opera. images displayed by <img>. media played by <video> and <audio>. external resources embedded with <object> and <embed>. fonts applied with @font-face. some br...
How to turn off form autocompletion - Web security
me pin) or contain sensitive information (for example, a unique government identifier or credit card security code). as website author, you might prefer that the browser not remember the values for such fields, even if the browser's autocomplete feature is enabled. note that the wcag 2.1 success criterion 1.3.5: identify input purpose does not require that autocomplete/autofill actually work - me
rely that form fields that
relate to specific personal user information are programmatically identified. this means that the criterion can be passed (by adding the
relevant autocomplete attributes to individual form fields) even when autocompletion for the form itself has been turned off. disabling autocompletion to disable autocompletion in forms, you can set the autocomplete attribute to "off": ...
...nt autofilling of password fields, you can use autocomplete="new-password". this is a hint, which browsers are not required to comply with. however modern browsers have stopped autofilling <input> elements with autocomplete="new-password" for this very reason. for example, firefox version 67 (see bug 1119063) stopped autofilling in this case; however, firefox 70 (see bug 1565407) can suggest secu
rely-generated passwords, but does not autofill a saved password. see the autocomplete compat table for more details. ...
Using shadow DOM - Web Components
rl = this.getattribute('img'); } else { imgurl = 'img/default.png'; } let img = document.createelement('img'); img.src = imgurl; icon.appendchild(img); styling the shadow dom after that we create a <style> element and populate it with some css to style it: // create some css to apply to the shadow dom let style = document.createelement('style'); style.textcontent = ` .wrapper { position:
relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.6s all; position: absolute; bottom: 20px; left: 10px; z-index: 3; } img { width: 1.2rem; } .icon:hover + .info, .icon:focus + .info { opacity: 1; }`; attaching the shadow dom to the sha...
...mple we apply style to the shadow dom using a <style> element, but it is perfectly possible to do it by referencing an external stylesheet from a <link> element instead. for example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code): // apply external styles to the shadow dom const linkelem = document.createelement('link'); linkelem.setattribute('
rel', 'stylesheet'); linkelem.setattribute('href', 'style.css'); // attach the created element to the shadow dom shadow.appendchild(linkelem); note that <link> elements do not block paint of the shadow root, so there may be a flash of unstyled content (fouc) while the stylesheet loads. many modern browsers implement an optimization for <style> tags either cloned from a common node or that have ide...
document - XPath
the uri may also include a fragment identifier. node-set (optional) an expression pointing to a node-set in the external document that should be returned. ...
...evaluated as a separate uri, and the returned node-set will be as if the document function has been called multiple times (each time with the same second argument just as given in the function call) and the resulting node-sets had been concatenated into a single node-set. other specific conditions exist with specified behaviors. see the xslt 1.0 documentation for details. since the uri is
relative to the xsl document, document("") would return the root node of the current document. this function is an xslt-specific addition to xpath. it is not a part of the core xpath function library. defined xslt 1.0 12.1 gecko support supported. ...
Index - XSLT: Extensible Stylesheet Language Transformations
pt and xslt could be used to sort xml data and then display it. the sorting would have to alternate between ascending and descending sorting. 13 transforming xml with xslt needsmigration, transforming_xml_with_xslt, xml, xslt the separation of content and presentation is a key design feature of xml. the structure of an xml document is designed to reflect and clarify important
relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented. this intelligent structuring is particularly important as more and more data transfers are automated and take place between highly heterogeneous machines linked by a network. 14 an overview needshelp, needsmarkupwork, trans...
...lesheet with the key( ) function. 37 <xsl:message> element, reference, xslt, message the <xsl:message> element outputs a message (to the javascript console in ns) and optionally terminates execution of the stylesheet. it can be useful for debugging. 38 <xsl:namespace-alias> element, reference, xslt, namespace-alias the <xsl:namespace-alias> element is a ra
rely used device that maps a namespace in the stylesheet to a different namespace in the output tree. the most common use for this element is in generating a stylesheet from another stylesheet. to prevent a normally xsl:-prefixed literal result element (which should simply be copied as-is to the result tree) from being misunderstood by the processor, it is assigned a temporary namespace which is appr...
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
ull); var newfragment = processor.transformtofragment(domtobetransformed, ownerdocument); xsltprocessor.transformtofragment() will only produce html dom objects if the owner document is itself an htmldocument, or if the output method of the stylesheet is html. it will not produce an html dom objects if only the toplevel element of the result is <html> as xsltprocessor.transformtofragment() is ra
rely used to create this element. if you want to override this, you can set the output method normally in the standard way. transforming html unfortunately it is currently not supported to transform html nodes using xslt. some things work if you use lower case node-names in patterns and expressions, and treat the nodes as if they are in the null namespace, however this is not very well tested so it...
...d normally in the standard way. transforming html unfortunately it is currently not supported to transform html nodes using xslt. some things work if you use lower case node-names in patterns and expressions, and treat the nodes as if they are in the null namespace, however this is not very well tested so it might not work in all situations. it is also possible that this will change in a future
release. transforming xhtml should work as expected though. setting parameters you can control parameters for the stylesheet using the xsltprocessor.setparameter(), xsltprocessor.getparameter(), and xsltprocessor.removeparameter() methods. these all take a namespace uri and a local name as the first two parameters, with xsltprocessor.setparameter() taking a third - the value of the parameter to be...
Understanding WebAssembly text format - WebAssembly
to enable webassembly to be read and edited by humans, there is a textual representation of the wasm binary format. this is an intermediate form designed to be exposed in text editors, browser developer tools, etc. this article explains how that text format works, in terms of the raw syntax, and how it is
related to the underlying bytecode it represents — and the wrapper objects representing wasm in javascript. note: this is potentially overkill if you are a web developer who just wants to load a wasm module into a page and use it in your code (see using the webassembly javascript api), but it is more useful if for example, you want to write wasm modules to optimize the performance of your javascript library, or build your own webassembly compiler. s-expressions in both the binary and...
...languages, even if it looks different because it is an s-expression. signatures and parameters the signature is a sequence of parameter type declarations followed by a list of return type declarations. it is worth noting here that: the absence of a (result) means the function doesn’t return anything. in the current iteration, there can be at most 1 return type, but later this will be
relaxed to any number. each parameter has a type explicitly declared; wasm currently has four available number types (plus reference types; see the reference types) section below): i32: 32-bit integer i64: 64-bit integer f32: 32-bit float f64: 64-bit float a single parameter is written (param i32) and the return type is written (result i32), hence a binary function that takes two 32-bit int...
2015 MDN Fellowship Program - Archive of obsolete content
asonable supporting documentation). the fellows will meet the stated deliverables of their projects and meet weekly with their mentor, the program lead and their other fellows. the fellow will also share the results of their projects at 1-2 events agreed upon by the fellow and the program director, as well as on their personal channels (blog, social media, etc). the fellow is responsible for any
related visas (mozilla can provide any necessary supporting documentation). fellows will be required to sign mozilla’s fellowship agreement in order to participate. if you’ve read all of this and still have a question, contact diane tate at diane@mozilla.com. if you don’t have specific questions and just want to introduce yourself, please use the application form. applications are closed. th...
Window: deviceproximity event - Archive of obsolete content
type description value read only double (float) the measured proximity of the distant device (distance in centimetres). min read only double (float) the minimum value in the range the sensor detects (if available, 0 otherwise). max read only double (float) the maximum value in the range the sensor detects (if available, 0 otherwise).
related events userproximity ...
Interacting with page scripts - Archive of obsolete content
any of them, even setters and getters, could have been redefined by a page script. don't use it unless you trust the page, and even then be careful. also, unsafewindow isn't a supported api, so it could be removed or changed in a future version of the sdk. expose objects to page scripts until firefox 30, you could use un...
Content Processes - Archive of obsolete content
tters. these are explained in the next section. content workers combine these ideas, allowing you to inject a content script into a content process, and automatically set up a communication channel between them. these are explained in the third section. in the next section, we will look at how content scripts interact with the dom in a content process. there are several caveats here, all of them
related to security, that might cause things to not behave in the way you might expect. the final section explains why the sdk still uses the notion of content scripts and message passing, even though the multiprocess model for which they were designed never materialized. this, too, is primarily
related to security. content scripts when the sdk was first designed, firefox was being refactored towa...
Private Properties - Archive of obsolete content
return image; } now suppose there's a need to associate a thumbnail with each image. moreover, to create each thumbnail only when it's first required: function getthumbnail(image) { let thumbnail = image._thumbnail; if (!thumbnail) { thumbnail = createthumbnail(image); image._thumbnail = thumbnail; } return thumbnail; } this approach is straightforward, but
relies on the use of prefixes. a better approach would be to store thumbnails in their own, separate hash map: let thumbnails = {}; function getthumbnail(image) { let thumbnail = thumbnails[image]; if (!thumbnail) { thumbnail = createthumbnail(image); thumbnails[image] = thumbnail; } return thumbnail; } there are two problems with the above approach. first, it's no...
Contributor's Guide - Archive of obsolete content
ow to contribute to the add-on sdk. modules a module is a self-contained unit of code, which is usually stored in a file, and has a well defined interface. the use of modules greatly improves the maintainability of code, by splitting it up into independent components, and enforcing logical boundaries between them. unfortunately, javascript does not yet have native support for modules: it has to
rely on the host application to provide it with functionality such as loading subscripts, and exporting/ importing names. we will show how to do each of these things using the built-in components object provided by xulrunner application such as firefox and thunderbird. private properties people have come up with several ways to emulate private properties using existing language features. this artic...
Porting the Library Detector - Archive of obsolete content
, element.target.title); } var elements = document.getelementsbytagname('img'); for (var i = 0; i < elements.length; i++) { elements[i].addeventlistener('mouseover', setlibraryinfo, false); } one in the panel, which updates the panel's content with the library information: self.on("message", function(libraryinfo) { window.document.body.innerhtml = libraryinfo; }); finally main.js
relays the library information from the widget to the panel: widget.port.on('setlibraryinfo', function(libraryinfo) { widget.panel.postmessage(libraryinfo); }); ...
SDK and XUL Comparison - Archive of obsolete content
ul-based add-ons user interface flexibility xul overlays offer a great deal of options for building a ui and integrating it into the browser. using only the sdk's supported apis you have much more limited options for your ui. xpcom traditional add-ons have access to a vast amount of firefox functionality via xpcom. the sdk's supported apis expose a
relatively small set of this functionality. low-level apis and third-party modules that's not the whole story. if you need more flexibility than the sdk's high-level apis provide, you can use its low-level apis to load xpcom objects directly or to manipulate the dom directly as in a traditional bootstrapped extension. alternatively, you can load third-party modules, which extend the sdk'...
addon-page - Archive of obsolete content
t contain navigational elements. usage with the add-on sdk you can present information to the user, such as a guide to using your add-on, in a browser tab. you can supply the content in an html file in your add-on's "data" directory. note: this module has no effect on fennec. for pages like this, navigational elements such as the awesome bar, search bar, or bookmarks toolbar are not usually
relevant and distract from the content you are presenting. the addon-page module provides a simple way to have a page which excludes these elements. to use the module import it using require(). after this, the page loaded from "data/index.html" will not contain navigational elements: var addontab = require("sdk/addon-page"); var data = require("sdk/self").data; require("sdk/tabs").open(data.url("i...
passwords - Archive of obsolete content
with firefox's password manager to add, retrieve and remove stored credentials. usage a credential is the set of information a user supplies to authenticate herself with a service. typically a credential consists of a username and a password. using this module you can: search for credentials which have been stored in the password manager. you can then use the credentials to access their
related service (for example, by logging into a web site). store credentials in the password manager. you can store different sorts of credentials, as outlined in the "credentials" section below. remove stored credentials from the password manager. credentials in this api, credentials are represented by objects. you create credential objects to pass into the api, and the api also re...
request - Archive of obsolete content
for more advanced usage, check out the net/xhr module, based on the browser's xmlhttprequest object. globals constructors request(options) this constructor creates a request object that can be used to make network requests. the constructor takes a single parameter options which is used to set several properties on the resulting request. parameters options : object optional options: name type url string,url this is the url to which the request will be made. can either be a string or an instance of the sdk's url. ...
simple-storage - Archive of obsolete content
fore, when you're notified that you're over quota, you should respond by removing data from the storage space until your quotausage is less than or equal to 1. which particular data you remove is up to you. 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. to read about how to opt into private browsing mode and how to use the sdk to avoid storing user data associated with private windows, refer to the documentation for the private-browsing module. globals properties storage a persistent object private to your add-on. prop...
url - Archive of obsolete content
an object that represents a url, verifying that the provided string is a valid url in the process. any api in the sdk which has a url parameter will accept url objects, not raw strings, unless otherwise noted. parameters source : string a string to be converted into a url. if source is not a valid uri, this constructor will throw an exception. base : string an optional string used to resolve
relative source urls into absolute ones. dataurl(uri) the dataurl constructor creates an object that represents a data: url, verifying that the provided string is a valid data: url in the process. parameters uri : string a string to be parsed as data url. if is not a valid uri, this constructor will throw an exception. functions tofilename(url) attempts to convert the given url to a native fi...
windows - Archive of obsolete content
ows.on('deactivate', function(window) { console.log("a window was deactivated."); }); open event emitted when a new window is open. this does not mean that the content has loaded, only that the browser window itself is fully visible to the user. arguments window : listeners are passed the window object that triggered the event. close event emitted when a window is closed. you can't always
rely on receiving the close event for every open window. in particular, if the user quits the browser then it's possible that your add-on will be unloaded before all windows are closed. arguments window : listeners are passed the window object that triggered the event. activate event emitted when an inactive window is made active. arguments window : listeners are passed the window object that h...
chrome - Archive of obsolete content
if you use this api you can expect your add-on to get an extra security review by addons.mozilla.org. this module should not be confused with the "chrome" global variable that webextensions can use to access apis. the chrome module gives an add-on sdk add-on access to the components object, which in turn gives it access to a large set of privileged low-level firefox apis. chrome is a built-in pseudo module of the toolkit loader. see the chrome authority tutorial for more details. ...
content/loader - Archive of obsolete content
he loader is used by modules that use content scripts but don't themselves load content, such as page-mod. modules that load their own content, such as panel and page-worker, use the symbiont module instead. symbiont inherits from loader but contains its own frame into which it loads content supplied as the contenturl option. ...
content/worker - Archive of obsolete content
emoving the content script from the page and removing all registered listeners. a detach event is fired just before removal. properties port object that allows you to: send customized messages to the worker using the port.emit function receive events from the worker using the port.on function url the url of the content. tab if this worker is attached to a content document, returns the
related tab. events message this event allows the content worker to receive messages from its associated content scripts. calling the self.postmessage() function from a content script will asynchronously emit the message event on the corresponding worker. arguments value : the event listener is passed the message, which must be a json-serializable value. error this event allows the content wor...
io/file - Archive of obsolete content
vice as described in this article about file i/o. note that if you do decide to hardcode windows-style paths, be sure to escape backslashes in strings. for example, to specify the file at c:\users\myk, you need to use the string "c:\\users\\myk", not "c:\users\myk". read more about escaping characters in strings. globals functions basename(path) the path parameter must be an absolute path,
relative paths will cause an error. use the fs/path module for
relative path support. returns the last component of the given path. for example, basename("/foo/bar/baz") returns "baz". if the path has no components, the empty string is returned. parameters path : string the path of a file. returns string : the last component of the given path. dirname(path) returns the path of the directory...
Examples and demos from articles - Archive of obsolete content
unnatural to keep track of all events started and then to stop them when appropriate through the cleartimeout() function. a possible approach to solve this problem is to nest all the informations needed by each animation to start, stop, etc. etc. in different objects and then to create a constructor for such class of objects in order to standardize and simplify the instantiation of them. convert
relative paths to absolute this example show how to translate
relative paths to absolute paths. a shortcut to massively modify the dom this example shows how to create a framework able to modify many properties of dom objects at the same time. filter the digitation into a form field, capture the digitation of a hidden word this example shows the use of the onkeypress event during a digitation in...
IsDefaultNamespace - Archive of obsolete content
return false; // unknown; } case 9: // document_node return isdefaultnamespace(node.documentelement, namespaceuri); case 6: // entity_node case 12: // notation_node case 10: // document_type_node case 11: // document_fragment_node return false; // unknown case 2: // attribute_node: if (node.owne
relement ) { return isdefaultnamespace(node.owne
relement , namespaceuri); } else { return false; // unknown } default: if (node.parentnode) { // entityreferences may have to be skipped to get to it return isdefaultnamespace(node.parentnode, namespaceuri); } else ...
LookupNamespaceURI - Archive of obsolete content
return null; case 9: // document_node return lookupnamespaceurihelper(node.documentelement, prefix); case 6: // entity_node case 12: // notation_node case 10: // document_type_node case 11: // document_fragment_node return null; // unknown case 2: // attribute_node if (node.owne
relement) { return lookupnamespaceurihelper(node.owne
relement, prefix); } return null; // unknown default: // text_node (3), cdata_section_node (4), entity_reference_node (5), // processing_instruction_node (7), comment_node (8) if (node.parentnode) { // entityreferences may...
LookupPrefix - Archive of obsolete content
de.element_node return _lookupnamespaceprefix(namespaceuri, node); case 9: // node.document_node return _lookupnamespaceprefix(namespaceuri, node.documentelement); case 6: // node.entity_node case 12: // node.notation_node case 11: // node.document_fragment_node case 10: // node.document_type_node return null; // type is unknown case 2: // node.attribute_node if (node.owne
relement) { return _lookupnamespaceprefix(namespaceuri, node.owne
relement); } return null; default: if (node.parentnode) { // entityreferences may have to be skipped to get to it return _lookupnamespaceprefix(namespaceuri, node.parentnode); } return null; } } // private function for lookupprefix only function _lookupnamespaceprefix (namespaceuri, originalelement) { va...
Miscellaneous - Archive of obsolete content
the meaning of the action preference is shown in the following table mousewheel.withxxxkey.action result 0 scroll by lines. if set, you will receive dommousescroll events. 1 scroll by page. 2 move around in the history. if set, you will not receive dommousescroll events. 3 change text size. if set, you will not receive ...
Progress Listeners - Archive of obsolete content
} }, onlocationchange: function(aprogress, arequest, auri) { // this fires when the location bar changes; that is load event is confirmed // or when the user switches tabs. if you use mylistener for more than one tab/window, // use aprogress.domwindow to obtain the tab/window which triggered the change. ...
Toolbar - Archive of obsolete content
on. notes insert your button by default only once, at first run, or when an extension update adds a new button. please only add your button by default if it adds real value to the user and will be a frequent entry point to your extension. you must not insert your toolbar button between any of the following elements: the combined back/forward button, the location bar, the stop botton, or the
reload button. these elements have special behaviors when placed next to eachother, and will break if separated by another element. /** * installs the toolbar button with the given id into the given * toolbar, if it is not already present in the document. * * @param {string} toolbarid the id of the toolbar to install to. * @param {string} id the id of the button to install. * @param {string} ...
Extension Packaging - Archive of obsolete content
ion points as an extension, even if the application is not yet installed. this can be accomplished on windows using the registry. multi-item extension xpis in some cases, a single xpi file may wish to install multiple extensions/themes. a special kind of extension xpi, called the multiple item package, explains how to create this kind of package. (firefox 1.5/xulrunner 1.8 required.) from the
release of firefox 53, multiple item extension packages are no longer supported and will not load. as a consequence, these packages are no longer accepted by amo. official references for toolkit api structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information abou...
Extension Theming Guidelines - Archive of obsolete content
try to avoid this so that themes can correctly target the right windows. css selectors when writing stylesheet rules for windows that you are overlaying always try to be specific with the css selector. if you are not then you run a risk of conflicting with content that other extensions add to the window. xul guidelines xbl bindings xbl bindings are applied using style rules. however these are ra
rely part of the style of the widgets but more about adding custom widgets. in this case you should add a stylesheet to your chrome content package and apply the bindings there. this is one of the rare cases where it is sensible to put the stylesheet into the content area. style attributes style attributes should only be used in rare circumstances. they are impossible to override from styleheets so ...
Inline options - Archive of obsolete content
l i havent really looked), support oninputchanged attribute. so like for the type="file", once a user browses and picks a file, when it updates the label it will trigger the oninputchanged attribute. so if you would like to do some changes to the xul on the inline options page you can do so. the this value is the setting xul element. see mxr for what all this holds: http://mxr.mozilla.org/mozilla-
release/source/toolkit/mozapps/extensions/content/setting.xml for example you can fire this.inputchanged() etc etc. <setting pref="extensions.throbberrestored.showtxtontoolbar" title="show text on toolbar button" type="bool" oninputchanged="alert('new value is = ' + this.value); this.style.backgroundcolor='red';"> if labels on other toolbar buttons are visible (like by using add-on "clas...
Installing Extensions and Themes From Web Pages - Archive of obsolete content
60d043447c5f4550853f2d40770b326a13. tostring() the tostring() property should return the xpi url, for compatibility with firefox browsers older than version 1.0, and other applications such as seamonkey. themes pretty much everything i've described applies to themes too, except you'll use the installchrome function. because so many sites installed extensions by direct-linking the xpi file and
relying on content handling to invoke the confirmation ui, many sites are (incorrectly) doing so for theme jar files too and wondering why they aren't auto-detected and installed. well, xpi is a mozilla-specific extension and so we can have special handling for it, but jar is not - not all .jar files are firefox themes, so if you click on a .jar link you'll be shown the save as decision dialog. for t...
Jetpack Processes - Archive of obsolete content
ted by components that implement the nsijetpackservice interface, and their parent chrome process communicates with them via the nsijetpack interface. note: the jetpack service, provided by nsijetpackservice, is not included by default in firefox 4. prior to firefox 12, it could be included in custom builds by using enable_jetpack_service at compile time. however, the service has been removed enti
rely as of firefox 12. these processes are
relatively lightweight, do not have access to xpcom, and can innately do little other than compute. messaging facilities that allow them to communicate with their parent chrome process are the only means by which they can be endowed with any real power. note: the above statement is not currently true, as js-ctypes is now provided to jetpack processes as of b...
Migrating raw components to add-ons - Archive of obsolete content
nteract with firefox at the c++ level, but strictly so that they can make use of third party dlls. if this is the only reason you are using a binary component instead of javascript, take a look at the new javascript c-types support introduced in firefox 3.6. it allows javascript code to load functions from dlls on windows, and should allow you to eliminate your dependence on binary components enti
rely. this leads to a better compatibility path as new versions of firefox are
released. ...
Multiple item extension packaging - Archive of obsolete content
as a consequence, these packages are no longer accepted by amo. a multiple item package provides the ability to package multiple installable bundles which can then be downloaded and installed by a user, or provided pre-packaged with an application or by an external program. every multiple item package must provide an install.rdf file (not old-style install.js!) and has the same requirements as an extension except as noted below. there is currently no feature to prevent or warn the user when installing an older version of an extension. ...
Adding Events and Commands - Archive of obsolete content
ter/gatekeeper/there.is.only.xul"> we prefer the first method because it keeps a better separation of content and behavior. also, note that the addeventlistener method receives the event name without the "on" prefix, while element attributes do have the prefix. there's a long list of events you can listen to, and which you use depend on the situation. elements only implement the events that are
relevant to them, but there are several events that are implemented for most elements. these are some notable events you should keep in mind: oncommand. this is one of the most important and commonly used events in xul. it's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes. for a button, it represents the action of the user clic...
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
m or removed them altogether. the toolbar code snippets page has a code sample you can use to do this. remember to validate if your button is already present, to prevent duplicates. it's also a good idea to set a preference that indicates that you added your button already, so that it can be removed permanently if the user chooses to. another option is to use fuel's firstrun property, which also
relies on a preference. firefox 3 let extension = application.extensions.get(your_extension_id); if (extension.firstrun) { // add button here. } firefox 4 application.getextensions(function (extensions) { let extension = extensions.get(your_extension_id); if (extension.firstrun) { // add button here. } }) both function firstrun(extensions) { let extension = extensions...
Adding menus and submenus - Archive of obsolete content
ass to "menu-iconic" or "menuitem-iconic" respectively, and set the image attribute or the list-style-image css property. menu icons are typically 16px by 16px. menus on mac os x as mentioned earlier, menus are very different on mac os x. this is because menus on mac are located in a single menu bar which is controlled by the operating system, as opposed to menus in other systems, which are enti
rely controlled by firefox. mac os x also has menu standards, such as the positioning of certain items that are not used in other systems. 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. you can access these items by id through the dom, but their p...
Appendix A: Add-on Performance - Archive of obsolete content
or all practical purposes. the code is simple enough: // this is the function that is called in the load event handler. init : function() { let that = this; // run this later and let the window load. window.settimeout(function() { that.postinit(); }, 500); }, postinit: function() { // actual init code goes here. }, how can you tell it works? the measuring startup wiki page includes a
relatively simple test you can use to compare a clean firefox profile vs that profile with your add-on installed. page loads this is another critical route that many add-ons tap into. the intercepting page loads section details several techniques to do this, and you should read all of them carefully to figure out which one you need. some of these events are fired multiple times during a single page...
Getting Started with Firefox Extensions - Archive of obsolete content
ating extensions for other applications such as thunderbird, seamonkey, and flock. it is also worth noting that there are differences between the definition of extension and add-on. all extensions are add-ons, but add-ons can also be themes, plugins, or language packs. this tutorial is about extension development, but themes and language packs are developed in a very similar way. plugins are enti
rely different, and they will not be covered here. you can read more about plugins and their development in the plugins page. firefox provides a very rich and flexible architecture that allows extension developers to add advanced features, customize the user's experience, and completely replace and remove parts of the browser. the mozilla add-ons repository (amo) holds an extensive number of extensi...
Local Storage - Archive of obsolete content
warn("this is a warning message."); this._logger.info("this is an info message."); this._logger.config("this is a config message."); this._logger.debug("this is a debug message."); this._logger.trace("this is a trace message."); you can filter the output of the global logger or any specific logger instance by setting the level property. during development you should use the "all" level, but for
release versions it's usually better to move the level up to "warn", so that the log is compact and execution is more efficient. note: we recommend that all exception catch blocks include some logging at the error or warn levels, and in general you should use logging freely in order to have as much information as possible to fix bugs and know what is going on. don't log inside functions that are cal...
User Notifications and Alerts - Archive of obsolete content
interrupt the user and is easy to read and dismiss, so it is our recommended way of displaying alerts and notifications. there's a catch, though: these notifications are inside the current tab, so switching tabs will make a notification disappear. the notification shows up again when you come back to the tab that displayed it. this means that these notifications make the most sense when they are
related to the page currently being displayed, such as a page trying to install an add-on, or a site you just entered a password on. notification boxes are very easy to create, and are very customizable: let nb = gbrowser.getnotificationbox(); let acceptbutton = new object(); let declinebutton = new object(); let message = this._bundle.getstring("xulschoolhello.friendmessage.label"); let that =...
Extensions support in SeaMonkey 2 - Archive of obsolete content
he url history popup just looks for any menupopup, so it goes wrong if you add your own. ordinary popups are fine of course. the statusbar in firefox 3 a new vbox has been added, called "browser-bottombox", which encloses the find bar and status bar at the bottom of the browser window. although this doesn't affect the appearance of the display, it may affect your extension if it overlays chrome
relative to these elements. for example, if you overlay some chrome before the status bar, like this: <vbox id="browser-bottombox"> <something insertbefore="status-bar" /> </vbox> use the following technique to make your overlay work on both seamonkey 2 and firefox 3: <window id="main-window"> <vbox id="browser-bottombox" insertbefore="status-bar"> <something insertbefore="status-bar" />...
Security best practices in extensions - Archive of obsolete content
ral risks. when you do include other scripts, there are a number of things you can do to ensure their integrity and safety for users. the first is to always get it from a trusted source. another thing you should do is namespace it just in case other add-ons include it. for example, if you're using jquery, there's jquery.noconflict(). conclusion security can't be taken for granted, and for every
release of your add-on, a new security audit should take place. a good place to keep up with mozilla security announcements and security discussion is at the mozilla security blog. ...
Session store API - Archive of obsolete content
oring without restarting firefox 3.6 note this section applies to firefox 3.6 and later. firefox 3.6 knows how to save session store data when the last browser window closes, even if there are still other windows open. similarly, it can now restore the user's session while in that state. in other words, it's now possible for sessions to be restored even without the browser quitting and being
relaunched. this is something you may need to keep in mind if you
rely on the behavior of the session store system. the session restore process the exact sequence of events that occurs when a session is being restored is: a session state is about to be restored. this can be on startup or in response to undo close tab, since closed tabs are restored as single-tab sessions. new windows are opened...
Supporting search suggestions in search plugins - Archive of obsolete content
"mozilla firefox"]] note that in this example, only the query string and completion array are specified, leaving out the optional elements. your completion list can include as many suggestions as you like, although it should be kept manageable, given that the display will be updating live while the user is typing their search string. in addition, the method you use to select suggestions is enti
rely up to you. note: firefox requires that suggest requests complete within 500ms for suggestions to be displayed. if the request for the suggest url does not return data before 500ms have elapsed, no search suggestions will be shown. ...
Tabbed browser - Archive of obsolete content
opening a url in an on demand tab cu.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazyservicegetter(this, "gsessionstore", "@mozilla.org/browser/sessionstore;1", "nsisessionstore"); // create new tab, but don't load the content. ...
Search Extension Tutorial (Draft) - Archive of obsolete content
while this is generally considered acceptable behavior, considerable care must be taken to avoid violating the mozilla add-on guidelines or creating an adverse user experience. due to the large volume of user complaints regarding hidden settings being changed against their will, and not being restored after the add-ons responsible are disabled, mozilla will take any steps necessary to mitigate the impact of offending add-ons. ...
updateready - Archive of obsolete content
ion none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree). read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. cancelable boolean is it possible to cancel the event? read only.
related events checking noupdate downloading progress cached updateready obsolete error ...
Getting the page URL in NPAPI plugin - Archive of obsolete content
wobj, identifier, &variantvalue ); // get a pointer to the "location" object. npobject *locationobj = variantvalue.value.objectvalue; // create a "href" identifier. identifier = npn_getstringidentifier( "href" ); // get the location property from the location object. bool b2 = npn_getproperty( m_pnpinstance, locationobj, identifier, &variantvalue ); this code is just a rough example. remember to
release any references after using them. tradeoffs: uses npapi only works in most browsers does not work in mozillas older than firefox 1.0 via npp_newstream from braden mcdaniel: if you want the uri of the resource for which the plug-in is invoked, the most npapi-friendly way to do that is to get it from the npstream that is passed to npp_newstream. tradeoffs: npapi only probably works in al...
Defining Cross-Browser Tooltips - Archive of obsolete content
on content management systems, including microsoft's active server pages, which make such substitutions fairly simple. recommendations use the title attribute (instead of alt) to ensure desired tooltip behavior in multiple browsers. authors able to run content-rewriting proxy servers can use them to dynamically alter outgoing content to ensure both the title and alt attributes are present.
related links html 4.01 specification: 13.8 how to specify alternate text html 4.01 specification: 7.4.3 the title attribute bug 25537 original document information author(s): eric a. meyer, netscape communications last updated date: published 16 aug 2002 copyright information: copyright © 2001-2003 netscape. all rights reserved. note: this reprinted article was originally part of the ...
Source Navigator - Archive of obsolete content
note: this document is still in the draft state. i hope i can finish it within one day or two if i have more time. ;) --kennykaiyinyu 19:04, 10 june 2008 (pdt) what is source-navigator? (quoted from the internet) source-navigator is a source code analysis tool which lets users to edit, browse and build their projects. with it, you can edit your source code, display
relationships between classes and functions and members, and display call trees. you can also build your projects, either with your own makefile, or by using source-navigator's build system to automatically generate a makefile. source-navigator works with the insight gui interface for gdb. more information can be found here --> http://sourcenav.sourceforge.net/ why worth a try? it's quite fast as compared to mxr. (i thin...
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
verify the control has built and registered correctly. the control currently reads plug-ins from your most current netscape 4.x and ie installations. there is no support for mozilla or ns 6.x yet. a note to developers if you intend to modify this control in any way then you must also change the clsid from {dbb2de32-61f1-4f7f-beb8-a37f5bc24ee2} to something else and any other guids this control
relies upon (iid, libids etc). this is necessary so that your control may coexist with the generic version and any other versions that other plug-ins vendors may have installed. it is advisable to rename the control and not to install somewhere like the windows directory where it is likely to be overridden. use a tool such as guidgen.exe or uuidgen.exe to create the new guids. package it there is a ...
Locked config settings - Archive of obsolete content
fox store the all.js file in greprefs rather than defaults\pref the moz-byteshift.pl script allows to encode...: moz-byteshift.pl -s 13 <mozilla.cfg.txt >mozilla.cfg ... and to decode mozilla.cfg files: moz-byteshift.pl -s -13 <mozilla.cfg >mozilla.cfg.txt example of an unencoded file: mozilla.cfg.txt. the lockpref command puts into place a locked preference, whereas the defaultpref command me
rely puts into a place a default value (which the user may override in his prefs.js file). note that the file must start with //, or else it is not recognized by mozilla. as the encoding of the file is pretty trivial, the encoding as such does not provide any real security. instead make sure that file protections make this file unmodifiable by the unprivileged user. moreover, some settings (such as m...
Compiling The npruntime Sample Plugin in Visual Studio - Archive of obsolete content
ws;xp_win32;xp_win;_x86_;npsimple_exports disable precompiled headers using project properties|(all configurations)|c++|precompiled headers|create/use precompiled header. they may be already disabled. define the function exports by adding the .def filename (e.g. nprt.def) to project properties|(all configurations)|linker|input|module definition file. it could be either the full path or the path
relative to the project directory. optional: open the above .def file and change "nprt" to the filename of your dll as vs sees it (without "np", if you decided to rename later) optional: edit the .rc file and and the top of npp_gate.cpp for the description, mimetype, file extension etc. to reflect your plugin remove the function npp_getjavaclass from npp_gate.cpp build rename the resulting dll s...
Enabling the behavior - updating the status periodically - Archive of obsolete content
gxmlhttprequest.send(null); window.settimeout(loadtinderboxstatus, 60000); } window.settimeout(loadtinderboxstatus, 1000); window.settimeout schedules functions to run at some future time. we use it inside the loadtinderboxstatus function to make that function run a second (1,000 milliseconds) after startup and a minute (60,000 milliseconds) after each invocation. this allows users to get
relatively frequent updates about tinderbox without overloading the tinderbox server or slowing down mozilla with requests. our code is now ready to run, but mozilla doesn't know about it yet. to enable its functionality, we have to add a reference to our javascript code into navigator.xul, just as we put a reference to our css code into that file back in specifying the appearance. put the javascrip...
Finding the file to modify - Archive of obsolete content
now that we have a hackable mozilla, it's time to find the file we want to hack. mozilla's ui is divided into three layers: the structure, the style, and the behavior. the structure layer identifies the widgets (menus, buttons, etc.) and their position in the ui
relative to each other, the style layer defines how the widgets look (size, color, style, etc.) and their overall position (alignment), and the behavior layer specifies how the widgets behave and how users can use them to accomplish their goals. mention the localization layer (note: these layers are not completely mutually exclusive. in particular, positioning information can be specified in both the structure layer and the style layer, and some behavior can be partly defined in the style layer.) we're going to add code to a...
Making a Mozilla installation modifiable - Archive of obsolete content
ntain a specially formatted "manifest" file which describes the contents of the archive so mozilla knows what to do with them. although jar archives are binary files, mozilla's ui is not compiled into machine code; mozilla instead builds its ui from the non-compiled files in the archive each time it starts up. because of this, we can modify the files in the archive and see our changes to the ui me
rely by restarting the application. this makes modifying mozilla's ui much easier than for many other applications. although mozilla stores the ui files in jar archives, it can also access them in their original, unarchived form, which is useful for the extensions developer because it makes it unnecessary to extract the files from the archive before changing the code and then re-add them to the archi...
Making it into a static overlay - Archive of obsolete content
rlay file to be added to the interface's dom and thus show up in the interface as if they were defined on the same element in navigator.xul. note that we've added a new attribute to the statusbarpanel element: insertbefore. this attribute identifies another statusbarpanel element within statusbar before which our element should appear. thus it allows us to define the exact position of our element
relative to the other statusbarpanel elements within statusbar. if insertbefore is omitted, the element will be added as the last child of statusbar, usually before the resizer grippy. we could instead have used an insertafter attribute to place the element after another. to use this overlay instead of our changes to navigator.xul we need to remove our changes, then add a reference to the overlay to ...
Creating a hybrid CD - Archive of obsolete content
the cd should support hfs (macintosh), joliet (win32), and rock ridge (unix). many mozilla files have long file names which makes creating the cd on a macintosh difficult because the hfs filesystem limits the length of file names to 32 characters. the utility mkhybrid lets you create hybrid cds that work with all three filesystems. mkhybrid was written by james pearson and is is a component of the latest versions of cdrecord. ...
FAQ - Archive of obsolete content
will my skin break in future builds? unfortunately, yes. every time there is a major change made to the interface, either visible or behind the scenes, your skin will have problems. when the mozilla developers make changes like this, they increase the skin version number. this is the number that is defined in contents.rdf. test your skin with every major
release of mozilla. if a message appears in the preferences window telling you that it's an old skin, you're going to have to look over the code to see what changed. developers try to keep changes like this to a minimum, but sometimes it just can't be helped. what is an access key? an access key is a keyboard shortcut to access something. in the case of skins the access key that you are defining is accessible by going to edit->preferen...
Getting Started - Archive of obsolete content
the dom inspector as well), and select the classic skin. you can use the same version as the one you use to browse the web, but if you mess it up, it is possible that you will be unable to access your browser without uninstalling and reinstalling mozilla. for this reason we suggest that you install a second copy into a second directory (make sure that you use a different profile as stated in the
release notes) extract the chrome the chrome is stored in \mozilla\chrome and the individual modules are stored in jar files. jar files are zip files with a different extension. you can open them up in your zip program the same way you open up zip files. mozilla currently comes with two skins, classic and modern. looking in the directory you'll also notice that there are classic.jar and modern.jar fi...
Treehydra - Archive of obsolete content
esp path-sensitive program verification in polynomial time community view treehydra forums... 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 ...
Tuning Pageload - Archive of obsolete content
ent.switch.threshold determines how often we switch content sink modes. there are two modes. in mode a we interrupt the parser every content.max.tokenizing.time microseconds. in mode b we interrupt the parser every 3000 microseconds. every content.switch.threshold microseconds, we decide whether we should be in mode a or mode b. the decision is based on whether there were any user events on the
relevant widget in the last content.switch.threshold microseconds. as in, if the user is moving the mouse or typing in that window, we'll be more responsive; if there is no user activity, we will aim for less parser interruption and less responsiveness but lower overall load time. content.notify.* controls the information flow from content sink to rendering model. in particular, the way things wo...
Using addresses of stack variables with NSPR threads on win16 - Archive of obsolete content
such address. consequently, implementing threads, with their implication of a unique stack for each thread, requires that the nspr copy the stacks during thread context switches. the actual copying of the stack is not such a hardship as one would imagine. with the speed of today's processors (even those running win-16), the copying of 10 - 50 kilobytes of data between two locations in memory is ba
rely measurable 1. what is a hardship is that addresses of dynamic variables, those allocated on the call stack, in a function's local frame, are not valid across thread boundaries. the simplest demonstration of the problem is as follows: typedef struct shareddata { prlock *ml; prcondvar *cv; print32 counter; } shareddata; static void forkedthread(void *arg) { shareddata *shared = (...
Using gdb on wimpy computers - Archive of obsolete content
: ^c program received signal sigint, interrupt. 0x404ccdeb in __sigsuspend (set=0xbf5ffbc0) at ../sysdeps/unix/sysv/linux/sigsuspend.c:48 48 ../sysdeps/unix/sysv/linux/sigsuspend.c: no such file or directory. current language: auto; currently c (gdb) shar glib reading symbols from /usr/lib/libglib-1.2.so.0...done. (gdb) here's what it looks like in a version 5.x of the debugger ( yet un
released ): ^c program received signal sigint, interrupt. [switching to thread 2051 (runnable)] 0x404ccdeb in __sigsuspend (set=0xbf5ffbac) at ../sysdeps/unix/sysv/linux/sigsuspend.c:48 48 ../sysdeps/unix/sysv/linux/sigsuspend.c: no such file or directory. current language: auto; currently c (gdb) shar gtk reading symbols from /usr/lib/libgtk-1.2.so.0...done. loaded symbols for /usr/lib/lib...
Venkman Internals - Archive of obsolete content
tags found in the parent record's window.document property. to obtain the antecedent files: doc.getelementsbytagname("script"); then extract the urls from the src attributes. scriptwrapper newsgroup, 2002, rgrinda here is a bit more information about how venkman tracks files and functions... a scriptwrapper is a pure js object defined only inside venkman. as you pointed out, there is a 1:1
relationship between scriptwrappers and functions. scriptwrapper has-a jsdscript property, which is an object which supports the jsdiscript interface. jsdiscript is a lower level access to the function than the scriptwrapper. in order to set a breakpoint in a particular function, you'll want to call scriptwrapper.setbreakpoint(pc[, parentbp]); where |pc| is the program counter location to set the bre...
Venkman Introduction - Archive of obsolete content
caller, below that is the caller's caller, and so on. these items are referred to as stack frames. double-clicking on a stack frame will change the "current" frame. this will cause the source of function to be displayed in the source code view, the local variables view will change to display variables local to the selected stack frame, and script evaluated in the interactive session view will be
relative to the selected frame. if you would like to copy the current call stack to the clipboard, select "dump stack to interactive session" from the context menu, or type /where in the interactive session view. you may then copy the text from the interactive session view. if you would like to keep venkman from stopping in a particular stack frame in the future, check "don't debug" from the stack ...
Video presentations - Archive of obsolete content
s, how to configure the build system, and how to build mozilla projects. (as quicktime; 127 mb, 50 mb, and 68 mb) the life cycle of a bug (part 1, part 2) mike connor describes how a bug goes from bug report to patch to implemented fix. learn how to properly file a good bug report, how the bug reports are handled, and how to submit and get reviews for patches. (as quicktime; 122 mb and 110 mb)
release builds - from source tree to exe (part 1, part 2) learn how
release builds of firefox are created. (as quicktime; 105 mb and 34 mb) other videos (might be obsolete) mozilla video presentations (2001-2002) seamonkey brownbag training series (2000) ...
Mozilla Web Developer Community - Archive of obsolete content
y/news/ feeds recent changes rss feed warning: this feed is updated very often. mozilla developer news feed actually, there are no other feeds available for developer.mozilla.org. looking for feed ideas? 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. ...
Anonymous Content - Archive of obsolete content
yed. whenever an element is removed, it simply disappears from its insertion point along with all anonymous content that was generated by the element. it is possible to manipulate the anonymous content contained underneath a bound element using standard dom apis. if anonymous content that contains an insertion point is removed, then any explicit children found underneath the insertion point are
relocated to any other insertion points that match. again, if all the children cannot be
relocated, then the anonymous content is destroyed. [editor's note: should there be an api for retrieving insertion points, for dynamically creating new insertion points, or for removing insertion points? perhaps on elementxbl?] event flow and targeting flow and targeting across scopes dom events can fire on ...
XBL 1.0 Reference - Archive of obsolete content
-based markup language to implement reusable components (bindings) that can be bound to elements in other documents. the element with a binding specified, called the bound element, acquires the new behavior specified by the binding. bindings can be bound to elements using cascading style sheets (css) or dom. one element can be bound to several bindings at once. functionally bindings should be cor
related with behaviors and viewlink but being implemented as one integrated xml solution. bindings can contain event handlers that are registered on the bound element, an implementation of new methods and properties that become accessible from the bound element, and anonymous content that is inserted around the bound element. there are numerous adjustments in the current implementation in comparis...
XBL - Archive of obsolete content
in future versions of gecko. some differences between sxbl and xbl2 are listed in an article by anne van ke ( seesteren (november, 2005). an overview of differences between mozilla xbl and xbl2 is in a newsgroup posting by jonas sicking (april, 2007). still living "shadow dom"
related specs shadow dom (editor's draft) css scoping » shadow encapsulation see also introduction to xbl from the xul tutorial. custom xul elements with xbl from the xul school tutorial for add-on developers xbl chapter of "rapid application developm...
Mac stub installer - Archive of obsolete content
ed for the package when it is fully extracted. add a [componentx] section to the config.ini template file named config.ini_tmpl found at: <http://lxr.mozilla.org/seamonkey/sou...onfig.ini_tmpl>. then add the componentx into the appropriate setup types so the installer module installs when users select the setup types you choose it to be in. once you add the section to the packages-mac file the
release automation will automatically generate an xpi for your module with a dummy install.js. if it finds your module's jst file it will substitute that for the install.js. and finally it will do the copying of files from dist per the directives in packages-mac if your module's section has some file entries. unfortunately, at the time of this writing there is no convenient way to test an installer b...
Install script template - Archive of obsolete content
you can also simply call refreshplugins() } else cancelinstall(errblock1); // plid solution -- write keys to the registry /** * function for secondary installation of plugin (firstinstall). * you should not stop the install process because the function failed, * you still have a chance to install the plugin for the already * installed gecko browsers. * * @param empty param list **...
Windows Install - Archive of obsolete content
0.0.2000110801"); logcomment("initinstall: " + err); fprogram = getfolder("program"); logcomment("fprogram: " + fprogram); if(verifydiskspace(fprogram, srdest)) { setpackagefolder(fprogram); err = adddirectory("", "6.0.0.2000110801", "bin", // dir name in jar to extract fprogram, // where to put this file // (returned from getfolder) "", // subdir name to create
relative to fprogram true); // force flag logcomment("adddirectory() returned: " + err); // check return value if(err == success) { err = performinstall(); logcomment("performinstall() returned: " + err); } else cancelinstall(err); } else cancelinstall(insufficient_disk_space); // end main ...
Properties - Archive of obsolete content
properties major most siginificant element of the installversion object. e.g. major version of netscape 6 is "6" minor second most siginificant element of the installversion object.e.g. minor version of netscape communicator 4.7 is "7"
release second least siginificant element of the installversion object. build least siginificant element of the installversion object.e.g. buildid of netscape 6 is represented by a time stamp of teh format:yyyymmddhh: 2001031808 means in the year 2001, in the month of march, on the 18th day of the month, at 8:00am. the product was built. ...
InstallVersion Object - Archive of obsolete content
ftware. overview this object and its methods are used both when triggering a download, to see whether a particular version needs to be installed, and when installing the software. the init() method associates a particular version with an installversion object, the tostring() method converts versions in various formats to a string, and the compareto() method compares these string and indicates the
relationship between the two versions. each of the version parameters is also available as a separate property of the installversion object. ...
getWinProfile - Archive of obsolete content
nly) constructs an object for working with a windows .ini file. method of install object syntax winprofile getwinprofile ( object folder, string file); parameters the getwinprofile method has the following parameters: folder an object representing a directory. you create this object by passing a string representing the directory to the getfolder method. file a
relative pathname to an initialization file in the directory specified by the folder parameter, such as "royal/royal.ini". returns a winprofile object. description the getwinprofile method creates an object for manipulating the contents of a windows .ini file. once you have this object, you can call its methods to retrieve strings from the file or to add strings to the file. for information on the r...
initInstall - Archive of obsolete content
s the following parameters: displayname a string that contains the name of the software being installed. the name of the software is displayed to the user. package the client version registry pathname for the software (for example: plugins/adobe/acrobat or /royalairways/royalpi/). it is an error to supply a null or empty name. the name can be absolute or
relative. a
relative pathname is
relative to the netscape 6 namespace. a
relative pathname must start with plugins/, to be
relative to the plug-ins portion of that namespace or java/download/, to be
relative to the java portion. all other parts of the netscape 6 area of the registry are reserved for use by netscape. the client version registry is a hierarchical description of the software regi...
registerChrome - Archive of obsolete content
switch switch is the chrome switch indicating what type of file is being registered. skin is used to register skins, locale is used to register language packs. package, a third possibility is the equivalent of skin and/or locale, and ensures that everything in the xpi is registered. one final option for the switch parameter is delayed_chrome, which registers the switch only after a
relaunch of the browser. note that you can combine switches as in the example below. srcdir srcdir is a filespecobject representing the source destination of the installation. filespecobjects like that required by this function are created using the getfolder method on the install object. xpipath xpipath is the path within the xpi in where the contents.rdf file defini...
Properties - Archive of obsolete content
platform xpinstall was compiled for/runs on. for example, the value could begin with "windows", "macintosh" or "x11" (for unix/linux). for more details, see the corresponding code living in the getinstallplatform method of class nsinstall. url the fully qualified url of the xpi (file url, http url, ftp url, etc.) (e.g. http://dolfin/sgehani/zzz/ip.xpi). note, even if triggered using
relative urls this will show the full url (after qualification). ...
Return Codes - Archive of obsolete content
t signed or the file (and, therefore, its certificate) could not be found. no_matching_certificate -206 extracted file was not signed by the certificate used to sign the installation script cant_read_archive -207 xpi package cannot be read invalid_arguments -208 bad parameters to a function illegal_
relative_path -209 illegal
relative path user_cancelled -210 user clicked cancel on install dialog install_not_started -211 a problem occurred with the parameters to initinstall, or initinstall was not called first silent_mode_denied -212 the silent installation privilege has not been granted. ...
XPInstall - Archive of obsolete content
article describes the packaging scheme of the mozilla and offers a tutorial for creating a new package that can then be redistributed, installed, and made available to users. install wizards (aka: stub installers) view all... community view mozilla forums... mailing list newsgroup rss feed tools xpinstall trigger page
related topics extensions, xul, xpi ...
XTech 2006 Presentations - Archive of obsolete content
es to web applications. future browser graphics capabilities, both 2d and 3d, are also discussed. converging rich-client and web application development with mozilla xulrunner (open office format) - benjamin smedberg this presentation demonstrates the convergence of rich-client and web application development and discuss application deployment using mozilla xulrunner. etna, a wysiwyg xml
relax ng- and gecko-based editor - daniel glazman this presentation describes etna, a new wysiwyg xml editor based on gecko, the
relax ng parser and validator disruptive innovations implemented for it and its query api, and
relax ng extensions that were necessary to solve very old and well known problems in markup languages. an html version of the paper is available here. ...
align - Archive of obsolete content
ges, the children stretch to fit. use the flex attribute to create elements that stretch in the opposite direction. left the elements are aligned on their left edges. center the elements are centered horizontally. right the elements are aligned on their right edges. the pack attribute is
related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. ...
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. these can be either internal datasources such as rdf:bookmarks or a url. the datasources attribute may be placed on most elements, although it will usually be found on trees and menu
related elements. the element should have a template element as a child. for rdf templates, the specified datasources are combined into a single composite datasource which holds the data from all of the datasources. this composite datasource is accesssible via a script through the database property. for xml datasources, only one source is used, either the url of an xml file or an anchor reference to another element within t...
disabled - Archive of obsolete content
ents, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out enti
rely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. // disabling an element document.getelementbyid('buttonremove').setattribute("disabled", "disabled"); // enabling back an element by removing the "disabled" attribute document.getelementbyid('buttonremove').removeattrib...
flex - Archive of obsolete content
type: string (representing an integer) indicates the flexibility of the element, which indicates how an element's container distributes remaining empty space among its children. flexible elements grow and shrink to fit their given space. elements with larger flex values will be made larger than elements with lower flex values, at the ratio determined by the two elements. the actual value is not
relevant unless there are other flexible elements within the same container. once the default sizes of elements in a box are calculated, the remaining space in the box is divided among the flexible elements, according to their flex ratios. specifying a flex value of 0 has the same effect as leaving the flex attribute out enti
rely. ...
homepage - Archive of obsolete content
« xul reference home homepage type: url this attribute allows you to set a homepage for the browser element. it does not have any cor
relation with the user's browser homepage; instead it is a convenient property to hold a home page. you can switch to this home page using the gohome method. ...
Getting File Information - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! 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. the nsifile object has a number of useful attri...
Reading from Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! 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. reading data from a file involves getting a reference t...
Uploading and Downloading Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! 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. the io object and stream objects can be used to...
Writing to Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! 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. to write to a file, an output stream is used. a...
IO - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! 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. files and streams this section describes how to access ...
TOC - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! 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. ...
findbar - Archive of obsolete content
for example, the standard findbar in firefox 3.5 looks like this on the mac: you may attach a findbar to a particular browser element by either setting the findbar's browserid attribute to the id of the browser element before the findbar element is bound, or by setting the findbar's browser property to the browser element itself. ...
addTab - Archive of obsolete content
« xul reference home addtab( url, referreruri, charset, postdata, owner, allowthirdpartyfixup ) addtab( url, {referreruri: ..., charset: ..., postdata: ..., owner: ..., allowthirdpartyfixup: ...,
relatedtocurrent: ... }) return type: tab element opens a new tab that loads a page with the specified url. the rest of the parameters are optional. the row of tabs will appear if needed. firefox 3.6 note the second form of this method was added in firefox 3.6; it allows you to specify the parameters by name, in any order. it also adds the
relatedtocurrent parameter; firefox uses this to decide whether the new tab should be inserted next to the current tab. see code snippets: tabbed browser for examples. see preprocessing post data for preparing postdata out of a string. ...
appendNotification - Archive of obsolete content
n in the array is the default. type - a string. valid values are "menu-button" and "menu" which must be set if the button is to provide a popup via the popup property. notification box events requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) if you specify the eventcallback parameter, it should be a javascript function that gets called when interesting things happen
related to the notification box. this function receives as its only parameter a string indicating what event occurred. at this time, there's just one event type: "removed". this indicates that the notification box has been removed from its window. example: function testnotificationboxwithbuttons() { //create some common variables if they do not exist. // this should work from any firefox c...
loadURIWithFlags - Archive of obsolete content
« xul reference home loaduriwithflags( uri, flags, referrer, charset, postdata ) return type: no return value load a url into the document, with the specified load flags, the given referrer, character set, and post data. in addition to the flags allowed for the
reloadwithflags method, the following flags are also valid: load_flags_is_refresh: this flag is used when the url is loaded because of a meta tag refresh or redirect. load_flags_is_link: this flag is used when the url is loaded because a user clicked on a link. the http referer header is set accordingly. load_flags_bypass_history: do not add the url to the session history. load_flags_replace_history: replace the current url in the session history with a new one. this flag might be used for a redirect. (see...
Menus - Archive of obsolete content
s to menus, see adding icons to menu items. for details about creating checkbox menu items or radio menu items see checkbox menu items or radio menu items. menu items can be disabled by setting the disabled attribute to true. for an example, see disabling a menuitem. the menuseparator element the menuseparator element may be used to create a separator between menus. it is a good idea to group
related commands together on a menu and use separators between different groups. this ensures that the items on the menu are easier to distinguish. there are no special attributes that would be used on a separator. <menuseparator/> submenus sometimes, you will want an item on a menu to have additional commands tucked away on a second menu that is opened only when the item is selected. a submenu i...
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. this event will be fired even for elements that don't have a context menu associated with them. for more information about how to use this event, see context menu events. popupshowing this event is fired on a menupopup, panel or tooltip just before it is made visible. this event is most commonly used to add or adjust items on the popup based on the context. popupshown this event is fired on a menupopup, panel or tooltip once it is visible on screen. ...
Printing from a XUL App - Archive of obsolete content
this document will talk about printutils, and the ways that xul applications can trigger print-
related behaviors. structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information about how to package extensions theme packaging: specific information about how to package themes multiple-item extension packaging: specific information about multiple-item extension xpis xul application packaging: specific information about how to package xulrunner applications chrome registration printing in xul apps ...
currentIndex - Archive of obsolete content
he row index of the tree caret in the tree. for trees with focus, the caret's position is indicated by the focus ring, but unfocused trees won't show a focus ring, naturally. for unfocused trees, the (undrawn) caret's position can still be obtained by this property. if the caret isn't present for any row (for example, because the tree has never been focused), the value will be -1. you cannot
rely on this property to change or determine a tree selection, except for trees with seltype="single". (all trees have seltype="multiple" by default.) to
reliably change or determine a selection, instead use the nsitreeselection interface methods available via tree.view.selection. example // one way of retrieving the text of a cell. <script language ="javascript"> function treerowclicked(){ ...
Custom toolbar button - Archive of obsolete content
page here is a good starting point. in particular, the articles creating toolbar buttons and building an extension explain the process in more detail. supported applications you can use the steps on this page with any or all of these mozilla applications: firefox 1.5 or a later version seamonkey 2.0 or a later version thunderbird 1.5 or a later version sunbird 0.3 or a later version pre-
release versions of these (alphas, betas and
release candidates) are also ok. in the rest of this page, the term application means the mozilla application where you want to add the button. note: there is a similar tutorial for seamonkey 1.x on the page: custom toolbar button:seamonkey earlier versions and other mozilla applications also support extensions, but some parts of this tutorial are not...
Toolbars - Archive of obsolete content
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) ... more tools ...
related topics xul, themes, developing mozilla ...
Adding Buttons - Archive of obsolete content
l of the image to appear on the button. if this is attribute is left out, no image appears. you can also specify the image in a stylesheet using the list-style-image property. disabled if this attribute is set to true, the button is disabled. this is usually drawn with the text in grey. if the button is disabled, the function of the button cannot be performed. if this attribute is left out enti
rely, the button is enabled. you can switch the disabled state of the button using javascript. accesskey this should be set to a letter that is used as a shortcut key. this letter should appear in the label text and will typically be drawn underlined. when the user presses alt (or a similar key that varies on each platform) and the access key, the button will be focused from anywhere in the window...
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
ch as click and focus. use the event name without the 'on' in front of it. a common reason to set handlers is to modify the custom properties when an event occurs. for example, a custom checkbox might have a checked property which needs to be changed when the user clicks the checkbox: <handlers> <handler event="mouseup" action="this.checked=!this.checked"/> </handlers> when the user clicks and
releases the mouse button over the check box, the mouseup event is sent to it, and the handler defined here is called, causing the state of the checked property to be reversed. similarly, you may wish to change a property when the element is focused. you might have a need to change whether an element can have the focus or not. for this, you can use a special style property -moz-user-focus. this prope...
Adding Methods to XBL-defined Elements - Archive of obsolete content
ng preferences or setting the default values of fields. the destructor is called when a binding is removed from an element. this might be used to save information. there are two points when a binding is attached to an element. the first occurs when a window is displayed. all elements that have xbl-bound content will have their constructors invoked. the order that they are called in should not be
relied upon, as they are loaded from various files. the window's onload handler is not called until after all the bindings have been attached and their constructors finished. the second point is when a binding is attached by changing the -moz-binding style property of an element. the existing binding will be removed, after its destructor is called. then, the new binding will be added in its place and...
Advanced Rules - Archive of obsolete content
<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. we can then get
related resources to the root resource by using the 'list' variable. the template builder then sees the member element. it causes the builder to iterate over the children of an element. the parent is specified by the container attribute and the children are specified by the child attribute. in the example above, the value of the container attribute is the variable 'list'. thus the parent will be the ...
Commands - Archive of obsolete content
he four methods described above. the supportscommand method returns true for the 'cmd_delete' command, which is the name of the command used when the delete menu item is selected. for other commands, false should be returned since the controller does not handle any other commands. if you wanted to handle more commands, check for them here, since you will often use a single controller for multiple
related commands. the iscommandenabled method returns true if the command should be enabled. in this case, we check if there is a selected item in the listbox and return true if there is. if there is no selection, false is returned. if you delete all the rows in the example, the delete command will become disabled. you may have to click the listbox to update the menu in this simple example. the doco...
Creating Dialogs - Archive of obsolete content
this function differs from open() in several ways. it displays a dialog instead of a window, which implies that it is asking something of the user. it also has subtle differences in the way it works and appears to the user. these differences will vary depending on the platform the application is running on. ...
Creating a Skin - Archive of obsolete content
will notice that it has adopted the rules that we have added. some of the rules conflict with those already in the global stylesheets. for example, rules are already defined for buttons and tabs and so on and we defined additional rules for them. when changing the global skin, you would need to merge the changes into the existing rules. for the best skinnability, it is best to declare appearance
related style rules in the global directory rather than in individual style files. this includes colors, fonts and general widget appearances. if you change the color of something in a local skin file (such as findfile.css), the dialog may look odd if the user changes their global skin. don't expect the user to be using the default one. our find files example with this skin: source view stylesheet ...
Custom Tree Views - Archive of obsolete content
that data is highly nested. for instance, 5000 rows of treeitems would load too slowly. you might also implement a custom view when you want to perform computations on the data to be displayed. since the view can store and retrieve the data in the most suitable manner for the kind of data used, the tree can be used even when there are hundreds of thousands of rows to be displayed. note: the tree-
related interfaces changed in gecko 1.8. see tree widget changes for details. to implement a custom view, you will need to create an object which implements the nsitreeview interface. you can create these objects in javascript, but you will need a separate object for each tree. naturally, since a custom tree view is being used, the content tree view will not be used, so the treeitem, treerow, and tr...
Features of a Window - Archive of obsolete content
he pre-existing flags, which you should find in a javascript reference. you may disable a feature by setting it to 'no', for example 'dialog=no'. alwayslowered the window will always appear behind other windows. alwaysraised the window will always appear above other windows. centerscreen the window will be centered on the screen when it is opened. dependent the window will always appear
relative to the window that opened it. if the window that opened the new window is moved, the new window is moved
relative to it. dialog the window is a dialog box, which may appear differently. modal the dialog is modal. the window that opened the modal window can't be interacted with until the modal window is closed. resizable the user can resize the window. see also window interface's open...
Focus and Selection - Archive of obsolete content
he currently focused element the currently focused element is held by an object called a command dispatcher, of which there is only one for the window. the command dispatcher is responsible for keeping track of the focused element as the user uses the interface. the command dispatcher has other roles, which will be discussed in a later section on commands. for now, we'll look at some of the focus
related features of the command dispatcher. you can retrieve the command dispatcher from a window using the document's commanddispatcher property. from there, you can get the focused element with the dispatcher's focusedelement property. the example below shows this. example 3 : source view <window id="focus-example" title="focus example" onload="init();" xmlns="http://www.mozilla.org...
Grids - Archive of obsolete content
other elements do. this is because of the flex attributes added to the textboxes and the second column. the first column does not need to be flexible as the labels do not need to change size. the initial width of a column is determined by the largest element in the column. similarly, the height of a row is determined by the size of the elements in a row. you can use the minwidth and maxwidth and
related attributes to further define the size. column based organization you can also place the elements inside the column elements instead of the rows. if you do this, the rows are just declared to specify how many rows there are. example 3 : source view <grid> <rows> <row/> <row/> <row/> </rows> <columns> <column> <label control="first" value="first name:"/> <...
Groupboxes - Archive of obsolete content
the groupbox is a type of box, and the elements it contains are aligned according to the xul box rules. however, there are several differences between groupboxes and regular boxes: the groupbox can be labeled using the caption element. the groupbox is displayed in a special way—usually with a beveled border and a caption, although you can change the appearance using css. ...
Install Scripts - Archive of obsolete content
t is the identifier and the second is a subdirectory. for example: finddir = getfolder("chrome","findfile"); setpackagefolder(finddir); here, we get findfile folder in the chrome folder and pass it directly to the setpackagefolder() function. the second argument to getfolder() is the subdirectory which we are going to install into, which doesn't have to exist. you can leave this argument out enti
rely if you don't need one. setting install files next, you need to specify which files should be installed. this involves the use of two functions, adddirectory() and addfile(). the adddirectory() function tells the installer that a directory from the xpi archive (and all of its contents) should be installed to a particular location. the addfile() is similar but for a single file. both the adddirect...
List Controls - Archive of obsolete content
listcell element may be used for each cell in a row. if you want to have three columns, you will need to add three listcell elements inside each listitem. to specify the text content of a cell, place a label attribute on a listcell. for the simple case where there is only one column, you may also place the label attributes directly on the listitem elements and leave the listcell elements out enti
rely, as was seen in the earlier listbox examples. the following example is of a listbox with two columns and three rows: example 3 : source view <listbox> <listcols> <listcol/> <listcol/> </listcols> <listitem> <listcell label="george" /> <listcell label="house painter" /> </listitem> <listitem> <listcell label="mary ellen" /> <listcell label="candle maker" /> ...
Manipulating Lists - Archive of obsolete content
often more convenient to use functions of the tabbox element instead. it also has a selectedindex function which will return the index of the selected tab. however, to get the selected item, use the tabbox's selectedtab property instead. or, use the selectedpanel property to get the selected panel, that is, return the content associated with the tab. changing the selection all of the selection
related properties described above may also be assigned a new value to change the selection. in the next example, the selectedindex property of a radiogroup element is changed based on the value entered in a textbox. this code isn't foolproof though; for example it doesn't check if the value entered is out of range. you will want to make sure that you add this kind of error checking. example 3 : sou...
Modifying a XUL Interface - Archive of obsolete content
t for the document. for xul documents, this generally means that a xul element will be created. for an html document, an html element will be created, so it will have the features and functions of an html element instead. the createelementns() function may be used to create elements in a different namespace. the appendchild() function is used to add an element as a child of another element. three
related functions are the insertbefore(), replacechild() and removechild functions. the syntax of these functions is as follows: parent.appendchild(child); parent.insertbefore(child, referencechild); parent.replacechild(newchild, oldchild); parent.removechild(child); it should be fairly straightforward from the function names what these functions do. the insertbefore() function inserts a new chil...
Popup Menus - Archive of obsolete content
more detail where the popup appears. for example, the popup menu that appears when you click the back button in a browser should appear underneath the back button, not where the mouse pointer is. to change the popup position, you can use an additional attribute, position, on the menupopup. you can also add it to the menupopup element. this attribute is used to indicate the placement of the popup
relative to the element invoking the popup. it can be set to a number of values, which are described briefly below: after_start the popup appears below the element with the left edges of the element and the popup window aligned. if the popup window is larger than the element, is extends to the right. this is the value used for the drop-down menus associated with the browser's back and forward but...
Simple Menu Bars - Archive of obsolete content
tting the orient attribute to vertical. menu element the menu element works much like the button element. it accepts some of the same attributes plus some additional ones: id the unique identifier of the menu title button. label the text to appear on the menu, such as file or edit. disabled this boolean attribute determines whether the menu is disabled. although you can, there's ra
rely a need to disable an entire menu. this attribute can be set to either true or false. of course, the latter is the default. accesskey this is the key that the user can press to activate the menu item. this letter is typically shown underlined on the menu title. mozilla will look at the label attribute and add an underline character to the character specified here. for that reason, you should...
Stack Positioning - Archive of obsolete content
o mouse events, the elements on top will capture the events first. that means that if two buttons overlap, the top button will capture a mouse click where it covers the other one. width and height the bottom and right attributes can also be used in conjunction with top and left to set the width and/or height of the children of the stack. note that bottom and right attributes, unlike rect, are
relative to the bottom and right of the stack. when using these attributes to set width or height, both attributes for the given axis must be explicitly set, eg, if setting width, both "left" and "right" must be set. in this example, the resulting width of the top-most hbox will be 400px: <stack width="600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!--...
Stacks and Decks - Archive of obsolete content
he stack is drawn underneath, the second child is drawn next, followed by the third and so on. any number of elements may be stacked up in a stack. the orient property has little meaning on a stack as children are laid out above each other rather than from side to side. the size of the stack is determined by its largest child, but you can use the css properties width, height, min-width and other
related properties on both the stack and its children. the stack element might be used for cases where a status indicator needs to be added over an existing element. for example, a progress bar might be created using a bar and a label overlaid on top of it. shadowing with stacks one convenient use of the stack element however is that you could emulate a number of css properties with it. for exampl...
Tabboxes - Archive of obsolete content
isible at once, much like a deck. the contents of the individual tab pages should go inside each tabpanel element. they do not go in the tab elements, as that is where the contents of the tabs along the top go. each tabpanel element becomes a page on the tabbed display. the first panel corresponds to the first tab, the second panel corresponds to the second tab, and so on. there is a one-to-one
relationship between the tab and tabpanel elements. when determining the size of the tabbox, the size of the largest page is used. that means that if there are ten textboxes on one tab page and only one on another, the tab page will be sized to fit the one with the ten on it as this takes up more room. the area taken up by the tab area does not change when the user switches to a new tab page. tabbo...
Templates - Archive of obsolete content
text, and, since no elements are created, you can't use css properties to style tree cells in the same way. the tree builder is only used for trees. other elements use only the content builder. this isn't a problem though, since other elements such as menus wouldn't be expected to display too many items. it's also possible to use the content builder for trees as well, and a treeitem element and
related elements will be created for each row. rules in the image of the earlier example, you may have noticed that the third button is simply a button with hyphens on it. this is a separator in the bookmark list. in the way that we have been using it, the rdf bookmarks datasource supplies the separators as if they were just regular bookmarks. what we would really like to do is add a small amount o...
Using Spacers - Archive of obsolete content
ad of 145. there's no difference in this case. it is recommended that you use lower numbers for readability. note that other factors, such as the button labels and button minimum sizes, will affect the actual sizes of the buttons. for instance, a button won't shrink less than the space needed to fit its label. specifying a flex value of 0 has the same effect as leaving the flex attribute out enti
rely. it means that the element is not flexible at all. you may also sometimes see a flex value specified as a percentage. this has no special meaning and is treated as if the percent sign was not there. you may have noticed that when you resize the find file dialog vertically, the buttons resize themselves to fit the height of the window. this is because all of the buttons have an implied vertical f...
XPCOM Interfaces - Archive of obsolete content
be referred to in a similar way. the contract id of the component can be used to get the component. you can get a component using javascript code like that below: var afile = components.classes["@mozilla.org/file/local;1"].createinstance(); the file component is retrieved and stored in the afile variable. components in the example above refers to a general object that provides some component
related functions. here, we get a component class from the classes property. the classes property is an array of all of the available components. to get a different component, just replace the contract id inside the square brackets with the contract id of the component you want to use. finally, an instance is created with the createinstance() function. you should check the return value of createinst...
Using Visual Studio as your XUL IDE - Archive of obsolete content
gnized"). as vs doesn't know how the chrome protocol works it can't detect where the dtd file is really located and thus will give you errors wherever you use the entities that are declared in this file. 5.2 text preprocessor the mozilla build system includes a text preprocessor. as preprocessor directives are not valid xml, visual studio will mark them as errors in your xul files. 5.3 javascript
related you will get validation errors for javascript code whenever using the keywords "const" and "let". these keywords are mozilla-specific at the moment. vs just supports ecmascript 3rd edition and thus doesn't know these keywords. ...
XUL Changes for Firefox 1.5 - Archive of obsolete content
eparate file. a set of icons will appear across the top of the dialog allowing the user to switch panels. along with the new preference elements and some additional attributes for existing elements, they make it easy to set preferences without having to use code. for more information, see preferences system. bfcache mozilla now caches the page's dom, so that navigating back and forward does not
reload the page, making navigation much more efficient. the pageshow and pagehide events are used when switching from a page in the cache, while the load and unload events are used only when the page is loaded or unloaded. for more information see using firefox 1.5 caching. tabindex the tabindex property is now applied to most elements. <radiogroup> setting the value property on the <radiogroup>...
XUL Questions and Answers - Archive of obsolete content
ble in the search plugins category. is localizing remote xul possible? loading remote dtds for xml documents is currenty not supported in xul. the following bugs were reported on this issue: bug 22942, bug 133698. is there an editor widget in xul that supports syntax highlighting? daniel glazman has been working on this for his projects. he said the code will be open-source, but it is not
released yet (as of oct 2006). some teasers are on his blog. overlaying elements without ids the original developers only tend to put ids where they need them. as an extension author, you have at least two options: use dom methods to dynamically create or rearrange elements file an enhancement request in bugzilla to have extra ids added. displaying graphics and animation in xul? there ar...
page - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] similar to a window, except it should be used for xul files that are to be loaded into an iframe. examples (example needed) 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, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width ...
param - Archive of obsolete content
the value to bind should be text as a child of the param element. for more information, see query_parameters. attributes index, name, type attributes index type: integer the index within the sql statement of the parameter. name type: string the name of a parameter within the sql statement. this name should appear within the query preceded by a colon. ...
query - Archive of obsolete content
the attributes and content of the query are dependent on the type of datasource being used. for rdf datasources, the query should contain one content element as well as member and/or triple elements. for xml datasources, the query should have an expr attribute and may optionally contain assign elements. for sql datasources, the query should contain an sql statement as text. attributes expr examples (example needed) attributes expr type: string for xml queries, an xpath expression which returns results. ...
resizer - Archive of obsolete content
if you place a custom resizing button inside the resizer, the user will be able to resize the window by dragging it. the resizer will send a command event after the resize is complete. note: starting in gecko 2.0, you can also specify a target element using the element attribute, to use the resizer to resize the specified element instead of the window. ...
rule - Archive of obsolete content
the children of the rule are used to declare the conditions in which the rule matches and the content that is generated. a rule may contain where, binding and/or action elements. a condition is defined used a where element. for each result that matches all of the conditions, content within the rule's action body is generated. the bindings element is optional and may specify additional variable bindings to be used. when no query element is used in a template, a default query is used and the simple query syntax may be used for rdf datasources. ...
script - Archive of obsolete content
you should usually put scripts in a separate file pointed to by the src attribute, but you may also place the script inline inside the opening and closing script tags. more information is available in the xul tutorial. attributes src, type examples <script src="test.js"/> <script src="http://example.com/js/test.js"/> <script> function foo(){ // code } </script> attributes src type: uri the uri of the script. type type: language content type the language of the script. ...
scrollbar - Archive of obsolete content
the scroll bar may also be used independently when a numeric value or percentage needs to be selected by the user. the user can adjust the position of the scroll bar by clicking arrows on either end of the scroll bar or by dragging the scroll bar thumb around. more information is available in the xul tutorial. ...
scrollcorner - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] this element is used for the small box where the horizontal and vertical scrollbars meet. examples (example needed) 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, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width pro...
spinbuttons - Archive of obsolete content
spin buttons are not used as separate elements, but are used in combination with other elements to create a control that can be increased and decreased. for instance, spinbuttons are used for the number type textbox, and with the timepicker and datepicker. ...
splitter - Archive of obsolete content
when the splitter is dragged, the sibling elements of the splitter are resized. if a grippy is placed inside the splitter, one sibling element of the splitter is collapsed when the grippy is clicked. more information is available in the xul tutorial. attributes collapse, resizeafter, resizebefore, state, substate style classes tree-splitter examples <!-- this bar has some styling associated with it. ...
stringbundleset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container for stringbundle elements. examples (example needed) 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, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowev...
template - Archive of obsolete content
elements are constructed from a datasource. for more information see the rule element. more information is available in the xul tutorial. attributes container, member examples (example needed) attributes container type: string may optionally be set to the variable to use as the container or reference variable. if not specified, the variable specified in the uri attribute of the content tag in the template's first rule is used. member type: string may optionally be set to the variable to use as the member variable. ...
textnode - Archive of obsolete content
in the case of the textnode element, the entire node is replaced with text corresponding to the result of the value attribute. this is useful if you want to use the html element or other elements that have text content inside them instead of in attributes. this element does nothing outside of a template. attributes value examples (example needed) attributes value type: uri the text value to display. this value should be an rdf property (predicate). ...
triple - Archive of obsolete content
it is used to check for an assertion within a graph. if such an assertion exists, the rule may match, assuming that all the conditions match. if the assertion does not exist, the rule will not match. both the subject and object attributes may be variables. the subject of a triple is an rdf resource. in an rdf file this would usually be an rdf description element. the predicate would be a child element or property. for example, for a bookmark resource, the name and url would be predicates. they should be specified in their full uri form. ...
XUL - Archive of obsolete content
xul explorer (a lightweight xul ide) xulexplorer (patched version of xul explorer) extension developer's extension (featuring a live xul editor) xulref sidebar firebug dom inspector spket ide, ide for xul/xbl ample sdk, (cross-browser xul renderer in javascript/html) view all...
related topics javascript, xbl , css, rdf, extensions, xulrunner ...
Application Update - Archive of obsolete content
hether or not app updates are enabled pref("app.update.enabled", true); // this preference turns on app.update.mode and allows automatic download and // install to take place. we use a separate boolean toggle for this to make // the ui easier to construct. pref("app.update.auto", true); // defines how the application update service notifies the user about updates: // // aum set to: minor
releases: major
releases: // 0 download no prompt download no prompt // 1 download no prompt download no prompt if no incompatibilities // 2 download no prompt prompt // // see chart in nsupdateservice.js.in for more details // pref("app.update.mode", 1); // if set to true, the update service will present no ui for any event. pref("app.update...
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
a xulrunner application has no installer by default; however, these instructions can help you to easily create a windows installer with inno setup. the tutorial here uses the my app example from the article getting started with xulrunner. step 1: installing inno setup download inno setup from inno setup downloads. if you only want to compile the installer, install the stable
release. if you want to edit scripts, you should get the quickstart pack (which includes istool, the script editor. however, if you don't get the quickstart pack, you can later get istool from inno setup third-party files. step 2: creating the application to make your application standalone, deploy your application according to the deploying xulrunner 1.8 article. my app's example follows. myapp/ app...
Custom app bundles for Mac OS X - Archive of obsolete content
rties 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) application.ini (xulrunner-
related application settings) example.icns (this is the icon which will be used by your application bundle) chrome/ content/ example.xul (this directory contains your application's chrome) example.manifest defaults/ preferences/ app-prefs.js (this p...
Debugging a XULRunner Application - Archive of obsolete content
the file destination where the log should be created and restart the application. if you would like the console messages to appear in the console you used to launch the application, you can use the gecko console redirector. precompiled binaries are available in the zipped archive https://github.com/matthewkastor/redirector/archive/master.zip under redirector-master\gecko\console redirector\bin\
release copy all the dll's and the exe to wherever you want. then run console redirector.exe /? javascript console to enable the js console, start xulrunner with the -jsconsole argument. note: if you are not using the stub executable to launch the application, the -jsconsole argument is after the application.ini argument: e.g. xulrunner.exe /path/to/application.ini -jsconsole by default the js c...
Deploying XULRunner - Archive of obsolete content
this document explains how deployment should be managed for self contained portable applications built on xulrunner. note: to actually install a xulrunner application, a compatible version of xulrunner must be registered on the system and the app must be deployed per the instructions at xul application packaging. ...
MacFAQ - Archive of obsolete content
(note this document has not been reviewed for accuracy or completeness.) special build notes enable libxul. in your .mozconfig for custom builds of xulrunner, add --enable-libxul. if you've completed a xulrunner build, you should copy or symlink the dist/xul.framework directory to /library/frameworks. note that in order to copy the framework while keeping the
relative soft-links in the framework, do something like: % ( cd dist ; gnutar cf - xul.framework | ( cd /library/frameworks ; gnutar xf - )) installing your application your application must be installed as a xulrunner app before you can open it. to do this, type: xulrunner-bin --install-app /path/to/appdir note the path to your application must end with the directory containing application.ini; you should not reference applicati...
XULRunner tips - Archive of obsolete content
ity in needs a method to start venkman (usually by overlaying the main xul file, similar to existing code for firefox, suite, etc.) the function toopenwindowbytype() needs to be defined. there is a working stub. any better suggestion? venkman uses "chrome://communicator/skin/" as an alias for "chrome://global/skin/" and this alias was maintained in the xulrunner toolkit until xulrunner 1.9 was
released. when using xulrunner 1.9 or greater, you can create your own alias in your chrome manifest add a "skin" line: skin communicator classic/1.0 skin/communicator/ add a skin folder named "communicator" and add a single css file named "communicator.css" with this content: @import url("chrome://global/skin"); dom inspector to add dom inspector 2.0.* to your xulrun...
XUL Application Packaging - Archive of obsolete content
metadata about the application name specifies the application name. required name example: name=testapplication version specifies the application version number. required see toolkit version format for version numbering details example: version=0.1 buildid specifies a unique build identifier. this is typically a date identifier, and should be different for every
released version of an application. required example: buildid=20060201 id specifies the unique application id required the application id, like extension ids, can be formatted either like an email applicationname@vendor.tld or a uuid {12345678-1234-1234-1234-123456789abc}. the email format is recommended for newly developed applications. example: id=testapplication@example.tld v...
calICalendarViewController - Archive of obsolete content
void deleteoccurrence (in caliitemoccurrence aoccurrence); the deleteoccurrence method is called when by the calicalendarview when caliitem should be deleted. implementations of calicalendarviewcontroller should be careful to provide clearly defined behavior to the user regarding the deleting of recurring caliitems, in the case where aoccurrence is a single occurrence of a recurring caliitem. ...
mozilla.dev.platform FAQ - Archive of obsolete content
pp and tried to copy (using rsync -rl) the xul.framework directory into a frameworks directory in the .app bundle and then deleting the xul.framework directory from /library/frameworks, my running my app fails silently. it works fine when the xul.framework is installed in /library/frameworks. any suggestions? " a: make sure the app can find the framework or you can use the packages of the firefox
release repackager which uses the embedded framework successfully. please make sure you're using 1.8.0.4 or later (not 1.8.0.1, which had a bug that prevented this from working properly). q: when using xul elements <browser/> and <tabbrowser/> the javascript popup windows don't work out of the box, what needs to be implement? a: have the browser.chromeurl preference - this should be a xul document ...
nsIContentPolicy - Archive of obsolete content
le. note: acontext is the new tab/window when a user uses the context menu to open a link in a new tab/window or cmd/ctrl + clicks the link (i.e., acontext is not the tab which the link was on in these cases). amimetypeguess optional. a guess for the requested content's mime type, based on information available to the request initiator (e.g., an object's type attribute); does not
reliably reflect the actual mime type of the requested content. aextra an optional argument, pass-through for non-gecko callers to pass extra data to callees. arequestprincipal optional. defines the principal that caused the load. this is optional only for non-gecko code: all gecko code should set this argument. for navigation events, this is the principal of the page that caused this load. ...
Format - Archive of obsolete content
this is an example of what a newsgroup summary should look like when completed. summary: mozilla.dev.planning - july 17-23, 2006 announcements firefox 2/gecko 1.8.1 bug approvals starting on friday july 21 at 10:00a pdt the
release triage team will no longer be accepting bugs unless they meet one of the posted criteria. criteria are included in the linked post. firefox 1.5.0.5 planned
release - 2006/07/26 discussions firefox survey feedback requested rachel werner (mozilla corp marketing intern) requested feedback on a proposed user survey. the survey questions and feedback are included in the thread. deadline for feedback has passed. dropping bugs from blocking1.8.1+ david baron suggested a list of bugs that could be dropped from the blocking list. view bugzilla lis...
Mozilla.dev.apps.firefox-2006-10-06 - Archive of obsolete content
on os/2. title case capitalization rules in firefox discussion regarding rules for capitalizing the first letter of firefox menu items in the ff ui. engineering student project - industry coach paul betts from ohio state university is looking for someone from mozilla to be his "industry coach" for engineering 494 - how great ideas turn into great products. mozilla is a great product afterall.
reload vs.
reload from cache discussion regarding the lack of user understanding regarding
reloading and
reloading from the cache and how to address it. why suggestions in search bar doesn't work for me? discussion regarding suggestions in the search bar not functioning in the october 3rd nightly build of ff 2.0. places in firefox 3 discussion regarding places (a new system for storing bookmarks, h...
Tamarin Tracing Build Documentation - Archive of obsolete content
table, avmshell, for executing files in the abc file format. running avmshell without any arguments will list the available options. note that additional command-line arguments are only available in the debug configuration. the tamarin codebase contains a cross-platform build system for mozilla developers. the cross-platform build system is used for daily automated build testing so it is the most
reliable system. the tamarin codebase has the ability to build additional code which supports debugging hooks. in the xcode project, this is the debug_debugger and
release_debugger configurations. the flash player builds tamarin with the debugging hooks off for codesize reasons, but the mozilla client will build tamarin with the debugging hooks on. cross-platform build first, you must have the mozill...
Building a Theme - Archive of obsolete content
version of firefox you're saying this extension will work with. never use a * in a minversion, it almost certainly will not do what you expect it to. 39.* - the maximum version of firefox you're saying this extension will work with. set this to be no newer than the newest currently available version! in this case, "39.*" indicates that the extension works with firefox 39 and any subsequent 39.x
release. themes are compatible by default, unless you set strict compatibility mode for your theme. if you get a message that the install.rdf is malformed, it is helpful to load it into firefox using the file->open file command and it will report xml errors to you. see install manifests for a complete listing of the required and optional properties. save the file. styling the browser's ui with...
Create Your Own Firefox Background Theme - Archive of obsolete content
your images, go to the theme submission page: name your theme — pick a unique name for your theme. duplicate names are not allowed, so you may need to try a few times to find a unique name. pick a category and tags — select a category and enter some tags that best describe your theme. keep in mind that a reviewer may reject your theme if it is obvious that your category and/or tags are un
related to your theme. describe your theme — write a short description of your theme. keep in mind that a reviewer may reject your theme if your description is not an accurate representation of your theme. select a license for your theme — decide on a copyright license for your work. read more about the types of creative common licenses. important: please be sure you have the rights to us...
Theme changes in Firefox 4 - Archive of obsolete content
gator-toolbox element. however, the theme can force large icons in the add-on bar regardless of the user preference. examples the default windows theme wants to force small icons on the navigation bar regardless of the user preference. thus, it includes this rule in browser.css: #nav-bar { counter-reset: smallicons; } to use large icons for add-on buttons in the bookmarks toolbar when the
related user preference is set: #navigator-toolbox[iconsize="large"] > #personaltoolbar { counter-reset: largeicons; } to use large icons everywhere, including the menu bar, regardless of the user preference: #navigator-toolbox > toolbar, #addon-bar { counter-reset: largeicons; } creating a theme that works for firefox 4 on mac os x create a new directory (for example, my_theme). inside th...
Using Firebug and jQuery (Screencast) - Archive of obsolete content
lla.org/presentations/screencasts/jresig-digg-firebug-jquery.mp4 download: right-click this link and select save as... in order to download a copy of your own. (59mb) bookmarklets: in the presentation, i refer to a bookmarklet that you can use to introduce jquery into a web page. drag these bookmarklets found on this page into the bookmarks toolbar of your browser, in order to use them.
related links: firebug firefox extension jquery javascript library jquery selector documentation digg learning jquery: jquerify bookmarklet if you wish to use greasemonkey instead of a bookmarklet, then by all means, please do so. you can use the ability to quickly analyze and inspect a page that firebug and jquery affords you, using the results to build a greasemonkey script, instead of a s...
Using workers in extensions - Archive of obsolete content
ticker symbol has not been set yet, an exception is thrown (lines 4-6). when the result is received from xmlhttprequest, instead of immediately updating the displayed information in the status bar, a message is sent to the main thread using the worker's postmessage() method. this is because only the main thread is allowed to access the user interface. the main thread the changes here are also
relatively minor, but crucial. the startup() method this method is called when the extension is first loaded, and needs to be updated to start up and configure the worker. let's take a look: startup: function() { // register to receive notifications of preference changes this.prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsi...
Browser Feature Detection - Archive of obsolete content
ties and methods to determine the level of support a browser has for particular standards and reports a rating as the percentage of names the browser defines. this article has generally never been more than a way to show off firefox web compatibility, rather than something truly informative in a broader sense. therefore, given that it's also badly out of date, it's been archived. you should not
rely on any information here. 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. it is clear from these test results that netscape 7.0x and m...
-ms-filter - Archive of obsolete content
ations not part of any specification. 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 internet explorer 8, the -ms-filter attribute is an extension to css, and can be used as a synonym for filter in ie8 standards mode. when you use -ms-filter, enclose the progid in single quotes (') or double quote...
-ms-hyphenate-limit-zone - Archive of obsolete content
ontainer elementsinheritedyespercentagescalculated with respect to the width of the line boxcomputed valueas specifiedanimation typediscrete syntax values <percentage> an integer followed by a percent sign (%), which specifies the width of the hyphenation zone, calculated with respect to the line box. negative values are not allowed. <length> a floating-point number, followed by a
relative units designator, that indicates the width of the hyphenation zone. for more information about supported length units, see css basic data types. negative values are not allowed. formal syntax <percentage> | <length> specifications not part of any specification. remarks the -ms-hyphenate-limit-zone property enables you to control the amount of trailing whitespace permitted durin...
-ms-ime-align - Archive of obsolete content
the extension is implemented in microsoft edge and internet explorer 11. ime candidate lists are positioned on the screen with sufficient size to allow basic text input. in some cases, the ime may enforce a reasonable minimum size. 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. ...
:-moz-system-metric(scrollbar-thumb-proportional) - Archive of obsolete content
the :-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the
relative size of the visible area of the document. this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. specifications not part of any specification. ...
:-moz-system-metric() - Archive of obsolete content
lass will match an element if the computer's user interface includes a forward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-thumb-proportional)the :-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the
relative size of the visible area of the document.:-moz-system-metric(touch-enabled)the :-moz-system-metric(touch-enabled) css pseudo-class will match an element if the device on which the content is being rendered offers a supported touch-screen interface.:-moz-system-metric(windows-default-theme)the :-moz-system-metric(windows-default-theme) css pseudo-class matches an element if the user is curren...
azimuth - Archive of obsolete content
ter-right: same as 20deg. center-right behind: same as 160deg. right: same as 40deg. right behind: same as 140deg. far-right: same as 60deg. far-right behind: same as 120deg. right-side: same as 90deg. right-side behind: same as 90deg. behind: same as 180deg. also used as a modifier for other positional keyword values, as above. leftwards: moves the sound counter-clockwise by 20 degrees,
relative to the current angle. rightwards: moves the sound clockwise by 20 degrees,
relative to the current angle. examples h1 { azimuth: 30deg; } td.a { azimuth: far-right; } /* 60deg */ #12 { azimuth: behind far-right; } /* 120deg */ p.comment { azimuth: behind; } /* 180deg */ specifications specification status comment css level 2 (revision 1)t...
CSS - Archive of obsolete content
the extension is implemented in microsoft edge and internet explorer 11.-ms-overflow-stylethe -ms-overflow-style css property is a microsoft extension controlling the behavior of scrollbars when the content of an element overflows.-ms-scroll-chainingthe -ms-scroll-chaining css property is a microsoft extension that specifies the scrollin...
LiveConnect - Archive of obsolete content
java applets and access their api from javascript. liveconnect overview an overview for liveconnect. liveconnect reference the java classes used for liveconnect, along with their constructors and methods. java in firefox extensions community view mozilla.dev.tech.java forums... ...
MSX Emulator (jsMSX) - Archive of obsolete content
was to find some interesting project to develop while exploring the possibilities of the <canvas> tag and javascript language in the most recent web browsers like firefox 2. as you may have realized, many challenges on performance are faced when developing in javascript. they present an interesting testbed for pushing the current javascript implementations to their limits and for comparing their
relative speed. jsmsx can also be used to tightly integrate existing msx programs in web page logic. how to help lots of work to optimize the performance and add msx 2.0, 2.0+ and turbor features are still necessary. version 1.0 will
release an optimized javascript engine for msx 1.0. version 2.0, 3.0 and 4.0 will be compatible with msx 2.0, 2.0+ and turbor respectively. an uncompress javascript func...
Old Proxy API - Archive of obsolete content
y also be large incompatibilities between implementations and the behavior may change in the future. warning: the spidermonkey proxy implementation is a prototype and the proxy api and semantics specifications are unstable. the spidermonkey implementation may not reflect the latest specification draft. it is subject to change anytime. it is provided as an experimental feature. do not
rely on it for production code. introduction proxies are objects for which the programmer has to define the semantics in javascript. the default object semantics are implemented in the javascript engine, often written in lower-level languages like c++. proxies let the programmer define most of the behavior of an object in javascript. they are said to provide a meta-programming api. terminology ...
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
7 do not apply css or execute the javascript. netscape 7.0x/mozilla 1.0.x do not apply css but does execute the javascript. internet explorer 5.5+ can not display the document. (see talk:properly_using_css_and_javascript_in_xhtml_documents of this ascertation. - xmlguru) inline style and script containing double dashes another problem with using comments to surround javascript in xhtml is
related to the problems which can occur if comments contain double dashes (——). <script type="text/javascript"> <!-- var i; var sum = 0; for (i = 10; i > 0; --i) { sum += i; } // --> </script> using cdata instead of comments properly enclosing script contents inside of cdata sections can cause problems in downlevel browsers which do not understand xml. however, it is possible t...
background-size - Archive of obsolete content
w the table is a compromise for consistency. feel free to put it inside, nothing is set in stone. konqueror's global market share is 0.05%, (< 5% of linux users). given the fact that this reference has serious shortcomings in many places and few contributors, i think spending much time here is not effective. people especially interested in this browser are welcome to contribute. it's hard to get
reliable information about its css support without having this browser (read: multiple versions of this browser) installed. are you able and willing to do that for all css properties? if so, feel free to change the en/css_reference/property_template and all css property pages ; ) start with -webkit-background-size and investigate support of contain and cover keywords and "omitted second value" beha...
forEach - Archive of obsolete content
atibility section goes to extraordinary lengths in providing a foreach implementation. a much more sane approach would be to count on the implementation to throw errors if wrong arguments are provided and implement this in fewer lines of code. i've removed the lengthy example, while still linking to it and provided a much simpler and leaner implementation. dotnetcarpenter 30 june 2012 <hr> i have
released the write access restriction, but i will be watching changes closely. jswisher 01 october 2011 <hr> there is some mistype in array.prototype.foreach: kvalue = o[ pk ]; should be kvalue = o[ k ]; <hr> this page has been the target of a revert war, and so write access to it has been restricted. if you wish to make changes, and especially if you wish to revert another user's changes, please ei...
Mozilla XForms Specials - Archive of obsolete content
of the checkbox the label will be shown. for details, see the input control documentation. misc cross domain submission not exactly either a limitation, or an extension, but it is worth mentioning here. for security reasons, it is not per default possible for an xforms to submit data to another domain. this is due to security reasons. information about how to whitelist domain can be found in the
release notes the cross domain check also includes forms loaded from file://. forms loaded from that url should be local files, and thus trusted, but it is not always the case. so there is not automatic "whitelisting" of local files. if you are wondering why we have this restriction, here is a simple example of why: <xforms:model> <xforms:instance src="http://intranetserver/addrbook.xml"/> <xfor...
Requests For Enhancement - Archive of obsolete content
en you should choose one of the following rfe categories and put your request there. you can also contact the xforms team about your request. you can do so by posting a message on the xforms newsgroup or file a new bug in the 'xforms' component of the 'core' product. an additional way to attract the xforms team's attention to an enhancement request you are promoting is to vote for the bug that is
related with the feature request (if there is no bug yet then please feel free to file it). then you can give a vote by clicking on the 'vote' link on the bug page. the xforms team looks at votes to help determine which bug is more important for our xforms users. rfe categories xforms api this section contains rfe to the xforms api. custom controls i think that xforms is a great way to show t...
XForms Group Element - Archive of obsolete content
introduction the group element is used as a container for defining a hierarchy of form controls. groups can be nested to create complex hierarchies. attributes single-node binding type restrictions the group element can be bound to a node containing data of any type. actually, the group element doesn't interact with the data in the bound node. however, having a
relevant model item property on the bound node has an effect on a group. all content elements (e.g. core form controls, groups, switches, repeats and host language content) within a non-
relevant group are handled as non-
relevant. if a group is non-
relevant, then the rendering approach used to signify non-
relevance is applied to the entire content of the group. representations the group element doesn't have visual presentati...
XForms Input Element - Archive of obsolete content
e updated when the user checks or un-checks the checkbox. if "false" then the instance node will be updated when the checkbox loses the focus. labelposition - a mozilla xforms extension in the namespace http://www.mozilla.org/projects/xfor...009/extensions. this attribute is optional, possible values are before and after. the default value if omitted is after. it controls the display of the label
relative to the checkbox. before shows the label first, then the checkbox, after shows the checkbox, than the label. labelposition was introduced with mozilla xforms 0.8.8. before that, the default behavior was to display the label first, then the checkbox. since the introduction of labelposition, the behavior changed as described above to better match other implementations as well as commonly used g...
XForms Select Element - Archive of obsolete content
ree entry to the list. possible values are open and closed, default is closed. incremental - supported, default value is true properties selection - see corresponding attribute incremental - see corresponding attribute type restrictions the select element can be bound to a node containing simple content capable of holding a sequence. the data binding restriction to simple content may be
relaxed when an itemset element is used, which allows the available choices to be obtained from an xforms model. the
relaxation happens when the itemset element specifies the item value using a copy (see spec) element. this is because a copy element can be used to add a subtree of nodes underneath the element that the select control is bound to. representations the xforms select element can be rep...
XForms Select1 Element - Archive of obsolete content
t is closed (see #representations section to refer if the attribute is supported for every representation). incremental - supported, default value is true properties selection - see corresponding attribute incremental - see corresponding attribute type restrictions the select1 element can be bound to a node containing simple content. the data binding restriction to simple content may be
relaxed when an itemset element is used, which allows the available choices to be obtained from an xforms model. the
relaxation happens when the itemset element specifies the item value using a copy (see spec) element. this is because a copy element can be used to add a subtree of nodes underneath the element that the select1 control is bound to. representations the xforms select1 element can be r...
XForms Submit Element - Archive of obsolete content
resent this control. accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special submission - required reference to element submission. type restrictions the submit element can be bound to a node containing data of any type. actually, the submit element doesn't interact with the data in the bound node. however, the
relevant model item property on the bound node has an effect on a submit. if the bound node is ir
relevant, then the submit will be hidden. representations the xforms submit element can be represented by the following widgets for the specified appearance attribute values: button - default representation (xhtml/xul) link/clickable text - used when appearance = 'minimal' (xhtml only) button displa...
XForms Switch Module - Archive of obsolete content
ed at one time. the toggle element is an action that when triggered will make a case selected and visible and thereby hiding all other case elements contained by the same switch. attributes single-node binding type restrictions the switch element can be bound to a node containing data of any type. actually, the switch element doesn't interact with the data in the bound node. however, having a
relevant model item property on the bound node has an effect on a switch. binding a switch to a data node will also set a context that the expressions contained inside the case elements can build upon. representations the switch element doesn't have a visual representation. case element this element (see the spec) encloses markup to be conditionally rendered. the content elements (e.g. form controls,...
XForms Trigger Element - Archive of obsolete content
ibute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding type restrictions the trigger element can be bound to a node containing data of any type. actually, the trigger element doesn't interact with the data in the bound node. however,
relevant model item property on the bound node has an effect on a trigger. if the bound node is ir
relevant, then the trigger will be hidden. representations the xforms trigger element can be represented by the following widgets for the specified appearance attribute values: button - default representation (xhtml/xul) link/clickable text - used when appearance = 'minimal' (xhtml only) button...
Archived open Web documentation - Archive of obsolete content
in object initializers that allows serialization of objects that have cyclic references or multiple references to the same object. standards-compliant authoring tools creating cross-browser code upfront will save you lots of time quality testing your web content. the following authoring tools adhere to the w3 standards. if you're using older versions of tools that
rely on old browser bugs or generate browser-specific code, it may be time to upgrade: stopiteration the stopiteration object was used to tell the end of the iteration in the legacy iterator protocol. do not use this ancient feature. styling the amazing netscape fish cam page using javascript generators in...
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. the web standards project web developer's handbook webdev feedhouse - blog feeds for popular standards-compliant blogs. ...
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
slightly more simplified rule: *:-moz-list-bullet, *:-moz-list-number {font-size: 1em;} recommendations if it is important to make list item markers match the font size of the content, use one of the suggested rules. in situations where validation is a priority, segregate the rule into a separate stylesheet so that the rule will not confuse css validators run against the main stylesheet.
related links bug 110360 bug 97351 original document information author(s): eric a. meyer, netscape communications last updated date: published 04 oct 2002; revised 07 mar 2003 copyright information: copyright © 2001-2003 netscape. all rights reserved. note: this reprinted article was originally part of the devedge site. ...
Mozilla's DOCTYPE sniffing - Archive of obsolete content
t//dtd internet explorer 3.0 tables//en". the public identifier "-//sun microsystems corp.//dtd hotjava html//en". the public identifier "-//sun microsystems corp.//dtd hotjava strict html//en". the public identifier "-//ietf//dtd html 2.1e//en". the public identifier "-//o'reilly and associates//dtd html extended 1.0//en". the public identifier "-//o'reilly and associates//dtd html extended
relaxed 1.0//en". the public identifier "-//o'reilly and associates//dtd html 2.0//en". the public identifier "-//sq//dtd html 2.0 hotmetal + extensions//en". the public identifier "-//spyglass//dtd html 2.0 extended//en". the public identifier "+//silmaril//dtd html pro v0r11 19970101//en". the public identifier "-//w3c//dtd html experimental 19960712//en". the public identifier "-//w3c//dtd h...
Styling Abbreviations and Acronyms - Archive of obsolete content
t. the underline tells readers that the word in question has extra information associated with it. in mozilla, placing the mouse pointer over the element and leaving it for a moment will cause the contents of the title attribute to appear as a tooltip next to the mouse pointer. removing the underline from these elements will rob readers of an indication that there is extra information available.
related links web content accessibility guidelines 1.0 original document information author(s): eric a. meyer, netscape communications last updated date: published 09 aug 2002 copyright information: copyright © 2001-2003 netscape. all rights reserved. note: this reprinted article was originally part of the devedge site. ...
XQuery - Archive of obsolete content
xquery is a w3c standard language which is meant to be for xml what sql is for
relational data--i.e., the ability to search, sort, extract, and remold data. it offers powerful and yet intuitive searching based on xpath, has sql-like syntax for the query portion, and has scripting features such as function and variable definitions, xml-inclusion, etc. while xquery is currently not supported in firefox (whether through javascript to developers or to browser users), at least one extension has been developed to give a p
reliminary support for xquery for browser users (and serving as a simple model for how xquery can be implemented within extensions). xquseme is a working proof-of-concept (so far tested on windows and linux with java installed; mac does not work) extension which allows on...
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 ...
Examples - Game development
the first two sections list playable games, while the second is a catch-all area to list demos that aren't necessarily interactive/games. free/demo games beloola webvr platform to connect passionate people. experience both available on 2d screens and on vr hmds (settings / switch to vr mode). tanx a multiplayer tank battle game, created with playcanvas. ...
Game distribution - Game development
html5 games, but if you want to reach a broader audience and distribute your game in a closed ecosystem, you still can do that by packaging it. the good thing is that you don't need a few separate teams working on the same game for different platforms — you can build it once and use tools like phonegap or cocoonio to package the game for native stores. the resulting packages are usually pretty
reliable, but you should still test them and be on the lookout for small issues or bugs to fix. available tools there are various tools to choose from depending on your skills, preferred frameworks or target platforms. it's all about picking the best tool for your particular task. phonegap — based on cordova, this is the most popular tool for building/packaging javascript apps for native platf...
Building up a basic demo with PlayCanvas editor - Game development
you want — it is optional. click create to have it created. next you'll see your project's page — there's not much yet. by clicking the editor button we'll launch the online playcanvas editor where we'll create our scene with the shapes. do this now. creating the scene here's how the scene looks initially in the editor. even though it's a blank new project we don't have to start enti
rely from scratch — the camera and directional light are prepared already, so you don't have to worry about them. now onto the creative part. to add an entity to the scene you have to click on the big plus button located in the top left area of the editor, next to the hierarchy text. when hovering over that button with your mouse the label will say 'add entity' — that's exactly what we want to...
Building up a basic demo with the PlayCanvas engine - Game development
o make changes to these values inside the rendering loop, so they are updated on every frame. there's a special update event that we can use for that — add the following code just below the previous additions: var timer = 0; app.on("update", function (deltatime) { timer += deltatime; // code executed on every frame }); the callback takes the deltatime as the parameter, so we have the
relative time that has passed since the previous invocation of this update. for time based animations we'll use a timer variable that will store the time that has passed since the start of the app by adding the deltatime to it on every update. rotation rotating is quite easy — all you need to do is to add a defined value to the given direction of rotation on each frame. add this line of code insi...
3D games on the Web - Game development
r support the webgl project documentation and specification is maintained by the khronos group, not the w3c as with most of the web apis. support on modern browsers is very good, even on mobile, so you don't have to worry about that too much. the main browsers are all supporting webgl and all you need to focus on is optimizing the performance on the devices you use. there's an ongoing effort on
releasing webgl 2.0 (based on opengl es 3.0) in the near future, which will bring many improvements and will help developers build games for the modern web using current, powerful hardware. explaining the basic 3d theory the basics of 3d theory centers around shapes represented in a 3d space, with a coordinate system being used to calculate their positions. see our explaining basic 3d theory articl...
WebRTC data channels - Game development
data channels. this article explains more about this, and shows you how to use libraries to implement data channels in your game. what is a data channel? a webrtc data channel lets you send text or binary data over an active connection to a peer. in the context of a game, this lets players send data to each other, whether text chat or game status information. data channels come in two flavors.
reliable channels guarantee that messages you send arrive at the other peer and in the same order in which they're sent. this is analogous to a tcp socket. un
reliable channels make no such guarantees; messages aren't guaranteed to arrive in any particular order and, in fact, aren't guaranteed to arrive at all. this is analogous to a udp socket. we have documentation for using webrtc. this article, ...
Tools for game development - Game development
porting applications to the web! there is a useful emscripten tutorial available on the wiki. note that we are aiming to cover emscripten in its own section of mdn. gecko profiler the gecko profiler extension lets you profile your code to help figure out where your performance issues are so that you can make your game run at top speed. shumway shumway is a renderer for adobe flash built enti
rely in javascript, webgl, etc., bridging the gap between flash and web standards. this article shows how to make use of shumway, and how to contribute fixes and bugs to the project. toolchain for developing and debugging games how does this differ from normal web app debugging? what specialist tools are available? a lot of this is going to be covered by will in tools, but here we should provide a ...
Create the Canvas and draw on it - Game development
vas tutorial. you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson1.html. before we can start writing the game's functionality, we need to create a basic structure to render the game inside. this can be done using html and the <canvas> element. the game's html the html document structure is quite simple, as the game will be rendered enti
rely on the <canvas> element. using your favourite text editor, create a new html document, save it as index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev canvas workshop</title> <style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> </...
Track the score and win - Game development
ar b = bricks[c][r]; if(b.status == 1) { if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) { dy = -dy; b.status = 0; score++; if(score == brickrowcount*brickcolumncount) { alert("you win, congratulations!"); document.location.
reload(); clearinterval(interval); // needed for chrome to end game } } } } } } thanks to this, your users can actually win the game when they destroy all the bricks, which is quite important when it comes to games. the document.location.
reload() function
reloads the page and starts the game again once the alert butt...
2D breakout game using pure JavaScript - Game development
every step has editable, live samples available to play with so you can see what the intermediate stages should look like. you will learn the basics of using the <canvas> element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states. to get the most out of this series of articles you should already have basic to intermediate javascript knowledge. after working through this tutorial you should be able to build your own simple web games. ...
Animations and tweens - Game development
mations and tweens in our game. animations in phaser, animations, involve taking a spritesheet from an external source and displaying the sprites sequentially. as an example, we will make the ball wobble when it hits something. first of all, grab the spritesheet from github and save it in your /img directory. next, we will load the spritesheet — put the following line at the bottom of your p
reload() function: game.load.spritesheet('ball', 'img/wobble.png', 20, 20); instead of loading a single image of the ball we can load the whole spritesheet — a collection of different images. we will show the sprites sequentially to create the illusion of animation. the spritesheet() method's two extra paremeters determine the width and height of each single frame in the given spritesheet file, ...
Bounce off the walls - Game development
easily accomplished using the collideworldsbound property. add this line right after the existing game.physics.enable() method call: ball.body.collideworldbounds = true; now the ball will stop at the edge of the screen instead of disappearing, but it doesn't bounce. to make this occur we have to set its bounciness. add the following line below the previous one: ball.body.bounce.set(1); try
reloading index.html again — now you should see the ball bouncing off all the walls and moving inside the canvas area. compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps this is starting to look more like a game now, but we can't control it in any way — it's high time we introduced the play...
Buttons - Game development
eed a variable to store a boolean value representing whether the game is currently being played or not, and another one to represent our button. add these lines below your other variable definitions: var playing = false; var startbutton; loading the button spritesheet we can load the button spritesheet the same way we loaded the ball's wobble animation. add the following to the bottom of the p
reload() function: game.load.spritesheet('button', 'img/button.png', 120, 40); a single button frame is 120 pixels wide and 40 pixels high. you also need to grab the button spritesheet from github, and save it in your /img directory. adding the button to the game adding the new button to the game is done by using the add.button method. add the following lines to the bottom of your create() func...
Collision detection - Game development
ut.x || game.world.width*0.5; } the ball's position is calculated against the positions of all the bricks in the group. the third, optional parameter is the function executed when a collision occurs — ballhitbrick(). create this new function as the bottom of your code, just before the closing </script> tag, as follows: function ballhitbrick(ball, brick) { brick.kill(); } and that's it!
reload your code and you should see the new collision detection working just as required. thanks to phaser there are two parameters passed to the function — the first one is the ball, which we explicitly defined in the collide method, and the second one is the single brick from the bricks group that the ball is colliding with. inside the function we remove the brick in question from the screen sim...
Game over - Game development
e; this will make the three walls (top, left and right) bounce the ball back, but the fourth (bottom) will disappear, letting the ball fall off the screen if the paddle misses it. we need a way to detect this and act accordingly. add the following lines just below the previous new one: ball.checkworldbounds = true; ball.events.onoutofbounds.add(function(){ alert('game over!'); location.
reload(); }, this); adding those lines will make the ball check the world (in our case canvas) bounds and execute the function bound to the onoutofbounds event. when you click on the resulting alert, the page will be
reloaded so you can play again. compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next ...
Move the ball - Game development
on and its definition? the code inside it is executed on every frame, so it's a perfect place to put the code that will update the ball's position on screen. add the following new lines of the code inside update(), as shown: function update() { ball.x += 1; ball.y += 1; } the code above adds 1 to the x and y properties representing the the ball coordinates on the canvas, on each frame.
reload index.html and you should see the ball rolling across the screen. compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps the next step is to add some basic collision detection, so our ball can bounce off the walls. this would take several lines of code — a significantly more complex step t...
The score - Game development
ricks are destroyed we will increase the number of points every time the ball hits a brick and update the scoretext to display the current score. this can be done using the settext() method — add the two new lines seen below to the ballhitbrick() function: function ballhitbrick(ball, brick) { brick.kill(); score += 10; scoretext.settext('points: '+score); } that's it for now —
reload your index.html and check that the score updates on every brick hit. compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps we now have a scoring system, but what's the point of playing and keeping score if you can't win? let's see how we can add a victory state, allowing us to win the game.
Win the game - Game development
if there are no more bricks left alive, then we show a winning message, restarting the game once the alert is dismissed. compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better...
Touch Event Horizon - Game development
this article is for touch event horizon and a game
related to it touch gestures and events link the example game github repository live demo setting up the canvas counting the taps touchstart, touchend collecting the bonus touchmove future developments summary this tutorial shows how to use touch events to create a game on a <canvas>. this is a multi-player game
relying on the tap and drag gestures. ...
Test your skills: HTML accessibility - Learn web development
hed example: download the starting point for this task to work in your own editor or in an online editor. html accessibility 2 in the second task, you have a form containing three input fields. you need to: semantically associate the input with their labels. assume that these inputs will be part of a larger form, and wrap them in an element that associates them all together as a single
related group. give the group a description/title that summarises all of the information as personal data. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html accessibility 3 in this task you are required to turn all the information links in the paragraph into good, accessible li...
Accessibility - Learn web development
uction to it: looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites to get the most out of this module, it would be a good idea to either work through at least the first two modules of the html, css, and javascript topics, or perhaps even better, work through the
relevant parts of the accessibility module as you work through the
related technology topics. note: if you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as jsbin or glitch. guides what is accessibility? this article starts off the module with a good look at wh...
A cool-looking box - Learn web development
in this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box. prerequisites: before attempting this assessment, you should have already worked through all the articles in this module. objective: to test comprehension of the css box model and other box-
related features such as borders and backgrounds. starting point to get this assessment started, you should: make local copies of the starting html and css — save them as index.html and style.css in a new directory. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html and fill in the css into one of these online editors. if the online editor you are using doesn't have a separate css panel, feel ...
Advanced styling effects - Learn web development
t each one is now sat on top of a simple <div> with a purple background, to show how the elements will blend together: <article> no mix blend mode <div> </div> <div> </div> </article> <article> multiply mix <div class="multiply-mix"> </div> <div> </div> </article> here's the css we'll style this with: article { width: 280px; height: 180px; margin: 10px; position:
relative; display: inline-block; } div { width: 250px; height: 130px; padding: 10px; margin: 10px; } article div:first-child { position: absolute; top: 10px; left: 0; background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; background-color: green; } article div:last-child { background-color: purple; position: absolute; bottom: -...
Creating fancy letterheaded paper - Learn web development
ke the right impression, writing a letter on nice letterheaded paper can be a really good start. in this assessment we'll challenge you to create an online template to achieve such a look. prerequisites: before attempting this assessment you should have already worked through all the articles in this module. objective: to test comprehension of css box model, and other box-
related features such as implementing backgrounds. starting point to get this assessment started, you should: make local copies of the html and css — save them as index.html and style.css in a new directory. save local copies of the top, bottom and logo images in the same directory as your code files. alternatively, you could use a site like jsbin or glitch to do your assessment. you ...
Overflowing content - Learn web development
a consistent scrolling experience. unwanted overflow in web design modern layout methods (described in css layout) manage overflow. they largely work without assumptions or dependencies for how much content there will be on a web page. this has not always been the norm. in the past, some sites were built with fixed-height containers to align bottoms of boxes. these boxes may otherwise have no
relationship to each other. this was fragile. in a legacy application, you may encounter a box where content is overlaying other content on the page. now you can recognize that this happens with overflow. ideally, you will refactor the layout to not
rely on fixed-height containers. when developing a site, always keep overflow in mind. test designs with large and small amounts of content. increase th...
Combinators - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the different combinator selectors that can be used in css. ...
Test your skills: Writing Modes and Logical Properties - Learn web development
ed vertically. your end result should look like the image below. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task three use logical versions of the margin, border, and padding properties so that the edges of the box
relate to the text rather than following top, left, bottom and right. you can see how this should look in the image below. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the int...
CSS building blocks - Learn web development
asses and pseudo-elements combinators the box model everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align items with other items. in this lesson, we will take a proper look at the css box model, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that
relates to it. backgrounds and borders in this lesson we will take a look at some of the creative things you can do with css backgrounds and borders. from adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css. handling different text directions in recent years, css has evolved in order to better support different dire...
Responsive design - Learn web development
ries to only changing the layout of the page. they can be used to tweak any element to make it more usable or attractive at alternate screen sizes. using viewport units for responsive typography an interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always
relate to the size of the viewport. h1 { font-size: 6vw; } the problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always
related to the size of the viewport. therefore you should never set text using viewport units alone. there is a solution, and it involves using calc(). if you add the vw unit to a value set using a fixed size...
Supporting older browsers - Learn web development
>s so they display in a row. any browser that does not support css grid layout will see the row of boxes as a floated layout. a floated item that becomes a grid item loses the float behaviour, which means that by turning the wrapper into a grid container, the floated items become grid items. if the browser supports grid layout it will display the grid view, if not it ignores the display: grid and
related properties and the floated layout is used. * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } <div class="wrapper"> <div class="item">item one</div> <div class="item...
CSS layout - Learn web development
we have covered the necessary prerequisites so we can now dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about. ...
How CSS works - Learn web development
ould appear in after the rules have been applied to it. the visual display of the page is shown on the screen (this stage is called painting). the following diagram also offers a simple view of the process. about the dom a dom has a tree-like structure. each element, attribute, and piece of text in the markup language becomes a dom node in the tree structure. the nodes are defined by their
relationship to other dom nodes. some elements are parents of child nodes, and child nodes have siblings. understanding the dom helps you design, debug and maintain your css because the dom is where your css and the document's content meet up. when you start working with browser devtools you will be navigating the dom as you select items in order to see which rules apply. a real dom representation ...
Styling links - Learn web development
ou'll just have to resize the image and insert it as is. finally, we set some padding-right on the links to make space for the background image to appear in, so we aren't overlapping it with the text. a final word — how did we select just external links? well, if you are writing your html links properly, you should only be using absolute urls for external links — it is more efficient to use
relative links to link to other parts of your own site (as with the first link). the text "http" should therefore only appear in external links (like the second and third ones), and we can select this with an attribute selector: a[href*="http"] selects <a> elements, but only if they have an href attribute with a value that contains "http" somewhere inside it. so that's it — try revisiting the acti...
Typesetting a community school homepage - Learn web development
coupled with sans-serif or slab serif for the headings might be nice. use a suitable service to generate bulletproof @font-face code for these two fonts. apply your body font to the whole page, and your heading font to your headings. general text styling: give the page a site-wide font-size of 10px. give your headings and other element types appropriate font-sizes defined using a suitable
relative unit. give your body text a suitable line-height. center your top level heading on the page. give your headings a little bit of letter-spacing to make them not too too squashed, and allow the letters to breathe a bit. give your body text some letter-spacing and word-spacing, as appropriate. give the first paragraph after each heading in the <section> a little bit of text-indentation, sa...
Learn to style HTML using CSS - Learn web development
, line and letter spacing, drop shadows and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. css layout at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. now it's time to look at how to place your boxes in the right place in
relation to the viewport, and one another. we have covered the necessary prerequisites so we can now dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about. solving common css problems use css to solve common problems provides links to sections of content exp...
What HTML features promote accessibility? - Learn web development
n a logical tabbing order. the tabindex attribute allows you to define this order. if the html is linear, as it should be, a logical tabbing order should automatically fall into place. <ul> <li><a href="here.html" tabindex="1">here</a></li> <li><a href="there.html" tabindex="3">there</a></li> <li><a href="anywhere.html" tabindex="2">anywhere</a></li> </ul> in this example (which is used pu
rely as a demonstration—do not do this), tabbing would jump from “here” to “anywhere” to “there”. link titles if you have a link that isn’t self-descriptive, or the link destination could benefit from being explained in more detail, you can add information to a link using the title attribute. <p>i'm really bad at writing link text. <a href="inept.html" title="why i'm rubbish at wri...
How does the Internet work? - Learn web development
r happens, they find a way to stay connected. active learning how the internet works in 5 minutes: a 5 minute video to understand the very basics of internet by aaron titus. how does the internet work? detailed well visualized 8 minute video. deeper dive a simple network when two computers need to communicate, you have to link them, either physically (usually with an ethernet cable) or wi
relessly (for example with wifi or bluetooth systems). all modern computers can sustain any of those connections. note: for the rest of this article, we will only talk about physical cables, but wi
reless networks work the same. such a network is not limited to two computers. you can connect as many computers as you wish. but it gets complicated quickly. if you're trying to connect, say, ten com...
How do you upload your files to a web server? - Learn web development
t your sftp client to the distant server, follow these steps: choose file > site manager... from the main menu. in the site manager window, press the new site button, then fill in the site name as demozilla in the provided space. fill in the sftp server your host provided in the host: field. in the logon type: drop down, choose normal, then fill in your provided username and password in the
relevant fields. fill in the correct port and other information. your window should look something like this: now press connect to connect to the sftp server. note: make sure your hosting provider offers sftp (secure ftp) connection to your hosting space. ftp is inherently insecure, and you shouldn't use it. here and there: local and remote view once connected, your screen should look someth...
What are hyperlinks? - Learn web development
olved to provide access to images, videos, and binary data, but these improvements have hardly changed the three pillars. before the web, it was quite hard to access documents and move from one to another. being human-readable, urls already made things easier, but it's hard to type a long url whenever you want to access a document. this is where hyperlinks revolutionized everything. links can cor
relate any text string with a url, such that the user can instantly reach the target document by activating the link. links stand out from the surrounding text by being underlined and in blue text. tap or click a link to activate it, or if you use a keyboard, press tab until the link is in focus and hit enter or spacebar. links are the breakthrough that made the web so useful and successful. in t...
What software do I need to build a website? - Learn web development
our site in the most common environments. alternatively, you can set up your own virtual machine, but that takes some expertise. (if you're going that route, microsoft has some tools for developers including a ready-to-use virtual machine at modern.ie.) by all means run some tests on a real device, especially on real mobile devices. mobile device simulation is a new, evolving technology and less
reliable than desktop simulation. mobile devices cost money, of course, so we suggest taking a look at the open device lab initiative. you can also share devices if you want to test on many platforms without spending too much. next steps some of this software is free, but not all of it. find out how much it costs to do something on the web. if you'd like to learn more about text editors, read ou...
The HTML5 input types - Learn web development
so look at this element in the next article). you could display an input value or the output of a calculation inside any element, but <output> is special — like <label>, it can take a for attribute that allows you to associate it with the element or elements that the output value came from. 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. then we immediately set the output's textcontent to the current value of the...
HTML forms in legacy browsers - Learn web development
gradation is web developer's best friend graceful degradation and progressive enhancement are development patterns that allow you to build great stuff by supporting a wide range of browsers at the same time. when you build something for a modern browser, and you want to be sure it will work, one way or another, on legacy browsers, you are performing graceful degradation. let's see some examples
related to html forms. html input types the input types added in html5 are all useable, even in ancient browsers, because the way they degrade is highly predictable. if a browser does not know the value of the type attribute of an <input> element, it will fall back as if the value were text. <label for="mycolor"> pick a color <input type="color" id="mycolor" name="color"> </label> su...
Example 2 - Learn web development
<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, ari...
Example 3 - Learn web development
<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, ari...
Example 4 - Learn web development
<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, ari...
Example 5 - Learn web development
i 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 { 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, ari...
Example - Learn web development
lid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } fieldset { width: 250px; box-sizing: border-box; margin-left: 136px; border: 1px solid #999; } button { margin: 20px 0 0 124px; } label { position:
relative; } label em { position: absolute; right: 5px; top: 20px; } result ...
Sending forms through JavaScript - Learn web development
mat the services require. so how should we send such data? the different techniques you'll require are done below. sending form data there are 3 ways to send form data: building an xmlhttprequest manually. using a standalone formdata object. using formdata bound to a <form> element. let's look at them in detail. building an xmlhttprequest manually xmlhttprequest is the safest and most
reliable way to make http requests. to send form data with xmlhttprequest, prepare the data by url-encoding it, and obey the specifics of form data requests. let's look at an example: <button>click me!</button> and now the javascript: const btn = document.queryselector('button'); function senddata( data ) { console.log( 'sending data' ); const xhr = new xmlhttprequest(); let urlencodedda...
Dealing with files - Learn web development
l computer, make sure they can talk to one another, and get all your content looking right before you eventually upload them to a server. dealing with files discusses some issues you should be aware of so you can set up a sensible file structure for your website. where should your website live on your computer? when you are working on a website locally on your computer, you should keep all the
related files in a single folder that mirrors the published website's file structure on the server. this folder can live anywhere you like, but you should put it somewhere where you can easily find it, maybe on your desktop, in your home folder, or at the root of your hard drive. choose a place to store your website projects. inside your chosen place, create a new folder called web-projects (or si...
HTML basics - Learn web development
ext for users who cannot see the image, possibly because of the following reasons: they are visually impaired. users with significant visual impairments often use tools called screen readers to read out the alt text to them. something has gone wrong causing the image not to display. for example, try deliberately changing the path inside your src attribute to make it incorrect. if you save and
reload the page, you should see something like this in place of the image: the keywords for alt text are "descriptive text". the alt text you write should provide the reader with enough information to have a good idea of what the image conveys. in this example, our current text of "my test image" is no good at all. a much better alternative for our firefox logo would be "the firefox logo: a flami...
JavaScript basics - Learn web development
ged dynamic programming language that can add interactivity to a website. it was invented by brendan eich (co-founder of the mozilla project), the mozilla foundation, and the mozilla corporation. javascript is versatile and beginner-friendly. with more experience, you'll be able to create games, animated 2d and 3d graphics, comprehensive database-driven apps, and much more! javascript itself is
relatively compact, yet very flexible. developers have written a variety of tools on top of the core javascript language, unlocking a vast amount of functionality with minimum effort. these include: browser application programming interfaces (apis) built into web browsers, providing functionality such as dynamically creating html and setting css styles; collecting and manipulating a video stream f...
Publishing your website - Learn web development
e app engine? for more information. these options are usually free, but you may outgrow the limited feature-set. using a web-based ide such as codepen there are a number of web apps that emulate a website development environment, allowing you to enter html, css and javascript, and then display the result of that code as a website — all in one browser tab. generally speaking, these tools are
relatively easy, great for learning, good for sharing code (for example, if you want to share a technique with or ask for debugging help from colleagues in a different office), and free (for basic features). they host your rendered page at a unique web address. however, the features are limited, and these apps usually don't provide hosting space for assets (like images). try playing with some of the...
HTML Cheatsheet - Learn web development
can mark a phrase in the text in <i>italics</i> you can mark a phrase in the text in italics bold some text <b>bold a word or phrase</b>within the text bold a word or phrase within the text mark text as important <strong>i'm important</strong> i'm important highlight some text <mark>notice me</mark> notice me draw a line through ir
relevant text <s>i'm ir
relevant</s> i'm ir
relevant underline a non-textual annotation this is <u>mispelled</u> this is mispelled text displayed lower than normal text h<sub>2</sub>o h2o small text used to represent the <small>small print </small>of a document used to represent the small print of a document used for an address <address>main...
Define terms with HTML - Learn web development
not an acceptable alternative for providing an inline expansion. the contents of title are completely hidden from your users, unless they're using a mouse and they happen to hover over the abbreviation. the spec duly acknowledges this as well. improve accessibility <dfn> marks the keyword defined, and indicates that the current paragraph defines the keyword. in other words, there's an implicit
relationship between the <dfn> element and its container. if you want a more formal
relationship, or your definition consists of only one sentence rather than the whole paragraph, you can use the aria-describedby attribute to associate a term more formally with its definition: <p> <span id="ff"> <dfn aria-describedby="ff">firefox</dfn> is the web browser created by the mozilla foundation. ...
Use JavaScript within a webpage - Learn web development
pt applications use scripting accessibly accessibility is a major issue in any software development. javascript can make your website more accessible if you use it wisely, or it can become a disaster if you use scripting without care. to make javascript work in your favor, it's worth knowing about certain best practices for adding javascript: make all content available as (structured) text.
rely on html for your content as much as possible. for example, if you've implemented a nice javascript progress bar, make sure to supplement it with matching text percentages inside the html. likewise, your drop-down menus should be structured as unordered lists of links. make all functionality accessible from the keyboard. let users tab through all controls (e.g., links and form input) in a ...
Debugging HTML - Learn web development
debugging isn't scary when writing code of some kind, everything is usually fine, until that dreaded moment when an error occurs — you've done something wrong, so your code doesn't work — either not at all, or not quite how you wanted it to. for example, the following shows an error reported when trying to compile a simple program written in the rust language. here, the error message is
relatively easy to understand — "unterminated double quote string". if you look at the listing, you can probably see how println!(hello, world!"); might logically be missing a double quote. however, error messages can quickly get more complicated and less easy to interpret as programs get bigger, and even simple cases can look a little intimidating to someone who doesn't know anything about rust. ...
Marking up a letter - Learn web development
us to do (if you are stuck and need help, or if you want an assessment). a link to the example you want evaluated or need help with, in an online shareable editor (as mentioned in step 1 above). this is a good habit to develop. it's very hard to help someone with a coding problem without seeing their code. a link to the actual task or assessment page, so we can read the exact wording of the
relevant question(s). previous overview: introduction to html next in this module getting started with html what’s in the head? metadata in html html text fundamentals creating hyperlinks advanced text formatting document and website structure debugging html marking up a letter structuring a page of content ...
Introduction to HTML - Learn web development
shows the syntax required to make a link and discusses best practices for links. advanced text formatting there are many other elements in html for formatting text that we didn't get to in the html text fundamentals article. the elements here are less well-known, but still useful to know about. 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. document and website structure as well as defining individual parts of your page (such as "a paragraph" or "an image"), html is also used to define areas of your website (such as "the header," "the navigation menu," or "the main content column.") this article looks into how to plan a basic website structure and how to write the...
Mozilla splash page - Learn web development
he <article> element (right below the opening tag), embed the youtube video found at https://www.youtube.com/watch?v=ojcncvb1olg, using the appropriate youtube tools to generate the code. the video should be 400px wide. adding responsive images to the further info links inside the <div> with the class of further-info you will find four <a> elements — each one linking to an interesting mozilla-
related page. to complete this section you'll need to insert an <img> element inside each one containing appropriate src, alt, srcset and sizes attributes. in each case (except one — which one is inherently responsive?) we want the browser to serve the 120px wide version when the viewport width is 500px wide or less, or the 400px wide version otherwise. make sure you match the correct images with...
Multimedia and Embedding - Learn web development
wing articles which will take you through all the fundamentals of embedding multimedia on webpages. images in html there are other types of multimedia to consider, but it is logical to start with the humble <img> element used to embed a simple image in a webpage. in this article we'll look at how to use it in more depth, including basics, annotating it with captions using <figure>, and how it
relates to css background images. video and audio content next, we'll look at how to use the html5 <video> and <audio> elements to embed video and audio on our pages, including basics, providing access to different file formats to different browsers, adding captions and subtitles, and how to add fallbacks for older browsers. from <object> to <iframe> — other embedding technologies at this point...
HTML table basics - Learn web development
re no wonder that the creators of html provided a means by which to structure and present tabular data on the web. how does a table work? the point of a table is that it is rigid. information is easily interpreted by making visual associations between row and column headers. look at the table below for example and find a jovian gas giant with 62 moons. you can find the answer by associating the
relevant row and column headers. data about the planets of our solar system (planetary facts taken from nasa's planetary fact sheet - metric. name mass (1024kg) diameter (km) density (kg/m3) gravity (m/s2) length of day (hours) distance from sun (106km) mean temperature (°c) number of moons notes terrestial planets mercury 0.330 4,879 ...
Choosing the right approach - Learn web development
om the server, and uses promise.all() to wait for all of them to be available before then displaying all of them — see it live, and see the source code: function fetchanddecode(url, type) { // returning the top level promise, so the result of the entire chain is returned out of the function return fetch(url).then(response => { // depending on what type of file is being fetched, use the
relevant function to decode its contents if(type === 'blob') { return response.blob(); } else if(type === 'text') { return response.text(); } }) .catch(e => { console.log(`there has been a problem with your fetch operation for resource "${url}": ` + e.message); }); } // call the fetchanddecode() method to fetch the images and the text, and store their promises in va...
Graceful asynchronous programming with Promises - Learn web development
rrently, there is nothing to explicitly handle errors if one of the promises fails (rejects, in promise-speak). we can add error handling by running the .catch() method off the previous promise. add this now: let errorcase = promise3.catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); to see this in action, try misspelling the url to the image and
reloading the page. the error will be reported in the console of your browser's developer tools. this doesn't do much more than it would if you just didn't bother including the .catch() block at all, but think about it — this allows us to control error handling exactly how we want. in a real app, your .catch() block could retry fetching the image, or show a default image, or prompt the user to pro...
Asynchronous JavaScript - Learn web development
ably skip to the introducing asynchronous javascript module. note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out (most of) the code examples in an online coding program such as jsbin or glitch. guides general asynchronous programming concepts in this article we'll run through a number of important concepts
relating to asynchronous programming, and how this looks in web browsers and javascript. you should understand these concepts before working through the other articles in the module. introducing asynchronous javascript in this article we briefly recap the problems associated with sychronous javascript, and take a first look at some of the different asynchronous javascript techniques you'll encoun...
Test your skills: Functions - Learn web development
1 for the first task, you have to create a simple function — choosename() — that prints a random name from the provided array (names) to the provided paragraph (para), and then run it once. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. functions 2 for our second functions-
related task, you need to create a function that draws a rectangle on the provided <canvas> (reference variable canvas, context available in ctx), based on the five provided input variables: x — the x coordinate of the rectangle. y — the y coordinate of the rectangle. width — the width of the rectangle. height — the height of the rectangle. color — the color of the rectangle. you'l...
A first splash into JavaScript - Learn web development
can start typing their first guess right away, without having to click the form field first. it's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game. let's analyze what's going on here in a bit more detail. in javascript, most of the items you will manipulate in your code are objects. an object is a collection of
related functionality stored in a single grouping. you can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. for now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things. in this particular case, we first created a guessfield constant that stores a reference to the text i...
Arrays - Learn web development
stop looping at the item number equal to the length of the array. this works for an array of any length, but in this case it stops looping at item number 7 (this is good, as the last item — which we want the loop to include — is item 6). for each item, print it out to the browser console with console.log(). some useful array methods in this section we'll look at some rather useful array-
related methods that allow us to split strings into array items and vice versa, and add new items into arrays. converting between strings and arrays often you'll be presented with some raw data contained in a big long string, and you might want to separate the useful items out into a more useful form and then do things to them, like display them in a data table. to do this, we can use the split() m...
Useful string methods - Learn web development
rowsertype.length; this should return the number 7, because "mozilla" is 7 characters long. this is useful for many reasons; for example, you might want to find the lengths of a series of names so you can display them in order of length, or let a user know that a username they have entered into a form field is too long if it is over a certain length. retrieving a specific string character on a
related note, you can return any character inside a string by using square bracket notation — this means you include square brackets ([]) on the end of your variable name. inside the square brackets you include the number of the character you want to return, so for example to retrieve the first letter you'd do this: browsertype[0]; remember: computers count from 0, not 1! you could use this to, f...
What went wrong? Troubleshooting JavaScript - Learn web development
am to report that the game has been won. be careful! syntaxerror: missing ) after argument list this one is pretty simple — it generally means that you've missed the closing parenthesis at the end of a function/method call. note: see our syntaxerror: missing ) after argument list reference page for more details about this error. syntaxerror: missing : after property id this error usually
relates to an incorrectly formed javascript object, but in this case we managed to get it by changing function checkguess() { to function checkguess( { this has caused the browser to think that we are trying to pass the contents of the function into the function as an argument. be careful with those parentheses! syntaxerror: missing } after function body this is easy — it generally means that...
Solve common problems in your JavaScript code - Learn web development
k again? events what are event handlers and how do you use them? what are inline event handlers? what does the addeventlistener() function do, and how do you use it? which mechanism should i use to add event code to my web pages? what are event objects, and how do you use them? how do you prevent default event behaviour? how do events fire on nested elements? (event propagation, also
related — event bubbling and capturing) what is event delegation, and how does it work? object-oriented javascript what are object prototypes? what is the constructor property, and how can you use it? how do you add methods to the constructor? how do you create a new constructor that inherits its members from a parent constructor? when should you use inheritance in javascript? web apis ...
Adding features to our bouncing balls demo - Learn web development
ber to set the ball() constructor's prototype and constructor appropriately. the ball draw(), update(), and collisiondetect() method definitions should be able to stay exactly the same as they were before. you also need to add a new parameter to the new ball() ( ... ) constructor call — the exists parameter should be the 5th parameter, and should be given a value of true. at this point, try
reloading the code — it should work just the same as it did before, with our redesigned objects. defining evilcircle() now it's time to meet the bad guy — the evilcircle()! our game is only going to involve one evil circle, but we are still going to define it using a constructor that inherits from shape() to give you some practice. you might want to add another circle to the app later on that c...
Inheritance in JavaScript - Learn web development
mporarily modifies the prototypes of built-in browser objects, but you should not do this unless you have a really good reason. too much inheritance can lead to endless confusion, and endless pain when you try to debug such code. ultimately, objects are just another form of code reuse, like functions or loops, with their own specific roles and advantages. if you find yourself creating a bunch of
related variables and functions and want to track them all together and package them neatly, an object is a good idea. objects are also very useful when you want to pass a collection of data from one place to another. both of these things can be achieved without use of constructors or inheritance. if you only need a single instance of an object, then you are probably better off just using an object l...
Object building practice - Learn web development
if ((this.x - this.size) <= 0) { this.velx = -(this.velx); } if ((this.y + this.size) >= height) { this.vely = -(this.vely); } if ((this.y - this.size) <= 0) { this.vely = -(this.vely); } this.x += this.velx; this.y += this.vely; } the first four parts of the function check whether the ball has reached the edge of the canvas. if it has, we reverse the polarity of the
relevant velocity to make the ball travel in the opposite direction. so for example, if the ball was traveling upwards (positive vely), then the vertical velocity is changed so that it starts to travel downwards instead (negative vely). in the four cases, we are checking to see: if the x coordinate is greater than the width of the canvas (the ball is going off the right edge). if the x coordinat...
Introducing JavaScript objects - Learn web development
the object-based nature of javascript is important to understand if you want to go further with your knowledge of the language, therefore we've provided this module to help you. here we teach object theory and syntax in detail, then look at how to create your own objects. ...
CSS performance optimization - Learn web development
s it will not use, such the print stylesheets. by splitting the css into multiple files based on media queries, you can prevent render blocking during download of unused css. to create a non-blocking css link, move the not-immediately used styles, such as print styles, into separate file, add a <link> to the html mark up, and add a media query, in this case stating it's a print stylesheet. <link
rel="stylesheet" href="styles.css"> <!-- blocking --> <link
rel="stylesheet" href="print.css" media="print"> <!-- not blocking --> <link
rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- not blocking on large screens --> by default the browser assumes that each specified style sheet is render blocking. tell the browser when the style sheet should be applied by adding a m...
Perceived performance - Learn web development
s vitally important; even more important that actual download time but difficult to quantify. there are areas of your site that you may not be able to make faster, but you can make it feel faster even if the metrics discussed in the othser sections can't be improved. there is no unicorn metric that can measure what the user feels, but metrics are useful in guaging improvements (and regressions).
relevant measurements include first meaningful paint (fmp), largest contentful paint (lcp), time to interactive (tti), render start, dom interactive, and speed index. first paint is reported by the browser and provides the time, in ms, of when the page starts changing; but this change can be a simple background color update or something even less noticable. it doesn’t indicate completeness and may...
Properly configuring server MIME types - Learn web development
for php, you should have the line header('content-type: text/html'); before any other output lines. for asp, you should have the line response.contenttype = "text/html"; before any other output lines. for a java servlet, you should have the line response.setcontenttype("text/html"); at the top of your doget or dopost method, where response is a reference to the httpservletresponse. ...
Introduction to the server side - Learn web development
scale websites use server-side code to dynamically display different data when needed, generally pulled out of a database stored on a server and sent to the client to be displayed via some code (e.g. html and javascript). perhaps the most significant benefit of server-side code is that it allows you to tailor website content for individual users. dynamic sites can highlight content that is more
relevant based on user preferences and habits. it can also make sites easier to use by storing personal preferences and information — for example reusing stored credit card details to streamline subsequent payments. it can even allow interaction with users of the site, sending notifications and updates via email or through other channels. all of these capabilities enable much deeper engagement wit...
Ember resources and troubleshooting - Learn web development
tion information render performance for general javascript debugging, check out our guides on javascript debugging as well as interacting with the browser's other debugging tools. in any default ember project, there will be two main javascript files, vendor.js and {app-name}.js. both of these files are generated with sourcemaps, so when you open the vendor.js or {app-name}.js to search for
relevant code, when a debugger is placed, the sourcemap will be loaded and the breakpoint will be placed in the pre-transpiled code for easier cor
relation to your project code. for more information on sourcemaps, why they're needed, and what the ember-cli does with them, see the advanced use: asset compilation guide. note that sourcemaps are enabled by default. ember-data comes pre-installed; do i ...
Routing in Ember - Learn web development
do| }} and that's it for this tutorial! your app should now have fully working links in the footer that display the "index"/default, "active", and "completed" routes. summary congratulations! you've finished this tutorial! there is a lot more to be implemented before what we've covered here has parity with the original todomvc app, such as editing, deleting, and persisting todos across page
reloads. to see our finished ember implementation, checkout the finished app folder in the repository for the code of this tutorial or see the live deployed version here. study the code to learn more about ember, and also check out the next article, which provides links to more resources and some troubleshooting advice. previous overview: client-side javascript frameworks next in this modu...
React interactivity: Editing, filtering, conditional rendering - Learn web development
ter hook add a new hook to your app() function that reads and sets a filter. we want the default filter to be all because all of our tasks should be shown initially: const [filter, setfilter] = usestate('all'); defining our filters our goal right now is two-fold: each filter should have a unique name. each filter should have a unique behavior. a javascript object would be a great way to
relate names to behaviors: each key is the name of a filter; each property is the behavior associated with that name. at the top of app.js, beneath our imports but above our app() function, let's add an object called filter_map: const filter_map = { all: () => true, active: task => !task.completed, completed: task => task.completed }; the values of filter_map are functions that we will use t...
Using Vue computed properties - Learn web development
our app, and the total number of items update as you add more todo items! however, if you try checking and unchecking some items, you'll reveal a bug. currently, we're not actually tracking the "done" data in any fashion, so the number of completed items does not change. tracking changes to "done" we can use events to capture the checkbox update and manage our list accordingly. since we're not
relying on a button press to trigger the change, we can attach a @change event handler to each checkbox instead of using v-model. update the <input> element in todoitem.vue to look like this. <input type="checkbox" class="checkbox" :id="id" :checked="isdone" @change="$emit('checkbox-changed')" /> since all we need to do is emit that the checkbox was checked, we can include the $emit() inlin...
Adding a new todo form: Vue events, methods, and models - Learn web development
to using the { passive: true } parameter when creating an event listener in vanilla javascript using addeventlistener(). in this case, we need to use the .prevent handler to stop the browser’s default submit action. add .prevent to the @submit handler in your template like so: <form @submit.prevent="onsubmit"> if you try submitting the form now, you'll notice that the page doesn't
reload. if you open the console, you can see the results of the console.log() we added inside our onsubmit() method. binding data to inputs with v-model next up, we need a way to get the value from the form's <input> so we can add the new to-do item to our todoitems data list. the first thing we need is a data property in our form to track the value of the to-do. add a data() method to our t...
Focus management with Vue refs - Learn web development
ment problem while we do have working edit functionality, we aren't providing a great experience for non-mouse users. specifically, when a user activates the "edit" button, we remove the "edit" button from the dom, but we don't move the user's focus anywhere, so in effect it just disappears. this can be disorienting for keyboard and non-visual users. to understand what's currently happening:
reload your page, then press tab. you should see a focus outline on the input for adding new to-do items. press tab again. the focus should move to the "add" button. hit it again, and it'll be on the first checkbox. one more time, and focus should be on the first "edit" button. activate the "edit" button by pressing enter. the checkbox will be replaced with our edit component, but the focus outlin...
Vue resources - Learn web development
rminal. next, run the npm run build (or yarn build) in the console. this will create a new dist directory containing all of your production ready files. to publish your site to the web, copy the contents of this folder to your hosting environment. note: the vue cli docs also include a specific guide on how to publish your app to many of the common hosting platforms. vue 3 vue 3 is a major
release of the framework with a lot of major changes. it went into active beta in april, 2020. the biggest change is a new composition api that works as an alternative to the current property-based api. in this new api, a single setup() function is used on the component. only what you return from this function is available in your <template>s. you are required to be explicit about "reactive" properti...
Git and GitHub - Learn web development
ode in a central place, so it is not lost if your computer breaks. you will also want to be able to roll back to earlier versions if a problem is later discovered. you might have started doing this in your own work by creating different versions of the same file, e.g. mycode.js, mycode_v2.js, mycode_v3.js, mycode_final.js, mycode_really_really_final.js, etc., but this is really error-prone and un
reliable. different team members will commonly want to create their own separate versions of the code (called branches in git), work on a new feature in that version, and then get it merged in a controlled manner (in github we use pull requests) with the master version when they are done with it. vcses provide tools to meet the above needs. git is an example of a vcs, and github is a web site + in...
Tools and testing - Learn web development
re web technologies (like html, css, and javascript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from javascript frameworks, to testing and automation tools, and more besides. as your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a
reliable toolchain to give your development process superpowers. on top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browse the web, and be usable by people with disabilities. working out what tools you should be ...
Learn web development
l comfortable and learn the topics properly. you should feel at home whether you are a student learning web development (on your own or as part of a class), a teacher looking for class materials, a hobbyist, or someone who just wants to understand more about how web technologies work. what's new? the content in the learning area is being added to regularly. we have started keeping learning area
release notes to show what has changed — keep checking back frequently! if you have questions regarding topics you'd like to see covered or feel are missing, drop us a message on our discourse forum. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started where to start complete ...
omni.ja (formerly omni.jar)
ains assorted application resources: chrome.manifest the chrome manifest file. /chrome/ user interface files for the application /chrome/localized.manifest manifest of localized content; referenced by the main chrome manifest file. /chrome/nonlocalized.manifest manifest of non-localized content; referenced by the main chrome manifest file. /components/ xpcom components the application
relies upon. /defaults/ default preference files. /modules javascript code modules. /res/ miscellaneous resource files. ...
CSUN Firefox Materials
osophy is also a great accessibility story. every user, regardless of what accomodations they need, can enjoy a less cluttered web, free of intrusions such as popup ads and spyware. the simple, uncluttered user interface is simply more pleasant. as a result, nearly everyone who tries firefox finds themselves hooked.. assistive technology support on windows "i am a full firefox convert with the
release of 1.5. 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. jaws support is quickly catching up as well. in recent articles from both afb's access world and nfb's voice of the nation's blind, reviewers fou...
Information for users
eatures this page defines most of the accessibility features possible in firefox. features include assistive technology support on windows (like window-eyes, jaws, etc.), firefox keyboard support, available accessibility extensions like fire vox and other extensions. assistive technology compatibility this is a wiki page which users can edit to provide up to date information on any issues
related to compatibility with assistive technologies such as screen readers, screen magnifiers, voice input software and on screen keyboards. planning ahead for accessibility this document is intended to help testers and designers understand and plan what still needs to be added to our ui for full usable accessibility. please give us feedback on the discussion list! firefox accessibility skin...
Accessible Toolkit Checklist
upport needs to know what label goes with what widget. msaa support: expose window with role_dialog, unless it's already the standard dialog window class #32770. if you don't, some screen readers won't automatically read the dialog when it receives focus. expose status bars with role_statusbar, unless they already use the standard window class msctls_statusbar32. make sure that parent-child
relationships are exposed correctly in each window's msaa tree general msaa support focus events handling event callbacks, which requires a unique id for each non-windowed child of every widget that can be focused or have any other event associated with it. for example, a unique child id would be required for each tree item supporting the most important b...
ZoomText
these builds are pretty stable considering they're only alpha, i'm having very good luck with them. it doesn't do us any good to get bug reports on older stuff right now. our main focus is on the browser itself, so you you only need to install mailnews or address book if curious about the other apps. you will also need to install zoomtext 8.11.3. ...
Accessibility and Mozilla
d developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility. since this is a worldwide effort, there is always a good chance to find someone to chat with there, day or night.accessibility information for ui designers and developerswhen you design user interfaces with accessibility in mind, they will work for more people. this page describes a number of design-
related aspects to look out for, in no particular order.accessibility/liveregiondevguidethis page is currently under construction. this developer's guide lays out general guidelines that assistive technology (at) developers can use in developing live region support. this guide was written from an atk/at-spi point of view as part of the orca live region support project. however, many of the concepts ...
Index
an icon that attracts a user’s attention from a category list, to screenshots that show how useful your add-on is. 676 index add-ons, glossary, guide, index found 689 pages: 677 signing and distributing your add-on add-ons, extensions, webextensions, distribution, publication, reviews, signing add-ons need to be signed before they can be installed into
release and beta versions of firefox. this signing process takes place through addons.mozilla.org (amo), whether you choose to distribute your add-on through amo or to do it yourself. 678 make money from browser extensions guide, monetization, webextensions, distribution while users can download browser extensions for firefox free of cost from addons.mozilla.org (amo), this does...
Lightweight themes
your images, go to the theme submission page: name your theme — pick a unique name for your theme. duplicate names are not allowed, so you may need to try a few times to find a unique name. pick a category and tags — select a category and enter some tags that best describe your theme. keep in mind that a reviewer may reject your theme if it is obvious that your category and/or tags are un
related to your theme. describe your theme — write a short description of your theme. keep in mind that a reviewer may reject your theme if your description is not an accurate representation of your theme. select a license for your theme — decide on a copyright license for your work. read more about the types of creative common licenses. important: please be sure you have the rights to us...
Theme concepts
rn; } currenttheme = theme; browser.theme.update(themes[theme]); } learn more about dynamic themes and see an additional example in the following video: if you have not built a browser extension before, check out your first extension for a step-by-step guide. cross-browser compatibility there is currently limited compatibility between themes in the major browsers. opera takes an enti
rely different approach, and microsoft edge themes are not yet open to developers. there is good compatibility between firefox static themes and chrome themes, providing the ability to port a single header image theme from firefox to chrome. however, noting that "frame": and "tab_background_text": only support rgb color array definition on chrome. so, in the single image theme example (weta_fade) c...
Themes
themes for the latest versions of firefox using the amo theme generator use the theme generator to create and submit a new theme to amo lightweight themes lightweight themes have been deprecated and are no longer accepted by amo. only browser themes will be accepted going forward. tools & resources browser theme manifest.json keys browser extensions theme api discourse forum theme
related blog posts archived resources ...
Add-ons
this new, high-performance browser for android has been rebuilt from the ground up using geckoview, mozilla’s mobile browser engine. we are currently building support for the webextensions api on geckoview. migrate an existing extension if you maintain a legacy extension, such as an xul overlay, bootstrapped, or add-on sdk-based extension, you can sti...
Adding a new CSS property
tests of your new property to be added to many of the mochitests in layout/style/test, which can be run with the command "./mach mochitest -f plain layout/style/". then, unless you're implementing a shorthand property, you need to decide which style struct the computed value of the property should go in. (again, see the gecko overview for more information.) it should generally be grouped with
related properties. remember that each style struct contains only properties that inherit by default or only properties that do not. (which set the property is in is given in the specification, which says "inherited: yes" or "inherited: no" in the property's definition.) also note that some of the style structs intentionally contain only properties set/reset by a particular common shorthand proper...
Browser chrome tests
t, even in head.js if you need to register a clean up function for all tests in that folder. notice that you can register as many clean up functions as you will. clean up functions are also guaranteed to be called if your test timeouts, so you can ensure that in case of timeouts you won't pollute next running tests and causing them to fail. registercleanupfunction(function() { // clean up test
related stuff here. }); function test() { // add some test
related stuff. } when writing tests, design for failure. it is much better to call registercleanupfunction() than doing the cleanup after you have successfully run your tests because the cleanup functions are always called, no matter what. for instance, if you change a preference you want to make sure that the preference is always reset ...
Building SpiderMonkey with UBSan
root to point to your installation. #! /bin/sh if [ -z $1 ] ; then echo "usage: $0 <dirname>" elif [ -d $1 ] ; then echo "directory $1 already exists" else autoconf2.13 autoconf213 mkdir $1 cd $1 llvm_root="$home/llvm" sanflag="-fsanitize=undefined -fno-sanitize=alignment,float-cast-overflow,float-divide-by-zero,vptr -dxmalloc=myxmalloc" \ cc="$llvm_root/build/
release+asserts/bin/clang" \ cxx="$llvm_root/build/
release+asserts/bin/clang++" \ cflags="$sanflag" \ cxxflags="$sanflag" \ moz_llvm_hacks=1 \ ../configure --enable-debug --disable-optimize make -j 8 fi 3. use the script to compile spidermonkey. this enables all the cheap undefined behavior checks other than: alignment, which hits known bugs in spidermonkey, and is ...
Command line options
ager is opened instead. you must use an upper case p on linux with versions older than 7.x, as there lower case invokes purify mode (memory and leak detection). other platforms accept both upper and lower case. -profile "profile_path" start with the profile with the given path. firefox, thunderbird and seamonkey2.x only. "profile_path" can either be an absolute path ("/path/to/profile") or a
relative path ("path/to/profile"). note: on mac os x specifying a
relative path is not supported anymore from firefox 4.0 and up due to a regression, see bug 673955. browser -browser start with the browser component. firefox and seamonkey only. -foreground make this instance the active application. -new-tab url open url in a new tab. firefox and seamonkey2.x only. -new-window url open url...
Creating a Language Pack
please consult the documentation on localized builds on firefox-source-docs. to create a language pack, or a localization repack, you first need to go through the initial setup process. pre-build steps in the .mozconfig, you want to have mk_add_options moz_objdir=@topsrcdir@/obj-firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l10n-base=../l10n-central # path
relative to moz_objdir ac_add_options --enable-application=[browser or mail] the given path should have your localization directory as child (i.e., a subdirectory ab-cd where ab-cd is your locale code). you still need to specify which application you're localizing (e.g., for firefox, that's browser, thunderbird would be mail). configure step you need to prepare the build directory, which is done...
Capturing a minidump
. at this point, you should type ".dump /ma c:\temp\firefoxcrash.dmp" -- without the quotes, but don't forget the dot at the beginning. once it completes, which can take a fair while, you will have a very large file at c:\temp\firefoxcrash.dmp that can be used to help debug your problem. file size will depend on this size of firefox running in your enviroment, which could several gb. ask in the
relevant bug or thread how best to share this very large file! capturing a minidump: application hang on windows vista and windows 7, you can follow these instructions to capture a dump file and locate it after it's been saved. ...
Debugging OpenGL
this article provides suggestions for how to improve your efficiency while debugging opengl code in gecko. opengl debug mode when running a debug build, you can enable the opengl debug mode by defining the environment variable moz_gl_debug. if you start up firefox with this variable defined, the following behavior changes occur: each time you issue an opengl call, a check is performed to ensure that the gl context is current, using a thread-local static variable to keep track of this. if the context isn't current, the call aborts. every time an opengl call completes, glfinish() gets run automatically. this flushes out each call, essentially turning opengl into a synchronous api. ...
Debugging
hat will help you debug your code or web site. nserror lookup useful for when your code gets a complicated numeric error code and you can't figure out what it means. download a debug build recent automatically compiled debug builds are available. note that these are replaced frequently by our tinderboxes. the debug builds have "-debug" at the end of their file names.
related topics performance and profiling troubleshooting performance problems. ...
Building Firefox with Debug Symbols
use the following mozconfig settings to do a build with symbols: building firefox with symbols there is a single configure option to enable building with symbols on all platforms. this is enabled by default so unless you have explcitly disabled it your build you should include symbols. ac_add_options --enable-debug-symbols this can optionally take an argument for the type of symbols that need to be produced (like "-g3"). by default it uses "-g" on linux and macos. this value takes precedence over the flags set in moz_debug_flags note that this will override the values provided for cflags and cxxflags. ...
Makefile - variables
n gnu/linux). host_ variable description host_cmsrcs a list of .m sources to compile host_cmmsrcs a list of .mm sources to compile host_objs host_os_arch arch of real platform a target platform is being built on(building mobile binaries on gnu/linux). distribution/
release variables variable description dist top level distribution directory for install/packaging/repacking. dist_files a list of files copied into the distribution archive(~application.ini). dist_chrome_files exists in rules.mk but not referenced by mozilla-central. deprecated? final_targe...
Callgraph
for instance, given the c++ code: int foo() { return good(); } int good() { return evil() ? 0 : 1; } the callgraph would be foo() -> good() -> evil(). given the knowledge that evil() does evil things, one could then determine foo() also does evil things. ...
ESLint
/* globals mychromeglobal */ or, add to the global section toolkit/.eslintrc.js if it is widely used. 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? you'll need to include the following just above it: /* import-globals-from
relative/path/to/file.js */ do_check_eq, add_task not defined in a test directory. ensure there is a .eslintrc.js file that extends one of: "plugin:mozilla/browser-test" "plugin:mozilla/chrome-test" "plugin:mozilla/mochitest-test" "plugin:mozilla/xpcshell-test" see other test directories for how to do this. i need to test that something ...
Gecko Logging
purpose rust logging levels error designates very serious errors. warn designates hazardous situations. info designates useful information. debug designates lower priority information. trace designates very low priority, often extremely verbose, information. it is common for debug and trace to be disabled at compile time in
release builds, so you may need a debug build if you want logs from those levels. check the env_logger docs for more details on logging options. child processes / e10s sometimes it can be useful to only log child processes and ignore the parent process. in firefox 57 and later, you can use rust_log_child to specify log settings that will only apply to child processes. ...
Reviewer Checklist
only on ui thread.] [fennec: activity lifecycle awareness (works with "never keep activities"). also test with oom-fennec (https://hg.mozilla.org/users/blassey_mozilla.com/oom-fennec/)]. compatibility version files, databases, messages tag messages with ids to disambiguate callers. idl uuids are updated when the interface is updated. android permissions should be 'grouped' into a common
release to avoid breaking auto-updates. android apis added since froyo should be guarded by a version check. preffability if the feature being worked on is covered by prefs, make sure they are hooked up. if working on a new feature, consider adding prefs to control the behavior. consider adding prefs to disable the feature enti
rely in case bugs are found later in the
release cycle. [fennec: ...
Working with Mozilla source code
ee, and how to find what you're looking for. bugs for newcomers if you are new to the project and want something to work on, look here. interface development guide guidelines and documentation for how to create and update xpcom interfaces. the firefox codebase: css guidelines this document contains guidelines defining how css inside the firefox codebase should be written, it is notably
relevant for firefox front-end engineers. svg cleanup guide guidelines and best practices for shipping new svgs. try servers mozilla products build on at least three platforms. if you don't have access to them all, you can use the try servers to test your patches and make sure the tests pass. creating a patch once you've made a change to the mozilla code, the next step (after making sure it wor...
Error codes returned by Mozilla APIs
s that could occur when using files. while these errors can occur when using the file apis, they can also occur with other components that use files. ns_error_file_unrecognized_path (0x80520001) this error occurs when an attempt is made to set a path that isn't valid for the platform. for example, if a character in the path is not valid for a filename. in addition, this error may occur when a
relative path is supplied to a method that expects an absolute path and vice versa. ns_error_file_unresolvable_symlink (0x80520002) an attempt was made to access a symbolic link to a file or directory which does not exist. ns_error_file_execution_failed (0x80520003) an attempt to launch or execute a file failed because the file is not executable. nsifile.isexecutable() may be used to check if a f...
Cross Process Object Wrappers
r to avoid deadlocks, cpow messages can bypass normal messages and be processed first. it’s possible that the request for the documenturi property will be processed before the "changedocumenturi" message, in which case uri will have its previous value. for this reason, it’s best not to mix cpows with normal message manager messages. it’s also a bad idea to use cpows for anything security-
related, since you may get results that are not consistent with surrounding code that might use the message manager. safe and unsafe cpows the main reason cpows can be bad for responsiveness is that they make the chrome process block on the content process. essentially, the problem is this: suppose the content process is busy with some long-running operation (for example, garbage collection). in m...
Limitations of chrome scripts
process. it used to be that if you registered a listener on the xul <browser> or <tab> element that hosted some dom content, then events in the content would bubble up to the xul and you could handle them there. this no longer happens in multiprocess firefox. with the shim the shim intercepts chrome process code that adds listeners to xul elements and sets up listeners in the content process,
relaying the result back to the chrome process. the event object itself is
relayed to the chrome process as a cpow. to make the shim unnecessary: register event listeners on the global object inside a frame script. for example: addeventlistener("load", handler, true) // for example if you need to contact the chrome process when that happens, send it a message. sandboxes you can create sandbox...
Frame script loading and lifetime
tion will not remove any scripts which have been loaded earlier. frame script lifetime frame scripts are loaded as soon as loadframescript() is called. if you've set allowdelayedload, the script is loaded into a new tab as soon as it is created. frame scripts are associated with a browser tab and not with a page. so once you load them, they will stay loaded until the tab is closed, even if you
reload the document or navigate. if you want to limit a script to the lifetime of a page you can create a sandbox instead, where the current content page is used as prototype. 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. unloading frame scripts frame scripts are auto...
Message manager overview
how to access you can access a ppmm using the getchildat() function in the gppmm: // parent process let ppmm = services.ppmm.getchildat(1); child process child process message manager description there's one child process message manager (cpmm) in each child process. messages sent using the cpmm are sent to the corresponding ppmm and are also
relayed to the gppmm. its most important attributes and functions are: components : access privileged objects and apis addmessagelistener() : receive messages from the parent process sendasyncmessage() : send asynchronous messages to the parent process sendsyncmessage() : send synchronous messages to the parent process interfaces nsimessagelistenermanager...
mozbrowsertitlechange
whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. detail read only string the title of the document. ...
mozbrowserusernameandpasswordrequired
the authentication to go ahead. it needs to take two parameters — the username and password to authenticate. cancel() a function that is called to cancel the authentication. ...
mozbrowservisibilitychange
ith the following properties: visible a boolean that indicates whether the browser iframe is visible (true) or not (false). ...
HTMLIFrameElement.sendMouseEvent()
send it to the browser <iframe>'s content. syntax instanceofhtmliframeelement.sendmouseevent(type, x, y, button, clickcount, modifiers); returns void. parameters type a string representing the event type. possible values are mousedown, mouseup, mousemove, mouseover, mouseout, or contextmenu. x a number representing the x position of the cursor
relative to the browser <iframe>'s visible area in css pixels. y a number representing the y position of the cursor
relative to the browser <iframe>'s visible area in css pixels. button a number representing which button has been pressed on the mouse: 0 (left button), 1 (middle button), or 2 (right button). clickcount the number of clicks that should be performed. modifiers a number represent...
HTMLIFrameElement.sendTouchEvent()
ofhtmliframeelement.sendtouchevent(type, x, y, rx, ry, rotationangles, forces, count, modifiers); returns void. parameters type a string representing the event type. possible values are touchstart, touchend, touchmove, or touchcancel. x an array of numbers representing the x position of each touch point
relative to the browser <iframe>'s visible area in css pixels. y an array of numbers representing the y position of each touch point
relative to the browser <iframe>'s visible area in css pixels. rx an array of numbers representing the x radius of each touch point in css pixels. ry an array of numbers representing the y radius of each touch point in css pixels. rotationangles an array of numb...
HTMLIFrameElement.stop()
o not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the stop() method of the htmliframeelement interface is used to stop loading the content of the <iframe>. syntax instanceofhtmliframeelement.stop(); returns void. parameters none. examples stop
reload.addeventlistener('touchend',function() { if(stop
reload.textcontent === 'x') { browser.stop(); } else { browser.
reload(); } }); specification not part of any specification. ...
-moz-window-dragging
initial value drag applies to all elements that create native windows, e.g. ...
overflow-clip-box-block
the overflow-clip-box-block css property specifies
relative to which box the clipping happens when there is an overflow — in the block direction. /* keyword values */ overflow-clip-box-block: padding-box; overflow-clip-box-block: content-box; /* global values */ overflow-clip-box-block: inherited; overflow-clip-box-block: initial; overflow-clip-box-block: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box. note that this property is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this keyword makes the clipping be
related to the padding box. content-box this keyword makes the clipping be
related to the content box. formal...
overflow-clip-box-inline
the overflow-clip-box-inline css property specifies
relative to which box the clipping happens when there is an overflow — in the inline direction. /* keyword values */ overflow-clip-box-inline: padding-box; overflow-clip-box-inline: content-box; /* global values */ overflow-clip-box-inline: inherited; overflow-clip-box-inline: initial; overflow-clip-box-inline: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box. note that this property is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this keyword makes the clipping be
related to the padding box. content-box this keyword makes the clipping be
related to the content box. ...
smartcard-insert
ad only eventtarget the event target (the topmost target in the dom tree). typeread only domstring the type of event. bubblesread only boolean whether the event normally bubbles or not. cancelableread only boolean whether the event is cancellable or not. example document.addeventlistener("smartcard-insert", smartcardchangehandler );
related events smartcard-remove ...
smartcard-remove
ad only eventtarget the event target (the topmost target in the dom tree). typeread only domstring the type of event. bubblesread only boolean whether the event normally bubbles or not. cancelableread only boolean whether the event is cancellable or not. example document.addeventlistener("smartcard-remove", smartcardchangehandler );
related events smartcard-insert ...
Embedding Tips
default service implementations with their own. for example, the default prompt service uses xul to render prompt dialogs and embedders may wish to render them in a way more appropriate for their application and platform.. how do i load a page? get thensiwebnavigation interface on your webbrowser and call the loaduri method with the appropriate uri and flags. this interface also has methods for
reloading, stopping a load and going back and forward in the history. how do i block a load? implement the nsiwebprogresslistener interface and register it with the appropriate web browser object via the nsiwebbrowser::addwebbrowserlistener() method. use the callbacks for after-the-fact cancellation. alternatively, implement a nsiuricontentlistener as described below. how do i watch/intercept a lo...
Roll your own browser: An embedding how-to
opment environment, based on mozilla's xul. (screenshot) light: very simple non-bloated gtk+ interface, familiar netscape 4.x keyboard shortcuts, context menus, etc. (screenshot) xparts: kde extension that allows mozilla to be embedded into the konqueror browser. uses gtkmozembed widget, part of the kdebindings module and available from http://websvn.kde.org/trunk/kde/kdebindings/xparts/. (news
release, screenshot) mozilla examples gtkmozembed widget: gtk widget wrapper for the mozilla gecko engine. testgtkembed: basic browser built with the gtkmozembed widget. url location field, menu bar, html area, supports ssl. windows external projects k-meleon browser: the windows answer to galeon. fast ie-look-alike browser, uses ie and ns bookmarking system, fast loading time, privacy fe...
Embedding Mozilla
s with the existing implementation, some possible embedding scenarios that we need to deal with, and an embedding solution that will fulfil them. roll your own browser - an embedding howto a quick introduction to embedding mozilla. view all... community view mozilla forums... mailing list newsgroup rss feed #embedding irc channel
related topics gecko, xpcom ...
Gecko
ets supported by gecko a list of the character sets supported by gecko. ...
Hacking with Bonsai
everyone who is on the hook is available in case the build breaks eventually, the tree builds, and it is re-opened. 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. before the tree is opened, there is a car pool lane where people who have been off on a branch and need a stable tip to merge in can pull the tip for their merge. these people, when they check in, will be "on the hook" for the next day's build. the car pool lane is only available to those who arrange access ahead of time with the
release team. when the tree is re-opened, ...
How to get a process dump with Windows Task Manager
ntains urls of active tabs, history information, and possibly even passwords depending on what you are doing when the snapshot is taken. it is advisable to create a new, blank profile to use when reproducing the hang and capturing the memory dump. please ask for help doing this! requirements windows to get a process dump, you need to be using windows vista or above. a firefox nightly or
release you need a firefox version for which symbols are available from the mozilla symbol server. you can use any official nightly build or
released version of firefox from mozilla. you can find the latest trunk nightly builds under http://ftp.mozilla.org/pub/mozilla.o.../latest-trunk/. creating the dump file ensure that firefox is not already running. run firefox, reproduce the hang start fir...
How to Report a Hung Firefox
instead of crashing firefox, more advanced developers who know how to use a debugger can try attaching to the firefox process and debugging in place. this is only useful if you have firefox debug symbols, which are available on windows from the mozilla symbol server. ...
IPDL Best Practices
everywhere. implement (preferably reference counted) classes to wrap the shared data instead of letting several objects reference surfacedescriptors or their content directly. reference counting protocol actors is tricky here is the easiest way to get it right the first time (lessons learned from the http channel and geolocation protocols): allocpprotocol calls addref deallocpprotocol calls
release this ensures that the actor will not disappear from under ipdl, and that you won't get bizarre crashes at other times if ipdl deletes the protocol tree. the main concern you have now is that you absolutely, certainly, positively call send__delete__ in all possible circumstances or your protocol can and will leak. calling ipdl functions willy-nilly let's say you have an object that implement...
Implementing QueryInterface
// |nsbar::queryinterface| can only provide an |nsisupports| similarly, you can use the macro ns_impl_query_interface1 when you implement only one additional interface; and ns_impl_query_interface0 when you only implement nsisupports. these macros will be invoked for you if you use the ns_impl_isupports* macros, which give the corresponding queryinterface implementation, plus an addref and a
release. calling an inherited queryinterface sometimes you are just adding one or two new interfaces to an implementation that already supports many other interfaces. in such cases, you'll probably want to call through to the underlying implementation, after you've tested for the particular iids that you care about. this saves code-space and reduces complexity. the differences are highlighted in th...
Integrated Authentication
to stage a man-in-the-middle exploit (see bug 17578 for more info). moreover, with windows clients ntlm may be negotiated as the authentication protocol. so, it is paramount that the browser does not freely exchange ntlm user credentials with any server that requests them. the ntlm response includes a hash of the user's logon credentials. on older versions of windows this hash is computed using a
relatively weak algorithm (see hertel for more info on ntlm 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...
AddonInstall
ncel() void addlistener(in installlistener listener) void removelistener(in installlistener listener) properties attribute type description name string the name of the add-on being installed. version string the version of the add-on being installed. iconurl string the icon of the add-on being installed.
releasenotesuri nsiuri the uri of
release notes for this install. type string the type of the add-on being installed. state integer the state of the installation. error integer if an error has been encountered during the download or install this will hold the error code. sourceuri nsiuri the uri that the add-on is being installed from.
UpdateInfo
are generated as a result of an update check performed by addonupdatechecker. attributes attribute type description version string the version of the update. updateurl string the updateurl that the update can be downloaded from. updatehash string a hash for the update's file. updateinfourl string a url containing simple
release notes for the update. targetapplications object[] information about what applications the update is compatible with. each item in the array contains "id", "minversion", and "maxversion" properties. ...
Assert.jsm
notequal() the non-equality assertion tests for whether two objects are not equal with !=. undefined notequal( actual, expected, message ); parameters actual test subject to be evaluated as not equivalent to expected expected test reference to evaluate against actual message short explanation of the expected result deepequal() the equivalence assertion tests a deep equality
relation. we check using the most exact approximation of equality between two objects to keep the chance of false positives to a minimum. json.stringify is not designed to be used for this purpose; objects may have ambiguous tojson() implementations that would influence the test. undefined deepequal( actual, expected, message ); parameters actual test subject to be evaluated as equival...
CustomizableUI.jsm
id that corresponds to the area id. this is useful because it lets you have fixed content in a toolbar (e.g. the panel menu item in the navbar) and have all the customizable widgets use the customization target. using this api yourself is discouraged; you should generally not need to be asking for the dom container node used for a particular area. in particular, if you're wanting to check it in
relation to a widget's node, your dom node might not be a direct child of the customize target in a window if, for instance, the window is in customization mode, or if this is an overflowable toolbar and the widget has been overflowed. parameters aarea the id of the area whose customize target you want to have awindow the window where you want to fetch the dom node. return value the customi...
DownloadTarget
download.totalbytes property, when available, may indicate the size of the data as encoded for transfer instead. for downloads of multiple files, such as downloading a web page and its required media to disk, the meaning of this property is undefined. it currently indicates the size of the main file (such as the html document) rather than the sum of all of the files' sizes, but you must not
rely upon this behavior, as it is subject to change. this is a dynamic property, which is updated when the download finishes or whenever the download.refresh() method is called. you can use this value from the front-end to reduce file i/o that would be required to check the file directly. methods refresh() updates the state of a finished, failed, or canceled download based on the cu...
FxAccountsOAuthClient.jsm
horization endpoint for the oauth server. default: /authorization return value a newly created fxaccountsoauthclient object implementing the methods described in this article. methods launchwebflow() opens a new tab at the firefox accounts oauth authorization url. registers a webchannel listener and sets up a callback if needed. parameters none teardown() call this function to manually
release all channels and callbacks that are in use by this client. parameters none examples using the fxaccountsoauthclient chrome code let parameters = { oauth_uri: oauth_server_endpoint, client_id: oauth_client_id, content_uri: content_server_url, state: oauth_state } let client = new fxaccountsoauthclient({ parameters: parameters }); client.oncomplete = function (tokendata) { ...
Geometry.jsm
and rect. to use these routines, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/geometry.jsm"); once you've imported the module, you can then use the point and rect classes. note: although this module is usable from mobile, and is present in firefox 4, it's currently not used in firefox 4 and attempting to use it may produce un
reliable results there. ...
JavaScript OS
the javascript os module contains tools that allow chrome content (i.e. platform and add-ons) to interact with the host operating system. at the time of this writing, some of the features of this module are available only to chrome workers. os.constants os-
related constants, including errors, file opening modes, system configuration, etc. os.file access to the native file system. os.shared utilities for defining functions that interact with the operating system. ...
NetUtil.jsm
to use these utilities, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/netutil.jsm"); once you've imported the module, you can then use its methods. ...
OS.File.Error
using os.file.error example: finding out whether the problem is due to a file that does not exist try { let file = os.file.open("myfile.txt"); // ... } catch (ex) { if (ex instanceof os.file.error && ex.becausenosuchfile) { // the file does not exist } } global object os.file.error methods overview the following functions are utility functions that may be used to construct instances of os.file.error, setting the platform-specific error number. error closed() error exists() methods os.file.error.closed() return an error representing the fact that a file is closed. ...
OS.File for the main thread
once the file is closed, any attempt to call methods of the file object will raise an error. an example is seen here. in this example the contents is not written to file until .close is called. note that the operating system limits the number of files that can be opened simultaneously by one process, so do not forget to close that file once you have finished it to...
Promise.jsm
usage is not suggested for new code. if you just need a promise, consider using a dom promise instead. if you need a deferred, because you want to create a promise and manually resolve or reject it, consider using promiseutils.jsm instead. ...
PromiseUtils.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/promiseutils.jsm"); method overview deferred defer(); methods defer() creates a new pending promise and provides methods to resolve or reject this promise. this method was previously implemented as promise.defer(), which is obsolete since gecko 30. and promiseutils.defer uses dom promise instead of promise.jsm's promise. deferred defer(); parameters none. ...
Webapps.jsm
getdefaultcspbylocalid: function(alocalid) getapplocalidbystoreid: function(astoreid) getappbylocalid: function(alocalid) getmanifesturlbylocalid: function(alocalid) getapplocalidbymanifesturl: function(amanifesturl) getcoreappsbasepath: function() getwebappsbasepath: function() _islaunchable: function(aapp) _notifycategoryandobservers: function(subject, topic, data, msg) registerbrowse
relementparentforapp: function(amsg, amn) receiveappmessage: function(appid, message) _clearprivatedata: function(appid, browseronly, msg) _sendprogressevent: function() updatestatechanged: function appobs_update(aupdate, astate) applicationcacheavailable: function appobs_cacheavail(aapplicationcache) ...
Localization and Plurals
wnloads = "you have one download.;you have #1 downloads."; let num = 10; // for english, this would display "you have 10 downloads." print(pluralform.get(num, downloads).replace("#1", num); notice in the above example that the code can be written to support placeholders or not use placeholders in some forms of the string. additionally, the localizer has control over where the placeholder is, in
relation to the rest of the text. of course, the strings to be localized will be placed in a separate file, such as yourextension.properties, instead of being hardcoded in the javascript code file. the following 3 file snippets show how to use pluralform with your .xul, .properties, .js files. downloads.xul: <stringbundleset> <stringbundle id="strings" src="chrome://downloads.properties"/> </st...
Localization formats
ontinuous updates to content? is this a long-term project with stable content? is this a short-term project? will the content differ per locale? if so, to what extent? as every new web-dev project takes shape, a project manager should ask themselves these questions and have the answers ready before starting the web l10n process. html/php maybe you are designing a project that has
relatively small translation needs like three to four lines (or more) of content asking users to update to the next version of software available. 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 trans...
Setting up the infrastructure
create en-us locale (locale/lc_messages/) in the locale folder. create an empty filed named messages.po in the locale/lc_messages folder. create new locales by repeating steps 4 and 5 for each of them. review the english content following the web content localizability guidelines. review your code following the web applications localizability guidelines. run extract-po.sh. restart apache to
reload gettext files (necessary for any text changes). merge the l10n branch back to main trunk (if the l10n branch was created in step 1). copy files over to svn. set up the staging server. set up a cronjob to svn up every n minutes. set up a cronjob to run compile-mo.sh every m minutes. qa with new locale. fix any layout issues. ...
Writing localizable code
this page tells you about best practices and guidelines when dealing with ui code with respect to localization. it is aimed at mozilla and extension developers. for technical details please also look at xul_tutorial:localization. about localizers a few notes about localizers for developers who ra
rely deal with them: localizers like tools, and they don't like editors, localization tools are often based on key-value pairs, at least some localizers have their talents focused on language skills and are not savvy in programming, or even building applications. guidelines thus, there are a few guidelines you should follow to make localization of your code easier: choose good key names the names chosen for your keys (regardless of whether that's a dtd or a properties file) sho...
MathML Torture Test
rendering by your browser using the default math font, or an alternative opentype math fonts. to get the best rendering, be sure to have appropriate mathematical fonts installed on your system and to use a browser with opentype math support such as gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28) or higher. you may also try this test page for mathematical opentype fonts which instead
relies on web fonts. finally, you may want to check this table comparing how the tests are read by various screen readers for mozilla browsers. link to test: mathml torture test demo ...
Mozilla MathML Status
an overview of the mathml 3 elements/attributes - excluding deprecated ones - and the current status of the native support. references to mathml 3 are given. the sections are marked with their current status: supported, in progress, and not currently supported. sections
related to semantics/content mathml or ir
relevant features are left blank or not listed at all. if only the main features of an element are implemented then its section is marked as supported but details of unsupported attributes are specified below. the top-level math element see § 2.2. attribute notes display implemented. maxwidth, overflow not implemented. see bug 534962. altimg, altimg-width, altimg-height, altimg-valign, alttext accepted, but do not have any effect ...
MathML Accessibility in Mozilla
ng generic accessible objects for mathml in bug 920547 and so these can be retrieved by nvda starting with gecko 27.0 (firefox 27.0 / thunderbird 27.0 / seamonkey 2.24). mozilla and nvda developers essentially do not have control on how mathematical formulas are read, please contact design science for any inquiries. mac: mathml support is provided by voiceover. in bug 1175269 and bug 1001641, we
relied on the webkit's nsaccessibility mathml tree to expose the main constructions. hence basic support is available in gecko 41.0 (firefox 41.0 / thunderbird 41.0 / seamonkey 2.38) and we are still trying to keep in sync with webkit/voiceover. note that voiceover is proprietary so we do not have control on improvements to mathml accessibility in voiceover. linux: mathml support is provided by the...
MathML Demo: <mtable> - tables and matrices
or the table externally w.r.t. the baseline of the last row ---... d+p ( α β γ δ ) ...--- , neat isn't it? this would be pretty hard to obtain otherwise. contrast it with the following which has align="bottom" ---... d+p ( α β γ δ ) ...--- , and with this one which has align="center -1" ---... d+p ( α β γ δ ) ...--- , but note that setting the baseline
relative to a particular row is meaningless if the row doesn't have at least one cell with "rowalign=baseline" where to anchor the baseline (in which case mozilla will behave as if it was align="center#rownumber"). these may sound like gimmicks until you want to get a damping effect such as this ---... ab ab ab ab ab ab , or perhaps the reverse ---... ab ab ab...
Using the viewport meta tag to control layout on mobile browsers
on of screen sizes and orientations. the default pixel ratio depends on the display density. on a display with density less than 200dpi, the ratio is 1.0. on displays with density between 200 and 300dpi, the ratio is 1.5. for displays with density over 300dpi, the ratio is the integer floor(density/150dpi). note that the default ratio is true only when the viewport scale equals 1. otherwise, the
relationship between css pixels and device pixels depends on the current zoom level. viewport width and screen width sites can set their viewport to a specific size. for example, the definition "width=320, initial-scale=1" can be used to fit precisely onto a small phone display in portrait mode. this can cause problems when the browser doesn't render a page at a larger size. to fix this, browsers w...
Mozilla Development Strategies
s stay productive. warning: the content of this article may be out of date. it has not been updated for usage of mercurial (instead of cvs). work on the most important bugs first everyone likes to check in. but keep in mind that your checkin rate isn't everything. it's better to fix one data loss bug, crasher, or performance bug that really affects the user than edge case bugs that are ra
rely seen or minor bugs. make sure documentation gets updated if the bug you're fixing is likely to require an update to developer documentation once it's fixed, be sure to add the dev-doc-needed keyword to the bug (or ask someone to do it, if you don't have editbugs privileges on bugzilla). this puts the bug on the radar of our documentation team to ensure that once the bug is resolved, the docume...
Mozilla Quirks Mode Behavior
ckground url to empty only in quirks mode. the topmargin, bottommargin, leftmargin, and rightmargin attributes on body are supported only in quirks mode (bug 9258). obsolete since gecko 35 (firefox 35.0 / thunderbird 35.0 / seamonkey 2.32) (bug 95530) this quirk is now html5 conform and has been adopted in standards mode. the scrollleft, scrolltop, scrollwidth, and scrollheight properties are
relative to body in quirks mode (instead of html) (bug 211030). html (1-7) and css (xx-small - xx-large) font sizes are calculated slightly differently (see bug 18136). the :hover and :active pseudo-classes will only be applied to links, and only if there is no other pseudo-class in the selector. to match other elements, the selector must include a tag name, id, class or attribute. prior to geck...
Mozilla Style System
er between these two halves consists of three abstract interfaces, plus some smaller structures associated with some methods on each: nsistylesheet nsistylesheet represents what one would think of as a style sheet: the in-memory representation of a css file or other source of style data. some style sheets are managed by the document; some apply to all documents. the style system actually has
relatively little to do with style sheets; it instead deals with style rule processors. nsistyleruleprocessor a style rule processor represents an origin within the css cascade. thus there is a single style rule processor for all user-agent css style sheets, a single style rule processor for all user css style sheets, and a single style rule processor for all author css style sheets. there is al...
DMD
dmdfuncs::report(void const*) (/home/njn/moz/mi5/go64dmd/memory/replace/dmd/../../../../memory/replace/dmd/dmd.cpp:1646) #02: windowsmallocsizeof(void const*) (/home/njn/moz/mi5/dom/base/nswindowmemoryreporter.cpp:189) #03: nsattrandchildarray::sizeofexcludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/dom/base/nsattrandchildarray.cpp:880) #04: mozilla::dom::fragmento
relement::sizeofexcludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/dom/base/fragmento
relement.cpp:2337) #05: nsinode::sizeofincludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/go64dmd/parser/html/../../../dom/base/nsinode.h:307) #06: mozilla::dom::nodeinfo::nodetype() const (/home/njn/moz/mi5/go64dmd/dom/base/../../dist/include/mozilla/dom/nodeinfo.h:127...
GC and CC logs
ariable, find the buildbrowserenv method in the python file for the test suite you are interested in, and add something like this code to the file: browserenv["moz_cc_log_directory"] = os.environ["moz_upload_dir"] browserenv["moz_cc_log_shutdown"] = "1" analyzing gc and cc logs there are numerous scripts that analyze gc and cc logs on github. to find out why an object is being kept alive, the
relevant scripts are find_roots.py and parse_cc_graph.py (which is called by find_roots.py). calling find_roots.py on a cc log with a specific object or kind of object will produce paths from rooting objects to the specified objects. most big leaks include an nsglobalwindow, so that's a good class to try if you don't have any better idea. to fix a leak, the next step is to figure out why the rooting...
JS::PerfMeasurement
top simply adds counts read back from the os to whatever is already in each counter. void reset() resets all enabled counters to zero. uint64 cpu_cycles, uint64 instructions, etc. each potentially-measurable event corresponds to a regular old instance variable, which you can read and even modify. all presently-measurable events are measured with counters, not timers; that is, there is no defined
relation between the numbers you get from this interface, and wall-clock time. perfmeasurement* js::extractperfmeasurement(jsval wrapper) if you are the c++ side of an xpcom interface, and you want to benchmark only part of your execution time but make the results available to javascript, you can declare a bare jsval argument in your .idl file and have javascript pass a perfmeasurement object that it...
Leak Gauge
un the browser with the following environment variables set. nspr_log_modules=domleak:5,documentleak:5,nsdocshellleak:5,nodeinfomanagerleak:5 nspr_log_file=nspr.log # or any other filename of your choice this will overwrite any existing file called nspr.log. the browser will run with negligible slowdown. you must exit the browser before post-processing the log file or the results will be un
reliable. post-processing a log file post-process the log file with tools/leak-gauge/leak-gauge.pl or tools/leak-gauge/leak-gauge.html. if there are no leaks, output will look like the following. results of processing log leak.log : summary: leaked 0 out of 11 dom windows leaked 0 out of 44 documents leaked 0 out of 3 docshells leaked content nodes in 0 out of 0 documents if there are leaks, ou...
Memory reporting
l interface for a memory reporter, but the heart of a memory reporter is the measurement of the "amount". two ways to measure memory reporters can be divided into the two following kinds. traversal-based reporters traverse one or more data structures and measure the size of all the allocated blocks in the data structure. counter-based reporters maintain a counter that is incremented on each
relevant allocation and decremented on each
relevant deallocation. traversal-based reporters are preferable, for the following reasons. they are less error-prone. we've had multiple bugs in the past with counter-based reporters. the cost of reporting isn't incurred unless the memory reporter is queried. they provide more information to dmd, which is a tool that helps keep about:memory's "heap-...
Profiling with Xperf
c -buffersize 512 -minbuffers 128 -maxbuffers 512 to stop a session and merge the resulting files: xperf -stop heapsession -d heap.etl xperf -d main.etl xperf -merge main.etl heap.etl result.etl "result.etl" will contain your merged data; you can delete main.etl and heap.etl. note that it's possible to capture even more data for the non-heap profile; for example, you might want to be able to cor
relate heap events with performance data, so you can do "xperf -on base -stackwalk profile". in the viewer, when summary data is viewed for heap events (heap allocations outstanding, etc. all lead to the same summary graphs), 3 types of allocations are listed -- aifi, aifo, aofi. this is shorthand for "allocated inside, freed inside", "allocated inside, freed outside", "allocated outside, freed insi...
Profiling with the Gecko Profiler and Local Symbols on Windows
order to build a 64 bit build of firefox. profiling local talos runs if you would like to use the gecko profiler with a local talos run of a local build of firefox for windows, you will need to point talos to a zipfile containing breakpad-style symbols for your build. follow the steps below: note: you only need to do this if you're on windows and you've built firefox yourself. for any official
release of firefox (nightly, beta, etc), you do not need to use these steps. make sure you don't have ac_add_options --disable-crashreporter in your firefox .mozconfig file. if you're building a beta or
release channel version, and you want proper c++ callstacks in your profiles, add ac_add_options --enable-profiling to your firefox .mozconfig file. you don't need to do this if you're building ni...
TimerFirings logging
n the timer function's name.) this is done by initializing it with initwithnamedfunccallback or initwithnameablefunccallback instead of initwithnamecallback. post-processing timerfirings logging quickly produces thousands of lines of output. this output needs post-processing for it to be useful. if the output is redirected to a file called out, then the following command will pull out the timer-
related lines, count how many times each unique line appears, and then print them with the most common ones first. cat out | grep timer | sort | uniq -c | sort -r -n the following is sample output from this command. 204 801266240[7f7c1f248000]: [7163] fn timer (one_shot 50 ms): [content] http://widgets.outbrain.com/outbrain.js:20:330 135 -495057024[7f74e105ba00]: [7108] fn timer (...
TraceMalloc
tracemalloc captures stack traces of all malloc, calloc , realloc, and free calls (this currently covers all operator new and delete calls in mozilla, too). to enable tracemalloc in your build, configure with --enable-trace-malloc. the built mozilla application will support the following additional command-line options: --trace-malloc filename the application will log allocation and deallocation events with stack traces in a binary format to the given file. ...
A brief guide to Mozilla preferences
c, also oddly misplaced browser/app/profile/channel-prefs.js - a file indicating the user's update channel. this is kept separate from other preferences because it can affect how updates are applied. browser/app/profile/firefox.js - defaults specific to firefox browser/app/profile/firefox-branding.js - defaults specific to the specific kind of firefox being installed (nightly, aurora, beta,
release) browser/defaults/preferences/firefox-l10n.js - defaults specific to the installed language of firefox. none of the other preference files contain locale-specific preferences. config. file a configuration file, usually with .cfg extension, may be called from a default pref file via the general.config.filename preference. this file allows preference locking via the lock_pref() functi...
browser.dom.window.dump.enabled
this setting enables the dump function, which sends messages to the system console. set it to true to enable it, or false to disable it.
related browser.dom.window.dump.file window.dump ...
browser.dom.window.dump.file
updated 2012-03-18 introduction: pushed to nightly on 2009-04-24 bugs: bug 489938 values the value holds the file system path for the file in which the content of the window.dump() calls get written, e.g. c:\dump.txt . it will be created if it doesn't exist yet. the line breaks have to be in the argument of the dump function, else successive dump calls will get logged into the same line.
related browser.dom.window.dump.enabled ...
browser.download.lastDir.savePerSite
702748 values true (default) the last used directory for the website (host) serving the file for download will be preselected in the file picker. if no download directory for the current website has been stored, browser.download.lastdir will be used. false the last used directory for any download (stored in browser.download.lastdir) will be the preselected directory in the file picker.
related browser.download.lastdir ...
Patches and pushes
viewed. use a commit message that mentions the bug number, describes the change, and mentions the reviewer. for example: hg ci -m "bug 654321, copied the comment from the doc without reading, r=nobody" path-to-changed-files close the bug, copying the url to your change in the closing comment. write up something like this for your comment: landed this on aurora, http://hg.mozilla.org/
releases/l10n/mozilla-aurora/ab-cd/rev/adfe1234feac, marking fixed. update your sign-offs on the l10n dashboard to include the change into the next
release. and that's it! it can be considered a bit complicated at first, but after you do it the first time, it gets easier and easier after that :-) ...
Productization guide
ntry or language, and we have to take this into account when considering default search engines for a locale. hence there is a need to customize the set of default web services on a per-locale basis in order to ensure a good user experience across all locales. purpose of productization there are two main purposes of adding default web services to mozilla products: provide users with useful and
relevant content demonstrate certain features of the product the first one (provide users with useful and
relevant content) is obvious: we want to improve our users’ experience on the web, so we provide a couple of well-thought suggestions for different services. for example, we ship firefox with 6 or 7 search engine plug-ins to make users’ lives easier when they’re looking for information, ...
Crash reporting
-stats. if you want to find a specific crash that you submitted, you first need to find the crash id that the server has assigned your crash. type about:crashes into your location bar to get a page listing both submitted and unsubmitted crash reports. for more information, see how to get a stacktrace for a bug report. reports and queries crash-stats has built-in reports of "topcrashes" for each
release grouped by signature. there is also a custom query tool which allows users to limit searches on more precise information. finally, a set of mozilla employees have access to directly query the underlying data in either sql summary or using mapreduce on the storage cluster. if you are interested in obtaining this advanced access, contact gabriele svelto. see also understanding crash report...
Emscripten techniques
debugging out-of-memory problems a common bug to diagnose with emscripten is where a big game fails due to an out of memory error (oom) somewhere during load time. by the time about:memory is loaded in a new tab and you have clicked the "measure" button to diagnose what's happened, the memory usage causing the spike has gone away, making temporary memory spikes difficult to diagnose. ...
Emscripten
gh to application frameworks like qt. emscripten generates fast code — its default output format is asm.js , a highly optimizable subset of javascript that can execute at close to native speed in many cases. note: sound interesting? read more about emscripten and try some demos, then get started with using it. other articles of interest on mdn our games zone contains some useful content
related to games development, which is a common area of use for emscripten. our emscripten techniques page is a place to store useful emscripten-
related ideas that haven't made it onto the emscripten wiki. ...
Firefox Sync
ansmitted to a server without being encrypted. mozilla does not hold any keys to your sync data. your data can only be decrypted by someone who is able to log in to your firefox account (ie, that knows your firefox accounts password and has access to your email for the verification required during the initial login). documentation this document serves as an index for all technical documentation
related to sync. it is not designed for use by end-users, but instead for people who wish to understand the details of how sync is implemented or wish to interact with it. general the always prolific richard newman has written a couple of notes about bookmark syncing (first, second) and has a blog where he talks about the various challenges syncing this kind of data. servers documentation for the...
JSHydra
key engine. all analysis is performed by running javascripts. ...
L20n HTML Bindings
download l20n with html bindings we maintain a repository with l20n optimized for production use: one file (~110kb) one file, minified (~35kb) it's recommended to include the l20n.js file as the last script in the head element. <head> … <script src="l20n.js"></script> </head> create manifest use a localization manifest to define available languages and their resource files. <link
rel="localization" href="../locales/manifest.json"> an example of the manifest file (all keys are required): { "locales": [ "en-us", "pl"], "default_locale": "en-us", "resources": [ "../locales/{{locale}}/strings.l20n", "/shared/{{locale}}/date.l20n"¨ ] } make html elements localizable use the data-l10n-id attribute on an html element to mark it as localizable. <p data-l10n-id...
L20n Javascript API
lavailablelanguages(function(allavailable) { var fallbackchain = yourapp.intersect(allavailable, requested); cb(fallbackchain); }); }); ctx.requestlocales(...requestedlocales: string?) specify the user's preferred locales for the context instance to negotiate against and freeze the context instance. when a context instance is frozen, no more resources can be added or linked. all io
related to fetching the resource files takes place when a context instance freezes. when all resources have been fetched, parsed and compiled, the context instance will emit a ready event. the final list of locales supported by the context instance will be negotiated asynchronously by the negotiator registered by registerlocalenegotiator. ctx.requestlocales('pl'); ctx.requestlocales('fr-ca', '...
AsyncTestUtils extended framework
g is a list of frequently used attributes where the default value is listed after the attribute name. there are more attributes you can specify; consult the documentation for more information. (see the bottom of this page for links to the source files.) count: 10 the number of messages that should be in the set. note that the default is subject to change, so if you want 10, say 10, instead of
relying on the default. msgsperthread: 1 how many messages should be in each thread? the default is that every message is its own thread; no message is a reply to any other message. if you pass a number greater than 1, then you get a direct reply-chain that long. for example, if you pass 3, then 1 <- 2 <- 3 is what the reply chain looks like. if you need more complicated threads you will need to us...
Midas
stifies the current block. justifyleft left-aligns the current block. justifyright right aligns the current block. outdent outdent the block where the caret is located. if the block is not indented prior to calling outdent, nothing will happen. if the caret is in a list item, the item will bump up a level in the list or break out of the list enti
rely. paste this command will paste the contents of the clipboard at the location of the caret. if there is a selection, it will be deleted prior to the insertion of the clipboard's contents. note: this command won't work without setting a pref or using signed js. user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.clipboar...
Optimizing Applications For NSPR
commodate restrictions in watcom's c/c++ version 11.0 and 11.0a compiler. windows 3.1 does not provide a non-blocking file i/o interface. nspr's file i/o is done using windows 3.1's synchronous file i/o api. the nspr file i/o apis may cause a thread switch even though the i/o is fully synchronous. do not depend on file i/o being synchronous. command line applications using the libc printf() and
related apis behave funny on windows 3.1. read the fine print in the windows sdk for the grizzly details. watch out for printn overflow on win16. make sure all possible values of your printn variables are within 2^16. win-95 the win-95 version of nspr should really be labeled win-32. the same library will work on either win-nt or win-95. win-95 nspr uses native threads as nspr threads. generall...
Atomic Operations
since not all operating environments provide access to such functions, their performance may vary considerably. atomic operations functions the api defined for the atomic functions is consistent across all supported platforms. however, the implementation may vary greatly, and hence the performance. on systems that do not provide direct access to atomic operators, nspr emulates the capabilities by using its own locking mechanisms. ...
Date and Time
this chapter describes the date and time functions in nspr. nspr represents time in two ways, absolute time and clock/calendar time. nspr provides types and constants for both representations, and functions to convert time values between the two. absolute time representation treats time instants as points along the time line. a time instant is represented by its position on the time line
relative to the origin, called the epoch. nspr defines the epoch to be midnight (00:00:00) 1 january 1970 utc (coordinated universal time). in this form, time is just a point on the time line. there is no notion of time zone. clock/calendar time, used for human interfaces, represents time in the familiar year, month, day, hour, minute, second components. in this form, the time zone information is imp...
I/O Functions
nt. a pollable event is either set or unset. pr_newpollableevent pr_destroypollableevent pr_setpollableevent pr_waitforpollableevent one can call pr_poll with the pr_poll_read flag on a pollable event. whe the pollable event is set, pr_poll returns the the pr_poll_read flag set in the out_flags. manipulating layers file descriptors may be layered. for example, ssl is a layer on top of a
reliable bytestream layer such as tcp. each type of layer has a unique identity, which is allocated by the runtime. the layer implementor should associate the identity with all layers of that type. it is then possible to scan the chain of layers and find a layer that one recognizes and therefore predict that it will implement a desired protocol. a layer can be pushed onto or popped from an existing...
I/O Types
to nspr. directory type file descriptor types file info types network address types types used with socket options functions type used with memory-mapped i/o offset interpretation for seek functions directory type prdir file descriptor types nspr represents i/o objects, such as open files and sockets, by file descriptors of type prfiledesc. this section introduces prfiledesc and
related types. prfiledesc priomethods prfileprivate prdescidentity note that the nspr documentation follows the unix convention of using the termfiles to refer to many kinds of i/o objects. to refer specifically to the files in a file system (that is, disk files), this documentation uses the termnormal files. prfiledesc has an object-oriented flavor. an i/o function on a prfiledesc structure...
Logging
compile the program with debug defined. before running the compiled program, set the environment variable nspr_log_modules to userstuff:5 static void userlogstuff( void ) { prlogmoduleinfo *mylm; printn i; pr_static_asser...
Monitors
it sees fit. the first time the thread enters a monitor, it acquires the monitor's lock and the thread's entry count is incremented to 1. each subsequent time the thread successfully enters the same monitor, the thread's entry count is incremented again, and each time the thread exits the monitor, the thread's entry count is decremented. when the entry count for a thread reaches zero, the thread
releases the monitor's lock, and other threads that were blocked while trying to enter the monitor will be rescheduled. a call to pr_wait temporarily returns the entry count to zero. when the calling thread resumes, it has the same entry count it had before the wait operation. unlike a mutex of type prlock, a mutex of type prmonitor has a single, implicitly associated condition variable that may be...
PRFileDesc
n for the layer. identity identity of this particular layer. see prdescidentity. description the fields of this structure are significant only if you are implementing a layer on top of nspr, such as ssl. otherwise, you use functions such as pr_open and pr_newtcpsocket to obtain a file descriptor, which you should treat as an opaque structure. for more details about the use of prfiledesc and
related structures, see file descriptor types. ...
PRMonitor
clients create them when needed and must destroy them when no longer needed. ...
PRNetAddr
family. by default, nspr is built to support only ipv4, but it's possible to build the nspr library to support both ipv4 and ipv6. therefore, the family field can be pr_af_inet only for default nspr, and can also be pr_af_inet6 if the binary supports ipv6. prnetaddr is binary-compatible with the socket address structures in the familiar berkeley socket interface, although this fact should not be
relied upon. the raw member of the union is equivalent to struct sockaddr, the inet member is equivalent to struct sockaddr_in, and if the binary is built with ipv6 support, the ipv6 member is equivalent to struct sockaddr_in6. (note that prnetaddr does not have the length field that is present in struct sockaddr_in on some unix platforms.) the macros pr_af_inet, pr_af_inet6, pr_inaddr_any, pr_inadd...
PRThreadPriority
expected priority. pr_priority_high slightly higher priority than pr_priority_normal. this priority is for threads performing work of high urgency but short duration. pr_priority_urgent highest priority. only one thread at a time typically has this priority. pr_priority_last placeholder description in general, an nspr thread of higher priority has a statistically better chance of running
relative to threads of lower priority. however, because of the multiple strategies nspr uses to implement threading on various host platforms, nspr priorities are not precisely defined. at best they are intended to specify a preference in the amount of cpu time that a higher-priority thread might expect
relative to a lower-priority thread. this preference is still subject to resource availability and...
PRThreadState
a thread's thread state is either joinable or unjoinable. syntax #include <prthread.h> typedef enum prthreadstate { pr_joinable_thread, pr_unjoinable_thread } prthreadstate; enumerators pr_unjoinable_thread thread termination happens implicitly when the thread returns from the root function. the time of
release of the resources assigned to the thread cannot be determined in advance. threads created with a pr_unjoinable_thread state cannot be used as arguments to pr_jointhread. pr_joinable_thread joinable thread references remain valid after they have returned from their root function until pr_jointhread is called. this approach facilitates management of the process' critical resources. description a thread is a critical resource and must be managed. the lifetime of a thr...
PR_Connect
error occurs. the function uses the lesser of the provided timeout and the os's connect timeout. in particular, if you specify pr_interval_no_timeout as the timeout, the os's connection time limit will be used. if the socket is a udp socket, there is no connection setup to speak of, since udp is connectionless. if pr_connect is invoked on a udp socket, it has an overloaded meaning: pr_connect me
rely saves the specified address as the default peer address for the socket, so that subsequently one can send and receive datagrams from the socket using pr_send and pr_recv instead of the usual pr_sendto and pr_recvfrom. ...
PR_DestroyPollableEvent
syntax nspr_api(prstatus) pr_destroypollableevent(prfiledesc *event); parameter the function has the following parameter: event pointer to a prfiledesc structure previously created via a call to pr_newpollableevent. returns the function returns one of the following values: if successful, pr_success. if unsuccessful, pr_failure. ...
PR_ExitMonitor
decrements the entry count associated with a specified monitor and, if the entry count reaches zero,
releases the monitor's lock. syntax #include <prmon.h> prstatus pr_exitmonitor(prmonitor *mon); parameter the function has the following parameter: mon a reference to an existing structure of type prmonitor. the monitor object referenced must be one for which the calling thread currently holds the lock. returns the function returns one of the following values: if successful, pr_success. if unsuccessful (the calling thread has not entered the monitor), pr_failure. description if the decremented entry count is zero, pr_exitmonitor
releases the monitor's lock. threads that were blocked trying to enter the monitor will be rescheduled. ...
PR_JoinThreadPool
waits for all threads in a thread pool to complete, then
releases resources allocated to the thread pool. syntax #include <prtpool.h> nspr_api(prstatus) pr_jointhreadpool( prthreadpool *tpool ); parameter the function has the following parameter: tpool a pointer to a prthreadpool structure previously created by a call to pr_createthreadpool. returns prstatus ...
PR_NewTCPSocket
creates a new ipv4 tcp socket. syntax #include <prio.h> prfiledesc* pr_newtcpsocket(void); returns the function returns one of the following values: upon successful completion, a pointer to the prfiledesc object created for the newly opened ipv4 tcp socket. if the creation of a new tcp socket failed, null. description tcp (transmission control protocol) is a connection-oriented,
reliable byte-stream protocol of the tcp/ip protocol suite. pr_newtcpsocket creates a new ipv4 tcp socket. a tcp connection is established by a passive socket (the server) accepting a connection setup request from an active socket (the client). 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...
PR_NewUDPSocket
creates a new udp socket. syntax #include <prio.h> prfiledesc* pr_newudpsocket(void); returns the function returns one of the following values: upon successful completion, a pointer to the prfiledesc object created for the newly opened udp socket. if the creation of a new udp socket failed, null. description udp (user datagram protocol) is a connectionless, un
reliable datagram protocol of the tcp/ip protocol suite. udp datagrams may be lost or delivered in duplicates or out of sequence. pr_newudpsocket creates a new udp socket. the socket may be bound to a well-known port number with pr_bind. datagrams can be sent with pr_sendto and received with pr_recvfrom. when the socket is no longer needed, it should be closed with a call to pr_close. see also pr_newudpsocket is deprecat...
PR_OpenSharedMemory
created memory segment with the specified name. when parameter create is (pr_shm_excl | pr_shm_create) and the shared memory already exists, the function returns null with the error set to pr_file_exists_error. when parameter create is pr_shm_create and the shared memory already exists, a handle to that memory segment is returned. if the segment does not exist, it is created and a pointer to the
related prsharedmemory structure is returned. when parameter create is 0, and the shared memory exists, a pointer to a prsharedmemory structure is returned. if the shared memory does not exist, null is returned with the error set to pr_file_not_found_error. ...
PR_OpenTCPSocket
e pr_af_inet (ipv4), pr_af_inet6 (ipv6), or pr_af_local (unix domain, supported on posix systems only). returns the function returns one of the following values: upon successful completion, a pointer to the prfiledesc object created for the newly opened tcp socket. if the creation of a new tcp socket failed, null. description tcp (transmission control protocol) is a connection-oriented,
reliable byte-stream protocol of the tcp/ip protocol suite. pr_opentcpsocket creates a new tcp socket of the address family af. a tcp connection is established by a passive socket (the server) accepting a connection setup request from an active socket (the client). typically, the server binds its socket to a well-known port with pr_bind, calls pr_listen to start listening for connection setup request...
PR OpenUDPSocket
ket. can be pr_af_inet (ipv4), pr_af_inet6 (ipv6), or pr_af_local (unix domain, supported on posix systems only). returns the function returns one of the following values: upon successful completion, a pointer to the prfiledesc object created for the newly opened udp socket. if the creation of a new udp socket failed, null. description udp (user datagram protocol) is a connectionless, un
reliable datagram protocol of the tcp/ip protocol suite. udp datagrams may be lost or delivered in duplicates or out of sequence. pr_openudpsocket creates a new udp socket of the address family af. the socket may be bound to a well-known port number with pr_bind. datagrams can be sent with pr_sendto and received with pr_recvfrom. when the socket is no longer needed, it should be closed with a call t...
PR_PushIOLayer
e pushed onto the top of the stack is accomplished by swapping the contents of the file descriptor being pushed and the stack's current top layer file descriptor. the intent is that the pointer to the stack remain the stack's identity even if someone (perhaps covertly) has pushed other layers. some subtle ramifications: the ownership of the storage pointed to by the caller's layer argument is
relinquished to the runtime. accessing the object via the pointer is not permitted while the runtime has ownership. the correct mechanism to access the object is to get a pointer to it by calling pr_getidentitieslayer. the contents of the caller's object are swapped into another container, including the reference to the object's destructor. if the original container was allocated using a differen...
PR_ReadDir
. returns a pointer to the next entry in the directory. if the end of the directory is reached or an error occurs, null. the reason can be retrieved via pr_geterror. description pr_readdir returns a pointer to a directory entry structure: struct prdirentry { const char *name; }; typedef struct prdirentry prdirentry; the structure has the following field: name name of entry,
relative to directory name. the flags parameter is an enum of type prdirflags: typedef enum prdirflags { pr_skip_none = 0x0, pr_skip_dot = 0x1, pr_skip_dot_dot = 0x2, pr_skip_both = 0x3, pr_skip_hidden = 0x4 } prdirflags; the memory associated with the returned prdirentry structure is managed by nspr. the caller must not free the prdirentry structure. moreover, the prdirentr...
PR_SetLibraryPath
registers a default library pathname with a runtime. syntax #include <prlink.h> prstatus pr_setlibrarypath(const char *path); parameters the function has this parameter: path a pointer to a character array that contains the directory path that the application should use as a default. the syntax of the pathname is not defined, nor whether that pathname should be absolute or
relative. returns the function returns one of the following values: if successful, pr_success. if unsuccessful, pr_failure. this may indicate that the function cannot allocate sufficient storage to make a copy of the path string description this function registers a default library pathname with the runtime. this allows an environment to express policy decisions globally and lazily, rather than hardcodi...
PR_TicksPerSecond
. syntax #include <prinrval.h> pruint32 pr_tickspersecond(void); returns an integer between 1000 and 100000 indicating the number of ticks per second counted by printervaltime on the current platform. this value is platform-dependent and does not change after nspr is initialized. description the value returned by pr_tickspersecond() lies between pr_interval_min and pr_interval_max. the
relationship between a printervaltime tick and standard clock units is platform-dependent. pr_pr_tickspersecond() allows you to discover exactly what that
relationship is. seconds per tick (the inverse of pr_pr_tickspersecond()) is always between 10 microseconds and 1 millisecond. ...
PR_dtoa
mode, printn ndigits, printn *decpt, printn *sign, char **rve, char *buf, prsize bufsz); parameters the function has these parameters: d the floating point number to be converted to a string. mode the type of conversion to employ. ndigits the number of digits desired in the output string. decpt a pointer to a memory location where the runtime will store the offset,
relative to the beginning of the output string, of the conversion's decimal point. sign a location where the runtime can store an indication that the conversion was of a negative value. *rve if not null this location is set to the address of the end of the result. buf the address of the buffer in which to store the result. bufsz the size of the buffer provided to hold the result. results t...
Process Initialization
identity and versioning name and version constants pr_name pr_version pr_versioncheck initialization and cleanup nspr detects whether the library has been initialized and performs implicit initialization if it hasn't. implicit initialization should suffice unless a program has specific sequencing requirements or needs to characterize the primordial thread. explicit initialization is ra
rely necessary. implicit initialization assumes that the initiator is the primordial thread and that the thread is a user thread of normal priority. pr_init pr_initialize pr_initialized pr_cleanup pr_disableclockinterrupts pr_blockclockinterrupts pr_unblockclockinterrupts pr_setconcurrency pr_processexit pr_abort module initialization initialization can be tricky in a threaded environ...
Thread Pools
thread pools create and manage threads to provide support for scheduling work (jobs) onto one or more threads. nspr's thread pool is modeled on the thread pools described by david r. butenhof inprogramming with posix threads (addison-wesley, 1997). ...
Threads
read, you can join it with another thread (see pr_jointhread). joining a thread provides definitive proof that the target thread has terminated and has finished with both the resources to which the thread has access and the resources of the thread itself. for an overview of the nspr threading model and sample code that illustrates its use, see introduction to nspr. for api reference information
related to thread synchronization, see locks and condition variables. threading types and constants prthread prthreadtype prthreadscope prthreadstate prthreadpriority prthreadprivatedtor threading functions most of the functions described here accept a pointer to the thread as an argument. nspr does not check for the validity of the thread. it is the caller's responsibility to ensure that...
FIPS Mode - an explanation
(fips sounds plural, but is singular; one fips document is a fips, not a fip.) fips documents define rules, regulations, and standards for many aspects of handling of information by computers and by people. they apply to all us government employees and personnel, including soldiers in the armed forces. generally speaking, any use of a computer by us government personnel must conform to all the
relevant fips regulations. if you're a us government worker, and you want to use a mozilla software product such as firefox, or any product that uses nss, you will want to use it in a way that is fully conformant with all the
relevant fips regulations. some other governments have also adopted many of the fips regulations, so their applicability is somewhat wider than just the us government's person...
Build instructions for JSS 4.3.x
to_successfully_compile_jss_and_nss_for_32_and_64_bits_on_osx_10.6_(10.6.7) for contributed instructions. build jss. cd mozilla/security/jss gmake sign the jss jar. if you're intention is to modify and build the jss source you need to apply for your own jce code-signing certificate if you made no changes and your goal is to build jss you can use the signed binary
release of the jss4.jar from ftp.mozilla.org. with your built jss4 jni shared library. next, you should read the instructions on using jss. ...
JSS Provider Notes
xception). if you are curious, you can verify the signature on the jar file using the jarsigner tool, which is distributed with the jdk. if you build jss yourself from source instead of using binaries downloaded from mozilla.org, your jar file will not have a valid signature. this means you will not be able to use the jss provider for jce algorithms. you have two choices. use the binary
release of jss from mozilla.org. apply for your own jce code-signing certificate following the procedure at how to implement a provider for the javatm cryptography extension. then you can sign your own jss jar file. installing the provider in order to use any part of jss, including the jca provider, you must first call cryptomanager.initialize(). by default, the jca provider will...
Mozilla-JSS JCA Provider notes
ows an exception). if you are curious, you can verify the signature on the jar file using the jarsigner tool, which is distributed with the jdk. if you build jss yourself from source instead of using binaries downloaded from mozilla.org, your jar file will not have a valid signature. this means you will not be able to use the jss provider for jce algorithms. you have two choices. use the binary
release of jss from mozilla.org. apply for your own jce code-signing certificate following the procedure at how to implement a provider for the javatm cryptography extension. then you can sign your own jss jar file. installing the provider in order to use any part of jss, including the jca provider, you must first call cryptomanager.initialize(). by default, the jca provider will be installed in t...
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
secupwdata *pwdata, const char *nicknamestr, const char *headerfilename, const char *infilename) { secstatus rv; prfiledesc *headerfile = null; prfiledesc *infile = null; certcertificate *cert = null; unsigned int signatu
relen = 0; seckeyprivatekey *privkey = null; secitem sigitem; secoidtag hashoidtag; /* open the header file to write padding */ headerfile = pr_open(headerfilename, pr_create_file | pr_rdwr | pr_append, 00660); if (!headerfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", headerfi...
sample2
finds the private key from db and signs the contents * of infilename and writes to signaturefilename */ secstatus findkeyandsign(pk11slotinfo *slot, certcertdbhandle* certhandle, secupwdata *pwdata, const char *nicknamestr, const char *headerfilename, const char *infilename) { secstatus rv; prfiledesc *headerfile = null; prfiledesc *infile = null; certcertificate *cert = null; unsigned int signatu
relen = 0; seckeyprivatekey *privkey = null; secitem sigitem; secoidtag hashoidtag; /* open the header file to write padding */ headerfile = pr_open(headerfilename, pr_create_file | pr_rdwr | pr_append, 00660); if (!headerfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", headerfilename); rv = secfailure; goto cleanup; } /* get the certificate by nick name and write to header file ...
NSS sources building testing
find the directory that contains the highest version number. because nss depends on the base library nspr, you should download the archive that combines both nss and nspr. ...
nss tech note1
ly one template is needed, you do not need a null template to terminate the array. offset† . this field does not apply to all template types. it is only needed if the template instructs the decoder to save some data, such as for primitive component types, or for some modifiers where noted.when needed, it tells the decoder where in the target data to save the current component. it is normally
relative to the dest argument passed to the decoder. if templates are nested, the offset applies to the location of the current component within the target component, typically the decoded sequence. sub† . this field does not apply to all template types. if kind contains the sec_asn1_inline or sec_asn1_pointer modifiers, then it must point to the required subtemplate. if kind contains the sec_as...
nss tech note4
pulling certificate extension information out of ssl certificates nss technical note: 4 note: this document contains code snippets that focus on essential aspects of the task and often do not illustrate all the cleanup that needs to be done. also, this document does not attempt to be an exhaustive survey of all possible ways to do a certain task; it me
rely tries to show a certain way. include these files #include "ssl.h" #include "cert.h" get the handle of the cert associated with an ssl connection certcertificate* cert = ssl_peercertificate(prfiledesc *fd); if ssl client, this will get you the server's cert handle; if ssl server, this will get you the client's cert handle if client a...
nss tech note6
by nss developers is null and void. if your build process modifies nss libraries in any way (for example, to strip the symbols), it should consider not doing so for the reasons cited above. if you still decide to make unsupported changes, you can allow the softoken to come up in fips 140 mode of operation by regenerating the .chk files yourself. the tool to do that is called shlibsign. it is
released as part of the nss binary distributions. if your build process does not modify nss shared libraries, you can just use the .chk files in the nss binary distributions. so you have two options. 1. do not modify nss libraries in your build process. specifically, do not modify libsoftokn3.so, libsoftokn3.sl, softokn3.dll, libfreebl_pure32_3.so, libfreebl_pure32_3.sl, libfreebl_hybrid_3.so, ...
nss tech note7
no longer needed, they need to be destroyed. use seckey_destroypublickey() to destroy a public key (seckeypublickey *). use seckey_destroyprivatekey() to destroy a private key (seckeyprivatekey *). unlike seckeypublickey and seckeyprivatekey, pk11symkey objects are reference counted. use pk11_referencesymkey() to acquire a reference to a symmetric key (pk11symkey *). use pk11_freesymkey() to
release a reference to a symmetric key (pk11symkey *); the symmetric key is destroyed when its reference count becomes zero. functions rsa signing and encryption functions are provided by two layers of nss function: the sgn_ and vfy_ functions in cryptohi.h, and the pk11_ functions in pk11pub.h. as a general principle, you should use the highest layer of nss you can possibly use for what you are try...
Overview of NSS
nd apis, nss provides security tools required for debugging, diagnostics, certificate and key management, cryptography module management, and other development tasks. nss comes with an extensive and growing set of documentation, including introductory material, api references, man pages for command-line tools, and sample code. nss is available as source and shared (dynamic) libraries. every nss
release is backward compatible with previous
releases, allowing nss users to upgrade to the new nss shared libraries without recompiling or
relinking their applications. open-source licensing and distribution nss is available under the mozilla public license, version 2. the latest source code is available for free worldwide from https://www.mozilla.org and its mirror sites. ...
Build instructions
done in sh or bash as follows: export path=/usr/libexec/binutils220:$path the following build instructions should work for all platforms (with some platform-specific changes as noted). build instructions for recent versions (mercurial) clone the nspr and nss repositories. hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss if you want to build a
releases other than the tips of these repositories, then switch to the
release tags: cd nspr hg update nspr_4_9_5_rtm cd ../nss hg update nss_3_14_2_rtm cd .. set environment variables: if you want a non-debug optimized build, set build_opt=1 in your environment. otherwise, you get a debug build. on windows, if you want a debug build with the system's debug rtl libraries, set use_debug_rt...
FC_InitToken
: the so password should be the empty string, i.e., ulpinlen argument should be 0. fc_inittoken() ignores the plabel argument. return value fc_inittoken() returns the following return codes. ckr_ok: token initialization succeeded. ckr_slot_id_invalid: slot id is invalid. ckr_token_write_protected we don't have a reference to the key database (we failed to open the key database or we have
released our reference). ckr_device_error: failed to reset the key database. application usage fc_inittoken() is used to reset the password for the key database when the user forgets the password. the "reset password" button of the mozilla application suite and seamonkey (in preferences->privacy & security->master passwords) calls fc_inittoken(). the "-t" (token reset) command of certutil cal...
FC_Sign
name fc_sign - sign a block of data. syntax ck_rv fc_sign( ck_session_handle hsession, ck_byte_ptr pdata, ck_ulong usdatalen, ck_byte_ptr psignature, ck_ulong_ptr pussignatu
relen ); parameters hsession [in] session handle. pdata [in] pointer to data block. usdatalen [in] length of the data in bytes. psignature [out] pointer to location where recovered data is to be stored. pussignatu
relen [in, out] pointer to the maximum size of the output buffer, replaced by the length of the signature if the operation is successful. description fc_sign signs a message in a single operation according to the attributes of the previous call to fc_signinit. a user must log into the token (to assume the nss user role) before calling fc_sign. return value examples see also f...
FC_SignRecover
name fc_signrecover - sign data in a single recoverable operation. syntax ck_rv fc_signrecover( ck_session_handle hsession, ck_byte_ptr pdata, ck_ulong usdatalen, ck_byte_ptr psignature, ck_ulong_ptr pussignatu
relen ); parameters hsession [in] session handle. pdata [in] mechanism to be used for the signing operation. usdatalen [in] handle of the key to be usedn. psignature [out] pointer to the buffer or null. pussignatu
relen [in, out] pointer to the size of the output buffer, replaced by the length of the signature if the operation is successful. description fc_signrecover signs data in a single operation where the (digest) data can be recovered from the signature. if psignature is null only the length of the signature is returned in *pussignatu
relen. a user mus...
NSC_InitToken
return value nsc_inittoken() returns the following return codes. ckr_ok: token initialization succeeded. ckr_slot_id_invalid: slot id is invalid. ckr_token_write_protected slot id is 1. (the non-fips mode has two slots: 1 and 2. the key database is in slot 2. slot 1 doesn't have a key database.) we don't have a reference to the key database (we failed to open the key database or we have
released our reference). ckr_device_error: failed to reset the key database. examples application usage nsc_inittoken() is used to reset the password for the key database when the user forgets the password. the "reset password" button of the mozilla application suite and seamonkey (in preferences->privacy & security->master passwords) calls nsc_inittoken(). the "-t" (token reset) command of...
NSS_Initialize
afe - only load pkcs#11 modules that are thread-safe, i.e., that support locking - either os locking or nss-provided locks . if a pkcs#11 module isn't thread-safe, don't serialize its calls; just don't load it instead. this is necessary if another piece of code is using the same pkcs#11 modules that nss is accessing without going through nss, for example, the java sunpkcs11 provider. nss_init_pk11
reload - ignore the ckr_cryptoki_already_initialized error when loading pkcs#11 modules. this is necessary if another piece of code is using the same pkcs#11 modules that nss is accessing without going through nss, for example, java sunpkcs11 provider. nss_init_nopk11finalize - never call c_finalize on any pkcs#11 module. this may be necessary in order to ensure continuous operation and proper shutdo...
NSS tools : cmsutil
utfile] [-d dbdir] [-p password] -r "recipient1,recipient2, ..." certificate-only example cmsutil -o [-i infile] [-o outfile] [-d dbdir] [-p password] -r "cert1,cert2, . . ." sign message example cmsutil -s [-i infile] [-o outfile] [-d dbdir] [-p password] -n nickname[-tgp] [-y ekprefnick] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora. the most closely-
related project is dogtag pki, with a project wiki at [1]http://pki.fedoraproject.org/wiki/. for information specifically about nss, the nss project wiki is located at [2]http://www.mozilla.org/projects/security/pki/nss/. the nss site
relates directly to nss code changes and
releases. mailing lists: pki-devel@redhat.com and pki-users@redhat...
NSS tools : pk12util
hanges in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also certutil (1) modutil (1) the nss wiki has information on the new database design and how to configure applications to use it. o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools
related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/. the nss site
relates directly to nss code changes and
releases. 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, sun, oracle, mozilla, and google.
NSS tools : ssltab
nt from the certificate. if you are using the default badcert callback, you can still connect through a dialog. if you are not using the default badcert callback, the one you supply must allow for this possibility. see also the nss security tools are also documented at [1]http://www.mozilla.org/projects/security/pki/nss/. additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora. the most closely-
related project is dogtag pki, with a project wiki at [2]http://pki.fedoraproject.org/wiki/. for information specifically about nss, the nss project wiki is located at [3]http://www.mozilla.org/projects/security/pki/nss/. the nss site
relates directly to nss code changes and
releases. mailing lists: pki-devel@redhat.com and pki-users@redhat...
NSS tools : ssltap
nt from the certificate. if you are using the default badcert callback, you can still connect through a dialog. if you are not using the default badcert callback, the one you supply must allow for this possibility. see also the nss security tools are also documented at [1]http://www.mozilla.org/projects/security/pki/nss/. additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora. the most closely-
related project is dogtag pki, with a project wiki at [2]http://pki.fedoraproject.org/wiki/. for information specifically about nss, the nss project wiki is located at [3]http://www.mozilla.org/projects/security/pki/nss/. the nss site
relates directly to nss code changes and
releases. mailing lists: pki-devel@redhat.com and pki-users@redhat...
NSS tools : vfychain
follows. possible flags: "testlocalinfofirst" and "requirefreshinfo". -m method type sets method type for the test type it follows. possible types are "crl" and "ocsp". -s method flags sets revocation flags for the method it follows. possible types are "donotuse", "forbidfetching", "ignoredefaultsrc", "requireinfo" and "failifnoinfo". additional resources for information about nss and other tools
related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/. the nss site
relates directly to nss code changes and
releases. 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. authors: elio maldonado <emaldon...
sslcrt.html
this page is part of the ssl reference that we are migrating into the format described in the mdn style guide. if you are inclined to help with this migration, your help would be very much appreciated. upgraded documentation may be found in the current nss reference certificate functions chapter 5 certificate functions this chapter describes the functions and
related types used to work with a certificate database such as the cert7.db database provided with communicator. validating certificates manipulating certificates getting certificate information comparing secitem objects validating certificates cert_verifycertnow cert_verifycertname cert_checkcertvalidtimes nss_cmpcertchainwcanames cert_verifycertnow checks that the current date...
ssltyp.html
ction only are described with the function's entry in each chapter. some of these functions also use types defined by nspr and described in the nspr reference. <a name="> many of the structures presented here (certcertdbhandle, certcertificate, pk11slotinfo, and seckeyprivatekey) are opaque--that is, they are types defined as structures (for example, certcertdbhandlestr) that may change in future
releases of network security services. as long as you use the form shown here, your code will not need revision. certcertdbhandle an opaque handle structure for open certificate databases. syntax #include <certt.h> typedef struct certcertdbhandlestr certcertdbhandle; certcertificate an opaque x.509 certificate object. syntax #include <certt.h> typedef struct certcertificatestr certcert...
NSS Tools
nss security tools newsgroup: mozilla.dev.tech.crypto overview the nss security tools allow developers to test, debug, and manage applications that use nss. the tools information table below describes both the tools that are currently working and those that are still under development. the links for each tool take you to the source code, documentation, plans, and
related links for each tool. the links will become active when information is available. currently, you must download the nss 3.1 source and build it to create binary files for the nss tools. for information about downloading the nss source, see https://developer.mozilla.org/nss/building. if you have feedback or questions, please feel free to post to mozilla.dev.tech.crypto. this newsgroup is the preferred forum for all...
Utility functions
nssrwlock_unlockwrite mxr 3.2 and later nsssmime_versioncheck mxr 3.2.1 and later port_alloc mxr 3.2 and later port_arenaalloc mxr 3.2 and later port_arenagrow mxr 3.2 and later port_arenamark mxr 3.2 and later port_arena
release mxr 3.2 and later port_arenastrdup mxr 3.2 and later port_arenaunmark mxr 3.2 and later port_arenazalloc mxr 3.2 and later port_free mxr 3.2 and later port_freearena mxr 3.2 and later port_geterror mxr 3.2 and later...
NSS Tools certutil
d key4.db files may be targeted instead. the key and certificate management process generally begins with creating keys in the key database, then generating and managing certificates in the certificate database. this document discusses certificate and key database management. for information security module database management, see using the security module database tool. availability see the
release notes for the platforms this tool is available on. 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. each command takes one option. each option may take zero or more arguments. to see a usage string, issue the command without options, or with ...
NSS Tools crlutil
in the certificate database(see certutil tool) and continues with certificates expiration or revocation. this document discusses certificate revocation list management. for information on security module database management, see using the security module database tool. for information on certificate and key database management, see using the certificate database tool. availability see the
release notes for the platforms this tool is available on. 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. each command takes one option. each option may take zero or more arguments. to see a usage string, issue the command with...
NSS Tools pk12util
ol (pk12util) newsgroup: mozilla.dev.tech.crypto the pkcs #12 utility makes sharing of certificates among enterprise server 3.x and any server (netscape products or non-netscape products) that supports pkcs#12 possible. 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. availability see the
release notes for the platforms this tool is available on. synopsis pk12util -i p12file [-h tokenname] [-v] [common-options] or pk12util -o p12file -n certname [-c keycipher] [-c certcipher] [-m | --key_len keylen] [-n | --cert_key_len certkeylen] [common-options] or pk12util -l p12file [-h tokenname] [-r] [common-options] where [common-options] = [-d dir] [-p dbprefix] [-k slotpasswordfile...
NSS tools : cmsutil
password] -r "recipient1,recipient2, ..." certificate-only example cmsutil -o [-i infile] [-o outfile] [-d dbdir] [-p password] -r "cert1,cert2, . . ." sign message example cmsutil -s [-i infile] [-o outfile] [-d dbdir] [-p password] -n nickname[-tgp] [-y ekprefnick] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora. the most closely-
related project is dogtag pki, with a project wiki at [1]http://pki.fedoraproject.org/wiki/. for information specifically about nss, the nss project wiki is located at [2]http://www.mozilla.org/projects/security/pki/nss/. the nss site
relates directly to nss code changes and
releases. mailing lists: pki-devel@redhat.com ...
NSS tools : pk12util
ses, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also certutil (1) modutil (1) the nss wiki has information on the new database design and how to configure applications to use it. o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools
related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/. the nss site
relates directly to nss code changes and
releases. 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. aut...
NSS tools : signver
(1) the nss wiki has information on the new database design and how to configure applications to use it. o setting up the shared nss database https://wiki.mozilla.org/nss_shared_db_howto o engineering and technical information about the shared nss database https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools
related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/. the nss site
relates directly to nss code changes and
releases. 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. aut...
NSS tools : ssltap
e. if you are using the default badcert callback, you can still connect through a dialog. if you are not using the default badcert callback, the one you supply must allow for this possibility. see also the nss security tools are also documented at [1]http://www.mozilla.org/projects/security/pki/nss/. additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora. the most closely-
related project is dogtag pki, with a project wiki at [2]http://pki.fedoraproject.org/wiki/. for information specifically about nss, the nss project wiki is located at [3]http://www.mozilla.org/projects/security/pki/nss/. the nss site
relates directly to nss code changes and
releases. mailing lists: pki-devel@redhat.com ...
NSS tools : vfychain
. -m method type sets method type for the test type it follows. possible types are "crl" and "ocsp". -s method flags sets revocation flags for the method it follows. possible types are "donotuse", "forbidfetching", "ignoredefaultsrc", "requireinfo" and "failifnoinfo". additional resources for information about nss and other tools
related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/. the nss site
relates directly to nss code changes and
releases. 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. aut...
Necko Architecture
n of a url, you can ask the nsiioservice for a url instance representing that string. once you have a url interface in hand (nsiurl), you have a completely parsed representation of the original url string, and you can query for the various parts of the url. handlers & channels nsichannel provides a data access interface which allows you to read or write data from or to a uri. there is a 1-to-1
relationship between uris and channels (if you go so far as to create a channel from a uri, which is not required if all you need is a parsed representation of a uri string). for every uri you want to transact with, there is exactly one channel. in order to get a channel from a uri an intermediary layer was introduced. because a uri has no self knowledge about what "protocol" it represents, another c...
Necko FAQ
everything you wanted to know about the networking library in mozilla... and did ask. what is necko? a word rhyming with gecko and starting with the same letters as networking. that's all! any resemblance in flavor to the necco candy is pu
rely coincidental. what do i need to build this library? see the code section on the main page. currently you'd need to get the mozilla tree and at least build nspr, and xpcom. todo put links! how does psm fit into this picture? todo how does the proxy support work? todo what about proxy auto config? todo what about socks support? todo when is the next stable
release of this library going to be available? todo i'd like to use this library for my project. what licences apply? todo - mpl what do the page load options mean in t...
The Necko HTTP module
p/1.1 specification. rfc 2617 for the http/1.1 basic and digest authentication specifications. notes class overview this document provides an overview of the classes used to implement the http module. it's meant as a guide to developers wishing to extend the http implementation. transaction model this document describes the lifetime of a http transaction, the threads involved, and the
relevant objects. pipelining faq this document gives an overview of http/1.1 pipelining by answering some frequently asked questions. caching faq this document gives an overview of how http caching is implemented in necko. it answers some of the common questions concerning what is cached and for how long. http cache (v2) describes in detail the api and the implementation details of the co...
Multithreading in Necko
in the future, necko may be made thread safe to support changes to gecko that would put some other processing work on background threads (eg. multithreaded image decoding). however, most necko protocols utilize background threads. ...
Renaming With Pork
-k,-w0 options are passed down to the mcpp preprocessor such that it can annotate files with more precise position information. in order for this to work mcpp has to be integrated into your compiler as described in the pork installation instructions 3. in the analysis copy make a list of files to process. use absolute paths. find `pwd` -name \*.ii > /tmp/ls.txt 4. run renamer through pork-bar
rel. this makes it easier to refer to any diagnostics touch /tmp/err.txt tail -f /tmp/err.txt & ~/work/pork-bar
rel/pork-bar
rel 4 /tmp/ls.txt ./renamer -rename-class string sm::string > /tmp/string.diff 2>/tmp/err.txt pork-bar
rel runs multiple copies of the renamer and merges their output. one can also run the ./renamer command directly on the .ii files. 5. apply the patch in the test sources. por...
Rhino and BSF
r of open source projects, including the xsl processor xalan and the xml/java build tool ant. see xalan-java extensions for more information on adding javascript to xsl and the description of the optional script task in the apache ant manual for using scripting in ant build files. using bsf with rhino now that the apache jakarta bean scripting framework (bsf), version 2.4.0, has been officially
released, you can use rhino easily with bsf. see http://commons.apache.org/proper/commons-bsf/index.html. ...
Performance Hints
on object can be slow for the same reason, while function expressions are more efficient because the function can be compiled. for example, the code function myobject(a) { this.s = a; this.tostring = new function("return this.s"); } could be written more efficiently as function myobject(a) { this.s = a; this.tostring = function () { return this.s } } beginning with rhino 1.4
release 2, code passed to eval and new function will be interpreted rather than compiled to class files. with using the with statement prevents the compiler from generating code for fast access to local variables. you're probably better off explicitly accessing any properties of the object. ...
The JavaScript Runtime
when scripts are compiled in interpretive mode, an internal representation of the compiled form is created and stored rather than generating a java class. execution proceeds by evaluating this compiled form using support routines in rhino. compilation to java bytecodes for improved performance, rhino may compile javascript scripts to java bytecodes. the generated bytecodes in turn depend upon runtime support routines. each javascript script or function is compiled to a separate class. compilation of javascript source to class files is supported. it is possible to specify the class files as well as the packages to generate into. ...
Scripting Java
however, if we write a similar script var o = new packages.overload(); var a = [ 3, "hi", packages.overload ]; for (var i = 0; i != a.length; ++i) print(o.f(a[i])); and execute it, we get the output f(int) f(string) f(object) because rhino selects an overloaded method at runtime, it calls the more specific type that matches the argument. meanwhile java selects the overloaded method pu
rely on the type of the argument at compile time. although this has the benefit of selecting a method that may be a better match for each call, it does have an impact on performance since more work is done at each call. in practice this performance cost hasn't been noticeable in real applications. because overload resolution occurs at runtime, it can fail at runtime. for example, if we call overloa...
Rhino
it is typically embedded into java applications to provide scripting to end users. it is embedded in j2se 6 as the default java scripting engine. rhino downloads how to get source and binaries. rhino documentation information on rhino for script writers and embedders. ...
Rebranding SpiderMonkey (1.8.5)
after installing the build pre-requisites and downloading the spidermonkey source tarball issue the following commands at the terminal: cd js/src autoconf-2.13 for the remainder of this document wherever you see the text $brand you will substitute that text with the name of your brand. for example the default brand for spidermonkey 1.8.5 is 'mozjs185'. mkdir build-$brand-
release cd build-$brand-
release configure this build of spidermonkey with the desired options. for example: ../configure --enable-ctypes --with-system-nspr note: your desired configuration may be different. the only required part in this step is the ../configure command. so far, so good. now for the tricky parts. we need to perform a recursive find and replace text operation on all files in the current directory. in...
SpiderMonkey compartments
. this allows the garbage collecting of individual compartments, in addition to global collection. spidermonkey simply assumes that all objects referenced from outside the compartment are live, and then walks the object graph inside the compartment. objects that are found to be disconnected from the graph are discarded. with this new per-compartment garbage collection we shortcut having to walk un
related heap areas of a window or tab that triggered a garbage collection. see also js_newcompartmentandglobalobject() js_entercrosscompartmentcall() js_leavecrosscompartmentcall() jsautocompartment invariants spidermonkey internals: thread safety andreas gal blog post bobby holley blog post sfink/contexts_and_compartments xpconnect security membranes ...
Creating JavaScript tests
and jit-tests (in js/src/jit-test). see running automated javascript tests for details. in which test suite does your new test belong? jit-tests are intended to test the implementation of the jit. only add tests to these suites which test jit correctness or functionality. jstests is intended for tests of language-visible functionality. please put tests of functionality into jstests even if
related tests are in jit-tests, since jstests are closer to (and more easily converted to) test262 tests. (in fact, the test262 test suite is run as part of jstests.) practical differences between the two test suites: jstest new jstest files should be put the code in the appropriate subdirectory of js/src/tests/non262/, or, under some scenarios, contributed directly to the test262 repository...
GCIntegration - SpiderMonkey Redirect 1
's no danger that overwriting an untraced pointer will disrupt the snapshot. some pointers are guaranteed to be marked in the first slice of the gc. therefore, it's not possible for code to modify them between when the initial snapshot is taken and when the pointer is marked, so no write barrier is needed. many pointers in gecko are traced via ns_decl_cycle_collection_script_holder_class and its
related macros. these pointers are always traced in the first slice, and so they don't need a write barrier. many other xpconnect pointers are also traced in this way. see xpcjsruntime::traceblackjs and xpcjsruntime::tracegrayjs. if a pointer doesn't fit one of these categories, then it probably requires a write barrier. before the pointer is modified (except initializing writes, which don't need a...
Getting SpiderMonkey source code
you can get the spidermonkey source code in gzipped form or directly from the mercurial repository. downloading gzipped spidermonkey source code you can download gzipped spidermonkey source code from the following urls: http://ftp.mozilla.org/pub/spidermonkey/
releases/ http://ftp.mozilla.org/pub/spidermonkey/pre
releases/ here is a command-line example of downloading and unzipping spidermonkey source code version 59.0: mkdir mozilla cd mozilla wget http://ftp.mozilla.org/pub/spidermonkey/pre
releases/59/pre1/mozjs-59.0a1.0.tar.bz2 tar xvf mozjs-59.0a1.0.tar.bz2 these commands should work on most platforms including windows, as long as on windows you are using the mozillabuild bash shell. getting the latest spidermonkey source code from mercurial the mercurial repository at https://hg.m...
Functions
ight refer to obj.s } } upvar instructions. jsop_{get,call}upvar (in algol-like functions only, i think?) todo dslot instructions. jsop_{get,call}dslot (in flat closures only) todo gvar instructions. outside all functions, if a name definitely refers to a global for which we have seen a var, const, or function declaration, then we emit a js_defvar instruction in the script p
relude and access the global using jsop_{get,set,call}gvar. this is fast if the global either doesn't exist before the script runs (the script creates it) or it's a non-configurable data property (which amounts to the same thing). otherwise the gvar instructions are as slow as name instructions. there are also combo instructions jsop_{inc,dec}gvar and jsop_gvar{inc,dec}. name instructions. in...
Exact Stack Rooting
d you should use to keep the gc up-to-date with this information will vary depending on where the gcpointer is being stored. gcpointers can be stored as a property of a gcthing, on the cheap, or in the cstack. these three storage regions have different lifetime and overhead characteristics and thus require different management strategies for efficient space and cpu utilization. since c++ does not
reliably distinguish between storage classes, we have to put this burden on the user. storing a gcpointer in a gcthing storing your gcpointer inside of a gcthing that is already in the liveset is the easiest way to keep a gcthing to the liveset. gcpointers that reside in gcthings fall into one of these cases: storage in a normal property, storage in a reserved slot, or storage with js_{get|set}pri...
Invariants
corresponding lock is held. there are the usual invariants regarding various fields: they are protected by certain locks or more complex locking schemes. in particular, native objects' fields are protected by property locking (below); and several things are protected by the request model, such that there may be either one writer (in gc) or many readers (in requests). no jsnative or other object-
related callback ever runs at the same time as a finalizer for that object. property locks each thread may have a lock on at most one property at a time. (nesting them would risk deadlock. js_setwatchpoint violates this rule.) whether a property is locked, and which one, is static information for almost every line of code. the locking scheme is described under jsobjectops.dropproperty. (note that...
SpiderMonkey Internals: Thread Safety
d affect gc while outside a request. and obviously you shouldn't block or otherwise dilly-dally while in a request; it prohibits gc. as an optimization, each thread has its own size-classified freelists containing chunks of gc-managed memory ready to be allocated. this allows allocation to avoid locking most of the time (a significant speed win). 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. ...
Tracing JIT
ost recorder is placed on a deferred-abort stack. when the innermost recorder completes -- successfully or otherwise -- every recorder on the deferred abort stack is aborted. this process is called deep aborting the suspended recorders. executing when the monitor interprets a backward jump to a pc that it has a compiled trace of machine code for, the monitor enters executing mode. this mode is
relatively simple compared to recording mode. first the monitor allocates a native stack for the trace to use, and a state structure containing various key pointers into the spidermonkey interpreter's state, including a pointer to the native stack. it then imports the set of jsval values from the spidermonkey interpreter that the trace is known to read or write during its execution. this set was ...
Self-hosted builtins in SpiderMonkey
e property, so that they meet the requirements for standard built-in functions as described in the ecmascript language specification 5.1, clause 15. to make a self-hosted function a constructor, call makeconstructible(functionname) after the function declaration. a prototype property can be added from the self-hosted code itself. all self-hosted functions have direct access to each other and can
rely on references being stable, i.e. not changeable by client js code. otoh, self-hosted code doesn't have access to most of the c++-implemented builtins. you can not, for example, use function.prototype.apply directly. a select set of c++-implemented builtins is installed via the intrinsic_functions array in selfhosting.cpp, as described below. using the same mechanism, c++-implemented helper func...
Introduction to the JavaScript shell
. for more information, see the c/c++ functions js_getgcparameter and js_setgcparameter. gczeal(level) added in spidermonkey 1.8 debug only. set the level of gc zeal, a debugging feature. this can be 0 for normal periodic garbage collection, 1 for very frequent gc, or 2 for extremely frequent gc. anything other than 0 will make javascript run extremely slow but may help reveal or reproduce gc-
related bugs. for more information, see the c/c++ version of this function, js_setgczeal. getpda(object) returns the property descriptors for the specified object. getslx(object) returns the script line extent, which is the number of lines of code comprising the specified object. help([command ...]) displays brief help information about the specified commands, or about all available functions i...
JIT Optimization Outcomes
this page documents the meaning of different optimization outcomes. general outcomes general outcomes shared between various optimization strategies. genericfailure the optimization attempt failed, and the reason was not recorded. genericsuccess optimization succeeded. disabled the optimization has been explicitly disallowed. ...
JS::Add*Root
e of the new root, or null. description the js::add*root and functions add a c/c++ variable to the garbage collector's root set, the set of variables used as starting points each time the collector checks to see what memory is reachable. the garbage collector aggressively collects and recycles memory that it deems unreachable, so roots are often necessary to protect data from being prematu
rely collected. vp/rp is the address of a c/c++ variable (or field, or array element) of type js::value, jsstring *, jsobject *, or jsscript *. this variable must already be initialized. (for example, it must not be an uninitialized local variable. that could cause sporadic crashes during garbage collection, which can be hard to debug.) the variable must remain in memory until the balancing call to ...
JS::AutoIdArray
* a pointer to jsidarray to take the ownership. methods method description bool operator!() const return true if this has no owned array. jsid operator[](size_t i) const return a jsid in specified index of the owned array. size_t length() const return the length of the owned array. jsidarray *steal() return the owned array and
release the ownership. description js::autoidarray takes the ownership of jsidarray, and frees it in destructor by calling js_destroyidarray. examples { js::autoidarray ids(cx, js_enumerate(cx, obj)); if (!ids) // check the returned value from js_enumerate return false; for (int32_t i = 0, len = ids.length(); i < len; i++) { somefunc(cx, ids[i]); } /* when leaving this s...
JS::CallArgs
ue *vp arguments to a function. new code should use callargs instead of js_callee etc. whenever possible. the eventual plan is to change jsnative to take const callargs& directly, for automatic assertion of correct use and to make calling functions more efficient. embedders should start internally switching away from using argc and vp directly, except to create a callargs. then, when an eventual
release making that change occurs, porting efforts will require changing methods' signatures but won't require invasive changes to the methods' implementations, potentially under time pressure. js::callargs encapsulates access to the callee, this, the function call's arguments, and eventual return value for a function call. the principal way to create a callargs is like so, using js::callargsfromvp:...
JS::CompileOptions
n base class. it can be used by code that simply needs to access options set elsewhere, like the compiler. the usual compileoptions class must be stack-allocated, and holds non-owning references to the filename, element, and so on. it's derived from readonlycompileoptions, so the compiler can use it. owningcompileoptions roots / copies / reference counts of all its values, and unroots / frees /
releases them when it is destructed. it too is derived from readonlycompileoptions, so the compiler accepts it. readonlycompileoptions readonlycompileoptions is the common base class for the compileoptions hierarchy. use this in code that only needs to access compilation options created elsewhere, like the compiler. don't instantiate this class (the constructor is protected anyway); instead, crea...
JS::Handle
uments and need to root those arguments should generally use handles for those arguments and avoid any explicit rooting. this has two benefits. first, when several such functions call each other then redundant rooting of multiple copies of the gc thing can be avoided. second, if the caller does not pass a rooted value a compile error will be generated, which is quicker and easier to fix than when
relying on a separate rooting analysis. if you want to add additional methods to js::handle for a specific specialization, define a js::handlebase<t> specialization containing them. there are typedefs available for the main types: namespace js { typedef handle<jsfunction*> handlefunction; typedef handle<jsid> handleid; typedef handle<jsobject*> handleobject; typedef handle<jsscript*> ha...
JSObjectOps.setProto
this documentation should be considered spidermonkey internals documentation, not api documentation. see bug 408416 for details. ...
JSString
a jsstring represents a primitive javascript string in the jsapi. conceptually, a javascript string is just an array of char16_t characters and a length. you should not
rely on the structure of jsstring, because it is subject to change; instead, treat jsstring objects as opaque. to get the length of a jsstring you can use js_getstringlength. working with jsstring objects (add a list of links to methods here, maybe some text) ...
JS_AddExternalStringFinalizer
lity to free the memory. after this callback, the js engine will not use that memory anymore and will not keep a pointer to it. the callback may not keep a reference to this jsstring, as its memory is about to be freed. description add a finalizer for external strings created by js_newexternalstring using a type-code returned from this function, and that understands how to free or
release the memory pointed at by js_getstringchars(str). returns a nonnegative type index if there is room for finalizer in the global gc finalizers table, else returns -1. in a js_threadsafe build, this function must be invoked on the primordial thread only, at startup—or else the entire program must single-thread itself while loading a module that calls this function. to remove an external stri...
JS_Add*Root
me of the new root, or null. description the js_add*root and functions add a c/c++ variable to the garbage collector's root set, the set of variables used as starting points each time the collector checks to see what memory is reachable. the garbage collector aggressively collects and recycles memory that it deems unreachable, so roots are often necessary to protect data from being prematu
rely collected. vp/spp/opp/rp is the address of a c/c++ variable (or field, or array element) of type jsstring *, jsobject *, or jsval. this variable must already be initialized. (for example, it must not be an uninitialized local variable. that could cause sporadic crashes during garbage collection, which can be hard to debug.) the variable must remain in memory until the balancing call to js_remov...
JS_ClearContextThread
ent thread for exclusive use. no other thread may use cx until the current thread removes this association by calling js_clearcontextthread. js_setcontextthread returns the thread id of the thread previously associated with this context. when the function is used properly, the return value is always zero, indicating that no thread was previously associated with the context. js_clearcontextthread
relinquishes the calling thread's right to use cx. it returns the thread id of the last thread to be associated with this context. (this is always the current thread id when the function is used properly.) js_newcontext automatically associates the new context with the calling thread. use js_getcontextthread to determine whether a context is associated with a thread. js_setcontextthread and js_cle...
JS_ConstructObject
1.8.8, js_constructobject and js_constructobjectwitharguments have been removed from the jsapi. the preferred alternative is to save a copy of the constructor function for the class, then to call it using js_new. a less-preferred short-term solution might be to use this reimplementation of the method, but note that this reimplementation is not guaranteed to continue working across spidermonkey
releases. create a new object of the specified class, with the specified prototype and parent, then invokes a constructor function to initialize the new object. syntax jsobject * js_constructobject(jscontext *cx, jsclass *clasp, jsobject *proto, jsobject *parent); jsobject * js_constructobjectwitharguments(jscontext *cx, jsclass *clasp, jsobject *proto, jsobject *parent, unsigned int arg...
JS_ConvertArguments
char * (c string) bug 607292 s jsstring * unicode string, accessed by a jsstring pointer w char16_t * unicode character vector, 0-terminated (w for wide) o jsobject * object reference f jsfunction * the argument is converted to a function as though by a call to js_valuetofunction. this conversion is dangerous and almost enti
rely useless, because the resulting jsfunction is not a real function object and therefore cannot be safely passed to any other jsapi function. that includes js_callfunction() and js_getfunctionobject(). a jsfunction represents only the compiled code and not the environment of the function. unless the function happens to be a native function, this means it isn't attached to any global or enclosing sc...
JS_GetFunctionObject
ctionobject is not necessarily safe to call and should not be exposed to script. in the javascript language, functions are objects. but in the jsapi there are two separate concepts: a jsobject is what is exposed to scripts and has properties and can be stored in variables; and the corresponding jsfunction contains the code of a function. for certain functions, the two have a strictly one-to-one
relationship, and for those functions it is safe to call js_getfunctionobject to move from the jsfunction to the jsobject. however, for other functions, and particularly for javascript closures, many jsobjects may share the same jsfunction. in these cases, this function should not be called. calling the jsobject returned by it could cause a crash or worse. js_getfunctionobject always returns a point...
JS_GetGCParameter
syntax uint32_t js_getgcparameter(jsruntime *rt, jsgcparamkey key); void js_setgcparameter(jsruntime *rt, jsgcparamkey key, uint32_t value); uint32_t js_getgcparameterforthread(jscontext *cx, jsgcparamkey key); // added in spidermonkeysidebar 17 void js_setgcparameterforthread(jscontext *cx, jsgcparamkey key, uint32_t value); // added in spidermonkeysidebar 17 name type description rt jsruntime * the runtime to configure. cx jscontext * the context to configure. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. key jsgcparamkey specifies which garbage collection parameter to get or set. ...
JS_GetImplementationVersion
get the version number of the js engine. syntax const char * js_getimplementationversion(void); description js_getimplementationversion returns a hard-coded, english language string that specifies the version number of the js engine currently in use, and its
release date. see also mxr id search for js_getimplementationversion js_getversion js_setversionforcompartment ...
JS_MapGCRoots
pointed at by rp; if the root is unnamed, name is null; data is supplied from the third parameter to js_mapgcroots. the map function should return js_map_gcroot_remove to cause the currently enumerated root to be removed. to stop enumeration, return js_map_gcroot_stop. to continue mapping, return js_map_gcroot_next. these constants are flags; you can or them together. this function acquires and
releases rt's gc lock around the mapping of the roots table, so the map function should run to completion in as few cycles as possible. the map function cannot call js_gc, js_maybegc, js_beginrequest, or any js api entry point that acquires locks, without double-tripping or deadlocking on the gc lock. js_mapgcroots returns the count of roots that were successfully mapped. see also bug 803907 ...
JS_ReportErrorNumber
or object and set it as the pending exception. first errorcallback(userref, errornumber) is called. if errorcallback returns null, (??? what happens?). otherwise, if the jserrorformatstring returned by the jserrorcallback has .exntype == jsexn_none, then the error reporter, if any, is called, and no error object is created. (??? the source code seems to say we ignore the .exntype, actually, but su
rely i'm just missing something.) otherwise, if any javascript code is running in cx (for example, if the caller is a jsnative that was called from a script), then an error object is created and becomes the pending exception. the error reporter is not called yet, because the script still has an opportunity to catch and handle the exception. otherwise, no javascript code is running in cx. if the jsopt...
JS_SetFunctionCallback
a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. fcb jsfunctioncallback the callback to execute when javascript functions are invoked and exited. specify null to stop calling the current callback. the callback must not modify the current state of execution. the call stack cannot be
relied upon, because this callback may be invoked from the jit code when the stack frame and context are in an indeterminate state. description js_setfunctioncallback sets a c function to be called each time a javascript function is invoked or exits. fcb is a pointer to the c function to call. note that debuggers should probably use js_setcallhook in preference to this function, because it ...
JS_SetGCParametersBasedOnAvailableMemory
syntax void js_setgcparametersbasedonavailablememory(jsruntime *rt, uint32_t availmem); name type description rt jsruntime * the runtime to configure. value uint32_t the value of available memory in megabytes. description js_setgcparametersbasedonavailablememory adjusts the parameters of the garbage collection based on available memory. see bug 950044 for details. ...
JS_SetInterruptCallback
e request on cx. the callback does not need to call js_beginrequest()). description these functions allow setting an interrupt callback that will be called from the js thread some time after any thread triggered the callback using js_requestinterruptcallback. to schedule the gc and for other activities the engine internally triggers interrupt callbacks. the embedding should thus not
rely on callbacks being triggered through the external api only. important note: additional callbacks can occur inside the callback handler if it re-enters the js engine. the embedding must ensure that the callback is disconnected before attempting such re-entry. js_setinterruptcallback sets a callback that can be called asynchronously. some common uses for an interrupt callback are: to run ga...
JS_SetOperationCallback
s must not use both the operation callback api and the older branch callback api. description these functions allow setting an operation callback that will be called from the js thread some time after any thread triggered the callback using js_triggeroperationcallback. to schedule the gc and for other activities the engine internally triggers operation callbacks. the embedding should thus not
rely on callbacks being triggered through the external api only. important note: additional callbacks can occur inside the callback handler if it re-enters the js engine. the embedding must ensure that the callback is disconnected before attempting such re-entry. js_setoperationcallback sets a callback that can be called asynchronously. some common uses for an operation callback are: to run ga...
JS_SetPrivate
inter is stored. memory management of this field is the application's responsibility. the javascript engine never uses it. in particular: if you allocate memory for private data, you must free it, typically in a jsclass.finalize callback. if your class's private data contains any jsvals or other references to javascript objects, implement the jsclass.mark callback to ensure they are not prematu
rely reclaimed by the garbage collector. use js_getinstanceprivate to safely extract the private data from an object. (see the warning at js_getprivate.) never use js_setprivate on an instance of a class you don't own. that object may already be using the private data field for something else; or there might not be a private data field in that object at all, in which case js_setprivate would overwri...
JS_THREADSAFE
be in a request. in this reference, these jsapi functions are marked with the words "requires request", like this: name type description cx jscontext * the context to use. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. most jsapi callback functions are always called from within a request. these callbacks are (un
reliably!) documented with the words "provides request", like this: name type description cx jscontext * the context in which the event ocurred. provides request. in js_threadsafe builds, the javascript engine calls this callback only from within an active request on cx. the callback does not need to call js_beginrequest()). in particular, jsnative callbacks pro...
JS_ValueToBoolean
ified in ecma 262-3 §9.2. on success, js_valuetoboolean stores the converted value in *bp and returns js_true. on error or exception, it returns js_false, and the value left in *bp is undefined. for versions greater than jsversion_1_2, all objects convert to js_true, even boolean wrapper objects like the one produced by new boolean(false). this is the behavior specified in ecma 262-3 §9.2. see
related discussion on google groups. see also mxr id search for js_valuetoboolean js::toboolean bug 934557 ...
JS_ValueToFunction
which to perform the conversion. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. v js::handlevalue the value to convert. description js_valuetofunction converts a specified javascript value, v, to a function. js_valuetoconstructor is the exactly same function as js_valuetofunction. this conversion is dangerous and almost enti
rely useless, because the resulting jsfunction is not a real function object and therefore cannot be safely passed to any other jsapi function. that includes js_callfunction() and js_getfunctionobject(). a jsfunction represents only the compiled code and not the environment of the function. unless the function happens to be a native function, this means it isn't attached to any global or enclosing sc...
JS_YieldRequest
ad safety and requests, see js_threadsafe. js_yieldrequest momentarily suspends the current request. a program can call this function periodically to ensure that a long-running request does not block garbage collection indefinitely. the effect is the same as a call to js_suspendrequest immediately followed by a call to js_resumerequest. jsapi 1.7 and earlier js_yieldrequest did not cause cx to
relinquish objects it created to other threads that are blocked waiting for them. this bug (bug 402898) will be fixed in spidermonkey 1.8. jsapi 1.7 and earlier js_yieldrequest is available only in js_threadsafe builds. in spidermonkey 1.8 and later, this function will be present, but will do nothing, in non-js_threadsafe builds. mxr id search for js_yieldrequest ...
JS_malloc
non-null, cx must be associated with the same runtime as the context used to allocate p. that is, it is safe to allocate memory in one context and free it in another, as long as both contexts are in the same runtime. implementation note: currently these four functions are implemented using the corresponding standard c functions. do not make assumptions based on this implementation detail. future
releases may implement these functions differently. js_realloc code sample realloc is famously tricky to use correctly. here is an example of proper code: /* * `p` points to the memory area to resize. * we want to resize it to `newsize` bytes. */ void *p2 = js_realloc(cx, p, newsize); if (p2 == null) { if (p != null) js_free(cx, p); p = null; return null; } p = p2; see also ...
PRIVATE_TO_JSVAL
oid *ptr); void * jsval_to_private(jsval v); // obsoleted since jsapi 32 description with private_to_jsval(), an application can store a private data pointer, p, as a jsval. this can be useful with reserved slots. the private data pointer can point to application-defined memory of any type, but the pointer must be two-byte-aligned (that is, (int) p must be even). private data is managed enti
rely by the application. the javascript engine itself never uses a private data pointer. private data is not garbage collected. it is the application's responsibility to determine when it is safe to dereference a private data pointer. see also mxr id search for private_to_jsval js::privatevalue bug 952650 bug 1177892 -- removed ...
Running Automated JavaScript Tests
tests paths are specified; this can be overridden by the --wpt=enabled flag. running jstest in a browser jstests also runs on browser, with the following command: ./mach jstestbrowser to run specific test, you can use --filter=pattern command-line argument, where pattern is a regexp pattern that is tested against file:///{path_to_obj_dir}/dist/test-stage/jsreftest/tests/jsreftest.html?test={
relative_path_to_test_from_js/src/tests} string: ./mach jstestbrowser --filter=pattern running jstests on treeherder when viewing treeherder after a push to the mozilla repositories, jstests run in the browser are shown as r(j) meaning "javascript reftests". most of the spidermonkey shell jobs, labeled sm(...), will include js shell runs of both jstests and jit-tests. running jit-tests the jit-...
Split object
ter objects implement the jsextendedclass.innerobject hook. but the association is not fixed. an outer object may be associated with different inner objects at different times. this feature is complicated. programs other than mozilla that embed spidermonkey should avoid using split objects. the window object split objects were introduced to resolve a problem posed by the window object. three inter
related requirements on the window object seemed to conflict. the window object is the global object for scripts in web pages. firefox has to maintain this for web compatibility. for performance, access to global properties must be fast. there is a glaring difference in the lifetime of the window object as seen from two different angles. suppose a script in page a, in tab ta, has a refer...
TPS Bookmark Lists
that is, the first item is appended to its parent folder, then the second, and so forth. after and before properties are ignored. bookmarks.verify - the bookmark items in the list are verified to be present. within each folder, the second item in the list is assume...
TPS Password Lists
hentication passwords. username: required. password: required. usernamefield: the username field for a form password. optional. ...
WebReplayRoadmap
more features are planned for the timeline, as described below. retroactive console logging console logging is one of the primary tools most developers use to debug a page. seeing messages in the console provides a simple and intuitive view into the order in which events have happened. without time travel, using the console requires repeatedly updating the source or the debugger's log points,
reloading, and reproducing the bug. this is time consuming, especially when the bug only reproduces intermittently. retroactive console logging offers a large improvement to this workflow. the bug only needs to be reproduced in a recording tab once, and then console logs can be added which apply throughout the entire recording. this is based on the logpoints feature in the debugger, which can be ...
Zest runtimes
untimes are planned or an an early stage of implementation: https://github.com/mozilla/zest/tree/master/js javascript https://github.com/darkowlzz/zest-runner https://github.com/darkowlzz/zest-cli - this is the zest-cli of js based runner. python no code available yet if you are interested in working on an existing or new zest runtime then please get in touch via the zest group.
related links zest overview ...
Zest tools
the following tools currently support zest: owasp zed attack proxy the zap add-on allows the user to create, edit and run zest scripts. it is being developed alongside zest and can be expected to showcase the latest zest features.
related links zest overview ...
Zest usecase: Reporting Security Vulnerabilities to Developers
ix the vulnerability they rerun the script to check that the vulnerability is fixed the fix is applied to the system that the security team is testing the security team rerun the script as an initial check they then perform any manual testing they think is necessary note that the developers could also include the script in the regression tests to make sure that it doesnt reoccur.
related links zest overview ...
compare-locales
e localizations as first arguments, followed by the locale codes of the locales you want to compare. ...
Mozinfo
, leaving the reader to wonder....is this specific check necessary for (e.g.) an operating system? because information is not consolidated, checks are not done consistently, nor is it defined what we are checking for. mozinfo proposes to solve this problem. mozinfo is a bridge interface, making the underlying (complex) plethora of os and architecture combinations conform to a subset of values of
relevance to mozilla software. the current implementation exposes
relevant key, values: os, version, bits, and processor. additionally, the service pack in use is available on the windows platform. api usage mozinfo is a python package. downloading the software and running python setup.py develop will allow you to do import mozinfo from python. mozinfo.py is the only file contained is this package...
Exploitable crashes
will get more attention. explain in a comment why the issue seems exploitable. other tools apple has a tool called "crashwrangler" that are still being maintained as of 2012. there is little public information about it, and it is hard to find even on the apple developer site. to get them go to the mac developer center downloads section -> other downloads -> search for "crashwrangler". microsoft
released a debugger extension tool in 2009 called "!exploitable". it hasn't been updated since 2009. ...
Security and the jar protocol
e was assumed to be application/zip, regardless of what it actually was). this means that no matter what the file's real contents are, as far as firefox is concerned, it was a zip archive. this ordinarily isn't a big deal, since site developers wouldn't put up dangerous files and set them up to download like zip archives. however, if a site allows file uploads, zip files are typically treated as
relatively innocuous by web sites in that situation, since they're not executable. unless, of course, the browser thinks it's a jar file. so starting with gecko 1.8.0.15 and 1.8.1.10, the jar: protocol is only allowed if the mime type of the file is application/java-archive. a site that serves a file with that type is essentially promising that it has vetted the content and that it is in fact safe ...
Browser security
x509) is an itu standard to describe certificates. this article provides an overview of what these are and how they work.exploitable crashesthis article will help you determine if a crash is exploitable, find crashes which are exploitable, and to fix exploitable crashes.handling mozilla security bugsthis document describes how the new security organizational structure will work, and how security-
related mozilla bug reports will be handled.pinning violation reportsif a site makes use of key pinning, and your browser sees a certificate chain for that site which does not match the pin, firefox will reject the connection and display an error page. secure development guidelinesthe following content will likely see significant revision, though can be used as a reference for security best pract...
Animated PNG graphics
the animation should come to rest on the final frame at the end of the last play. 'fctl': the frame control chunk the 'fctl' chunk is an ancillary chunk as defined in the png specification. it must appear before the 'idat' or 'fdat' chunks of the frame to which it applies, specifically: for the default image, if a 'fctl' chunk is present it must appear before the first 'idat' chunk. position
relative to the 'actl' chunk is not specified. for the first frame excluding the default image (which may be either the first or second frame), the 'fctl' chunk must appear after all 'idat' chunks and before the 'fdat' chunks for the frame. for all subsequent frames, the 'fctl' chunk for frame n must appear after the 'fdat' chunks from frame n-1 and before the 'fdat' chunks for frame n. other anci...
AT APIs Support
o - platform for building developer environments miro - a free, open source internet tv and video player any xulrunner application (songbird media player, etc.) extensions to other xul apps (e.g. firefox extensions) gecko version for firefox and all other gecko-based products: this documentation applies to up-to-date product builds based on gecko 1.9.2 -- currently not available on official
releases. however most of described features are supported starting from gecko 1.9.0 (firefox 3.0). however it's preferable to grab the current build of firefox or any other gecko-based product to be up to dated: firefox recent builds thunderbird recent builds seamonkey recent builds determining if accessibility is enabled in a firefox accessibility is enabled on windows and linux platforms b...
XForms Accessibility
alue of child xforms hint element if the element doesn't have describedby attribute. state it is formed as well from model item properties (mips) of instance node that xforms element is bound to as from valid/invalid or in-range/out-of-range states of instance node. instance node states are mapped to accessibility state constants declared in nsiaccessiblestates interface like it shown below:
relevant - state_unavailable readonly - state_readonly required - state_required invalid - state_invalid out of range - state_invalid attributes redefines datatype aria attribute. its value is xml schema builit-in datatype of instance node that xforms element is bound to. children mozilla xforms implementation allows form control elements to have child elements. therefore accessible children...
DocShell
docshell is the second iteration of what originally started out as webshell. at the moment, the transition from webshell to docshell is not fully completed, but the long-term goal is to remove webshell and switch over enti
rely to docshell. nswebbrowser project page (outlines the design of nswebbrowser and docshell). overview of a uri load up though dispatch to a content handler. overview of a uri load in general (more bird's-eye view). overview of how downloads work. docshell wiki. ...
The Places database
tags and tagged uris are descendants of the tag root. moz_keywords: this table is a unique list of keywords. the moz_bookmarks table has a keyword_id column that maps to a record in moz_keywords table. see manipulating bookmarks using places for more information. annotation tables moz_anno_attributes: contains the names of all the annotations in the system and a name id. there should be
relatively few unique names. moz_annos: contains the values of page annotations. it maps a page (reference to moz_places) and an annotation name (reference to moz_anno_attributes) to the value of the annotation. moz_items_annos: contains the values of bookmark item annotations. it maps a bookmark, folder or separator (reference to moz_bookmarks) and an annotation name (reference to moz_anno_a...
Manipulating bookmarks using Places
ing an item if you need to know what folder contains an item (this can be especially handy after using nsinavbookmarksservice.getbookmarkidsforuri() to find bookmarks for a given uri), you can use the nsinavbookmarksservice.getfolderidforitem() method. 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. note that this example takes advantage of xpcomutils to generate the nsisupports.queryinterface() method. // an nsinavbookmarkobserver var myext_bookmarklistener = { onbeginupdatebatch: function() {}, onendupdatebatc...
Using the Places annotation service
annotation service does not currently enforce the annotation name format, but this may change in the future. also, we may add functions to get all of "your" annotations matching a given namespace. you should not use any characters in your annotation names that are not valid as part of an html path. this includes colons, spaces, most punctuation, and non-ascii characters. you should try to have
relatively few annotation names. the service stores these names in a separate table, and the fewer names there are, the more efficient retrieving names will be. you should not design your service so that you require hundreds of unique annotation names. setting an annotation the annotation provides a variety of scriptable and non-scriptable setters for annotations on both pages and on items in the p...
Using the Places history service
er starts browsing (for example, by typing in a link or following a bookmark), a new session id is created. new visits get the same session id as their referrer. this means that one "session" is comprised of going to a new page, and following a bunch of links or redirects. a session is ended when a new url is typed in or selected from bookmarks. these session ids allow the dotted lines separating
related pages in the history view to be easily computed. creating the history service the places history service's contract id is "@mozilla.org/browser/nav-history-service;1": var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); it also responds to the old contract id for url ...
Preferences API
you can also create a xul-based options window easily to allow user modify some preferences. many applications including firefox and thunderbird have an additional tool for power users, about:config, which can be used to tweak the preferences without ui. ...
SMILE
en implemented in firefox ("fuel") and in thunderbird ("steel"). objects extiapplication objects exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage smileiapplication objects smileibookmarkroots smileiwindow smileibrowsertab smileiapplication xpcom although the extiapplication object is p
reloaded into xul scripts, it is not p
reloaded into javascript xpcom code. the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/smile/application;1"].getservice(components.interfaces.smileiapplication); ...
STEEL
ation. the library has also been implemented in firefox ("fuel") and in seamonkey ("smile"). objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage steeliapplication objects steeliapplication xpcom although the steel steeliapplication object is p
reloaded into xul scripts, it is not p
reloaded into javascript xpcom code. the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/steel/application;1"].getservice(components.interfaces.steeliapplication); other resources steel development plan. bug 408370 bug 1278067 ...
extIApplication
sful. restart() attempts to restart the application. it is possible for the restart to be canceled. boolean restart() return value boolean value indicating whether the restart was successful. getextensions(acallback) calls acallback with the list of installed extensions. void getextensions(extiextensionscallback acallback) return value none. xpcom although the application object is p
reloaded into xul scripts, it is not p
reloaded into javascript xpcom code. the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/fuel/application;1"].getservice(components.interfaces.fueliapplication); see also fuel (firefox), steel (thunderbird) and smile (seamonkey) ...
extIPreferenceBranch
rd 3 the extipreferencebranch interface provides simplified access to preferences. the interface has a predefined root preference branch. the root branch is set based on the context of the owner. for example, an extension's preferences has a root of "extensions.extensionid.", while the application-level preferences have an empty root. all preference "aname" parameters used in this interface are
relative to the root branch. extipreferencebranch is defined in toolkit/components/exthelper/extiapplication.idl. implemented via xpcom service for extiapplication: see the instructions on the fuel (firefox), steel (thunderbird) and smile (seamonkey) pages. method overview boolean has(in astring aname) extipreference get(in astring aname) nsivariant getvalue(in astring a...
Accessing the Windows Registry Using XPCOM
nly used modes here: access_read — for reading values, enumerating keys, and receiving notifications access_write — for setting values and creating sub keys access_all — access for all operations in addition to open() and create(), there are the openchild() and createchild() methods. you can call these methods on an already-opened registry key to open a child key. both methods take a
relative path and access mode as parameters and return a new object implementing nsiwindowsregkey. here's the simple example again, but using openchild(): var wrk = components.classes["@mozilla.org/windows-registry-key;1"] .createinstance(components.interfaces.nsiwindowsregkey); wrk.open(wrk.root_key_local_machine, "software\\microsoft", wrk.access_read); var su...
Aggregating the In-Memory Datasource
(a wee bit). aggregation to the rescue! here are the gory details on how. when it won't work although this magic is terribly convenient to use, it won't work in the case that you want to "override" some of the in-memory datasource's methods. for example, while writing the bookmarks datasource, i wanted to be able to trap assert() to enforce the bookmarks datasource would only accept "bookmarks
related" assertions. if i'd just delegated to the in-memory datasource, assert() would've taken any old random garbage. similarly, i wanted to trap flush() so that i could write the bookmarks.html file back to disk. in short, the only case where this technique is useful is when you're implementing a datasource to get "read-only reflection". that is, you want to reflect the contents of something as a...
Generic factory
} return factory; } this example assumes that the xpcom repository is available as an interface (which it soon will be). background (this is based on my original news posting <beard-2402991733140001@h-198-93-95-151.mcom.com>.) we seem to be creating a huge number of different factory implementations. it seems to me that we can cut down on code size (all those queryinterface, addref,
release implementations) if we just use the following class for all of the simple factories: // idea: why not create a generic factory facility so we can avoid // duplication of so much nsifactory code? all we need is an allocator // function, the rest of the implementation is exactly the same. #include "nsifactory.h" class nsgenericfactory : public nsifactory { public: typedef nsresult ...
Building the WebLock UI
as you can see, weblock is initialized as a global javascript variable, available in the scope of these functions and others: var weblock = components.classes["@dougt/weblock"] .getservice() ...
Packaging WebLock
stalled in a gecko application. since mozilla and other gecko-based applications are cross-platform, this database is abstracted above the operating system or any particular platform's registry. the chrome registry lives in a series of rdf/xml files in the application directory of mozilla and other gecko-based browsers, where new installs, user configurable data, skins, and other information are
related to one another and the application itself. javascript apis from the xpinstall install object download the jar in which the installable files appear and call registration methods that tell mozilla about the new component and the ui it uses to access the weblock component. weblock installation script is the completetrigger installation script, which can be launched from a web page. the files ...
Using XPCOM Components
the interfaces. when you open a component on the left, you can see the interfaces it implements along with a list of the methods provided by each interface. the xpcom component viewer can be extremely useful for this sort of gross interrogation, but again: it displays all of the components and interfaces in your build, many of which are not practical for actual reuse or stable enough to be used
reliably in your own application development. use comprehensive lists like this with caution. using xpcom components in your cpp xpconnect makes it easy to acecss xpcom components as javascript objects, but using xpcom components in c++ is not much more difficult. managing cookies from cpp duplicates code from getting the cookiemanager component in javascript, but in c++ instead of javascript. ...
Creating XPCOM components
ogies that make up xpcom. accordingly, the book is arranged so that you can follow along and create your own components or learn about different xpcom topics individually, as in a reference work. for example, the introduction includes a discussion of components and what they are, and the first chapter - in which you compile the basic code and register it with mozilla - prompts a discussion of the
relationship between components and modules, of xpcom interfaces, and of the registration process in general. note: in general, you should try to avoid having to create xpcom components. add-ons should try to use the new add-on sdk as much as possible; however, there may be cases when it's unavoidable. note:this article describes a method that uses xpidl but you should use webidl instead. pref...
Interfacing with the XPCOM cycle collector
interface map of nsfoo in nsfoo.cpp. or if that doesn't work: ns_interface_table_head(nsfoo) ns_interface_table2(nsfoo, nsibar, nsibaz) ns_interface_table_to_map_segue_cycle_collection(nsfoo) ns_interface_map_end change the line ns_impl_addref(nsfoo) to ns_impl_cycle_collecting_addref(nsfoo) in nsfoo.cpp, and similarly change the line ns_impl_
release(nsfoo) to ns_impl_cycle_collecting_
release(nsfoo) in nsfoo.cpp. add the appropriate ns_impl_cycle_collection_# macro, where # is the number of member variables in your class. for instance, if nsfoo contains two member variables, mbar and mbaz, we'd add ns_impl_cycle_collection_2(nsfoo, mbar, mbaz) in nsfoo.cpp. it is possible that your class has more complicated structure than this pictur...
Components.Constructor
it is equivalent to the following javascript function: function components_constructor(contractid, interfacename, initializer) { var ccargs = arguments; function ctor() { var instance = components.classes[contractid] .createinstance(...
Components.lastResult
com method called via xpconnect. introduction generally, components.lastresult is only useful for testing the result of xpcom methods that can return interesting 'success' codes. this is because failure result codes get converted by xpconnect into exceptions that are thrown into the calling javascript method. most interfaces only return one success code -- ns_ok -- so components.lastresult is ra
rely necessary. in cases where components.lastresult is used, it is best to get it right away after the target call is made and save it in a local variable to test its value rather than doing multiple tests against components.lastresult. this is because many 'components' properties and methods are themselves implemented using xpconnect and subsequent calls to components.lastresult might reflect the ...
Components.utils.evalInWindow
h have the wantexporthelpers option set in the sandbox() constructor. syntax var result = components.utils.evalinwindow(script, window); parameters script : string the script to evaluate in the other window. window : object the window in which to evaluate the script. returns the result of evaluating the script. if this is just native (for example, a dom node), then the function
relies on xraywrappers to wrap the returned content, otherwise the result is structured-cloned. this does impose some restrictions on the sorts of things that can be returned: in particular, the result can't contain any functions, because functions can't be structured-cloned. example suppose a page script defines a variable: // page-script.js var somelocalvariable = { name: "selection1", node: d...
Components.utils.schedulePreciseGC
in once the scheduled garbage collection has been completed: components.utils.scheduleprecisegc( function() { // this code is executed when the garbage collection has completed } ); since the garbage collection doesn't occur until some time in the future (unlike, for example, components.utils.forcegc(), which causes garbage collection immediately but isn't able to collect all javascript-
related memory), the callback lets you know when that's been finished. ...
Components.utils.unload
mponents.utils.unload was introduced in firefox 7 and is used to unload javascript code modules. this can be particularly handy with restartless (boostrapped) extensions, so that you can unload an old version of a code module when a new version of your add-on is installed. once this method has been called, references to the module will continue to work but any subsequent import of the module will
reload it and give a new reference. if the javascript code module has not yet been imported then this method will do nothing. you should not unload modules that are part of the application (anything under resource://gre/ or resource:/// or resource://app/) as these may be in use by other extensions and the application. only unload modules you include as part of your extension. syntax components.utils...
Components object
ss-compartment wrappers. may only be called from javascript code. utils.methodjit obsolete since gecko 24.0 provides access to the value of the methodjit property in the javascript environment. utils.methodjit_always obsolete since gecko 24.0 provides access to the value of the methodjit_always property in the javascript environment. utils.
relimit provides access to the value of the
relimit property in the javascript environment. utils.reporterror reports a javascript error object to the error console. utils.scheduleprecisegc requests that garbage collection occur sometime in the future when no javascript code is running; accepts a callback function to receive notification once collection...
JavaXPCOM
java application using javaxpcom xulrunner ships with the javaxpcom component, which allows java code to interact with xpcom objects. as you will see in this article, working with xpcom objects in java is not that much different than doing so in c++. view all... community view mozilla embedding forums... mailing list newsgroup rss feed
related topics xpcom, embedding mozilla ...
Community
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. ...
NS_GetComponentManager
manager.h" nsresult ns_getcomponentmanager( nsicomponentmanager** aresult ); parameters aresult [out] a reference to the xpcom component manager. return values the ns_getcomponentmanager function returns ns_ok if successful. otherwise, it returns an error code. remarks the object returned is a singleton that is valid until ns_shutdownxpcom is called. the interface pointer should be
release'd when it is no longer needed. history this function was finalized for mozilla 0.9.6. see bug 99147 for details. see also nsicomponentmanager ...
NS_GetComponentRegistrar
r.h" nsresult ns_getcomponentregistrar( nsicomponentmanager** aresult ); parameters aresult [out] a reference to the xpcom component registrar. return values the ns_getcomponentregistrar function returns ns_ok if successful. otherwise, it returns an error code. remarks the object returned is a singleton that is valid until ns_shutdownxpcom is called. the interface pointer should be
release'd when it is no longer needed. history this function was finalized for mozilla 0.9.6. see bug 99147 for details. see also nsicomponentregistrar ...
NS_GetMemoryManager
com.h" #include "nsimemory.h" nsresult ns_getmemorymanager( nsimemory** aresult ); parameters aresult [out] a reference to the xpcom memory manager. return values the ns_getmemorymanager function returns ns_ok if successful. otherwise, it returns an error code. remarks the object returned is a singleton that is valid until ns_shutdownxpcom is called. the interface pointer should be
release'd when it is no longer needed. any code, intended to be used exclusively with mozilla 1.8 and above, may use ns_alloc, ns_realloc, and ns_free instead to access the xpcom memory manager's methods. history this function was finalized for mozilla 0.9.7. see bug 112262 for details. see also nsimemory, ns_alloc ...
NS_GetServiceManager
iservicemanager.h" nsresult ns_getservicemanager( nsiservicemanager** aresult ); parameters aresult [out] a reference to the xpcom service manager. return values the ns_getservicemanager function returns ns_ok if successful. otherwise, it returns an error code. remarks the object returned is a singleton that is valid until ns_shutdownxpcom is called. the interface pointer should be
release'd when it is no longer needed. history this function was finalized for mozilla 0.9.6. see bug 99147 for details. see also nsiservicemanager ...
NS_InitXPCOM2
rvicemanager** aresult, nsifile* abindirectory, nsidirectoryserviceprovider* aappfilelocationprovider ); parameters aresult [out] the resulting xpcom service manager. you may pass null if you are not interested in this return value. the service manager may alternatively be accessed by calling ns_getservicemanager. the resulting interface pointer is addref'd upon return and must either be
release'd explicitly or passed to ns_shutdownxpcom when the application is finished with xpcom. abindirectory [in] the directory containing the component registry and runtime libraries. pass null to specify that the current working directory should be used. aappfilelocationprovider [in] the object to be used by xpcom to locate application specific directories and files (e.g., the user profile, ...
NS_InitXPCOM3
ider* aappfilelocationprovider, nsstaticmoduleinfo const* astaticmodules, pruint32 astaticmodulecount ); parameters aresult [out] the resulting xpcom service manager. you may pass null if you are not interested in this return value. the service manager may alternatively be accessed by calling ns_getservicemanager. the resulting interface pointer is addref'd upon return and must either be
release'd explicitly or passed to ns_shutdownxpcom when the application is finished with xpcom. abindirectory [in] the directory containing the component registry and runtime libraries. pass null to specify that the current working directory should be used. aappfilelocationprovider [in] the object to be used by xpcom to locate application specific directories and files (e.g., the user profile, ...
IAccessibleAction
ed. refer to @ref _arrayconsideration "special consideration when using arrays" for more details. keybindings an array of bstrs, allocated by the server, one for each key binding. free it with cotaskmemfree. nbindings the number of key bindings returned; the size of the returned array. return value e_invalidarg if bad [in] passed, [out] values are null and 0 respectively. s_false if there are no
relations, [out] values are null and 0 respectively. s_ok. localizedname() returns the localized name of specified action. [propget] hresult localizedname( [in] long actionindex, [out] bstr localizedname ); parameters actionindex 0 based index specifying which action's localized name should be returned. localizedname the localized name of specified action. return value e_invalidarg if bad [in]...
IAccessibleImage
ion ); parameters description the localized description of the image. return value s_false if there is nothing to return, [out] value is null. s_ok. imageposition() returns the coordinates of the image. [propget] hresult imageposition( [in] enum ia2coordinatetype coordinatetype, [out] long x, [out] long y ); parameters coordinatetype specifies whether the returned coordinates should be
relative to the screen or the parent object. x the x coordinate. y the y coordinate. return value s_ok. imagesize() returns the size of the image in units specified by parent's coordinate system. [propget] hresult imagesize( [out] long height, [out] long width ); parameters height the height of the image. width the width of the image. return value s_ok. ...
imgIDecoderObserver
ded, decode notifications are nested logically inside load notifications as one might expect. however, with decode-on-draw, the set of decode notifications can come completely after the load notifications, and can come multiple times if the image is discardable. moreover, they can be interleaved in various ways. in general, any presumed ordering between load and decode notifications should not be
relied upon. decode notifications may or may not be synchronous, depending on the situation. if imgidecoder::flag_sync_decode is passed to a function that triggers a decode, all notifications that can be generated from the currently loaded data fire before the call returns. if flag_sync_decode is not passed, all, some, or none of the notifications may fire before the call returns. method overview ...
imgIEncoder
illiseconds to display the frame, before moving to the next frame. dispose=[none|background|previous] -- default: "none" what to do with the image's canvas before rendering the next frame. see apng spec. blend=[source|over] -- default: "source" how to render the new frame on the canvas. see apng spec. xoffset=# -- default: "0" yoffset=# -- default: "0" where to draw the frame,
relative to the canvas. jpeg: ----- quality=# -- default: "92" quality of compression, 0-100 (worst-best). quality >= 90 prevents down-sampling of the color channels. 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...
mozIStorageStatement
torageconnection.createstatement(). this method exists back to gecko 1.8.0. initialize this query with the given sql statement. void initialize( in mozistorageconnection adbconnection, in autf8string asqlstatement ); parameters adbconnection a mozistorageconnection database connection. asqlstatement string key representing the sql statement. finalize() finalizes a statement which
releases all resources that were allocated for it. you must call this method on every active statement before you try to call mozistorageconnection.close(). void finalize(); note: this method does not need to be used from native callers because you have to
release the statement in order to not leak. finalize will be called for you when the reference count on the statement goes to zero. clone() c...
mozIStorageVacuumParticipant
alue as a target. valid page sizes are in the range 512 to 65,536. the recommended value is mozistorageconnection::default_page_size. note: if the database is using the wal journal node and the current page size is not the expected one, the journal node will be changed to truncate because wal doesn't allow page size changes. the vacuum manager will try to restore wal mode, but this will only work
reliably if the participant properly resets statements. if the attempt to restore the journal node fails, it will remain truncate. methods onbeginvacuum() called when a vacuum operation begins. once you receive this notification, you should avoid using the database until onendvacuum() is called. boolean onbeginvacuum(); parameters none. return value return true to allow the vacuum operation to p...
mozITXTToHTMLConv
arameters text the original, plain text to scan and convert into html. whattodo a bit field composed of the conversion control attributes indicating what conversions to apply. return value the html version of the specified string. scanhtml() scans the specified user-edited html, adding additional formatting that the user may not have known to do. this should correct html that isn't enti
rely standards-compliant. warning: don't use the kglyphsubstitution conversion type with this method, as doing so generates html that is non-standard. wstring scanhtml( in wstring text, in unsigned long whattodo ); parameters text the original, user-edited html. whattodo a bit field composed of the conversion control attributes indicating what conversions to apply. return value a nor...
GetBounds
void getbounds( out long ax, out long ay, out long awidth, out long aheight ) parameters ax[out] accessible's x-coordinate. ay[out] accessible's y-coordinate. ...
nsIAccessibleCoordinateType
accessible/public/nsiaccessibletypes.idlscriptable these constants define which coordinate system a point is located in. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) prior to gecko 1.9, these constants were implemented in nsiaccessibletext. constants constant value description coordtype_screen_
relative 0x00 the coordinates are
relative to the screen. coordtype_window_
relative 0x01 the coordinates are
relative to the window. coordtype_parent_
relative 0x02 the coordinates are
relative to the upper left corner of the bounding box of the immediate parent. ...
nsIAccessibleRole
windows or documents, but above individual controls. it is used for the first child of a or iframe. role_chart 17 represents a graphical image used to represent data. role_dialog 18 represents a dialog box or message box. it is used for xul:dialog, role="dialog". role_border 19 represents a window border. role_grouping 20 logically groups other objects. there is not always a parent-child
relationship between the grouping object and the objects it contains. it is used for html:textfield, xul:groupbox, role="group". role_separator 21 used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window. it is used for xul:separator, html:hr, role="separator". role_toolbar 22 represents a toolbar, which is a grouping of con...
nsIApplicationCacheChannel
ncache prbool true if the resource was loaded from the application cache, otherwise false. this value may be false even if the resource is assigned to an application cache if, for example, it was loaded as a fallback. read only. methods markofflinecacheentryasforeign() a shortcut method to mark the cache item of this channel as 'foreign'. see the 'cache selection algorithm' and cache_selection_
reload action handling in nscontentsink. void markofflinecacheentryasforeign(); parameters none. see also offline resources in firefox nsiapplicationcache nsiapplicationcachecontainer nsiapplicationcacheservice nsiapplicationcachenamespace nsidomofflineresourcelist ...
nsIAsyncInputStream
mes closed (either as a result of closewithstatus()/close being called on the stream or possibly due to some error in the underlying stream). methods asyncwait() asynchronously wait for the stream to be readable or closed. the notification is one-shot, meaning that each asyncwait call will result in exactly one notification callback. after the oninputstreamready event is dispatched, the stream
releases its reference to the nsiinputstreamcallback object. it is safe to call asyncwait again from the notification handler. this method may be called at any time (even if read has not been called). in other words, this method may be called when the stream already has data to read. it may also be called when the stream is closed. if the stream is already readable or closed when asyncwait is called,...
nsIAsyncOutputStream
ult of closewithstatus()/close being called on the stream or possibly due to some error in the underlying stream). methods asyncwait() asynchronously wait for the stream to be writable or closed. the notification is one-shot, meaning that each asyncwait call will result in exactly one notification callback. after the nsioutputstreamcallback.onoutputstreamready() event is dispatched, the stream
releases its reference to the nsioutputstreamcallback object. it is safe to call asyncwait again from the notification handler. this method may be called at any time (even if write has not been called). in other words, this method may be called when the stream already has room for more data. it may also be called when the stream is closed. if the stream is already writable or closed when asyncwait is...
nsIBadCertListener2
nnection. this object usually supports nsisslsocketcontrol, nsitransportsecurityinfo, nsiidentityinfo, nsisslstatusprovider, nsiclientauthuserdecision and possibly other interfaces. status the ssl status object that describes the problem(s). targetsite the site name that was used to open the current connection. return value the consumer shall return true if it wants to suppress the error message
related to the bad cert (the connection will still get canceled). see also nsisockettransport ...
nsIBoxObject
gecko 1.9 nextsibling nsidomelement the next sibling of the box, in box-ordinal-group order. read only. paintmanager nsiboxpaintmanager obsolete since gecko 1.9 parentbox nsidomelement the parent of the box, in box-ordinal-group order. read only. previoussibling nsidomelement the previous sibling of the box, in box-ordinal-group order. read only. screenx long the x coordinate of the box
relative to the screen origin, in device pixels. read only. screeny long the y coordinate of the box
relative to the screen origin, in device pixels. read only. width long the width of the box, in css pixels. read only. x long the x coordinate of the box, in css pixels. read only. y long the y coordinate of the box, in css pixels. read only. methods getlookandfeelmetric() ...
nsICache
the device(s) to which it belongs. see nsicachesession and nsicacheentrydescriptor for more details. requires the cache entry to reside in persistent storage, and in a separate file. store_offline 4 the storage policy of a cache entry determines the device(s) to which it belongs. see nsicachesession and nsicacheentrydescriptor for more details. requires the cache entry to reside in persistent,
reliable storage for offline use. not_stream_based 0 all entries for a cache session are stored as streams of data or as objects. this constant specify that cache session is not a stream based entry when calling nsicacheservice.createsession() method. stream_based 1 all entries for a cache session are stored as streams of data or as objects. this constant specify that cache session is a stream b...
nsICacheEntryDescriptor
scription accessgranted nscacheaccessmode get the access granted to this descriptor. see nsicache for the definitions of the access modes and a thorough description of their corresponding meanings. read only. cacheelement nsisupports get or set the cache data element. this will fail if the cache entry is stream based. the cache entry holds a strong reference to this object. the object will be
released when the cache entry is destroyed. file nsifile get the disk file associated with the cache entry. read only. predicteddatasize print64 stores the content-length specified in the http header for this entry. checked before we write to the cache entry, to prevent ever taking up space in the cache for an entry that we know up front is going to have to be evicted anyway. see bug 588507. s...
nsICategoryManager
eturn value a simple enumerator, each result qis to nsisupportscstring. getcategoryentry() get the value for the given category's entry. string getcategoryentry( in string acategory, in string aentry ); parameters acategory the category being queried. ("protocol") aentry the entry being queried. ("http") return value the value of the given category's entry. this pointer must be
released using nsimemory.free() when it is no longer needed. exceptions thrown ns_error_not_available indicates that either the category or entry is undefined. examples print out a list of all categories this snippet shows how to print out a list of all categories in c++. nsresult printallcategories() { nsresult rv; nscomptr<nsiservicemanager> svcmgr; rv = ns_getservicemanager(getter...
nsIContentPrefService2
. domains may be specified either exactly, like "example.com", or as full urls, like "http://example.com/foo/bar". in the latter case the api extracts the full domain from the url, so if you specify "http://foo.bar.example.com/baz", the domain is taken to be "foo.bar.example.com", not "example.com". private-browsing context parameters many methods also accept a "context" parameter. this parameter
relates to private browsing and determines the kind of storage that a method uses, either the usual permanent storage or temporary storage set() aside for private browsing sessions. pass null to unconditionally use permanent storage. pass an nsiloadcontext to use storage appropriate to the context's useprivatebrowsing attribute: if useprivatebrowsing is true, temporary private-browsing storage is use...
nsIContentViewManager
at intersect with the specified rectangle in the browser. note: the rectangle is specified using an anchor point, then four distances to indicate how far in each direction to expand the rectangle. this lets you, for example, take the coordinates at which the user clicked (or touched) the screen, and expand outward to create a rectangle from that point. pixels are in chrome device pixels and are
relative to the browser element. void getcontentviewsin( in float axpx, in float aypx, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, out unsigned long alength, optional [retval, array, size_is(alength)] out nsicontentview aresult ); parameters axpx the x coordinate of the anchor point of the rectangle, in css pixels. aypx the y coordinate o...
nsIContentViewer
storyentry the session history entry for the content viewer. if this is null, then destroy() will be called on the document by close(). if it is non-null, the document will not be destroyed, and the following actions will happen when destroy() is called: sanitize() will be called on the viewer's document the content viewer will set the contentviewer property on the history entry, and
release its reference (ownership reversal). hide() will be called, and no further destruction will happen. destroy() void destroy(); parameters none. findcontainerview() finds the view to use as the container view for makewindow. note: prior to gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7), this attribute was part of nsidocumentviewer. [noscript,notxpcom,nostdcall] nsiviewp...
nsICookieManager2
the cookie is valid. aname the cookie name. avalue the cookie data. aissecure true if the cookie should only be sent over a secure connection. aishttponly true if the cookie should only be sent to, and can only be modified by, an http connection. aissession true if the cookie should exist for the current session only. aexpiry holds the expiration date, in seconds since the epoch. only
relevant if aissession is false. cookieexists() returns whether or not a matching cookie already exists. boolean cookieexists( in nsicookie2 acookie ); parameters acookie the cookie to look for. return value returns true if a cookie was found which matches the host, path, and name fields of acookie. countcookiesfromhost() returns the number of cookies that would be returned to a give...
nsICookiePermission
ccess aaccess); constants constant value description access_default 0 nscookieaccess's access default value access_allow 1 nscookieaccess's access allow value access_deny 2 nscookieaccess's access deny value access_session 8 additional values for nscookieaccess, which are not directly used by any methods on this interface, but are nevertheless convenient to define here. these may be
relocated somewhere else if we ever consider freezing this interface. methods canaccess() tests whether or not the given uri/channel may access the cookie database, either to set or get cookies. nscookieaccess canaccess( in nsiuri auri, in nsiuri afirsturi, obsolete since gecko 1.9 in nsichannel achannel ); parameters auri the uri trying to access cookies. afirsturi the uri initiated by th...
nsICookieService
d cookie. changed a cookie was changed. the subject is the changed cookie. batch-deleted a set of cookies were deleted as part of a purge operation. this typically happens because they have either expired or because the cookie list has grown too large. the subject is an nsiarray of deleted cookies. cleared the entire cookie list was cleared. the subject is null.
reload the entire cookie list was changed, and the observer should
reload the list of cookies. the subject is null. private-cookie-changed since firefox 20 (see bugzilla #837091) same as cookie-changed, except used in lieu of cookie-changed for private windows. see cookie-changed. cookie-rejected broadcast whenever the user's preferences cause a cookie to...
nsIDOMChromeWindow
it will be null for domwindows not corresponding to browsers. messagemanager nsichromeframemessagemanager read only. title domstring obsolete since gecko 1.9.1 windowstate unsigned short returns current window state, the value is one of state_* constants. read only. consta...
nsIDOMMozNetworkStatsManager
rown invalidnetwork the network must be in the return of getavailablenetworks. removealarms() remove all network alarms. if an alarmid is provided, then only that alarm is removed. nsidomdomrequest removealarms([optional] in long alarmid); parameters alarmid id of an alarm, like the one returned by addalarm. return value an nsidomdomrequest object. clearstats() remove all stats
related with the provided network from db. nsidomdomrequest clearstats(in nsisupports network); parameters network the origin of the data. it can specify wifi, mobile, or null. if null, data measurement from both origins are merged. to know in advance which kind of origin is available, the moznetworkstatsmanager.getavailablenetworks method returns an array of interfaces. return value an nsid...
nsIDOMParser
, from a js xpcom component, a js module, or an xpcshell test), use: var parser = components.classes["@mozilla.org/xmlextras/domparser;1"] .createinstance(components.interfaces.nsidomparser); // optionally, call parser.init(principal, documenturi, baseuri); principals, document and base uri note: this section covers changes introduced to domparser in gecko 1.9. (this section is only
relevant to firefox extensions--not to web content.) to create a document, the parser needs to specify a principal (see security check basics), a base uri (see document.baseuriobject), and a documenturi. these values are automatically determined as defined below, but if you work with domparser from privileged code, you can override the defaults by providing arguments to the domparser constructor or c...
nsIDOMStorage
ession storage object can be retrieved from the window's sessionstorage attribute. a storage object stores an arbitrary set of key-value pairs, which may be retrieved, modified and removed as needed. a key may only exist once within a storage object, and only one value may be associated with a particular key. keys are stored in a particular order with the condition that this order not change by me
rely changing the value associated with a key, but the order may change when a key is added or removed. method overview void clear(); domstring getitem(in domstring key); domstring key(in unsigned long index); void removeitem(in domstring key); void setitem(in domstring key, in domstring data); attributes attribute type description length unsigned long the number of keys stored in...
nsIDOMStorageItem
also used for global storage. attributes attribute type description secure boolean if true, the item was stored for an https page. note: all items, regardless of whether they were stored for an http page or an https page, are visible from https pages. however, http pages can only see items stored from http pages, and will not see items stored from https pages. as such, this attribute is ir
relevant for storage that is bound to an origin. value domstring the value associated with the item. see also dom storage structured client-side storage (html 5 specification) nsidomstorage nsidomstorage2 ...
nsIDOMWindow
sidomelement elt, in domstring pseudoelt optional ); parameters elt pseudoelt optional return value getselection() returns the nsiselection object indicating what if any content is currently selected in the window. nsiselection getselection(); parameters none. return value the nsiselection object for the window. scrollby() scrolls the window by a given number of pixels
relative to the current scroll position. void scrollby( in long xscrolldif, in long yscrolldif ); parameters xscrolldif the number of pixels by which to scroll horizontally. yscrolldif the number of pixels by which to scroll vertically. scrollbylines() scrolls the window by the specified number of lines. void scrollbylines( in long numlines ); parameters numlines the number o...
nsIDirectoryEnumerator
(firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void close(); attributes attribute type description nextfile nsifile the next file in the sequence. the nextfile attribute is the first element upon the first call. this attribute is null if there is no next element. read only. methods close() closes the directory being enumerated,
releasing the system resource. it is safe to call this function many times. void close(); parameters none. exceptions thrown ns_ok if the call succeeded and the directory was closed. ns_error_failure if the directory close failed. ...
nsIDirectoryService
pcom directory service, this method is called as part of xpcom initialization. must not be called by external code; called internally by xpcom initialization. void init(); parameters none. registerprovider() register a provider with the service. the directory service will keep a strong reference to the nsidirectoryserviceprovider instances registered via registerprovider. the providers will be
released when the service is destroyed at xpcom shutdown. call unregisterprovider() to force the directory service to
relinquish ownership of a particular provider instance. void registerprovider( in nsidirectoryserviceprovider prov ); parameters prov the nsidirectoryserviceprovider to register with the service. unregisterprovider() unregister a provider that was previously registered with the d...
nsIDownload
rect database manipulation in the database that contains this download. use the guid property instead for safe, database-agnostic searching and manipulation. read only. deprecated since gecko 19.0 guid astring the guid of the download that is stored in the database. has the form of twelve alphanumeric characters. read only. mimeinfo nsimimeinfo provides the targets
relevant mime information, including its mime type, helper application, and whether or not the helper should be executed automatically once the download is complete. read only. optional percentcomplete long the percentage of the file transfer that has been completed, or -1 if the file's size is unknown. read only. referrer nsiuri the referrer uri of the download. this ...
nsIDownloader
netwerk/base/public/nsidownloader.idlscriptable a special implementation of a nsistreamlistener that will make the contents of the stream available as a file. this may utilize the disk cache as an optimization to avoid an extra copy of the data on disk. the resulting file is valid from the time the downloader completes until the last reference to the downloader is
released. inherits from: nsistreamlistener last changed in gecko 1.7 method overview void init(in nsidownloadobserver observer, in nsifile downloadlocation); methods init() initialize this downloader. void init( in nsidownloadobserver observer, in nsifile downloadlocation ); parameters observer the nsidownloadobserver to be notified when the download completes. downloadlocation th...
nsIDragDropHandler
what we end up using under the hood). content/base/public/nsidragdrophandler.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void detach(); void hookupto(in nsidomeventtarget attachpoint, in nsiwebnavigation navigator); methods detach() unregisters all handlers
related to drag and drop. void detach(); parameters none. hookupto() attaches drag handlers to a specified receiver, setting up callbacks to let built-in behaviors be overridden. void hookupto( in nsidomeventtarget attachpoint, in nsiwebnavigation navigator ); parameters attachpoint the receiver to which to attach drag handlers. navigator the nsiwebnavigation object to handle the dropped u...
nsIFaviconDataCallback
nly. check the method documentation to ensure that. the caller will receive the most information we can gather on the icon, but it's not guaranteed that all of them will be set. for some method we could not know the favicon's data (it could just be too expensive to get it, or the method does not require we actually have any data). it's up to the caller to check adatalen > 0 before using any data-
related information like mime-type or data itself. void oncomplete( in nsiuri auri, in unsigned long adatalen, [const,array,size_is(adatalen)] in octet adata, in autf8string amimetype ); parameters auri receives the "favicon uri" (not the "favicon link uri") associated to the requested page. this can be null if there is no associated favicon uri, or the callback is notifying ...
nsIFeed
iarray specifies an array of the items or entries on the feed. skipdays nsiarray an array of days of the week on which the feed should not be fetched. each entry in the array is the name of one day of the week to skip. for example, to skip fetching on mondays, a feed that does not want to be fetched on mondays would specify "monday" in this array. note: this field is ra
rely implemented. skiphours nsiarray an array of the hours of the day during which the feed should not be fetched. the hours are represented as integer values from 0 (midnight) to 23 (11:00 pm), and are always indicated using utc. note: this field is ra
rely implemented. subtitle nsifeedtextconstruct returns a subtitle for the feed, based on its descript...
nsIFeedEntry
enclosures or other media that might be displayed inline in the entry. parent nsifeedcontainer a reference to the entry's parent, which is either a feed (nsifeed or another entry. published astring a string indicating the date on which the entry was published, in rfc822 format. this date is parsable by both javascript (via date.parse()) and mail code. note, that the
related updated attribute is available from the nsifeedcontainer interface. summary nsifeedtextconstruct a summary of the feed entry's content. this is generated automatically using the entry's description, subtitle, summary, content, and appropriate extensions. see also nsifeedcontainer interwiki lin ...
nsIFileView
e <?xml version="1.0" ?> <?xml-stylesheet href="chrome://global/skin/" type="text/css" ?> <window id="test" title="test" width="640" height="480" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree flex="1" id="ftree"> <treecols> <-- the default column type is size unless an appropriate id is passed, nsifileview
relies on the treecols section --> <treecol id="filenamecolumn" label="name" flex="1" primary="true"/> <treecol id="lastmodifiedcolumn" label="date" flex="1"/> <treecol id="size" label="size" flex="1"/> </treecols> <treechildren/> </tree> <script> var dir="/home/"; //the directory to be opened var ftree = document.getelementbyid("ftree"); //the xul tree element var lfile...
nsIFocusManager
in nsidomwindow awindow ); parameters awindow elementisfocusable() check if given element is focusable. boolean elementisfocusable(in nsidomelement aelement, in unsigned long aflags); parameters aelement aflags return value true if aelement is focusable. movefocus() move the focus to another element. if astartelement is specified, then movement is done
relative to astartelement. if astartelement is null, then movement is done
relative to the currently focused element. if no element is focused, focus the first focusable element within the document (or the last focusable element if atype is movefocus_end). this method is equivalent to setting the focusedelement to the new element. specifying astartelement and using movefocus_last is not currently imp...
nsIFrameScriptLoader
e: let windowmm = window.messagemanager; windowmm.loadframescript('data:,dump("foo\n");', true); this will load a separate instance of the frame script into every tab open in the window associated with this window message manager. as the user opens new tabs in this window, copies of the script will be loaded into these new tabs, as well. frame scripts are essentially per-tab, so they don't get
reloaded when the user navigates. if you want a frame script to do something whenever a new document is loaded, you can listen for the document-element-inserted notification. parameters name type description aurl string url for the script to load. aurl must be the absolute url. data: urls are also supported. for example data:,dump("foo\n"); aallowdelayedlo...
nsIGlobalHistory3
entation. for implementors of nsiglobalhistory3: the history implementation is responsible for sending ns_link_visited_event_topic to observers for redirect pages. this notification must be sent for history consumers for all non-redirect pages. the other params to this function are the same as those for nsichanneleventsink.onchannelredirect(). implementors who wish to implement this interface but
rely on nsiglobalhistory2.adduri() for redirect processing may throw ns_error_not_implemented from this method. if they do so, then callers must call nsiglobalhistory2.adduri() upon getting the ns_error_not_implemented result. void adddocumentredirect( in nsichannel aoldchannel, in nsichannel anewchannel, in print32 aflags, in boolean atoplevel ); parameters aoldchannel ...
nsIHttpChannel
. exceptions thrown ns_error_not_available if called before the response has been received (before onstartrequest()) or if the header is not set in the response. isnocacheresponse() returns true if the server sent the equivalent of a "cache-control: no-cache" response header. equivalent response headers include: "pragma: no-cache", "expires: 0", and "expires" with a date value in the past
relative to the value of the "date" header. boolean isnocacheresponse(); parameters none. return value returns true if the server sent the equivalent of a "cache-control: no-cache" response header, otherwise false. exceptions thrown ns_error_not_available if called before the response has been received (before onstartrequest()). isnostoreresponse() boolean isnostoreresponse(); paramet...
nsIHttpChannelInternal
backkey); attributes attribute type description canceled boolean returns true if and only if the channel has been canceled. read only. channelisfordownload boolean external handlers may set this to true to notify the channel that it is open on behalf of a download. documenturi nsiuri an http channel can own a reference to the document uri. forceallowthirdpartycookie boolean force
relevant cookies to be sent with this load even if normally they would not be. localaddress autf8string the local ip address to which the channel is bound, in the same format produced by pr_netaddrtostring(). this may be either an ipv4 or ipv6 address. note: if network address translation (nat) is in effect, this may not be the same address the remote host thinks it is talking to. this may throw ...
nsIHttpServer
* * @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...
nsIInputStream
tisfy a call to close(), available(), read(), or readsegments(). a non-blocking input stream, on the other hand, must not block the calling thread of execution. note: blocking input streams are often read on a background thread to avoid locking up the main application thread. for this reason, it is generally the case that a blocking input stream should be implemented using thread-safe addref and
release. method overview unsigned long available();deprecated since gecko 17.0 unsigned long long available(); void close(); boolean isnonblocking(); unsigned long read(in charptr abuf, in unsigned long acount); native code only! unsigned long readsegments(in nswritesegmentfun awriter, in voidptr aclosure, in unsigned long acount); native code o...
nsILoadGroup
activecount unsigned long returns the count of "active" requests (that is requests without the load_background bit set). read only. defaultloadrequest nsirequest accesses the default load request for the group. each time a number of requests are added to a group, the defaultloadrequest may be set to indicate that all of the requests are
related to a base request. the load group inherits its load flags from the default load request. if the default load request is null, then the group's load flags are not changed. groupobserver nsirequestobserver the group observer is notified when requests are added to and removed from this load group. the groupobserver is weak referenced. notificat...
nsILocalFileMac
methods native code only!getcfurl note: observes the state of the followlinks attribute. if the file object is an alias and followlinks is true, returns the target of the alias. if followlinks is false, returns the unresolved alias file. note: supported only for xp_macosx. cfurlref getcfurl(); parameters none. return value the cfurlref of the file object. the caller is responsible for calling cf
release() on it. native code only!getfsref note: observes the state of the followlinks attribute. if the file object is an alias and followlinks is true, returns the target of the alias. if followlinks is false, returns the unresolved alias file. note: supported only for xp_macosx. fsref getfsref(); parameters none. return value the fsref of the file object. native code only!getfsspec note: observes...
nsILocale
epresenting the category to retrieve the locale for. valid strings are stored in nsilocale.idl. currently those are: nsilocale_collate - collation order. how strings are sorted. nsilocale_ctype - character classification and case conversion. nsilocale_monetary - monetary formatting. nsilocale_numeric - numeric, non-monetary formatting. nsilocale_time - date and time formats. nsilocale_messages -
related to fonts, character encodings and so on. return value the locale code to be used for the given category. a locale code is of the form language[-country[-region]], where "language" is an iso 639 language code (two letter codes preferred over three letter codes when available), "country" is an iso 3166 two letter country code, and "region" is a string of up to 5 letters. see also stringbund...
Using nsILoginManager
getting nsiloginmanager to get a component implementing nsiloginmanager, use the following: var passwordmanager = components.classes["@mozilla.org/login-manager;1"].getservice( components.interfaces.nsiloginmanager ); most login manager functions take an nsilogininfo object as a parameter. ...
nsILoginManagerPrompter
void prompttochangepasswordwithusernames([array, size_is(count)] in nsilogininfo logins, in pruint32 count, in nsilogininfo anewlogin); void prompttosavepassword(in nsilogininfo alogin); methods init() initialize the prompter. must be called before using other interfaces. void init( in nsidomwindow awindow ); parameters awindow the in which the user is doing some login-
related action that is resulting in a need to prompt them for something. the prompt will be associated with this window (or, if a notification bar is being used, topmost opener in some cases). prompttochangepassword() ask the user if they want to change a login's password. if the user consents, modifylogin() will be called. void prompttochangepassword( in nsilogininfo aoldlogin, in nsiloginin...
nsIMacDockSupport
is only activated if other applications are not currently active. about dockmenu by default firefox adds two menu items to the dock menu. the menu items are "new window" and "new private window". if permanent private browsing mode is enabled then the "new private window" menu item is hidden. this is created by using the dockmenu attribute of nsimacdocksupport here: http://mxr.mozilla.org/mozilla-
release/source/browser/base/content/browser.js#1562 this is seen here: if you were to copy and follow that example you would replace the default native menu. this can be done like this: var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); console.log('docksupport:', docksupport); var win = services.wm.getmostrecentwindow('navigator:browser'); var macmenu =...
nsIMemory
t be freed with a call to free() when it is no longer needed. low memory notifications an nsimemory implementation may be capable of monitoring heap usage. moreover, a mechanism exists by which a client can receive notifications about low-memory situations. a client that wishes to be notified of low memory situations (for example, because the client maintains a large memory cache that could be
released when memory is tight) should register with the observer service (see nsiobserverservice) using the topic "memory-pressure". there are three specific types of notifications that can occur. these types will be passed as the adata parameter of the of the "memory-pressure" notification: "low-memory" this will be passed as the value of adata when a low-memory condition occurs (not necessarily...
nsIMessenger
ck-forward history needs a list of visited messages, and where it is in the list. unfortunately, you must call this before navigating to a position, because calling this has the side effect of making us adjust our current history position, and not adding the loaded message to the history queue. acstring getmsguriatnavigatepos(in long apos); parameters apos the position to get the url from
relative to the current history cursor. +1 is forward, -1 is back. return value the url at that point in the history. getfolderuriatnavigatepos() gets the folder url at a particular position in the navigation history. acstring getfolderuriatnavigatepos(in long apos); parameters apos the position to get the url from
relative to the current history cursor. +1 is forward, -1 is back. r...
Building an Account Manager Extension
javascript" src="chrome://messenger/content/accountmanager.js"/> <script type="application/javascript" src="chrome://example@mozilla.org/content/am-devmo-account.js"/> <dialogheader title="devmo example panel"/> <description> this panel is only shown in imap accounts... </description> <vbox flex = "1"/> </page> as with the xul page, the content of the property file
relies on a very strict naming. as our account manager extension is named "devmo-account", we are required to include a property named prefpanel-devmo-account. prefpanel-devmo-account=devmo demo panel step4: the new panel and javascript the javascript for an account manager panel needs to implement at least the following functions. these functions are invoked by the account manager. function onp...
nsIMsgAccountManagerExtension
ntmanagerextension interface is used to add a new panel to thunderbird's account manager. an account manager extension is a xpcom compontent implementing this interface. the interface is basically a manifest and defines the properties of the new panel. a panel consists of a xul file with a page element as root element and the property file containing the localized name. note: the account manager
relies on a very strong naming scheme to load and unload a panel. an account manager extension with a "name" attribute of "devmo" and the "chromepackagename" attribute set to "extension@example.org" means, that the account manager expects to find a xul file in "chrome://extension@example.org/content/am-devmo.xul" and a property file in "chrome://extension@example.org/locale/am-devmo.properties" conta...
nsIMsgDBHdr
r for names of all database properties in the header. (new in 3.1?) methods getproperty() astring getproperty(in string propertyname); parameters propertyname the name of the property to retrieve. return value the value of the property. setproperty() sets a property on the header. for the currently selected message, thunderbird provides a utility function: setmsghdrpropertyand
reload(aproperty, avalue); which duplicates this functionality without requiring you to grab the current header. void setproperty(in string propertyname, in astring propertystr); parameters propertyname the name of the property to set. propertystr the value of the property. setstringproperty() void setstringproperty(in string propertyname, in st...
nsIMsgFilterList
lterlist::writewstrattr ( in nsmsgfilterfileattribvalue attrib, in string value, in nsioutputstream stream ) matchorchangefiltertarget() boolean nsimsgfilterlist::matchorchangefiltertarget ( in acstring olduri, in acstring newuri, in boolean caseinsensitive ) clearlog() void nsimsgfilterlist::clearlog () ensu
relogfile() void nsimsgfilterlist::ensu
relogfile () flushlogifnecessary () void nsimsgfilterlist::flushlogifnecessary () const const nsmsgfilterfileattribvalue nsimsgfilterlist::attribnone = 0 const nsmsgfilterfileattribvalue nsimsgfilterlist::attribversion = 1 const nsmsgfilterfileattribvalue nsimsgfilterlist::attriblogging = 2 const nsmsgfilterfileattribvalue nsimsgfilterlist::attribname...
nsIMsgMessageService
objects that implements nsimsgmessageservice give the user top level routines
related to messages like copying, displaying, attachment's manipulation, printing, streaming the message content to eml format string, etc. 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 n...
nsIMsgWindow
lent to calling stop(nsiwebnavigation::stop_network) on the nsiwebnavigation object. void stopurls(); closewindow() when the msg window is being unloaded from the content window, this notification can be used to force a flush on anything the message window hangs on. for some reason xpconnect is still hanging onto the message window even though all of our objects have let go of it. this forces a
release. it clears out the content listener, the windowcommands, the statusfeedback and the docshell objects. void closewindow(); remarks see also ...
nsIMutableArray
append an element at the end of the array. void appendelement( in nsisupports element, in boolean weak ); parameters element the element to append. weak whether or not to store the element using a weak reference. exceptions thrown ns_error_failure when a weak reference is requested, but the element does not support nsiweakreference. clear() clear the entire array,
releasing all stored objects. void clear(); parameters none. insertelementat() insert an element at the given position, moving the element currently located in that position, and all elements in higher position, up by one. void insertelementat( in nsisupports element, in unsigned long index, in boolean weak ); parameters element the element to insert. index the position in th...
nsINavBookmarksService
string (null in js) if no such keyword is found. astring getkeywordforuri( in nsiuri auri ); parameters auri the uri whose keyword is to be retrieved. return value returns the keyword for the given uri. getremovefoldertransaction() this method retrieves an undo-able transaction for removing a folder from the bookmarks tree. this method exists because complex delete->undo operations
rely on recreated folders to have the same id they had before they were deleted, so that any other items deleted in different transactions can be re-inserted correctly. this provides a safe encapsulation of this functionality without exposing the ability to recreate folders with specific ids (potentially dangerous if abused by other code!) in the public api. nsitransaction getremovefoldertransaction...
nsINavHistoryResultNode
container 4 nsinavhistorycontainerresultnode. result_type_query 5 nsinavhistoryqueryresultnode. result_type_folder 6 nsinavhistoryqueryresultnode. result_type_separator 7 nsinavhistoryresultnode. result_type_folder_shortcut 9 nsinavhistoryqueryresultnode. remarks this is a base class; you should use one of the derived classes instead. using places services after quit-application is not
reliable, so make sure to do any shutdown work on quit-application, or history synchronization could fail, losing latest changes. see also nsinavhistoryvisitresultnode nsinavhistoryfullvisitresultnode nsinavhistorycontainerresultnode nsinavhistoryqueryresultnode ...
nsINavHistoryResultTreeViewer
vhistoryresultnode anode); attributes attribute type description collapseduplicates boolean controls whether duplicate adjacent elements are collapsed into a single item in the tree. this prevents you from seeing multiple entries for things when you have selected to get visits. when you sort by date, the multiple entries will then appear because they will be separated (unless you clicked
reload a bunch of times in a row). if you know you'll only ever want one entry per site, you should ask for uris back instead of visits so it will be more efficient. default = true. changing this value is somewhat heavyweight since it will force a tree refresh. 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 a...
nsIOutputStream
e(), flush(), write(), writefrom(), or writesegments(). a non-blocking output stream, on the other hand, must not block the calling thread of execution. note: blocking output streams are often written to on a background thread to avoid locking up the main application thread. for this reason, it is generally the case that a blocking output stream should be implemented using thread-safe addref and
release. method overview void close(); void flush(); boolean isnonblocking(); unsigned long write(in string abuf, in unsigned long acount); unsigned long writefrom(in nsiinputstream afromstream, in unsigned long acount); unsigned long writesegments(in nsreadsegmentfun areader, in voidptr aclosure, in unsigned long acount); native code only! ...
nsIParentalControlsService
awindowcontext); attributes attribute type description blockfiledownloadsenabled boolean true if the current user account's parental controls restrictions include the blocking of all file downloads. read only. loggingenabled boolean true if the current user account has parental controls logging enabled. if this is true, applications should log
relevant events using log() method. read only. parentalcontrolsenabled boolean true if the current user account has parental controls restrictions enabled. read only. constants constant value description epclog_urivisit 1 this log entry type represents an access to web content. epclog_filedownload 2 this log entry type represents a f...
nsIPasswordManager
ahost); attributes attribute type description enumerator nsisimpleenumerator readonly: an enumeration of the stored usernames and passwords as nsipassword objects. enumerator nsisimpleenumerator readonly: an enumeration of the rejected sites as nsipassword objects. only the host portion of these objects is
relevant. methods adduser() stores a password. astring adduser(in autf8string ahost, in astring auser, in astring apassword); parameters ahost the hostname of the password to store. auser the username of the password to store. apassword the password to store. removeuser() removes a stored password. void removeus...
nsIRequest
vacy. for https, this flag is set automatically. the following flags control what happens when the cache contains data that could perhaps satisfy this request. they are listed in descending order of precedence. constant value description load_bypass_cache 1 << 9 force an end-to-end download of content data from the origin server. this flag is used for a shift-
reload. load_from_cache 1 << 10 load from the cache, bypassing protocol specific validation logic. this flag is used when browsing via history. it is not recommended for normal browsing as it may likely violate reasonable assumptions made by the server and confuse users. the following flags control the frequency of cached content validation when neither load_bypass_cache or load...
nsIScreen
rightness level. each call to this method must eventually be followed by a corresponding call to unlockminimumbrightness() with the same value for the brightness parameter. void lockminimumbrightness( in unsigned long brightness ); parameters brightness the new minimum brightness level; this must be one of the values specified in screen brightness constants. unlockminimumbrightness()
releases a lock on the minimum brightness of the screen, which was previously established through a corresponding call to lockminimumbrightness(). void unlockminimumbrightness( in unsigned long brightness ); parameters brightness the brightness level to
release; this must be one of the values specified in screen brightness constants. example var screenman = components.classes["@mozilla.o...
nsIScriptError
1.0 inherits from: nsiconsolemessage last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/scripterror;1. to create an instance, use: var scripterror = components.classes["@mozilla.org/scripterror;1"] .createinstance(components.interfaces.nsiscripterror); note: the nsiscripterror2 interface was merged into this interface in gecko 12.0. prior to that
release, if you wanted to associate an outer window with a script error, you had to use nsiscripterror2 instead. that subclass offered the nsiscripterror.initwithwindowid() method for that purpose; that method is now available in this interface, however. method overview void init(in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnu...
nsISeekableStream
xpcom/io/nsiseekablestream.idlscriptable provides seeking support in data streams. inherits from: nsisupports last changed in gecko 1.7 method overview void seek(in long whence, in long long offset); void seteof(); long long tell(); constants constant value description ns_seek_set 0 specifies that the offset is
relative to the start of the stream. ns_seek_cur 1 specifies that the offset is
relative to the current position in the stream. ns_seek_end 2 specifies that the offset is
relative to the end of the stream. methods seek() this method moves the stream offset of the stream implementing this interface. void seek( in long whence, in long long offset ); parameters when...
nsISpeculativeConnect
taken on by the implementer, nor is the submitter obligated to actually open the new channel. void speculativeconnect( in nsiuri auri, in nsiinterfacerequestor acallbacks, in nsieventtarget atarget ); parameters auri the uri of the hinted transaction. acallbacks any security callbacks for use with ssl for interfaces such as nsibadcertlistener. may be null. atarget the thread on which the
release of the callbacks will occur. may be null for "any thread". see also nsiioservice blog post: making firefox search snappier ...
nsIStyleSheetService
sheet from sheeturi and adds it to the list of user or agent style sheets. a user sheet loaded via this api will come before usercontent.css and userchrome.css in the cascade (so the rules in it will have lower precedence than rules in those sheets). an agent sheet loaded via this api will come after ua.css in the cascade (so the rules in it will have higher precedence than rules in ua.css). the
relative ordering of two user or two agent sheets loaded via this api is undefined. sheets added via this api take effect on all documents, including already-loaded ones, immediately. void loadandregistersheet( in nsiuri sheeturi, in unsigned long type ); parameters sheeturi uri of the stylesheet to load and register. type one of the type constants. sheetregistered(...
nsITaskbarTabPreview
the move() method) will fail silently. this method is only invoked when it's safe to make taskbar api calls. void ensureregistration(); parameters none. violates the xpcom interface guidelines gethwnd() used internally to obtain the handle to the proxy window for the preview. nativewindow gethwnd(); parameters none. return value the hwnd for the preview's proxy window. move()
relocates the preview
relative to another tab preview from the same window. void move( in nsitaskbartabpreview anext ); parameters anext the preview that this preview should be placed to the left of. a value of null indicates that this preview should be the rightmost one. see also nsitaskbarpreview nsitaskbarpreviewcontroller nsitaskbarwindowpreview nsitaskbarpreviewbutton nsiwintas...
nsITextInputProcessor
ingcompositionstring("ab"); tip.appendclausetopendingcomposition("ab".length, tip.attr_raw_clause); tip.setcaretposition("ab".length); // this means that the second composition character is inputted by a keypress of "b" key during left shift key is down. var bkeyevent = new keyboardevent("", { key: "b", code: "keyb", keycode: keyboardevent.dom_vk_b }); tip.flushpendingcomposition(bkeyevent); //
releasing shift key tip.keyup(shiftkeyevent); tip.setpendingcompositionstring("ab"); tip.appendclausetopendingcomposition("ab".length, tip.attr_selected_clause); tip.setcaretposition("ab".length); // this means that the composition string is converted by a keypress of "convert" key. var convertkeyevent = new keyboardevent("", { key: "convert", code: "convert" }); tip.flushpendingcomposition(conve...
nsIThreadInternal
void popeventqueue(); void pusheventqueue(in nsithreadeventfilter filter); attributes attribute type description observer nsithreadobserver get/set the current thread observer; set to null to disable observing. this attribute may be read from any thread but must only be set on the thread corresponding to this thread object. the observer will be
released on the thread corresponding to this thread object after all other events have been processed during a call to shutdown. methods popeventqueue() reverts a call to pusheventqueue(). when an event queue is popped, any events remaining in the queue are appended to the elder queue. void popeventqueue(); parameters none. pusheventqueue() causes any events currently enqueued on the t...
nsIThreadPool
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. the thread pool takes ownership of the listener and
releases it when the shutdown() method is called. threads created after the listener is set will also take ownership of the listener so that the listener will be kept alive long enough to receive the guaranteed nsithreadpoollistener.onthreadshuttingdown() notification. threadlimit unsigned long the maximum number of threads allowed at once in the pool; you may change this value by alt...
nsITransaction
te, dotransaction() methods already called. the transaction manager calls this method to coalesce a new transaction with the transaction on the top of the undo stack. this method returns a boolean value that indicates the merge result. a true value indicates that the transactions were merged successfully, a false value if the merge was not possible or failed. if true, the transaction manager will
release() the new transaction instead of pushing it on the undo stack. boolean merge( in nsitransaction atransaction ); parameters atransaction the previously executed transaction to merge. return value missing description redotransaction() executes the transaction again. can only be called on a transaction that was previously undone. in most cases, the redotransaction method will actually call ...
nsITransportEventSink
igned long long aprogress, in unsigned long long aprogressmax ); parameters atransport the transport sending this status notification. astatus the transport status (resolvable to a string using nsierrorservice). see nsisockettransport for socket specific status codes and more comments. aprogress the amount of data either read or written depending on the value of the status code. this value is
relative to aprogressmax. aprogressmax the maximum amount of data that will be read or written. if unknown, 0xffffffff will be passed. see also nsitransport nsisockettransport ...
nsITreeSelection
index); attributes attribute type description count long the number of rows currently selected in this tree. read only. currentcolumn nsitreecolumn the current column. currentindex long the current item (the one with focus). note: this property indicates only the index of the row with tree cursor around it. this is not a
reliable method of determining the selected row, as the selection may include multiple rows, or the focused row may not even be selected. selecteventssuppressed boolean this attribute is a boolean indicating whether or not the "select" event should fire when the selection is changed using one of our methods. a view can use this to temporarily suppress the selection while manipulat...
nsIUpdate
ed to identify a particular build, down to the hour, minute, and second of its creation. this lets the system differentiate between several nightly builds with the same version, for example. channel astring the channel used to retrieve this update from the update service. detailsurl astring the url to a page which offers details about the content of this update. ideally, this page is not the
release notes but some other page that summarizes the differences between this update and the previous, which also links to the
release notes. displayversion astring the string to display in the user interface for the version. if you want a real version number use appversion. errorcode long a numeric error code that conveys additional information about the state of a failed update or failed cert...
nsIUpdateItem
name of this item. read only. objectsource astring returns a js object source representing an nsiupdateitem. read only. targetappid astring the target application id used for checking compatibility for this item. note: add-ons can specify a targetapplication id of toolkit@mozilla.org in their install manifest for compatibility with all apps using a specific
release of the toolkit. read only. type long the type of this item. read only. updatekey astring the public key to verify updates for this item. this must be the public part of the key that was used to sign update manifests for this add-on. read only. updaterdf astring the url of the update rdf file for this item. read only. version astring ...
nsIUpdatePrompt
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes an object that can be used to show various update-
related notifications to the user. 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(); void showupdateavailable(in nsiupdate update); void showupdatedownloaded(in nsiupdate update, [optional] in boolean background); void showupdateerror(in nsiupdate update); void showupdatehistory(in nsidomwindow parent); void showupdateinstalled(); methods checkforupdates() presents a user interface that checks for and displays the available updates. void checkforupdates(); parameters none. showupdateavailable() show...
nsIUploadChannel
setuploadstream(in nsiinputstream astream, in acstring acontenttype, in long acontentlength); attributes attribute type description uploadstream nsiinputstream get the stream (to be) uploaded by this channel. read only. methods setuploadstream() sets a stream to be uploaded by this channel. most implementations of this interface require that the stream: implement threadsafe addref and
release implement nsiinputstream.readsegments() implement nsiseekablestream.seek(). history here is that we need to support both streams that already have headers (for example, content-type and content-length) information prepended to the stream (by plugins) as well as clients (composer, uploading application) that want to upload data streams without any knowledge of protocol specifications. for thi...
nsIUploadChannel2
licitsetuploadstream(in nsiinputstream astream, in acstring acontenttype, in long long acontentlength, in acstring amethod, in boolean astreamhasheaders); methods explicitsetuploadstream() sets a stream to be uploaded by this channel with the specified content-type and content-length header values. most implementations of this interface require that the stream: implement threadsafe addref and
release implement nsiinputstream.readsegments() implement nsiseekablestream.seek(). void explicitsetuploadstream( in nsiinputstream astream, in acstring acontenttype, in long long acontentlength, in acstring amethod, in boolean astreamhasheaders ); parameters astream the stream to be uploaded by this channel. acontenttype this value will replace any existing content-type header on the ht...
nsIWebBrowserChrome3
embedding/browser/webbrowser/nsiwebbrowserchrome3.idlscriptable an extension to nsiwebbrowserchrome2. 1.0 66 introduced gecko 2.0 inherits from: nsiwebbrowserchrome2 last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview astring onbefo
relinktraversal(in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); methods onbefo
relinktraversal() determines the appropriate target for a link. astring onbefo
relinktraversal( in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters originaltarget the original link target. linkuri link destination uri. linknode link dom node. isapptab whether or not the li...
nsIWebContentHandlerRegistrar
if (!allowregisterfromdifferenthost) { //it this variable is false, than we had set the pref to true obviously. so lets restore it back to false, which is the default value services.prefs.clearuserpref('gecko.handlerservice.allowregisterfromdifferenthost'); } register a webmail service as mailto handler without contentwindow under construction. ...
nsIWebNavigationInfo
all. image 1 returned by istypesupported() to indicate that a type is supported as an image. plugin 2 returned by istypesupported() to indicate that a type is supported via an npapi ("netscape 4 api") plug-in. this is not the value returned for "xpcom plug-ins". other 1 << 15 note: other return types may be added here in the future as they become
relevant. returned by istypesupported() to indicate that a type is supported via some other means. methods istypesupported() determines whether or not the specified mime type is supported by the given nsiwebnavigation object. this lets you determine whether a mime type can be displayed as-is inside a browser, or if the browser will instead forward handling of the data to a plug-in or an ext...
Storage
note: storage is not the same as the dom:storage feature which can be used by web pages to store persistent data or the session store api (an xpcom storage utility for use by extensions). ...
XPCOM Thread Synchronization
this article covers the api of mozilla synchronization only. for a higher-level introduction to thread synchronization, see introduction_to_nspr. ...
Status, Recent Changes, and Plans
changes to nscomptr most recent first made == and != between an nscomptr and a raw pointer (or a literal 0 or nsnull) work correctly on all compilers. see bug 65664. made getter_addrefs( nscomptr& ) apply the same type-safety check that the simple assignment forms do. added do_createinstance. added do_getservice. eliminated the need to cast getter_addrefs when an nsisupports** is needed.
relaxed the invariant for nscomptr<nsisupports>, so that it is now a pointer to any xpcom interface. added do_queryreferent to make using nsiweakreferences easier. plans for nscomptr bug 59212: as soon as we test on more compilers, start recommending already_addrefed as a function result. bug 59414: making operator& private may help prevent some leaks caused by casting move the factored nscom...
Using the clipboard
initialize it with a "privacy context", which will ensure that source data from inside private browsing mode will be cleared when the mode is exited. please note: the sourcewindow variable is a placeholder for whatever window owns the data being copied -- from any dom element you can obtain it via element.ownerdocument.defaultview. if, and only if, you are placing data on the clipboard that is un
related to web content the user is viewing, you can pass a null privacy context to the init method. the next step is to tell the transferable what type of data we want to use. the type of data is referred to as a data flavor. the function adddataflavor is used to tell the transferable that it needs to transfer data of a certain flavor. in this case, we are transferring the flavor "text/unicode" whic...
XPCOM category image-sniffing-services
in firefox 3, a new xpcom category was added in bug 391667 to allow "third-party" xpcom components to identify images based on their content. if mozilla's built-in image code cannot identify an image, then any xpcom components implementing the nsicontentsniffer interface may register under the "image-sniffing-services" category, and will be queried to determine the mime type of the image being downloaded. ...
XPCOM ownership guidelines
eed it. in fact often you own it because it needs you. if you own it, it shouldn't own you. even transitively. or put another way: the ownership graph for any system should be acyclic. anytime there is a cycle of ownership, there is a situation that isn't automatically handled by destructors. special code must be provided and called to break the cycle before the participants can be individually
released. you don't need to own it if it's lifetime is guaranteed to be longer than yours. as for instance, when it owns you. parents own their children (and not the reverse). though parents may not need to own their children. for instance, a tree may own all the nodes that are in it. all the nodes in the tree point to each other with non-owning pointers. in the simplest scheme, however, parents ...
nsCOMPtr versus RefPtr
ports*. many concrete classes inherit from nsisupports in more than one way, so they cannot be unambiguously cast to nsisupports*. thus, these concrete classes cannot be used with nscomptr. while is possible to use nscomptr<t> on concrete classes t that only singly inherit from nsisupports, it is best to avoid doing so. in the future, more base classes might be added to t that would then cause un
related code to break, which would be very confusing. hence, the interface versus concrete class rule of thumb: interfaces will never multiply inherit from nsisupports, so they can always use be used with nscomptr without fear of breaking in the future. concrete classes should only be used with refptr. nscomptr<t> also requires that you can queryinterface to type t. it does this so that it can asser...
xptcall FAQ
nyone has credible ideas about how to get the required functionality in a cross platform way and/or without resorting to assembly code i'd love to hear about it. is xptcall a platform requirement for mozilla? yes. mozilla will not run properly without a functioning port of xptcall. non-functional stub code exists to allow building xptcall on non-supported platforms. but any browser feature that
relies on xpconnect will fail. any platform that does not do xptcall is in trouble. we need to get moving on getting xptcall working everywhere! what platforms are supported? the growing list: porting status where can i find other resources? the code is at: xpcom/reflect/xptcall a new porting guide is at: https://developer.mozilla.org/en/xptcall_porting_guide pre-implementation proposals a...
Xptcall Porting Guide
embler for the gcc linux x86 port. i ended up with larger stubs than i would have preferred rather than battle the compiler over what would happen to the stack before my asm code began running. i believe that the non-assembly parts of these files can be copied and reused with minimal (but not zero) platform specific tweaks. feel free to copy and paste as necessary. please remember that safety and
reliability are more important than speed optimizations. this code is primarily used to connect xpcom components with javascript; function call overhead is a tiny part of the time involved. i put together xptcall/src/md/test as a place to evolve the basic functionality as a port is coming together. not all of the functionality is exercised, but it is a place to get started. xptcall/tests has an api l...
Xptcall Porting Status
ny@mindspring.com> the word i hear is that this is working and done <font color="white">done</font> hp-ux thomas wang <wang@cup.hp.com> mike gleeson <mgleeson1@netscape.com> i hear that this code is checked in and working. though, there is some doubt - see bug #17997 <font color="white">done</font> aix ppc jim dunn <jdunn@netscape.com> philip k. warren writes: we have gone through several
releases of aix without any problems. <font color="white">done</font> irix jason heirtzler <jasonh@m7.engr.sgi.com> jason has declared this done. jason is no longer working at sgi and will not be maintaining this code. there is some doubt as to whether or not this is working for everyone - see bug #10061. mike shaver <shaver@mozilla.org> is the interim maintainer until someone more suitable can be...
XPIDL
l completes, it must make a private copy of the data, or, in the case of interface pointers, addref it. for out parameters, the callee creates the data, and transfers ownership to the caller. for buffers, the callee allocates the buffer with ns_alloc, and the caller frees the buffer with ns_free. for interface pointers, the callee does the addref on behalf of the caller, and the caller must call
release. for inout parameters, the callee must clean up the old data if it chooses to replace it. buffers must be deallocated with ns_free, and interface pointers must be
release'd. afterwards, the above rules for out apply. shared out-parameters should not be freed, as they are intended to refer to constant string literals. resources (mostly outdated) some unsorted notes including a keyword l...
XTF
the xtf readme. xtf home the xtf home (outdated). ...
XUL Overlays
ent/navigatoroverlay.xul). the layout engine loads any overlay files and then flows the resulting xul document, so problems associated with incremental insertion in menus, boxes, tables, and forms are avoided. any number of overlays can be loaded into a master document, and an overlay can also load other overlays. because an overlay is superimposed on the master document, there are no ambiguities
relating to scoping of style sheets or scripts. style sheets and scripts loaded by the overlay simply apply to the entire master document. loading overlays dynamically the chrome registry makes it possible to load xul overlays dynamically -- or only when necessary. the chrome registry, which is a special rdf datasource into which user-specific information is persisted, or stored, contains information...
Testing Mozilla code
some test that you run on it. there are different types of coverage metrics (see also the wikipedia entry), but when we speak of code coverage here, we usually mean line and branch coverage. this type of coverage is only concerned with hit counts for lines and branches.the valgrind test jobthe valgrind test job builds the browser and runs it under valgrind, which can detect various common memory-
related errors. this job only runs on linux64, which is the platform best suited to running valgrind. ...
Address Book examples
note: thunderbird and seamonkey user interfaces now reference 'contacts' not 'cards' however, as the backend still uses the 'cards' terminology, that is what is used here this article provides examples on accessing and manipulating thunderbird address books. address book interfaces provides an overview of the
related interfaces. see an overview of thunderbird components for a general description of the thunderbird user interface and
related programmatic interfaces. how do i get all address books? use the address book manager to get an nsisimpleenumerator, then progress through the enumerator, looking for nsiabitem, nsiabcollection or nsiabdirectory interfaces as you require. let abmanager = components.classes["@mozilla.org/abmanager;1"] .getservice(compon...
LDAP Support
rganization unit as the ldap attribute. you can also insert arbitrary text to clarify the ldap attribute. i.e. "department: [ou]" would yield a type down entry that looks like "john smit department: client engineering". ldap schema the following table summarizes the schema used by thunderbird to map between ldap attributes and attributes within the the address book. some notes about the
relationship: there is a many to one
relationship between ldap attributes and its address book counterpart. there is a one to one
relationship between a address book attribute and its ldap counterpart. if there are multiple entries for a address book attribute, the first takes precedence. these
relationships ensure: generality is maintained when mapping from ldap attributes to address book. con...
Mail client architecture overview
nt of state to aid in view navigation, progress display, etc. url display and dispatching - in order to perform network operations such as downloading new mail, copying and moving messages, and displaying messages from a remote server, the url system interacts with necko and reflects it's state to the mail window. there are also a number of protocol independant subsystems that have a symbiotic
relationship with base: libmime - for dealing with rfc822 messages and their mime parts. this library has the cabability to stream messages to an html renderer such as gecko, manage individual parts of messages, and so forth. msgdb - a message database for a given folder is a summary of some of the key attributes in a folder such as the author and subject. finally, there are larger modules outs...
Mail event system
e passed amongst the mail objects. for example, when a folder gets a new message, its total message count increases. the folder pane needs to know that this changed so that it can update the message count so the user can see it. interfaces the key interfaces here are: nsifolder.idl is an interface for storing a hierarchy of objects with properties. this interface is not (should not be) mail-
related. 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. if th...
Main Windows
see developer.thunderbird.net for newer information. the base chrome directory of thunderbird can sometimes appear confusing when you're just beginning to look at it. as such, i've always thought it would be nice to have a list of what xul, js, or other files are that are here, what they do, and where they overlay at different points within the client. things appear confusing for several reasons: much of the code is written to be portable, so instead of duplicating it, its been put in overlays that are loaded over many different types of windows. ...
Message Interfaces
nsimsgdbhdr nsimsgdbhdr - this interface describes headers for mail messages. it is a child of nsimsghdr (see above). nsimsgthread nsimsgthread - this interface is used to interact with threads in thunderbird. ...
The libmime module
| |--- mimecontainer (abstract) | | | |--- mimemultipart (abstract) | | | | | |--- mimemultipartmixed | | | | | |--- mimemultipartdigest | | | | | |--- mimemultipartparallel | | | | | |--- mimemultipartalternative | | | | | |--- mimemultipart
related | | | | | |--- mimemultipartappledouble | | | | | |--- mimesunattachment | | | | | |--- mimemultipartsigned (abstract) | | | |--- mimemessage | | | |--- mimeuntypedtext | |--- mimeleaf (abstract) | | | |--- mimeinlinetext (abstract) | | | ...
Thunderbird API documentation
warning: this content is for older versions of thunderbird. much of it may no longer be
relevant. see developer.thunderbird.net for newer information. these pages have been moved from mozilla.org, and may or may not be
relevant. general mail client architecture overview mail event system events new! account provisioner new! activity manager address book sync client design buddy icons in mail composition composition back end in mail cached compose window faq filelink providers new! hidden prefs libmime libmime module libmime content type handlers mail and rdf using the multiple accounts api spam filtering ...
Building a Thunderbird extension 1: introduction
ail application. it shares many of the technologies used by mozilla firefox, including javascript, the gecko layout engine, the xul xml user interface language and the xpcom cross-platform component object model. similar to firefox, thunderbird functionality can be enhanced and customized via extensions. warning: this content is for older versions of thunderbird. much of it may no longer be
relevant. see developer.thunderbird.net for newer information. this tutorial will introduce you to the components of a thunderbird extension and will show you how to build your own. 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) chr...
Building a Thunderbird extension 2: extension file layout
see developer.thunderbird.net for newer information. extensions are packaged and distributed in archive files (also known as bundles), with the xpi (pronounced “zippy”) file extension. at a minimum, they contain an install.rdf, the chrome.manifest and a chrome/ folder. a content/ folder sometimes contains the actual content files. these files contain the code that makes your extension actually do something. ...
Building a Thunderbird extension 5: XUL
see developer.thunderbird.net for newer information. thunderbird's user interface is written in xul and javascript. xul is an xml grammar that provides user interface widgets like buttons, menus, toolbars, trees etc. we add widgets by inserting new xul dom elements into the application window and modify them using scripts and attaching event handlers. while xul provides the elements of the user interface, actions are written in javascript. for our first extension, we will add some text to the thunderbird status bar. ...
Building a Thunderbird extension 6: Adding JavaScript
see developer.thunderbird.net for newer information. in this step we will create a small piece of javascript code that inserts the current date into our statusbar widget. the statusbar is usually displayed at the bottom of the thunderbird window. depending on the installed theme the result will look something like this: modify xul elements with javascript save the following javascript code into the content/ folder next to your myhelloworld.xul file and name it overlay.js. ...
Demo Addon
see developer.thunderbird.net for newer information. overview this demo add-on has been created by jonathan protzenko for his presentation at mozcamp 2011. it shows how to achieve various goals in a working live example, such as working with gloda. you can download it at the bottom of the page. how to use after installing the demo add-on in thunderbird, right click on the toolbar and choose "customize". drag the "demo" button into the toolbar. afterwards, just click that button to show the demo overview. all three demos are explained in the following sections. ...
Activity Manager examples
this content covers features introduced in thunderbird 3 the activity manager is a simple component that understands how to display a combination of user activity and history. see the activity manager page for a general description of the component. see the activity manager interfaces page for an overview of the
related interfaces. if the default implementation of nsiactivityprocess, nsiactivitywarning and nsiactivityevent are not sufficient for the activity initiator, activity developers can provide their own components to extend the capabilities. default implementations can be found in nsactivity.js file. if activity developers would like to extend the default ui representation of the activity types, they can provide their own xbl elements for their own activity types. all custom acti...
Thunderbird
documentation building thunderbird information about building thunderbird with the comm-central repository. there's also information about how the review process works and how to use the mozilla symbol server to help with debugging. mailnews protocols rough documentation about mail protocols.. database views backend information about nsimsgdbview and
related interfaces. thunderbird api documentation thunderbird api documentation extension documentation tutorials and tips for building thunderbird extensions view all... community thunderbird product home page thunderbird project community pages user support is handled at mozilla support development discussion happens on the tb-plan...
Declaring and Using Callbacks
ption is thrown. the sentinel value must be convertible to the return type of the callback: function myjscallback() { throw "uh oh"; }; var callback1 = funcptrtype(myjscallback, null, -1); // returns -1 to the native caller when the exception is thrown. warning: you must store a reference to the callback object as long as the native code might call it. if you don't, the gc might collect the
relevant data structures, and the browser will crash when native code attempts to invoke your callback. arguments and return values js-ctypes automatically handles the conversion between javascript and c value representations. before the javascript callback function is invoked, js-ctypes converts the arguments passed by the caller to javascript values. where possible, js-ctypes will convert argumen...
Working with data
you can go about creating new cdata objects. creating uninitialized cdata objects there are three forms of the syntax for creating cdata objects without immediately assigning them a value: var mycdataobj = new type; var mycdataobj = new type(); var mycdataobj = type(); these all do the same thing: they return a new cdata object of the specified type, whose data buffer has been populated enti
rely with zeroes. note: if type.size is undefined, creating a new object this way will throw a typeerror exception. creating initialized cdata objects similarly, you can initialize cdata objects with specific values at the type of creation by specifying them as a parameter when calling the ctype's constructor, like this: var mycdataobj = new type(value); var mycdataobj = type(value); if the siz...
Int64
value to create. low the low-order 32 bits of the value to create. return value a new 64-bit integer object comprised of the two values merged together. the returned value is (high << 32) + low. exceptions thrown typeerror one or both of the specified numbers is not a javascript number with an integral value. tosource() this method is for internal debugging use only. warning: do not
rely on the value returned by this method, as it's subject to change at any time, depending on the debugging needs of the developers. tostring() returns a string representation of the object's numeric value. string tostring( [radix] ); parameters radix optional the radix (base) to use when constructing the string. if you don't specify a radix, base 10 is used. return value a string repr...
UInt64
lue to create. low the low-order 32 bits of the value to create. return value a new 64-bit integer object comprised of the two values merged together. the returned value is (high << 32) + low. exceptions thrown typeerror one or both of the specified numbers is not a javascript number with an integral value. tosource() this method is for internal debugging use only. warning: do not
rely on the value returned by this method, as it's subject to change at any time, depending on the debugging needs of the developers. tostring() returns a string representation of the object's numeric value. string tostring( [radix] ); parameters radix optional the radix (base) to use when constructing the string. if you don't specify a radix, base 10 is used. return value a string re...
js-ctypes
an "add image to iphoto" feature in firefox. ...
Blocking By Domain - Plugins
these blocks improve firefox security and performance and also make the click-to-activate feature more valuable to users by reducing unnecessary prompts. according to the firefox plugin roadmap, the plugin block list is planned for firefox 55. ...
Browser Side Plug-in API - Plugins
l thread-safe way to request that the browser calls a plug-in function on the browser or plug-in thread (the thread on which the plug-in was initiated). npn_poppopupsenabledstate pops the popups-enabled state. npn_posturl posts data to a url. npn_posturlnotify posts data to a url, and receives notification of the result. npn_pushpopupsenabledstate pushes the popups-enabled state. npn_
reloadplugins
reloads all plug-ins in the plugins directory. npn_requestread requests a range of bytes for a seekable stream. npn_setvalue sets windowless plug-in as transparent or opaque. npn_setvalueforurl allows a plug-in to change the stored information associated with a url, in particular its cookies. npn_status displays a message on the status line of the browser window. npn_useragen...
Constants - Plugins
sk i/o, lack of memory, or other problems. npres_user_break 2 user canceled stream directly by clicking the stop button or indirectly by some action such as deleting the instance or initiating higher-priority network operations. plug-in version constants constant value description np_version_major 0 major version number; changes with major code
release number. np_version_minor 22 minor version number; changes with point
release number. version feature constants npvers constant: version feature information value description npvers_has_streamoutput 8 streaming data. npvers_has_notification 9 notification of completion. npvers_has_liveconnect 9 liveconnect. ...
URLs - Plugins
rlnotify(npp instance, const char* url, const char* target, void* notifydata); the instance, url, and target parameters have the same definitions as those of npn_geturl. the notifydata parameter contains private plug-in data that can be used to associate the request with the subsequent npp_urlnotify call (which returns this value) and/or to pass a pointer to some request-
related payload. if a request is not completed successfully (for example, because the url is invalid or an http server is down), the browser should call npp_urlnotify as soon as possible. if a request completes successfully, and the target is non-null, the browser calls npp_urlnotify after it has finished loading the url. if the target is null, it calls npp_urlnotify after calling npp_destroystream ...
Plugin Roadmap for Firefox - Plugins
edule june 2016 starting with firefox 47 in june 2016, all plugins other than adobe flash are click-to-activate. users choose which sites are allowed to activate each plugin. in addition, the 64-bit firefox for windows only supports the flash plugin. march 2017 starting with firefox 52 in march 2017, plugins other than adobe flash are no longer supported in firefox. firefox extended support
release 52 will continue to support non-flash plugins until early 2018. august 2017 starting with firefox 55 in august 2017, users must choose which sites are allowed to activate the flash plugin. users will have the choice to remember the flash setting per-site. this change will be rolled out progressively during august and september 2017. in order to improve security and performance, mozilla w...
3D view - Firefox Developer Tools
"tall," projecting outward from the bottom of the page. this view makes it easy to visualize the nesting of your content. by clicking and dragging the view, you can rotate and re-orient the 3d presentation of the dom hierarchy of your page to see it from different angles, to better examine its structure. off-screen elements become visible, so that you can see where your elements are located in
relation to the visible content. you can click on elements to see their html in the html panel or the style panel. conversely, you can click on elements in the breadcrumb bar to change which element is selected in the 3d view. if you do not see the 3d button in the page inspector, it is possible that your graphics driver needs to be updated. see the blocklisted drivers page for more information. co...
Color vision simulation - Firefox Developer Tools
8% of men, and 0.5% of women. the most common forms of color blindness (commonly lumped together as "red-green color blindness") affect more men than women, because they are due to a mutation in a gene in the x chromosome, which men usually have only one copy of. contrast sensitivity loss can be caused by cataracts, glaucoma, diabetic retinopathy, and other disorders of the retina; it can be age-
related, congenital, or due to an injury. to enable this feature, you must have webrender enabled; it may be enabled by default, depending on your configuration of firefox. in the firefox configuration editor, make sure the gfx.webrender.all option is set to true. in the simulate menu, you can choose one option at a time from the following list: none — choose this to return to normal display...
DOM Inspector FAQ - Firefox Developer Tools
pen xul windows, e.g., the browser window. inspect a url this just focuses the dom inspector's address bar, which allow you to inspect arbitrary documents which can be accessed via a url. this causes the document to be loaded in the browser pane. these can include chrome documents, but it's not suggested that you inspect xul documents by directly inspecting them via url, since some behavior may
rely on the document being contained in another xul document, or the converse, where it won't behave correctly because it doesn't expect to be loaded as a framed document. instead, get the xul document to load as you normally would (e.g., by invoking commands or opening windows via standard application use), then locate it in the inspect chrome document menu. why do some nodes in the document dom n...
Access debugging in add-ons - Firefox Developer Tools
escribed in this document. don't write new add-ons that use these techniques. 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. ...
Ignore a source - Firefox Developer Tools
we don’t care about the internal implementation of these libraries. however, a library’s abstraction leaks during debugging sessions when you are forced to step through its stack frames in order to reach your own code. however, you can tell the debugger to ignore the details of selected sources. you can enable or disable ignoring a source file in a couple of ways: in the source list pane, right-click the filename and choose ignore source (or unignore source). if the source file is displayed in the source pane, click the "eye" icon at the bottom. ...
Set event listener breakpoints - Firefox Developer Tools
and then choosing some events to break on will mean that when you step through code, information about events fired will be logged to the console instead of the devtools breaking on each one. so if we choose to log keyboard events, for example, the code no longer pauses as each event is fired: instead, we can then switch to the console, and whenever we press a key we are given a log of where
related events were fired. there's an issue here — the console is showing that the keypress event is being fired somewhere inside jquery. instead, it’d be far more useful if we showed where in our own app code is calling the jquery that fired the event. this can be done by finding jquery.js in the sources panel, and choosing the ignore source option from its context menu. now the logs will ...
Source map errors - Firefox Developer Tools
you can learn more about them in how to use a source map. general source map error reporting if you do see a problem, a message will appear in the webconsole. this message will show an error message, the resource url, and the source map url: here, the resource url tells us that bundle.js mentions a source map, and the source map url tells us where to find the source map data (in this case,
relative to the resource). the error tells us that the source map is not json data — so we're serving the wrong file. there are a few common ways that source maps can go wrong; they are detailed in the following sections. source map missing or inaccessible the source map resource can be missing or inaccessible. the fix here is to make sure the file is being served and is accessible to the br...
Index - Firefox Developer Tools
variables when the code has stopped at a breakpoint, you can examine its state in the variables pane of the debugger: 123 highlight and inspect dom nodes dom node, debugger, devtools, page inspector if you hover over a dom node in the watch expresions, it will be highlighted in the page. 124 ignore a source in modern web development, we often
rely on libraries like jquery, ember, or angular, and 99% of the time we can safely assume that they “just work”. we don’t care about the internal implementation of these libraries. however, a library’s abstraction leaks during debugging sessions when you are forced to step through its stack frames in order to reach your own code. however, you can tell the debugger to ignore the details of se...
All keyboard shortcuts - Firefox Developer Tools
atchpad shift + f4 shift + f4 shift + f4 run scratchpad code ctrl + r cmd + r ctrl + r run scratchpad code, display the result in the object inspector ctrl + i cmd + i ctrl + i run scratchpad code, insert the result as a comment ctrl + l cmd + l ctrl + l re-evaluate current function ctrl + e cmd + e ctrl + e
reload the current page, then run scratchpad code ctrl + shift + r cmd + shift + r ctrl + shift + r save the pad ctrl + s cmd + s ctrl + s open an existing pad ctrl + o cmd + o ctrl + o create a new pad ctrl + n cmd + n ctrl + n close scratchpad ctrl + w cmd + w ctrl + w pretty print the code in scratchpad ct...
Measure a portion of the page - Firefox Developer Tools
this button. now when you mouse over the viewport, you'll see the mouse has a crosshair cursor with its current coordinates displayed beside it. when you hold the mouse button down and then drag, you'll start to draw a rectangle, with its x, y, and diagonal dimensions displayed. the units are in pixels. when you stop holding the mouse down, the rectangle that was displayed on screen when you
released the button will stay there until you click again, allowing you time to take screenshots, note the information down, etc. the rectangle can also be resized later on by clicking one of the handles around it. ...
Dominators - Firefox Developer Tools
ct itself, plus the size of other objects that are kept alive by this object often, objects will have a small shallow size but a much larger retained size, through the references they contain to other objects. retained size is an important concept in analyzing memory usage, because it answers the question "if this object ceases to exist, what's the total amount of memory freed?". dominators a
related concept is that of the dominator. node b is said to dominate node a if every path from the root to a passes through b: if any of node a's dominators are freed, then node a itself becomes eligible for garbage collection. if node b dominates node a, but does not dominate any of a's other dominators, then b is the immediate dominator of a: one slight subtlety here is that if an object a i...
Tree map view - Firefox Developer Tools
corresponds to the proportion of the heap occupied by items in that category. this means you can quickly get an idea of roughly what sorts of things allocated by your site are using the most memory. within top-level categories: objects is further divided by the object's type. scripts is further subdivided by the script's origin. it also includes a separate rectangle for code that can't be cor
related with a file, such as jit-optimized code. other is further subdivided by the object's type. here are some example snapshots, as they appear in the tree map view: this treemap is from the dom allocation example, which simply runs a script that creates a large number of dom nodes (200 htmldivelement objects and 4000 htmlspanelement objects). you can see how almost all the heap usage is fro...
Performance Analysis - Firefox Developer Tools
is simulates the first time a user visits your site, and subsequent visits. it displays the results for each run side by side, or vertically if the browser window is narrow: the results for each run are summarised in a table and a pie chart. the tables group resources by type, and show the total size of each resource and the total time it took to load them. the accompanying pie chart shows the
relative size of each resource type. to get back to the network monitor's list of network requests click the "back" button on the left. clicking on a slice of the pie takes you to the network monitor for that run, with a filter automatically applied to see only that resource type. network monitor features the following articles cover different aspects of using the network monitor: toolbar net...
Throttling - Firefox Developer Tools
the network monitor allows you to throttle your network speed to emulate various connection speeds so you can see how your app will behave under different connection types. throttling the toolbar includes a throttling dropdown, which allows you to throttle your network speed to emulate various different network speed conditions. simply choose an option from the menu, and it will persist across
reloads. 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. the speeds are expressed in multiples of bits per second. sele...
Network monitor toolbar - Firefox Developer Tools
lter the network request list by type: by the content type of the response xhr requests websocket upgrades and messages (labeled ws) other requests a checkbox that allows you to disable caching. throttling menu, to simulate various connection types a menu of other actions: persist logs: by default, the network monitor is cleared each time you navigate to a new page or
reload the current page. when you select persist logs, the log is not cleared on page load. import har imports a har (http archive) file. save all as har opens a file dialog box so you can save the current contents of the network log as a har file with the extension .har. copy all as har copies the current contents of the network log to the clipboard in har format. a second toolbar ar...
Network Monitor - Firefox Developer Tools
once the tool is monitoring network requests, the display looks like this: when it is actively monitoring activity, the network monitor records network requests any time the toolbox is open, even if the network monitor itself is not selected. this means you can start debugging a page in, for example, the web console, then switch to the network monitor to see network activity without having to
reload the page. 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 det...
Edit Shape Paths in CSS - Firefox Developer Tools
the guide to opening the inspector. once you have selected your element, you should see the shape icon alongside any valid value, e.g. one for shape-outside. clicking the icon will cause the editor to highlight the shape. to deactivate the shape path editor click on the icon again, or select another element or a different editor. note that the shape path editor does not persist between page
reloads — if you
reload your page you will need to select the element again. understanding the lines drawn by the editor once you have selected a shape on your page, the shape path editor will draw lines to help you understand the path that is being created. a solid line shows the outline of the shape that is wrapping the text. this is your shape. if the shape is clipped by the margin box then...
Edit fonts - Firefox Developer Tools
mputed value is maintained. example: if 1rem is equivalent to 10 pixels, when you change the unit of measurement from rem to px, 2rem becomes 20px. line height the line-height of the inspected element. this can be set using unitless, em, %, or px units. you can select values using the slider or enter a numeric value directly into the text box. changing the unit of measure changes the value
relative to the font-size setting. example: if the font is 20 pixels high and the line-height is 1.5em, when you change the unit of measure from em to px, the value will become 30px. weight the font-weight for the inspected element. you can select values using the slider or enter a numeric value directly into the text box. for non-variable fonts the slider ranges from 100 to 900 in increments o...
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
ane in the css pane's rules view, any instance of a display: flex declaration gets a small flexbox icon next to the word flex. clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex item: the overlay will still be shown when you select other elements from the inspector panel, so you can edit
related css properties and see how the flex items are affected by your changes. the layout flex container section the css pane's layout view includes a collapsible "flex container" section. if you expand the section without selecting a flexbox container, it will only display the message, "select a flex container or item to continue". once you select an element whose display is defined as flex, the ...
Reposition elements in the page - Firefox Developer Tools
new in firefox 48 starting in firefox 48 you can move absolutely positioned elements by dragging them around the page. if an element has its position property set to absolute,
relative or fixed and one or more of the top, bottom , left or right properties, the box model view displays a button: if you click that button, two handles appear next to the element: you can use these handles to drag the element around the page. if the element is absolutely positioned, dashed lines are shown representing the offset parent. for
relatively positioned elements the dashed lines indicate the original position of the node. the offsets are indicated by a line and a tooltip for each side. ...
Use the Inspector API - Firefox Developer Tools
- information about the inspector's selection: .isnode() - returns true if selection is node. .node - returns the actual element from the page .window - the window object of the frame the selection is in. .markdirty() - marks that the page has been changed by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on
reload. bindable events using on: markuploaded called when the left panel has been refreshed, after page change. ready called on first markuploaded. pseudoclass called after toggle of a pseudoclass. layout-change "low-priority change event for things like paint and resize." ...
Animation inspector (Firefox 41 and 42) - Firefox Developer Tools
note that the animation inspector's ui was revamped in firefox 43. to see what the animation inspector looks like in firefox 43 and subsequent
releases, see the main "work with animations" page. the animation inspector enables you to: see information about all animations running in the page play/pause all animations play/pause/rewind/fast-forward each animation jump to a specific point in an animation highlight and inspect the animated node adjust the playback rate of each animation see whether an animation is running in the compositor thread (a lightning bolt icon is displayed next to such animations) ...
Work with animations - Firefox Developer Tools
geometric property and a translation at the same time — the two effects won't be synchronized — so the transform property is deliberately not handed over to the compositor to handle. the animation inspector will tell you this — look at it now and you'll see that: the white lightning bolt icon in the bar has been replaced with a grey lightning bolt icon, to indicate that only some of the
relevant properties are being optimized by the compositor. the bar tooltip also includes this information, as a further reminder. you'll get a message of "some animation properties are optimized." properties whose animation is not being optimized, but could be if you improved your code, are now given a dotted underline — see transform in the screenshot below. hovering over this gives you a toolti...
UI Tour - Firefox Developer Tools
e element that uses the property to select that element in the inspector. if more than one element has a given property applied to it, click the triangle to show all the occurences. to configure the set of browsers you want the compatibility view to check for, click settings at the bottom of the panel. untick the checkbox for any browser you are not interested in. as new browser versions are
released, the version numbers in this list will be updated. fonts view the fonts view shows all the fonts in the page along with editable samples. see view fonts for more details. animations view the animations view gives you details of any animations applied to the selected element, and a controller to pause them: see work with animations for more details. ...
Frame rate - Firefox Developer Tools
lems, enabling you to use the other tools for more in-depth analysis. for example, here's a screenshot of a performance profile: you can see that the average frame rate is reasonably healthy, but there are three spots where frame rate collapses for tens of milliseconds. this would certainly cause a noticeable stutter for any animations that were playing in the page. the frame rate graph is cor
related with the waterfall summary directly above it, and there we can see that the first two drops in the frame rate are cor
related with orange bars, which denote time spent executing javascript. if we select one of these slices of the recording, the main waterfall view underneath it is zoomed into it, and we can see the function that's causing the problem: we have a javascript function from a c...
Intensive JavaScript - Firefox Developer Tools
of the waterfall, which tells us what kinds of operations the browser is doing during the recording. the pink says that we are mostly performing css calculations and possibly reflow: this is the css animation that's running throughout the profile. then there are three solid blocks of orange, representing javascript execution, one for each time we pressed the button. the bottom half, which is cor
related with the timeline summary in time, shows frame rate. we can see that frame rate is pretty healthy for most of the recording, but collapses completely whenever we press the button. we can select one of these periods and have a closer look at it in the main waterfall view: here, when we pressed the button, the browser ran a javascript function, or series of functions, that blocked the main ...
UI Tour - Firefox Developer Tools
it contains two elements: an overview of the waterfall and a frame rate graph. waterfall overview this presents a compressed view of the waterfall: recorded operations are color-coded using the same scheme as in the main waterfall view. frame rate graph the frame rate gives you an overview of the browser's responsiveness during the recording: see the separate article on frame rate. cor
relating events because these elements are synchronized, you can cor
relate events in one element with events in another. for example, in the screenshot below a long-running paint operation (shown as a green bar in the waterfall overview) corresponds to a drop in the frame rate: zooming in you can use the overview to select a slice of the recording to examine in more detail. select a slice, and ...
Settings - Firefox Developer Tools
t is set, caching will be disabled whenever you reopen the devtools. caching is re-enabled when the devtools are closed. note that service workers are not affected by this option. note that this option was called "disable cache" in firefox versions previous to 49, but it was renamed to make it clearer that this affects the http cache, and not service workers/the cache api. disable javascript
reload the current tab with javascript disabled. enable service workers over http enable service worker registrations from insecure websites. enable browser chrome and add-on debugging toolboxes enable you to use developer tools in the context of the browser itself, and not only web content. enable remote debugging enable the developer tools to debug remote firefox instances. enable worker deb...
Shader Editor - Firefox Developer Tools
pplications (in this case, the unreal engine demo): opening the shader editor the shader editor is disabled by default. to enable it, open the toolbox settings and check "shader editor" in the "default firefox developer tools" item. you'll now see "shader editor" appear in the toolbar. click it and the shader editor opens. at first you'll just see a blank window with a button asking you to
reload the page: to get started, load a page which creates a webgl context and loads a program into it. the screenshots below are from the unreal engine demo. 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: m...
Storage Inspector - Firefox Developer Tools
ject stores and the items stored in these object stores. local storage — all local storage items created by the page or any iframes inside the page. session storage — all session storage items created by the page or any iframes inside the page. for the time being, the storage inspector only gives you a read-only view of storage. but we're working to let you edit storage contents in future
releases. opening the storage inspector you can open the storage inspector by selecting "storage inspector" from the web developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its shift + f9 keyboard shortcut. the toolbox will appear at the bottom of the browser window, with the storage inspector activated. it's just called "storage"...
Toolbox - Firefox Developer Tools
re's a row of buttons to: close the window toggle the window between attached to the bottom of the browser window, and attached to the side of the browser window toggle the window between standalone and attached to the browser window access developer tool settings settings see the separate page on the developer tools settings. main pane the content of the main pane in the window is enti
rely controlled by, and specific to, the hosted tool currently selected. keyboard shortcuts these shortcuts work whenever the toolbox is open, no matter which tool is active. command windows macos linux cycle through tools left to right ctrl + ] cmd + ] ctrl + ] cycle through tools right to left ctrl + [ cmd + [ ctrl + [ toggle between...
View Source - Firefox Developer Tools
tor, such as the one offered by w3c. not all parse errors are reported even though all the reported errors are parse errors according to the html specification, not all parse errors are reported by view source. among the errors that don't get reported: bytes that are illegal according to the document's encoding aren't marked as errors. forbidden characters aren't reported as errors. errors
related to the end-of-file aren't reported. tree builder errors
relating to text (as opposed to tags, comments, or doctypes) aren't reported. parse errors
related to xmlns attributes aren't reported. xml syntax highlighting view source uses the html tokenizer when highlighting xml source. while the tokenizer has support for processing instructions when highlighting xml source, that's the only xm...
Web Console UI Tour - Firefox Developer Tools
es that are displayed in the console. filter categories: you can click a filter category (such as errors, warnings, css, or xhr) to display just those types of messages. settings ("gear" menu): new in firefox 71, you can click the gear icon to access the new settings menu, where you can toggle the following features on and off: persist logs: when enabled, the console doesn't clear on page
reload, or new page load. show timestamps: when enabled, timestamps are shown on the left-hand side of each message row to say when the messages were logged. group similar messages: when enabled, similar types of messages are grouped together, with an indicator of the number of occurrences. enable autocompletion: when enabled, the javascript interpreter attempts to autocomplete while you typ...
about:debugging (before Firefox 68) - Firefox Developer Tools
temporary add-on" without restarting firefox does not work. firefox 48 onwards from firefox 48 onwards: as before: if you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown. there's a better way to handle the other cases: click the "
reload" button next to the "debug" button. this does what it says:
reloading any persistent scripts, such as background scripts parsing the manifest.json file again, so changes to permissions, content_scripts, browser_action or any other keys will take effect. note that in firefox 49 onwards, the
reload button is only enabled for temporary add-ons. it will be disabled for all other add-o...
AbsoluteOrientationSensor - Web APIs
if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. ...
AbsoluteOrientationSensor - Web APIs
to use this sensor, the user must grant permission to the 'accelerometer', 'gyroscope', and 'magnetometer' device sensors through the permissions api. if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. constructor absoluteorientationsensor.absoluteorientationsensor() creates a new absoluteorientationsensor object. ...
AnalyserNode.fftSize - Web APIs
h the name indexsizeerror is thrown. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for
relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ... analyser.fftsize = 2048; var bufferlength = analyser.frequencybincount ; var dataarray = new uint8array(bufferlength); analyser.getbytetimedomaindata(dataarray); // draw an oscilloscope of the current audio source function draw() { drawvisual = requestan...
AnalyserNode.getByteFrequencyData() - Web APIs
excess elements are ignored. return value none. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for
relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.g...
AnalyserNode.getByteTimeDomainData() - Web APIs
ignored. return value void | none example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for
relevant code). const audioctx = new (window.audiocontext || window.webkitaudiocontext)(); const analyser = audioctx.createanalyser(); ... analyser.fftsize = 2048; const bufferlength = analyser.fftsize; const dataarray = new uint8array(bufferlength); analyser.getbytetimedomaindata(dataarray); // draw an oscilloscope of the current audio source function draw() { drawvisual = requestanimationfr...
AnalyserNode.getFloatFrequencyData() - Web APIs
ete applied examples/information, check out our voice-change-o-matic-float-data demo (see the source code too). <!doctype html> <body> <script> const audioctx = new audiocontext(); //create audio source //here, we use an audio file, but this could also be e.g. ...
AnalyserNode.maxDecibels - Web APIs
indexsizeerror exception is thrown. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for
relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { ...
AnalyserNode.minDecibels - Web APIs
index_size_err exception is thrown. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for
relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { ...
AnalyserNode.smoothingTimeConstant - Web APIs
index_size_err exception is thrown. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for
relevant code). if you are curious about the effect the smoothingtimeconstant() has, try cloning the above example and setting analyser.smoothingtimeconstant = 0; instead. you'll notice that the value changes are much more jarring. var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10...
Animation.pause() - Web APIs
cake.addeventlistener("mouseup", stopplayingalice, false); bottle.addeventlistener("mouseup", stopplayingalice, false); specifications specification status comment web animationsthe definition of 'play()' in that specification. working draft ...
Animation - Web APIs
finite (i.e., forwards-filling), this can result in a huge animations list, which could create a memory leak. for this reason, modern browsers have implemented the part of the web animations spec that automatically removes overriding forward filling animations, unless the developer explicitly specifies to keep them. you can see this in action in our simple replace indefinite animations demo. the
related javascript features are: animation.commitstyles() for commiting the end styling state of an animation to the element being animated, even after that animation has been removed. animation.onremove for setting and running an event handler that fires when the animation is removed (i.e., put into an active replace state). animation.persist() for when you explicitly want an animations to be r...
AnimationEvent() - Web APIs
syntax animationevent = new animationevent(type, {animationname: apropertyname, elapsedtime : afloat, pseudoelement: apseudoelementname}); parameters the animationevent() constructor also inherits arguments from event(). type a domstring representing the name of the type of the animationevent. it is case-sensitive and can be: 'animationstart', 'animationend', or 'animationiteration'. ...
AudioBufferSourceNode - Web APIs
rly stringent timing accuracy requirements, such as for sounds that must match a specific rhythm and can be kept in memory rather than being played from disk or the network. to play sounds which require accurate timing but must be streamed from the network or played from disk, use a audioworkletnode to implement its playback. ...
AudioContext.close() - Web APIs
the close() method of the audiocontext interface closes the audio context,
releasing any system audio resources that it uses. closed contexts cannot have new nodes created, but can decode audio data, create buffers, etc. this function does not automatically
release all audiocontext-created objects, unless other references have been
released as well; however, it will forcibly
release any system audio resources that might prevent additional audiocontexts from being created and used, suspend the progression of audio time in the audio context, and stop processing audio data. the returned promise resolves when all audiocontext-creation-blocking resources have been
released. this method throws an invalid_state_err exception if called on an offlineaudiocontext. syntax var audioctx = new audioco...
AudioContext.getOutputTimestamp() - Web APIs
the two values are as follows: audiotimestamp.contexttime: the time of the sample frame currently being rendered by the audio output device (i.e., output audio stream position), in the same units and origin as the context's audiocontext.currenttime. basically, this is the time after the audio context was first created. ...
AudioContextOptions.latencyHint - Web APIs
2; var latencyhint = audiocontextoptions.latencyhint; value the preferred maximum latency for the audiocontext. there are two ways this value can be specified. the best way to specify the preferred latency is to use a value form the string enum audiocontextlatencycategory. in fact, the default value of latencyhint is "interactive" (meaning the browser should try to use the lowest possible and
reliable latency it can). the value can also be specified as a double-precision floating-point value, specifying the preferred maximum latency in seconds. this provides more precise control over the balance between audio latency and device energy usage. to determine the actual latency of the context after creating it, check the value of the context's baselatency property. specifications ...
CanvasRenderingContext2D.drawWindow() - Web APIs
ered to the screen. drawwindow_async_decode_images 0x10 do not synchronously decode images - draw what we have. example this method draws a snapshot of the contents of a dom window into the canvas. for example, ctx.drawwindow(window, 0, 0, 100, 200, 'rgb(255,255,255)'); ... would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels
relative to the top-left of the viewport, on a white background, into the canvas. by specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower). it is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of...
CanvasRenderingContext2D.rotate() - Web APIs
ise in radians. you can use degree * math.pi / 180 to calculate a radian from a degree. the rotation center point is always the canvas origin. to change the center point, you will need to move the canvas by using the translate() method. examples rotating a shape this example rotates a rectangle by 45°. note that the center of rotation is the top-left corner of the canvas, and not a location
relative to any shape. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // point of transform origin ctx.arc(0, 0, 5, 0, 2 * math.pi); ctx.fillstyle = 'blue'; ctx.fill(); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fill...
CanvasRenderingContext2D.shadowColor - Web APIs
non-zero, as well. syntax ctx.shadowcolor = color; color a domstring parsed as a css <color> value. the default value is fully-transparent black. examples adding a shadow to shapes this example adds a shadow to two squares; the first one is filled, and the second one is stroked. the shadowcolor property sets the shadows' color, while shadowoffsetx and shadowoffsety set their position
relative to the shapes. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 10; ctx.shadowoffsety = 10; // filled rectangle ctx.fillrect(20, 20, 100, 100); // stroked rectangle ctx.linewidth = 6; ctx.strokerect(170, 20, 100, 100); result shadows on trans...
CanvasRenderingContext2D.textAlign - Web APIs
for example, if textalign is "center", then the text's left edge will be at x - (textwidth / 2). syntax ctx.textalign = "left" || "right" || "center" || "start" || "end"; options possible values: "left" the text is left-aligned. "right" the text is right-aligned. "center" the text is centered. "start" the text is aligned at the normal start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales). ...
CanvasRenderingContext2D - Web APIs
canvasrenderingcontext2d.webkitimagesmoothingenabled use canvasrenderingcontext2d.imagesmoothingenabled instead. blink only canvasrenderingcontext2d.iscontextlost() inspired by the same webglrenderingcontext method it returns true if the canvas context has been lost, or false if not. webkit only canvasrenderingcontext2d.webkitbackingstorepixelratio the backing store size in
relation to the canvas element. see high dpi canvas. canvasrenderingcontext2d.webkitgetimagedatahd intended for hd backing stores, but removed from canvas specifications. canvasrenderingcontext2d.webkitputimagedatahd intended for hd backing stores, but removed from canvas specifications. gecko only prefixed apis canvasrenderingcontext2d.mozcurrenttransform sets or gets the cur...
Applying styles and colors - Web APIs
le: var lineargradient = ctx.createlineargradient(0, 0, 150, 150); var radialgradient = ctx.createradialgradient(75, 75, 0, 75, 75, 100); once we've created a canvasgradient object we can assign colors to it by using the addcolorstop() method. gradient.addcolorstop(position, color) creates a new color stop on the gradient object. the position is a number between 0.0 and 1.0 and defines the
relative position of the color in the gradient, and the color argument must be a string representing a css <color>, indicating the color the gradient should reach at that offset into the transition. you can add as many color stops to a gradient as you need. below is a very simple linear gradient from white to black. var lineargradient = ctx.createlineargradient(0, 0, 150, 150); lineargradient.addc...
Transformations - Web APIs
out having to manually adjust coordinates in the fillrect() function. this makes it a little easier to understand and use. in the draw() function, we call the fillrect() function nine times using two for loops. in each loop, the canvas is translated, the rectangle is drawn, and the canvas is returned back to its original state. note how the call to fillrect() uses the same coordinates each time,
relying on translate() to adjust the drawing position. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { ctx.save(); ctx.fillstyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; ctx.translate(10 + j * 50, 10 + i * 50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); ...
CharacterData - Web APIs
the characterdata abstract interface represents a node object that contains characters. this is an abstract interface, meaning there aren't any object of type characterdata: it is implemented by other interfaces, like text, comment, or processinginstruction which aren't abstract. ...
Clients.claim() - Web APIs
at this results in your service worker controlling pages that loaded regularly over the network, or possibly via a different service worker. syntax await clients.claim(); parameters none. return value a promise that resolves to undefined. 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. working draft initial definition. ...
Clipboard - Web APIs
ontaining the clipboard's text once it's available. write() writes arbitrary data to the system clipboard. this asynchronous operation signals that it's finished by resolving the returned promise. writetext() writes text to the system clipboard, returning a promise which is resolved once the text is fully copied into the clipboard. clipboard availability the asynchronous clipboard api is a
relatively recent addition, and the process of implementing it in browsers is not yet complete. due to both potential security concerns and technical complexities, the process of integrating this api is happening gradually in most browsers. for example, firefox does not yet support the "clipboard-read" and "clipboard-write" permissions, so access to the methods that access and change the contents of...
ClipboardEvent() - Web APIs
syntax var clipboardevent = new clipboardevent(type[, options]); parameters the clipboardevent() constructor also inherits arguments from event(). type is a domstring representing the name of the type of the clipboardevent. it is case-sensitive and can be: 'copy', 'cut', or 'paste'. options optional options are as follows: clipboarddata: a datatransfer containing the data concerned by the clipboard event. ...
ClipboardEvent - Web APIs
constructor clipboardevent() creates a clipboardevent event with the given parameters. properties also inherits properties from its parent event. clipboardevent.clipboarddata read only is a datatransfer object containing the data affected by the user-initiated cut, copy, or paste operation, along with its mime type. methods no specific methods; inherits methods from its parent event. ...
Clipboard API - Web APIs
ass editor. since readtext() (and read(), for that matter) returns an empty string if the clipboard isn't text, this code is safe. interfaces clipboard secure context provides an interface for reading and writing text and data to or from the system clipboard. the specification refers to this as the 'async clipboard api.' clipboardevent secure context represents events providing information
related to modification of the clipboard, that is cut, copy, and paste events. the specification refers to this as the 'clipboard event api'. clipboarditem secure context represents a single item format, used when reading or writing data. specifications specification status comment clipboard api and events working draft initial definition. ...
Comment - Web APIs
the comment interface represents textual notations within markup; although it is generally not visually shown, such comments are available to be read in the source view. comments are represented in html and xml as content between '<!--' and '-->'. in xml, the character sequence '--' cannot be used within a comment. ...
DocumentOrShadowRoot.elementsFromPoint() - Web APIs
it operates in a similar way to the elementfrompoint() method. syntax const elements = document.elementsfrompoint(x, y); parameters x the horizontal coordinate of a point. y the vertical coordinate of a point. return value an array of element objects. ...
DocumentOrShadowRoot.getSelection() - Web APIs
e a javascript string property or method such as length or substr directly on a selection object results in an error if it does not have that property or method and may return unexpected results if it does. to use a selection object as a string, call its tostring() method directly: var selectedtext = selobj.tostring(); selobj is a selection object. selectedtext is a string (selected text).
related objects you can call window.getselection(), which works identically to document.getselection(). it is worth noting that currently getselection() doesn't work on the content of <input> elements in firefox. htmlinputelement.setselectionrange()) could be used to work around this. notice also the difference between selection and focus. document.activeelement returns the focused element. speci...
DocumentOrShadowRoot.msElementsFromRect() - Web APIs
val] type: nodelist example to find all of the elements under a given point, use mselementsfrompoint(x, y). to find all of the elements which intersect a rectangle, use mselementsfromrect(top, left, width, height). 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. see also advanced hit testing apis demo for mselementsfrompoint() and mselementsfromrect() microsoft api extensions ...
DocumentOrShadowRoot.nodeFromPoint() - Web APIs
currently this method is only implemented in firefox, and only available to chrome code. syntax var node = document.nodefrompoint(x, y); parameters x a double representing the horizontal coordinate of a point. y a double representing the vertical coordinate of a point. returns a node object. ...
DocumentOrShadowRoot.nodesFromPoint() - Web APIs
currently this method is only implemented in firefox, and only available to chrome code. syntax var nodes = document.nodesfrompoint(x, y); parameters x the horizontal coordinate of a point. y the vertical coordinate of a point. returns an array of node objects. ...
DocumentTimeline.DocumentTimeline() - Web APIs
new instance of the documenttimeline object associated with the active document of the current browsing context. syntax var sharedtimeline = new documenttimeline(options); parameters options an object specifying options for the new timeline. currently the only supported option is the origintime member which specifies the zero time for the documenttimeline as a real number of milliseconds
relative to the navigationstart moment of the active document for the current browsing context. examples we could share a single documenttimeline among multiple animations, thus allowing us to manipulate just that group of animations via their shared timeline. this bit of code would start all the cats animating 500 milliseconds into their animations: var cats = document.queryselectorall('.sharedt...
Events and the DOM - Web APIs
there is an excellent diagram that clearly explains the three phases of event flow through the dom in the dom level 3 events draft. ...
DragEvent - Web APIs
o create a useful datatransfer object from script, since datatransfer objects have a processing and security model that is coordinated by the browser during drag-and-drops. dragevent() creates a synthetic and untrusted dragevent. event types drag this event is fired when an element or text selection is being dragged. dragend this event is fired when a drag operation is being ended (by
releasing a mouse button or hitting the escape key). dragenter this event is fired when a dragged element or text selection enters a valid drop target. dragexit this event is fired when an element is no longer the drag operation's immediate selection target. dragleave this event is fired when a dragged element or text selection leaves a valid drop target. dragover this event is fired continuo...
DynamicsCompressorNode() - Web APIs
k-rate. its nominal range is [0, 1]. knee: a decibel value representing the range above the threshold where the curve smoothly transitions to the "ratio" portion. its default value is 30. this parameter is k-rate. its nominal range is [0, 40]. ratio: the amount of db change in input for a 1 db change in output. its default value is 12. this parameter is k-rate. its nominal range is [1, 20].
release: the amount of time (in seconds) to increase the gain by 10db. its default value is 0.250. this parameter is k-rate. its nominal range is [0, 1]. threshold: the decibel value above which the compression will start taking effect. its default value is -24. this parameter is k-rate. its nominal range is [-100, 0]. specifications specification status comment web a...
DynamicsCompressorNode.attack - Web APIs
into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); sourc...
DynamicsCompressorNode.knee - Web APIs
into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); sourc...
DynamicsCompressorNode.ratio - Web APIs
into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); sourc...
DynamicsCompressorNode.threshold - Web APIs
into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); sourc...
EffectTiming.duration - Web APIs
tly, a value of "auto" is the same as specifying 0.0. this is a forwards-compatiblity measure since in the future, "auto" will be expanded to take into account the duration of any child effects. consider using "auto" rather than 0 if that makes sense. exceptions typeerror the specified value is either a string other than "auto", a number less than zero, nan, or some other type of object enti
rely. examples in the pool of tears example, each tear is passed a random duration via its timing object: // randomizer function var getrandommsrange = function(min, max) { return math.random() * (max - min) + min; } // loop through each tear tears.foreach(function(el) { // animate each tear el.animate( tearsfalling, { delay: getrandommsrange(-1000, 1000), // randomized fo...
FetchEvent - Web APIs
lows us to provide a response to this fetch. constructor fetchevent() creates a new fetchevent object. this constructor is not typically used. the browser creates these objects itself and provides them to fetch event callbacks. properties inherits properties from its ancestor, event. fetchevent.clientid read only the id of the same-origin client that initiated the fetch. fetchevent.p
reloadresponse read only a promise for a response, or undefined if this fetch is not a navigation, or navigation p
reload is not enabled. fetchevent.replacesclientid read only the id of the client that is being replaced during a page navigation. fetchevent.resultingclientid read only the id of the client that replaces the previous client during a page navigation. fetchevent.request read only ...
File.type - Web APIs
var name = files[i].name; var type = files[i].type; alert("filename: " + name + " , type: " + type); } } note: based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type. it is assumed based on the file extension; a png image file renamed to .txt would give "text/plain" and not "image/png". moreover, file.type is generally
reliable only for common file types like images, html documents, audio and video. uncommon file extensions would return an empty string. client configuration (for instance, the windows registry) may result in unexpected values even for common types. developers are advised not to
rely on this property as a sole validation scheme. specifications specification status comment ...
FileError - Web APIs
t want to set up a web server, you can bypass the security restriction on chrome. just start chrome with the --allow-file-access-from-files flag. use the flag only for testing purposes. attribute attribute type description code unsigned short the most appropriate error code for the condition. see error codes for possible values. error codes note: do not
rely on the numeric values of the constants, which might change as the specifications continue to change. use the constant names instead. constant value description encoding_err 5 the url is malformed. make sure that the url is complete and valid. invalid_modification_err 9 the modification requested is not allowed. for example, the app might be trying to...
FileException - Web APIs
tostring()); } try { //error is thrown if "log.txt" already exists. var fileentry = fs.root.getfile('log.txt', {create: true, exclusive:true}0; } catch (e) { onerrror(e); } the sample code was borrowed from html5rocks attribute attribute type description code unsigned short the most appropriate error code for the condition. constants note: do not
rely on the numeric values of the constants, which might change as the specifications continue to change. use the constant names instead. constant value description encoding_err 5 the url is malformed. make sure that the url is complete and valid. invalid_modification_err 9 the modification requested is not allowed. examples of invalid modifications inclu...
FileReader.error - Web APIs
in chrome 48+/firefox 58+ this property returns a domexception because domerror has been removed from the dom standard. ...
FileSystem - Web APIs
y on any file system entry. some browsers offer additional apis to create and manage file systems, such as chrome's requestfilesystem() method. this interface will not grant you access to the users filesystem. instead you will have a "virtual drive" within the browser sandbox. if you want to gain access to the users filesystem you need to invoke the user by eg. installing a chrome extension. the
relevant chrome api can be found here. basic concepts there are two ways to get access to a filesystem object: you can directly ask for one representing a sandboxed file system created just for your web app directly by calling window.requestfilesystem(). if that call is successful, it executes a callback handler, which receives as a parameter a filesystem object describing the file system. you...
FileSystemDirectoryEntry - Web APIs
rties of its own, but inherits properties from its parent interface, filesystementry. methods this interface inherits methods from its parent interface, filesystementry. createreader() creates a filesystemdirectoryreader object which can be used to read the entries in this directory. getdirectory() returns a filesystemdirectoryentry object representing a directory located at a given path,
relative to the directory on which the method is called. getfile() returns a filesystemfileentry object representing a file located within the directory's hierarchy, given a path
relative to the directory on which the method is called. obsolete methods removerecursively() deletes a directory and all of its contents, including the contents of subdirectories. this has been removed from the spec...
FileSystemEntry - Web APIs
file removed.'); }, onerror); }, onerror); }, onerror); properties this interface provides the following properties. filesystem read only a filesystem object representing the file system in which the entry is located. fullpath read only a usvstring object which provides the full, absolute path from the file system's root to the entry; it can also be thought of as a path which is
relative to the root directory, prepended with a "/" character. isdirectory read only a boolean which is true if the entry represents a directory; otherwise, it's false. isfile read only a boolean which is true if the entry represents a file. if it's not a file, this value is false. name read only a usvstring containing the name of the entry (the final part of the path, after the last "/" ch...
FileSystemEntrySync - Web APIs
; domstring tourl(); void remove() raises (fileexception); directoryentrysync getparent(); attributes attribute type description filesystem readonly filesystemsync the file system where the entry resides. fullpath readonly domstring the full absolute path from the root to the entry. an absolute path is a
relative path from the root directory, prepended with a '/'. isdirectory readonly boolean true if filesystementrysync is a directory. isfile readonly boolean true if the filesystementrysync is a file. name readonly domstring the name of the entry, excluding the path leading to it. methods getmetadata() look up metadata about this entry. [ tod...
FileSystemFlags.create - Web APIs
ack, as appropriate. true true path exists the errorcallback is called with an appropriate error, such as fileerror.path_exists_err. true true path doesn't exist the file or directory is created, then a filesystemfileentry or a filesystemdirectoryentry is passed to the successcallback, as appropriate. [1] when create is false, the value of exclusive is ir
relevant and ignored. specifications specification status comment file and directory entries apithe definition of 'filesystemflags' in that specification. draft initial specification. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/...
FileSystemFlags.exclusive - Web APIs
ack, as appropriate. true true path exists the errorcallback is called with an appropriate error, such as fileerror.path_exists_err. true true path doesn't exist the file or directory is created, then a filesystemfileentry or a filesystemdirectoryentry is passed to the successcallback, as appropriate. [1] when create is false, the value of exclusive is ir
relevant and ignored. specifications specification status comment file and directory entries apithe definition of 'filesystemflags' in that specification. draft initial specification. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/...
FileSystemFlags - Web APIs
ack, as appropriate. true true path exists the errorcallback is called with an appropriate error, such as fileerror.path_exists_err. true true path doesn't exist the file or directory is created, then a filesystemfileentry or a filesystemdirectoryentry is passed to the successcallback, as appropriate. [1] when create is false, the value of exclusive is ir
relevant and ignored. specifications specification status comment file and directory entries apithe definition of 'filesystemflags' in that specification. draft initial specification. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/...
FocusEvent() - Web APIs
the focusevent() constructor returns a newly created focusevent object with an optional eventtarget. when the event has both a source and a destination, the
relatedtarget value must be set to the other target. syntax var focusevent = new focusevent(typearg[, focuseventinit]); properties the focusevent() constructor also inherits arguments from uievent() and from event(). typearg is a domstring representing the name of the event. focuseventinit optional is a focuseventinit dictionary, having the following fields: "
relatedtarget", optional and defaulting to null, is an eventtarget representing the secondary target of a focusevent. the focuseventinit dictionary also accepts fields from the uieventinit and eventinit dictionaries. specifications specification ...
IDBCursorWithValue - Web APIs
ation to asynchronously process all the records in the cursor's range. you can have an unlimited number of cursors at the same time. you always get the same idbcursorwithvalue object representing a given cursor. operations are performed on the underlying index or object store. note: this feature is available in web workers. ...
IDBDatabase - Web APIs
u do in indexeddb always happens in the context of a transaction, representing interactions with data in the database. all objects in indexeddb — including object stores, indexes, and cursors — are tied to a particular transaction. thus, you cannot execute commands, access data, or open anything outside of a transaction. ...
IDBFactory.deleteDatabase() - Web APIs
teobjectstore(), which does throw an exception if the named object store does not exist. optionsnon-standard in gecko, since version 26, you can include a non-standard optional storage parameter that specifies whether you want to delete a permanent (the default value) indexeddb, or an indexeddb in temporary storage (aka shared pool.) return value a idbopendbrequest on which subsequent events
related to this request are fired. 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 ...
IDBFactory.open() - Web APIs
storage attribute is deprecated and will soon be removed from gecko. you should use storagemanager.persist() to get persistent storage instead. note: you can find out more information on the different available storage types, and how firefox handles client-side data storage, at browser storage limits and eviction criteria. return value a idbopendbrequest object on which subsequent events
related to this request are fired. exceptions this method may raise a domexception of the following types: exception description typeerror the value of version is zero or a negative number or not a number. example example of calling open with the current specification's version parameter: var request = window.indexeddb.open("todolist", 4); in the following cod...
IDBIndex.count() - Web APIs
ndex interface returns an idbrequest object, and in a separate thread, returns the number of records within a key range. note: this feature is available in web workers. syntax var request = myindex.count(); var request = myindex.count(key); parameters key optional the key or key range that identifies the record to be counted. return value a idbrequest object on which subsequent events
related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbindex's transaction is inactive. dataerror the key or key range provided contains an invalid key. invalidstateerror the idbindex has been deleted or removed. exa...
IDBIndex.get() - Web APIs
of the request object: this returns the record the key is associated with. note: this feature is available in web workers. syntax var request = myindex.get(key); parameters key optional a key or idbkeyrange that identifies the record to be retrieved. if this value is null or missing, the browser will use an unbound key range. return value an idbrequest object on which subsequent events
related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbindex's transaction is inactive. dataerror the key or key range provided contains an invalid key. invalidstateerror the idbindex has been deleted or removed. exa...
IDBIndex.getAll() - Web APIs
the records to retrieve. if this value is null or missing, the browser will use an unbound key range. count optional the number records to return. if this value exceeds the number of records in the query, the browser will only retrieve the first item. if it is lower than 0 or greater than 232-1 a typeerror exception will be thrown. return value an idbrequest object on which subsequent events
related to this operation are fired. exceptions this method may raise a domexception of the following types: exception description transactioninactiveerror this idbindex's transaction is inactive. invalidstateerror the idbindex has been deleted or removed. a typeerror exception is thrown if the count parameter is not between 0 and 232-1 included. exa...
IDBIndex.getAllKeys() - Web APIs
ng the keys to retrieve. if this value is null or missing, the browser will use an unbound key range. count optional the number records to return. if this value exceeds the number of records in the query, the browser will only retrieve the first item. if it is lower than 0 or greater than 232-1 a typeerror exception will be thrown. return value an idbrequest object on which subsequent events
related to this operation are fired. exceptions this method may raise a domexception of the following types: exception description transactioninactiveerror this idbindex's transaction is inactive. invalidstateerror the idbindex has been deleted or removed. a typeerror exception is thrown if the count parameter is not between 0 and 232-1 included...
IDBIndex.getKey() - Web APIs
ect. note that this doesn't return the whole record as idbindex.get does. note: this feature is available in web workers. syntax var request = myindex.getkey(key); parameters key optional a key or idbkeyrange that identifies a record to be retrieved. if this value is null or missing, the browser will use an unbound key range. return value an idbrequest object on which subsequent events
related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbindex's transaction is inactive. dataerror the key or key range provided contains an invalid key. invalidstateerror the idbindex has been deleted or removed. exa...
IDBIndex.openCursor() - Web APIs
nge); var request = myindex.opencursor(range, direction); parameters range optional a key or idbkeyrange to use as the cursor's range. if nothing is passed, this will default to a key range that selects all the records in this object store. direction optional the cursor's direction. see idbcursor constants for possible values. return value an idbrequest object on which subsequent events
related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbindex's transaction is inactive. typeerror the value for the direction parameter is invalid. dataerror the key or key range provided contains an invalid key. i...
IDBIndex.openKeyCursor() - Web APIs
); var request = myindex.openkeycursor(range, direction); parameters range optional a key or idbkeyrange to use as the cursor's range. if nothing is passed, this will default to a key range that selects all the records in this object store. direction optional the cursor's direction. see idbcursor constants for possible values. return value an idbrequest object on which subsequent events
related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbindex's transaction is inactive. typeerror the value for the direction parameter is invalid. dataerror the key or key range provided contains an invalid key. i...
IDBObjectStore.add() - Web APIs
g records, you should use the idbobjectstore.put method instead. note: this feature is available in web workers. syntax var request = objectstore.add(value); var request = objectstore.add(value, key); parameters value the value to be stored. key optional the key to use to identify the record. if unspecified, it results to null. returns an idbrequest object on which subsequent events
related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description readonlyerror the transaction associated with this operation is in read-only mode. transactioninactiveerror this idbobjectstore's transaction is inactive. dataerror any of the following conditions apply: ...
IDBObjectStore.clear() - Web APIs
aring an object store consists of removing all records from the object store and removing all records in indexes that reference the object store. to remove only some of the records in a store, use idbobjectstore.delete passing a key or idbkeyrange. note: this feature is available in web workers. syntax var request = objectstore.clear(); returns an idbrequest object on which subsequent events
related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description readonlyerror the transaction associated with this operation is in read-only mode. transactioninactiveerror this idbobjectstore's transaction is inactive. example in the following code snippet, we open a read...
IDBObjectStore.count() - Web APIs
ange. if no arguments are provided, it returns the total number of records in the store. note: this feature is available in web workers. syntax var request = objectstore.count(); var request = objectstore.count(query); parameters query optional a key or idbkeyrange object that specifies a range of records you want to count. return value an idbrequest object on which subsequent events
related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror this idbobjectstore has been deleted. transactioninactiveerror this idbobjectstore's transaction is inactive. dataerror the specified key or key range is invalid. example in this simpl...
installChrome - Web APIs
installchrome installs new skin or locale packages in netscape 6 and mozilla. method of installtrigger object syntax int installchrome( type, url, name ) parameters the installchrome method has the following parameters: type type can be installtrigger.skin or installtrigger.locale. url url is a string containing a full or
relative url to download name name is displayed in the dialog, but is also used to *select* the theme somust match exactly the name in the internal manifest.rdf file. returns a boolean value indicating false if the software install feature has been turned off, and true if it's on. note that this return value does not indicate anything about the success of the installation. description installchrome is a special method for ...
IntersectionObserverEntry.time - Web APIs
syntax var time = intersectionobserverentry.time; value a domhighrestimestamp which indicates the time at which the target element experienced the intersection change described by the intersectionobserverentry. the time is specified in milliseconds since the creation of the containing document. ...
IntersectionObserverEntry - Web APIs
ow the transition is from intersecting to not-intersecting. intersectionobserverentry.rootbounds read only returns a domrectreadonly for the intersection observer's root. intersectionobserverentry.target read only the element whose intersection with the root changed. intersectionobserverentry.time read only a domhighrestimestamp indicating the time at which the intersection was recorded,
relative to the intersectionobserver's time origin. methods this interface has no methods. specifications specification status comment intersection observerthe definition of 'intersectionobserverentry' in that specification. working draft initial definition ...
KeyboardEvent.code - Web APIs
o it doesn't get handled twice event.preventdefault(); }, true); try it out to ensure that keystrokes go to the sample code, click inside the black game play field below before pressing keys. there are several ways this code can be made better. most real games would watch for keydown events, start motion when that happens, and stop the motion when the corresponding keyup occurs, instead of
relying on key repeats. that would allow both smoother and faster movement, but would also allow the player to be moving and steering at the same time. transitions or animations could be used to make the ship's movement smoother, too. specification specification status comment ui eventsthe definition of 'keyboardevent.code' in that specification. working draft init...
Location: assign() - Web APIs
calling the method is different from the origin of the page originally described by the location object, mostly when the script is hosted on a different domain. if the provided url is not valid, a domexception of the syntax_error type is thrown. syntax location.assign(url); parameters url is a domstring containing the url of the page to navigate to. example // navigate to the location.
reload article window.location.assign('/docs/web/api/location/
reload'); specifications specification status comment html living standardthe definition of 'location.assign()' in that specification. living standard no change from html5. html5the definition of 'location.assign()' in that specification. recommendation initial definition. ...
Location: replace() - Web APIs
calling the method is different from the origin of the page originally described by the location object, mostly when the script is hosted on a different domain. if the provided url is not valid, a domexception of the syntax_error type is thrown. syntax object.replace(url); parameters url is a domstring containing the url of the page to navigate to. examples // navigate to the location.
reload article by replacing this page window.location.replace('/docs/web/api/location.
reload'); specifications specification status comment html living standardthe definition of 'location.replace()' in that specification. living standard no change from html5. html5the definition of 'location.replace()' in that specification. recommendation initial defini...
LockedFile.abort() - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. summary the abort method is used to
release the lock on the lockedfile object, making it inactive: its active property is set to false and all ongoing operations are canceled. note: when an ongoing operation is canceled, there is no rollback (it is not a database transaction), therefore the file can be corrupted if the canceled operation was performing some writing. syntax var request = instanceoflockedfile.abort(); return a filerequest object to handle the success or failure of the operation...
MediaDeviceInfo.groupId - Web APIs
the groupid readonly property of the mediadeviceinfo interface returns a domstring that is a group identifier. two devices have the same group identifier if they belong to the same physical device; for example, a monitor with both a built-in camera and microphone. syntax var groupid = mediadeviceinfo.groupid; value a domstring which uniquely identifies the group of
related devices to which this device belongs. specifications specification status comment media capture and streamsthe definition of 'groupid' in that specification. candidate recommendation initial definition. examples in this example, we assemble a list of the devices which are part of the same group as a given device. this might be used to produce a user interface that gathers associa...
MediaKeyMessageEvent.messageType - Web APIs
the mediakeymessageevent.messagetype read-only property indicates the type of message. it may be one of license-request, license-renewal, license-
release, or individualization-request. syntax var messagetype = mediakeymessageevent.messagetype; specifications specification status comment encrypted media extensionsthe definition of 'messagetype' in that specification. recommendation initial definition ...
close() - Web APIs
then, it returns a promise. syntax mediakeysession.close().then(function() { ... }); return value a promise. ...
MediaKeySession.onkeystatuseschange - Web APIs
the onkeystatuseschange property of the mediakeysession is an event handler, fired whenever a keystatuschange event ocurrs, denoting there has been a change in the keys or their statuses within a session. this interface inherits from the extendableevent interface. ...
MediaKeySession.onmessage - Web APIs
the onmessage property of the mediakeysession is an event handler, fired whenever a mediakeymessageevent occurs, denoting a message is generated by the content decryption module. this interface inherits from the extendableevent interface. ...
MediaKeySession - Web APIs
onkeystatuseschange sets the eventhandler called when there has been a change in the keys in a session or their statuses. mediakeysession.onmessage sets the eventhandler called when the content decryption module has generated a message for the session. methods mediakeysession.close() returns a promise after notifying the current media session is no longer needed and that the cdm should
release any resources associated with this object and close it. mediakeysession.generaterequest() returns a promise after generating a media request based on initialization data. mediakeysession.load() returns a promise that resolves to a boolean value after loading data for a specified session object. mediakeysession.remove() returns a promise after removing any session data associated with...
MediaPositionState.playbackRate - Web APIs
diasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls. syntax let positionstate = { playbackrate: rate }; let playbackrate = positionstate.playbackrate; value a floating-point value specifying a multiplier corresponding to the current
relative rate at which the media being performed is playing. a value of 1.0 indicates the media is playing forward at normal speed, while higher values indicate that the media is being played faster than normal. lower values indicate the media is being played more slowly. negative values can be specified to indicate the media is playing in reverse, with decreasing values then indicating faster and fa...
MediaPositionState - Web APIs
duration of the media currently being performed. properties duration a floating-point value giving the total duration of the current media in seconds. this should always be a positive number, with positive infinity (infinity) indicating media without a defined end, such as a live stream. playbackrate a floating-point value indicating the rate at which the media is being played, as a ratio
relative to its normal playback speed. thus, a value of 1 is playing at normal speed, 2 is playing at double speed, and so forth. negative values indicate that the media is playing in reverse; -1 indicates playback at the normal speed but backward, -2 is double speed in reverse, and so on. position a floating-point value indicating the last reported playback position of the media in seconds. this m...
MediaRecorder.mimeType - Web APIs
was specified when creating the mediarecorder object, or, if none was specified, which was chosen by the browser. this is the file format of the file that would result from writing all of the recorded data to disk. keep in mind that not all codecs are supported by a given container; if you write media using a codec that is not supported by a given media container, the resulting file may not work
reliably if at all when you try to play it back. see our media type and format guide for information about container and codec support across browsers. note: the term "mime type" is officially considered to be historical; these strings are now officially known as media types. mdn web docs content uses the terms interchangeably. syntax var mimetype = mediarecorder.mimetype value the mime media ...
MediaRecorder.onerror - Web APIs
so happens when a mediastreamtrack within the stream is marked as isolated due to the peeridentity constraint on the source stream. notsupportederror an attempt was made to instantiate a mediarecorder using a mime type that isn't supported on the user's device; one or more of the requested container, codecs, or profiles as well as other information may be invalid. unknownerror an non-security
related error occurred that cannot otherwise be categorized. recording stops, the mediarecorder's state becomes inactive, one last dataavailable event is sent to the mediarecorder with the remaining received data, and finally a stop event is sent. these errors may occur either directly because of a call to a mediarecorder method, or indirectly due to a problem arising during the recording process. ...
MediaRecorderErrorEvent() - Web APIs
that describes the error that occurred. this object's name property should indicate the name of the error that occurred. the other fields may or may not be present. some user agents add to the error object other properties that provide information such as stack dumps, the name of the javascript file and the line number where the error occurred, and other debugging aids, but you should not
rely on this information in a production environment. specifications specification status comment mediastream recordingthe definition of 'mediarecordererrorevent()' in that specification. working draft initial definition. ...
MediaSession.setActionHandler() - Web APIs
seekforward seeks forward from the current position through the media. seekto moves the playback position to the specified time within the media. skipad skips past the currently playing advertisement or commercial. this action may or may not be available, depending on the platform and user agent, or may be disabled due to subscription level or other circumstances. stop halts playback enti
rely. examples adding action handlers this example implements seek forward and backward actions for an audio player by setting up the seekforward and seekbackward action handlers. let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon. audio.currenttime = math.min(audio.currenttime + ...
Media Session action types - Web APIs
y with a value of true. this lets the browser know it can take steps to optimize repeated operations, and is likely to result in improved performance. skipad skips past the currently playing advertisement or commercial. this action may or may not be available, depending on the platform and user agent, or may be disabled due to subscription level or other circumstances. stop halts playback enti
rely. description a media session action may be generated by any media session action source; these sources include anything from ui widgets within the browser itself to media control keys on the user's keyboard to buttons on the user's headset or earbuds. examples adding action handlers this example implements seek forward and backward actions for an audio player by setting up the seekforward ...
MediaSessionActionDetails.action - Web APIs
seekforward seeks forward from the current position through the media. seekto moves the playback position to the specified time within the media. skipad skips past the currently playing advertisement or commercial. this action may or may not be available, depending on the platform and user agent, or may be disabled due to subscription level or other circumstances. stop halts playback enti
rely. specifications specification status comment media session standardthe definition of 'mediasessionactiondetails.action' in that specification. draft initial definition. ...
MediaSessionActionDetails.seekOffset - Web APIs
ional value passed into the action handler callback to provide the number of seconds the seekforward and seekbackward actions should move the playback time by. syntax let mediasessionactiondetails = { seekoffset: deltatimeinseconds }; let deltatime = mediasessionactiondetails.seekoffset; value a floating-point value indicating the time delta in seconds by which to move the playback position
relative to its current timestamp. if the offset isn't specified, the user agent will choose an appropriate offset automatically. this is typically in the range of five to ten seconds. specifications specification status comment media session standardthe definition of 'mediasessionactiondetails.seekoffset' in that specification. draft initial definition. ...
MediaSessionActionDetails - Web APIs
y with a value of true. this lets the browser know it can take steps to optimize repeated operations, and is likely to result in improved performance. skipad skips past the currently playing advertisement or commercial. this action may or may not be available, depending on the platform and user agent, or may be disabled due to subscription level or other circumstances. stop halts playback enti
rely. description a media session action may be generated by any media session action source; these sources include anything from ui widgets within the browser itself to media control keys on the user's keyboard to buttons on the user's headset or earbuds. examples adding action handlers this example implements seek forward and backward actions for an audio player by setting up the seekforward ...
MediaSource.endOfStream() - Web APIs
eam() method of the mediasource interface signals the end of the stream. syntax mediasource.endofstream(endofstreamerror); parameters endofstreamerror optional a domstring representing an error to throw when the end of the stream is reached. the possible values are: network: terminates playback and signals that a network error has occured. this can be used create a custom error handler
related to media streams. for example, you might have a function that handles media chunk requests, separate from other network requests. when you make an xmlhttprequest call for a media chunk, and onabort or onerror triggers, you might want to call endofstream('network'), display a descriptive message in the ui, and maybe retry the network request immediately or wait until the network is back up (vi...
MediaSource - Web APIs
the mediasource interface of the media source extensions api represents a source of media data for an htmlmediaelement object. a mediasource object can be attached to a htmlmediaelement to be played in the user agent. ...
MediaStream.ended - Web APIs
the ended read-only property of the mediastream interface returns a boolean value which is true if the stream has been completely read, or false if the end of the stream has not been reached. this value once the ended event has been fired. this property has been removed from the specification; you should instead
rely on the ended event or check the value of mediastreamtrack.readystate to see if its value is "ended" for the track or tracks you want to ensure have finished playing. syntax var hasended = mediastream.ended; value a boolean value that returns true if the end of the stream has been reached. specifications no longer part of any specification. this property was part of earlier drafts of the media capture and streams specification. ...
MediaStreamAudioSourceNode - Web APIs
ssentially, in alphabetical or lexicographical order, for ids which are simple alphanumeric strings). the first track, then, is the track whose id comes first when the tracks' ids are all sorted by unicode code point. however, it's important to note that the rule establishing this ordering was added long after this interface was first introduced into the web audio api. as such, you can't easily
rely on the order matching between any two browsers or browser versions. this is why it is typically wiser to use mediastreamtrackaudiosourcenode, which provides similar capabilities but was better-defined upon being added to the specification, so it's more
reliable. example in this example, we grab a media (audio + video) stream from navigator.getusermedia, feed the media into a <video> element to...
MediaStreamEvent - Web APIs
two events of this type can be thrown: addstream and removestream. properties a mediastreamevent being an event, this event also implements these properties. mediastreamevent.stream read only contains the mediastream containing the stream associated with the event. constructors mediastreamevent() returns a new mediastreamevent. it takes two parameters, the first being a domstring representing the type of the event; the second a dictionary containing the mediastream it refers to. methods a mediastreamevent being an event, this event also implements these properties. there is no specific mediastreamevent method. ...
MediaStreamTrack.enabled - Web APIs
if the track is allowed to render the source stream or false if it is not. this can be used to intentionally mute a track. when enabled, a track's data is output from the source to the destination; otherwise, empty frames are output. in the case of audio, a disabled track generates frames of silence (that is, frames in which every sample's value is 0). for video tracks, every frame is filled enti
rely with black pixels. the value of enabled, in essence, represents what a typical user would consider the muting state for a track, whereas the muted property indicates a state in which the track is temporarily unable to output data, such as a scenario in which frames have been lost in transit. note: if the track has been disconnected, the value of this property can be changed, but has no effect...
MediaStreamTrack.stop() - Web APIs
oelem.srcobject = null; } this works by obtaining the video element's stream from its srcobject property. 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. finally, srcobject is set to null to sever the link to the mediastream object so it can be
released. specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.stop()' in that specification. candidate recommendation initial specification. ...
MediaStreamTrack - Web APIs
other track types may exist as well. properties in addition to the properties listed below, mediastreamtrack has constrainable properties which can be set using applyconstraints() and accessed using getconstraints() and getsettings(). see capabilities, constraints, and settings to learn how to correctly work with constrainable properties. not doing so correctly will result in your code being un
reliable. mediastreamtrack.contenthint a string that may be used by the web application to provide a hint as to what type of content the track contains to guide how it should be treated by api consumers. mediastreamtrack.enabled a boolean whose value of true if the track is enabled, that is allowed to render the media source stream; or false if it is disabled, that is not rendering the media so...
MediaStreamTrackEvent - Web APIs
the mediastreamtrackevent interface represents events which indicate that a mediastream has had tracks added to or removed from the stream through calls to media stream api methods. these events are sent to the stream when these changes occur. ...
MediaTrackConstraints.logicalSurface - Web APIs
e of the returned mediatracksettings object's logicalsurface object. for example, if your app needs to know if the selected display surface is a logical one: let islogicalsurface = displaystream.getvideotracks()[0].getsettings().logicalsurface; following this code, islogicalsurface is true if the display surface contained in the stream is a logical surface; that is, one which may not be enti
rely onscreen, or may even be enti
rely offscreen. specifications specification status comment screen capturethe definition of 'mediatrackconstraints.logicalsurface' in that specification. working draft initial specification. ...
MediaTrackSettings.logicalSurface - Web APIs
syntax islogicalsurface = mediatracksettings.logicalsurface; value a boolean value which is true if the video track in the stream of captured video is taken from a logical display surface. ...
MediaTrackSupportedConstraints.logicalSurface - Web APIs
gicalsurfacesupported = supportedconstraints.logicalsurface; value a boolean value which is true if the logicalsurface constraint is supported by the device and user agent. example this method sets up the constraints object specifying the options for the call to getdisplaymedia(). it adds the logicalsurface constraint (requesting that only logical display surfaces—those which may not be enti
rely visible onscreen—be included among the options available to the user) only if it is known to be supported by the browser. capturing is then started by calling getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem. async function capture() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediao...
Transcoding assets for Media Source Extensions - Web APIs
pport across all modern browsers, while others don't. to convert our sample media from a quicktime mov container to an mp4 container, we can use ffmpeg. because the audio codec in the mov container is already aac and the video codec is h.264, we can instruct ffmpeg not to perform transcoding. instead, it will just copy the audio and video tracks over without performing any transcoding, which is
relatively faster than having to transcode. $ ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy bunny.mp4 $ ls bunny.mp4 trailer_1080p.mov checking fragmentation in order to properly stream mp4, we need the asset to be an iso bmf format mp4. without proper fragmentation, any given mp4 file is not guaranteed to work with mse. this means that metadata within the container is spread out and no...
Capabilities, constraints, and settings - Web APIs
re on the user agent it's running on. figuring this out has often been difficult, and has usually involved looking at some combination of which user agent (or browser) you're running on, which version it is, looking to see if certain objects exist, trying to see whether various things work or not and determining what errors occur, and so forth. the result has been a lot of very fragile code, or a
reliance on libraries which figure this stuff out for you, then implement polyfills to patch the holes in the implementation on your behalf. the twin concepts of constraints and capabilities let the browser and web site or app exchange information about what constrainable properties the browser's implementation supports and what values it supports for each one. this article discusses capabilities an...
MouseEvent.button - Web APIs
the mouseevent.button read-only property indicates which button was pressed on the mouse to trigger the event. this property only guarantees to indicate which buttons are pressed during events caused by pressing or
releasing one or multiple buttons. as such, it is not
reliable for events such as mouseenter, mouseleave, mouseover, mouseout or mousemove. users may change the configuration of buttons on their pointing device so that if an event's button property is zero, it may not have been caused by the button that is physically left–most on the pointing device; however, it should behave as if the left button was clicked in the standard button layout. note: do not confuse this property with the mouseevent.buttons property, which indicates which buttons are pressed for all mouse events t...
MouseEvent.buttons - Web APIs
example, if the secondary (2) and auxilary (4) buttons are pressed simultaneously, the value is 6 (i.e., 2 + 4). note: do not confuse this property with the mouseevent.button property. the mouseevent.buttons property indicates the state of buttons pressed during any kind of mouse event, while the mouseevent.button property only guarantees the correct value for mouse events caused by pressing or
releasing one or multiple buttons. syntax var buttonspressed = instanceofmouseevent.buttons return value a number representing one or more buttons. for more than one button pressed simultaneously, the values are combined (e.g., 3 is primary + secondary). 0 : no button or un-initialized 1 : primary button (usually the left button) 2 : secondary button (usually the right button) 4 : aux...
MouseEvent.pageY - Web APIs
this property takes into account any vertical scrolling of the page. syntax var pos = event.pagey; originally, this property was defined as a long integer. the cssom view module redefined it as a double float. see the browser compatibility section for details. examples var pagey = event.pagey; specifications specification status comment css object model (cssom) view modulethe definition of 'pagey' in that specification. ...
MouseScrollEvent - Web APIs
constants delta modes constant value description horizontal_axis 0x01 the event is caused by horizontal wheel operation. vertical_axis 0x02 the event is caused by vertical wheel operation. ...
msRealTime - Web APIs
able low-latency playback on the media element. this proprietary property is specific to internet explorer and microsoft edge. syntax ptr = object.msrealtime; value boolean value set to true indicates that low-latency playback will be enabled on the media element. low-latency playback is useful in communication and some gaming scenarios, but is more demanding on power consumption and less
reliable for smooth media playback. you must set the msrealtime before setting the src property in code. msrealtime should not be used in non-real-time or non-communication scenarios, such as audio and/or video playback, as this can affects playback startup latency of audio and video playback. ...
MutationObserver.disconnect() - Web APIs
stop watching for mutations. the observer can be reused by calling its observe() method again. syntax mutationobserver.disconnect() parameters none. return value undefined. note: all notifications of mutations that have already been detected, but not yet reported to the observer, are discarded. usage notes if the element being observed is removed from the dom, and then subsequently
released by the browser's garbage collection mechanism, the mutationobserver is likewise deleted. example this example creates an observer, then disconnects from it, leaving it available for possible reuse. const targetnode = document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true } const observer = new mutationobserver(callback); observer.observe(t...
NamedNodeMap - Web APIs
ng to the given name. namednodemap.setnameditem() replaces, or adds, the attr identified in the map by the given name. namednodemap.removenameditem() removes the attr identified by the given map. namednodemap.item() returns the attr at the given index, or null if the index is higher or equal to the number of nodes. namednodemap.getnameditemns() returns a attr identified by a namespace and
related local name. namednodemap.setnameditemns() replaces, or adds, the attr identified in the map by the given namespace and
related local name. namednodemap.removenameditemns() removes the attr identified by the given namespace and
related local name. specifications specification status comment domthe definition of 'namednodemap' in that specification. living stan...
OrientationSensor - Web APIs
that inherit from it. if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. interfaces based on orientationsensor below is a list of interfaces based on the orientationsensor interface. absoluteorientationsensor
relativeorientationsensor properties orientationsensor.quaternion returns a four element array whose elements contain the components of the unit quaternion representing the device's orientation. methods orientationsensor.populatematrix() populates the given object with the rotation matrix based on the latest sensor reading. the rotation maxtrix is shown below. examples basic example ...
OscillatorNode.detune - Web APIs
createoscillator(); oscillator.detune.setvalueattime(100, audioctx.currenttime); // value in cents note: though the audioparam returned is read-only, the value it represents is not. value an a-rate audioparam. example the following example shows basic usage of an audiocontext to create an oscillator node. for applied examples/information, check out our violent theremin demo (see app.js for
relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.detune.setvalueattime(100, audioctx.currenttime); // value in cents oscillator.start()...
OscillatorNode.frequency - Web APIs
dioctx.createoscillator(); oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz note: though the audioparam returned is read-only, the value it represents is not. value an a-rate audioparam. example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for
relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status comment web aud...
OscillatorNode.onended - Web APIs
he oscillatornode interface is used to set the event handler for the ended event, which fires when the tone has stopped playing. syntax var oscillator = audioctx.createoscillator(); oscillator.onended = function() { ... }; example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for
relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.value = 440; // value in hertz oscillator.start(); // start the tone playing oscillator.stop(5); // the tone will stop again in 5 seconds. oscillator.onende...
OscillatorNode.start() - Web APIs
e time (in seconds) when the oscillator should start, in the same coordinate system as audiocontext's currenttime attribute. if a value is not included or is less than currenttime, the oscillator starts playing immediately. example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for
relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(3000, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status comment web au...
OscillatorNode.stop() - Web APIs
resenting the audio context time when the oscillator should stop. if a value is not included, it defaults to 0. if the time is equal to or before the current audio context time, the oscillator will stop playing immediately. example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for
relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.connect(audioctx.destination); oscillator.start(); oscillator.stop(audioctx.currenttime + 2); // stop 2 seconds after the current time specifications specification status commen...
OscillatorNode.type - Web APIs
veform. doing so automatically sets the type to custom. exceptions invalidstateerror the value custom was specified. to set a custom waveform, just call setperiodicwave(). doing so automatically sets the type for you. example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for
relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status comment web aud...
OscillatorNode - Web APIs
lete oscillatornode.setwavetable() method. oscillatornode.start() specifies the exact time to start playing the tone. oscillatornode.stop() specifies the time to stop playing the tone. examples the following example shows basic usage of an audiocontext to create an oscillator node and to start playing a tone on it. for an applied example, check out our violent theremin demo (see app.js for
relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.connect(audioctx.destination); oscillator.start(); specifications specifica...
PageTransitionEvent - Web APIs
the pagetransitionevent event object is available inside handler functions for the pageshow and pagehide events, fired when a document is being loaded or unloaded. ...
PannerNode.setOrientation() - Web APIs
in such a case, a sound pointing away from the listener can be very quiet or even silent. the three parameters x, y and z are unitless and describe a direction vector in 3d space using the right-hand cartesian coordinate system. the default value of the direction vector is (1, 0, 0). ...
PannerNode.setPosition() - Web APIs
the setposition() method's default value of the position is (0, 0, 0). syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setposition(0,0,0); returns void. ...
PannerNode.setVelocity() - Web APIs
the setvelocity() method of the pannernode interface defines the velocity vector of the audio source — how fast it is moving and in what direction. this method was removed from the specification because of gaps in its design and implementation problems. 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. as the vector controls both the direction of travel and its velocity, the three parameters x, y and z are expressed in meters per second. the default value of the velocity vector is (0, 0, 0). syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setvelocity(0,0,17); returns void. example in the following example, you can see an example of how the createpan...
PannerNode - Web APIs
or distances greater than this the volume will be reduced based on rollofffactor and distancemodel. pannernode.rollofffactor a double value describing how quickly the volume is reduced as the source moves away from the listener. this value is used by all distance models. methods inherits methods from its parent, audionode. pannernode.setposition() defines the position of the audio source
relative to the listener (represented by an audiolistener object stored in the audiocontext.listener attribute.) pannernode.setorientation() defines the direction the audio source is playing in. pannernode.setvelocity() defines the velocity vector of the audio source — how fast it is moving and in what direction. in a previous version of the specification, the pannernode had a velocity ...
PaymentRequest: paymentmethodchange event - Web APIs
g credit card being used to service the apple pay request, and compute and return an paymentdetailsupdate object that specifies changes to be applied to the paymentrequest in order to add any service fees that the payment method might require. before the event handler returns, it calls the event's paymentmethodchangeevent.updatewith.updatewith() method to integrate the changes into the request.
related events merchantvalidation, shippingaddresschange, shippingoptionchange, and payerdetailchange specifications specification status comment payment request apithe definition of 'paymentmethodchange' in that specification. candidate recommendation ...
PaymentRequest: shippingaddresschange event - Web APIs
bubbles no cancelable no interface paymentrequestupdateevent event handler property onshippingaddresschange usage notes depending on the browser, the shipping address information may be redacted for privacy reasons. that is, the paymentaddress which contains the shipping address may have some portions of its content altered, obscured, or left out enti
rely in order to prevent identifying the user without their consent (since if they choose to have you ship products to them, you'll need their address). example in this example, a handler for the shippingaddresschange event is set up to validate that the address meets requirements set by the web application. const paymentrequest = new paymentrequest(methoddata, details, options); paymentrequest.a...
PaymentRequestUpdateEvent - Web APIs
those events are: shippingaddresschange secure context dispatched whenever the user changes their shipping address. also available using the onshippingaddresschange event handler property. shippingoptionchange secure context dispatched whenever the user changes a shipping option. also available using the onshippingoptionchange event handler property. constructor paymentrequestupdateevent() secure context creates a new paymentrequestupdateevent object. ...
PaymentResponse.complete() - Web APIs
one of the following: success the payment was successfully processed. the user agent may or may not present some form of "payment successful" indication to the user. fail the payment was not successfully processed. the failure may or may not be announced to the user by the user agent, depending on its design. unknown the success or failure status of the transaction is unknown or ir
relevant, and the user agent should not present any notification, even if it normally would. this is the default value. note: in older versions of the specification, an empty string, "", was used instead of unknown to indicate a completion without a known result state. see the browser compatibility section below for details. return value a promise which resolves with no input value once ...
Payment processing concepts - Web APIs
e transaction. merchant validation some payment handlers use merchant validation, which is the process of validating the identity of a merchant in some way, usually using some form of cryptographic challenge. if the merchant doesn't successfully validate, it's not allowed to use the payment handler. the exact validation technology depends on the payment handler, and merchant validation is enti
rely optional. in the end, the only thing that the web site or app is responsible for is fetching the merchant's validation key and passing it into the event's complete() method. paymentrequest.onmerchantvalidation = function(event) { event.complete(fetchvalidationdata(event.validationurl)); } in this example, fetchvalidationdata() is a function which loads the payment handler specific identifyi...
performance.clearMarks() - Web APIs
an entry type of "mark" will be removed. return value void example the following example shows both uses of the clearmarks() method. // create a small helper to show how many performancemark entries there are. function logmarkcount() { console.log( "found this many entries: " + performance.getentriesbytype("mark").length ); } // create a bunch of marks. performance.mark("squir
rel"); performance.mark("squir
rel"); performance.mark("monkey"); performance.mark("monkey"); performance.mark("dog"); performance.mark("dog"); logmarkcount() // "found this many entries: 6" // delete just the "squir
rel" performancemark entries. performance.clearmarks('squir
rel'); logmarkcount() // "found this many entries: 4" // delete all of the performancemark entries. performance.clearmarks(); ...
performance.mark() - Web APIs
workers. syntax performance.mark(name); arguments name a domstring representing the name of the mark. if the name given to this method already exists in the performancetiming interface, syntaxerror is thrown. return value void example the following example shows how to use mark() to create and retrieve performancemark entries. // create a bunch of marks. performance.mark("squir
rel"); performance.mark("squir
rel"); performance.mark("monkey"); performance.mark("monkey"); performance.mark("dog"); performance.mark("dog"); // get all of the performancemark entries. const allentries = performance.getentriesbytype("mark"); console.log(allentries.length); // 6 // get all of the "monkey" performancemark entries. const monkeyentries = performance.getentriesbyname("monkey"); console...
Performance.timing - Web APIs
this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performance.timing read-only property returns a performancetiming object containing latency-
related performance information. this property is not available in workers. syntax timinginfo = performance.timing; specifications specification status comment navigation timing level 2 working draft initial definition. ...
PerformanceFrameTiming - Web APIs
means the browser should process a frame in about 16.7ms. an application can register a performanceobserver for "frame" performance entry types and the observer can retrieve data about the duration of each frame event. this information can be used to help identify areas that take too long to provide a good user experience. ...
PerformanceMark - Web APIs
performancemark is an abstract interface for performanceentry objects with an entrytype of "mark". entries of this type are created by calling performance.mark() to add a named domhighrestimestamp (the mark) to the browser's performance timeline. ...
PerformanceMeasure - Web APIs
performancemeasure is an abstract interface for performanceentry objects with an entrytype of "measure". entries of this type are created by calling performance.measure() to add a named domhighrestimestamp (the measure) between two marks to the browser's performance timeline. ...
PerformanceNavigation.type - Web APIs
the legacy performancenavigation.type read-only property returns an unsigned short containing a constant describing how the navigation to this page was done. possible values are: value constant name meaning 0 type_navigate the page was accessed by following a link, a bookmark, a form submission, a script, or typing the url in the address bar. 1 type_
reload the page was accessed by clicking the
reload button or via the location.
reload() method. 2 type_back_forward the page was accessed by navigating into the history. 255 type_reserved any other way. syntax type = performancenavigation.type; specifications specification status comment navigation timingthe definition of 'performance...
PerformanceNavigation - Web APIs
ad-only attribute. properties the performancenavigation interface doesn't inherit any properties. performancenavigation.type read only an unsigned short which indicates how the navigation to this page was done. possible values are: type_navigate (0) the page was accessed by following a link, a bookmark, a form submission, or a script, or by typing the url in the address bar. type_
reload (1) the page was accessed by clicking the
reload button or via the location.
reload() method. type_back_forward (2) the page was accessed by navigating into the history. type_reserved (255) any other way. performancenavigation.redirectcount read only an unsigned short representing the number of redirects done before reaching the page. methods the performance interface does...
PerformanceNavigationTiming.type - Web APIs
the type read-only property returns a string representing the type of navigation. 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.
reload navigation is through the browser's
reload operation or location.
reload(). back_forward navigation is through the browser's history traversal operation. prerender navigation is initiated by a prerender hint. this property is read only . syntax perfentry.type; return value a string which is one of the values listed above. example the following example illustrates this property's usage. function print_nav_timing_data() { // use gete...
PerformancePaintTiming - Web APIs
ruction. "paint" refers to conversion of the render tree to on-screen pixels. an application can register a performanceobserver for "paint" performance entry types and the observer can retrieve the times that paint events occur. use this information to help identify areas that take too long to provide a good user experience. ...
RTCDataChannel.id - Web APIs
; value an unsigned short value (that is, an integer between 0 and 65,535) which uniquely identifies the data channel. while the label property doesn't have to be unique, this id number is guaranteed to be unique among all data channels. additionally, known implementations of webrtc use the same id on both peers. a unique id makes it easier for your code to do its own out-of-band data channel-
related signaling. this can be also useful for logging and debugging purposes. example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); console.log("channel id: " + dc.id); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.id' in that specification. candid...
RTCDataChannel.label - Web APIs
the read-only rtcdatachannel property label returns a domstring containing a name describing the data channel. these labels are not required to be unique. you may use the label as you wish; you could use it to identify all the channels that are being used for the same purpose, by giving them all the same name. or you could give each channel a unique label for tracking purposes. it's enti
rely up to the design decisions made when building your site or app. a unique id can be found in the id property. a data channel's label is set when the channel is created by calling rtcpeerconnection.createdatachannel(). it cannot be changed after that. syntax var name = adatachannel.label; value a string identifier assigned by the web site or app when the data channel was created, as specified w...
RTCDataChannelEvent() - Web APIs
syntax var event = new rtcdatachannelevent(type, rtcdatachanneleventinit); parameters type a domstring which specifies the name of the event. there is only one type of rtcdatachannelevent, so this will always be "datachannel". rtcdatachanneleventinit a rtcdatachanneleventinit dictionary, which has following fields: "channel" of type rtcdatachannel, representing the data channel being concerned by the event. "bubbles", optional, inherited from eventinit. ...
RTCDataChannelEvent - Web APIs
the rtcdatachannelevent() constructor returns a new rtcdatachannelevent object, which represents a datachannel event. these events sent to an rtcpeerconnection when its remote peer is asking to open an rtcdatachannel between the two peers. you will ra
rely if ever construct an rtcdatachannelevent by hand; instead, the webrtc layer will generate and deliver them to you at the appropriate time. 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. constructorrtcdatachannelevent() the rtcdatachannelevent() constructor creates a new rtcdatachannelevent.propertiesalso inherits properties from: eventchannel read only the read-only property rt...
RTCIceCandidate.RTCIceCandidate() - Web APIs
of the fields is invalid, parsing of the string silently aborts without throwing an exception. the default value of candidate is the empty string, which indicates that the candidate is an "end-of-candidates" message. the following fields are initialized to null if they are not included in the rtcicecandidate.candidate property: foundation, component, priority , ip, protocol, port, type, tcptype,
relatedaddress, and
relatedport. note: parsing of the candidate string is performed using the candidate-attribute grammar from the webrtc specification. exceptions typeerror the specified rtcicecandidateinit has values of null in both the sdpmid and sdpmlineindex properties. usage notes this constructor does not do complete validation of the specified candidateinfo object or string. spec...
RTCIceCandidate.foundation - Web APIs
note: if port is null — and port is supported by the user agent — passing the candidate to addicecandidate() will fail, throwing an operationerror exception. ...
RTCIceCandidate.type - Web APIs
idate.ip property is in fact the true address of the remote peer. srflx the candidate is a server reflexive candidate; the ip indicates an intermediary address assigned by the stun server to represent the candidate's peer anonymously. prflx the candidate is a peer reflexive candidate; the ip is an intermediary address assigned by the stun server to represent the candidate's peer anonymously.
relay the candidate is a
relay candidate, obtained from a turn server. the
relay candidate's ip address is an address the turn server uses to forward the media between the two peers. if type is null, that information was missing from the candidate's a-line, which will cause rtcpeerconnection.addicecandidate() to throw an operationerror exception. example in this example, the candidate's type is...
RTCIceCandidate.usernameFragment - Web APIs
or which bits are random and what the remainder of the ufrag text are are left up to the browser implementation to decide. for example, a browser might choose to always use a 24-character ufrag in which bit 4 of each character is randomly selected between 0 and 1. another example: it might take a user-defined string and append three 8-bit random bytes to the end. or perhaps every character is enti
rely random. usage notes ice uses the usernamefragment and password to ensure message integrity. this avoids crosstalk among multiple ongoing ice sessions, but, more importantly, helps secure ice transactions (and all of webrtc by extension) against attacks that might try to inject themselves into an ice exchange. note: there is no api to obtain the ice password, for what should be fairly obvious...
RTCIceCandidateInit.usernameFragment - Web APIs
or which bits are random and what the remainder of the ufrag text are are left up to the browser implementation to decide. for example, a browser might choose to always use a 24-character ufrag in which bit 4 of each character is randomly selected between 0 and 1. another example: it might take a user-defined string and append three 8-bit random bytes to the end. or perhaps every character is enti
rely random. example ... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidateinit.usernamefragment' in that specification. candidate recommendation initial specification. ...
RTCIceCandidatePairStats.priority - Web APIs
tes is compared to the others, and the more likely a pair is to be selelcted for use. note: this property was removed from the specification as its value cannot be guaranteed to be accurately represented in a javascript number. you can calculcate its value using the algorithm described in rfc 5245, section 5.7.2 if you need this information and can accept the risk that the result may not be enti
rely accurate. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatepairstats.priority' in that specification. candidate recommendation initial specification. ...
RTCIceCandidatePairStats.transportId - Web APIs
the transportid property uniquely identifies the rtcicetransport that was inspected to obtain the transport-
related statistics contained in the rtcicecandidatepairstats object. syntax transportid = rtcicecandidatepairstats.transportid; value a domstring which uniquely identifies the rtcicetransport object from which the transport-
related data was obtained for the statistics contained in this rtcicecandidatepairstats object. the transport-
related statistics come from the rtctransportstats dictionary's properties. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatepairstats.transportid' in that specification. candidate recommendation initial specification. ...
RTCIceCandidatePairStats - Web APIs
sending stun requests and receiving responses to them, for all such requests made to date on this candidate pair. this includes botyh connectivity check and consent check requests. you can compute the average round trip time (rtt) by dividing this value by responsesreceived. transportid optional a domstring that uniquely identifies the rtcicetransport that was inspected to obtain the transport-
related statistics (as found in rtctransportstats) used in generating this object. obsolete properties the following properties have been removed from the specification and should no longer be used. you should update any existing code to avoid using them as soon as is practical. check the compatibility table for details on which browsers support them and in which versions. priority optional ...
RTCIceCandidateStats.address - Web APIs
y-qualified domain name can be used as well. when a domain name is specified, the first ip address selected for that address is used, even if the domain name maps to multiple ip addresses. syntax candidateaddress = rtcicecandidatestats.address; value either an ipv4 or ipv6 address or a fully-qualified domain name, which corresponds to the candidate. if the value of address is comprised enti
rely of digits from 0-9 with periods as separators, the value is interpreted as an ipv4 address. if the value is enti
rely comprised of hexadecimal digits and colon (":") characters, it is interpreted as an ipv6 address. otherwise, the address is presumed to be a fully-qualified domain name, which is resolved first using an aaaa record (assuming ipv6 is available), then using an a record (if no res...
RTCIceCandidateStats.candidateType - Web APIs
idate.ip property is in fact the true address of the remote peer. srflx the candidate is a server reflexive candidate; the ip indicates an intermediary address assigned by the stun server to represent the candidate's peer anonymously. prflx the candidate is a peer reflexive candidate; the ip is an intermediary address assigned by the stun server to represent the candidate's peer anonymously.
relay the candidate is a
relay candidate, obtained from a turn server. the
relay candidate's ip address is an address the turn server uses to forward the media between the two peers. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatestats.candidatetype' in that specification. candidate recommendation ...
RTCIceCandidateStats.deleted - Web APIs
the rtcicecandidatestats dictionary's deleted property indicates whether or not the candidate has been deleted or
released. syntax isdeleted = rtcicecandidatestats.deleted; value a boolean value indicating whether or not the candidate has been deleted or
released. if this value is true, the candidate described by the rtcicecandidatestats object is no longer under consideration. dthe exact meaning varies depending on the type of candidate: local candidate a value of true means the candidate has been deleted as described by rfc 5245: 8.3. host candidate a value of true indicates that the candidate's network resources have been
released. this generally mean sthat any associated socket(s) have been closed and
released. remote (turn) candidate a value of true means the candida...
RTCIceCandidateStats.mozLocalTransport - Web APIs
the non-standard mozilla extension to the rtcicecandidatestats dictionary, mozlocaltransport, has been supplanted by the standard
relayprotocol property. syntax instead of using mozlocaltransport, you should use code like this: localtransport = rtcicecandidatestats.
relayprotocol; specifications not part of any specification. ...
RTCIceCandidateStats.priority - Web APIs
scribed by the rtcicecandidatestats object. the value may be anywhere from 1 to 2,147,483,647. determining priority the ice specification describes how user agents and other software using webrtc should calculate the priority. ...
RTCIceCandidateStats.transportId - Web APIs
the rtcicecandidatestats dictionary's transportid property is a string that uniquely identifies the transport that produced the rtctransportstats from which information about this candidate was taken. syntax transportid = rtcicecandidatestats.transportid; value a domstring whose value uniquely identifies the transport from which any transport-
related information accumulated in the rtcicecandidatestats was taken. this can be used to compare candidates that would use the same transport, for example. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatestats.transportid' in that specification. candidate recommendation initial specification. ...
RTCIceCandidateType - Web APIs
idate.ip property is in fact the true address of the remote peer. srflx the candidate is a server reflexive candidate; the ip indicates an intermediary address assigned by the stun server to represent the candidate's peer anonymously. prflx the candidate is a peer reflexive candidate; the ip is an intermediary address assigned by the stun server to represent the candidate's peer anonymously.
relay the candidate is a
relay candidate, obtained from a turn server. the
relay candidate's ip address is an address the turn server uses to forward the media between the two peers. usage notes the rtcicecandidatetype enumeration is used by the type property of rtcicecandidate objects, as well as when reporting statistics on candidates using rtcicecandidatestats.candidatetype. specifications ...
RTCIceTransport.getLocalCandidates() - Web APIs
being delivered to the local client's code in an icecandidate event so that the client can forward the candidates to the remote peer. syntax localcandidates = rtcicetransport.getlocalcandidates(); parameters none. return value a javascript array containing one rtcicecandidate object for each candidate that has been identified so far during the ice candidate gathering session. you can't cor
relate these local candidates with matching remote candidates. to find the best match found so far, call rtcicetransport.getselectedcandidatepair(). 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. var localcandidates = pc.getsenders()[0].transport.t...
RTCIceTransport.getRemoteCandidates() - Web APIs
session, the ice agent places it in the list returned by this function. syntax remotecandidates = rtcicetransport.getremotecandidates(); parameters none. return value an array containing one rtcicecandidate object for each candidate that has been received so far from the remote peer during the current ice candidate gathering session. it's important to keep in mind that there's no way to cor
relate these remote candidates with compatible local candidates. to find the best match found so far, call rtcicetransport.getselectedcandidatepair(). 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. var remotecandidates = pc.getsenders()[0].transpo...
RTCInboundRtpStreamStats.fecPacketsReceived - Web APIs
ec packets which have been recieved from the remote peer during this rtp session. forward error correction uses an exclusive-or method to perform parity checks on the received data. by using the fec parity information to attempt to reconstruct damaged packets, it is possible to avoid the need to retransmit damaged packets, which in turn helps to reduce lag, or the need to skip damaged frames enti
rely. note: this counter may also be incremented when fec packets arrive in-band along with media content; this can happen with opus, for example. usage notes it's possible that a subset of the fec packets which have been received were discarded instead of being used. this can happen if the packets covered by the fec packets have already been received successfully or have already been reconstruc...
RTCInboundRtpStreamStats.perDscpPacketsReceived - Web APIs
the perdscppacketsreceived property of the rtcinboundrtpstreamstats dictionary is a record comprised of key/value pairs in which each key is a string representation of a differentiated services code point and the value is the number of packets received for that dcsp. note: not all operating systems make data available on a per-dscp basis, so this property shouldn't be
relied upon on those systems. syntax var perdscppacketsreceived = rtcinboundrtpstreamstats.perdscppacketsreceived; value a record comprised of string/value pairs. each key is the string representation of a single differentiated services code point (dscp)'s id number. note: due to network bleaching and remapping, the numbers seen on this record are not necessarily going to match the values as they were when the data was...
RTCInboundRtpStreamStats.sliCount - Web APIs
the higher this number is, the more the stream data is becoming corrupted between the sender and the receiver, requiring resends or dropping frames. syntax var slicount = rtcinboundrtpstreamstats.slicount; value an unsigned integer indicating the number of sli packets this receiver sent to the remote sender due to lost runs of macroblocks. a high value of slicount may be an indication of an un
reliable network. this is a very technical part of how video codecs work. for details, see rfc 4585: 6.3.2. note: this value is only present for video media. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcinboundrtpstreamstats.slicount' in that specification. candidate recommendation initial definition. ...
RTCInboundRtpStreamStats - Web APIs
properties the rtcinboundrtpstreamstats dictionary is based on the rtcreceivedrtpstreamstats dictionary, whose properties are also available. averagertcpinterval a floating-point value indicating the average rtcp interval between two consecutive compound rtcp packets. bytesreceived a 64-bit integer which indicats the total numer of bytes that have been received so far for this media source. ...
RTCOutboundRtpStreamStats.perDscpPacketsSent - Web APIs
the perdscppacketssent property of the rtcoutboundrtpstreamstats dictionary is a record comprised of key/value pairs in which each key is a string representation of a differentiated services code point and the value is the number of packets sent for that dcsp. note: not all operating systems make data available on a per-dscp basis, so this property shouldn't be
relied upon on those systems. syntax var perdscppacketssent = rtcoutboundrtpstreamstats.perdscppacketssent; value a record comprised of string/value pairs. each key is the string representation of a single differentiated services code point (dscp)'s id number. note: due to network bleaching and remapping, the numbers seen on this record are not necessarily going to match the values as they were when the data was sent. speci...
RTCOutboundRtpStreamStats - Web APIs
properties the rtcoutboundrtpstreamstats dictionary includes the following properties in addition to those it inherits from rtcsentrtpstreamstats, rtcrtpstreamstats, and rtcstats. averagertcpinterval a floating-point value indicating the average rtcp interval between two consecutive compound rtcp packets. fircount an integer value which indicates the total number of full intra request (fir) packets which this rtcrtpsender has sent to the remote rtcrtpreceiver. ...
RTCPeerConnection.addStream() - Web APIs
s().foreach(function(track) { pc.addtrack(track, stream); }); }); the newer addtrack() api avoids confusion over whether later changes to the track-makeup of a stream affects a peer connection (they do not). the exception is in chrome, where addstream() does make the peer connection sensitive to later stream changes (though such changes do not fire the negotiationneeded event). if you are
relying on the chrome behavior, note that other browsers do not have it. 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 ...
RTCPeerConnection.canTrickleIceCandidates - Web APIs
s whether or not the remote peer can accept trickled ice candidates. ice trickling is the process of continuing to send candidates after the initial offer or answer has already been sent to the other peer. this property is only set after having called rtcpeerconnection.setremotedescription(). ideally, your signaling protocol provides a way to detect trickling support, so that you don't need to
rely on this property. a webrtc browser will always support trickle ice. if trickling isn't supported, or you aren't able to tell, you can check for a falsy value for this property and then wait until the value of icegatheringstate changes to "completed" before creating and sending the initial offer. that way, the offer contains all of the candidates. syntax var cantrickle = rtcpeerconnection.cant...
RTCPeerConnection.close() - Web APIs
the rtcpeerconnection.close() method closes the current peer connection. syntax peerconnection.close(); this method has no parameters, and returns nothing. calling this method terminates the rtcpeerconnection's ice agent, ending any ongoing ice processing and any active streams. this also
releases any resources in use by the ice agent, including turn permissions. all rtcrtpsender objects are considered to be stopped once this returns (they may still be in the process of stopping, but for all intents and purposes, they're stopped). once this method returns, the signaling state as returned by rtcpeerconnection.signalingstate is closed. make sure that you delete all references to the previous rtcpeerconnection before attempting to create a new one that connects to the same remote peer,...
RTCPeerConnection.createDataChannel() - Web APIs
ure the data channel to suit your needs: ordered optional indicates whether or not messages sent on the rtcdatachannel are required to arrive at their destination in the same order in which they were sent (true), or if they're allowed to arrive out-of-order (false). default: true. maxpacketlifetime optional the maximum number of milliseconds that attempts to transfer a message may take in un
reliable mode. while this value is a 16-bit unsigned number, each user agent may clamp it to whatever maximum it deems appropriate. default: null. maxretransmits optional the maximum number of times the user agent should attempt to retransmit a message which fails the first time in un
reliable mode. while this value is a16-bit unsigned number, each user agent may clamp it to whatever maximum it deem...
RTCPeerConnection.getStats() - Web APIs
following errors: invalidaccesserror there is no rtcrtpsender or rtcrtpreceiver whose track matches the specified selector, or selector matches more than one sender or receiver. obsolete syntax previously, getstats() used success and failure callbacks to report the results to you, instead of using a promise. this version of getstats() is obsolete; in addition, the data it returns is enti
rely different from the current specification, and the form of that data was never documented. this form of getstats() has been or will soon be removed from most browsers; you should not use it, and should update existing code to use the new promise-based version. check the browser compatibility table to verify the state of this method. promise = rtcpeerconnection.getstats(selector, successcallback,...
RTCPeerConnection.iceConnectionState - Web APIs
matches for all components of the connection. it is, however, possible that the ice agent did find compatible connections for some components. "disconnected" checks to ensure that components are still connected failed for at least one component of the rtcpeerconnection. this is a less stringent test than "failed" and may trigger intermittently and resolve just as spontaneously on less
reliable networks, or during temporary disconnections. when the problem resolves, the connection may return to the "connected" state. "closed" the ice agent for this rtcpeerconnection has shut down and is no longer handling requests. example var pc = new rtcpeerconnection(); var state = pc.iceconnectionstate; specifications specification status comment ...
RTCPeerConnection: icecandidate event - Web APIs
hering": /* 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 know when the value of the rtcpeerconnection property icegatheringstate has been updated. if that value is now complete, you know that ice gathering has just ended. this is a more
reliable approach than looking at the individual ice messages for one indicating that the ice session is finished. examples this example creates a simple handler for the icecandidate event that uses a function called sendmessage() to create and send a reply to the remote peer through the signaling server. first, an example using addeventlistener(): pc.addeventlistener("icecandidate", ev => { if...
RTCPeerConnection.signalingState - Web APIs
is in the expected state when messages arrive can help avoid unexpected and avoidable failures. for example, if you receive an answer while the signalingstate isn't "have-local-offer", you know that something is wrong, since you should only receive answers after creating an offer but before an answer has been received and passed into rtcpeerconnection.setlocaldescription(). your code will be more
reliable if you watch for mismatched states like this and handle them gracefully. this value may also be useful during debugging, for example. in addition, when the value of this property changes, a signalingstatechange event is sent to the rtcpeerconnection instance. syntax var state = rtcpeerconnection.signalingstate; value the allowed values are those included in the enum rtcsignalingstate.
RTCPeerConnectionIceEvent - Web APIs
only one event is of this type: icecandidate. properties a rtcpeerconnectioniceevent being an event, this event also implements these properties. rtcpeerconnectioniceevent.candidate read only contains the rtcicecandidate containing the candidate associated with the event, or null if this event indicates that there are no further candidates to come. constructors rtcpeerconnectioniceevent() returns a new rtcpeerconnectioniceevent. ...
RTCRtpCodecParameters - Web APIs
. in addition to being the type of the rtcrtpparameters.codecs property, it's used when calling rtcrtptransceiver.setcodecpreferences() to configure a transceiver's codecs before beginning the offer/answer process to establish a webrtc peer connection. most of the fields in this property take values which are defined and maintained by the internet assigned numbers authority (iana). references to
relevant iana documents are provided in the see also section at the end of this article. properties payloadtype optional the rtp payload type used to identify this codec. mimetype optional the codec's mime media type and subtype specified as a domstring of the form "type/subtype". iana maintains a registry of valid mime types. clockrate optional an unsigned long integer value specifying the ...
RTCRtpContributingSource.audioLevel - Web APIs
ax var audiolevel = rtcrtpcontributingsource.audiolevel value a double-precision floating-point number which indicates the volume level of the audio in the most recently received rtp packet from the source described by the rtcrtpcontributingsource. this value, which is in the range 0.0 to 1.0, is on a linear scale and its value is defined in dbov, or decibels (overload). this is the amplitude
relative to the point at which clipping of the audio begins to occur. a value of 1.0 represents 0 dbov (maximum volume), a value of 0.0 represents silence, and a value of 0.5 represents approximately 6 db spl (decibels of sound pressure level) change in the sound pressure level from 0 dbov. for both rtcrtpcontributingsource and rtcrtpsynchronizationsource, the audio level is converted to this form f...
RTCRtpEncodingParameters - Web APIs
. other parameters may further constrain the bit rate, such as the value of maxframerate or transport or physical network limitations. maxframerate a double-precision floating-point value specifying the maximum number of frames per second to allow for this encoding. ptime an unsigned long integer value indicating the preferred duration of a media packet in milliseconds. this is typically only
relevant for audio encodings. the user agent will try to match this as well as it can, but there is no guarantee. rid a domstring which, if set, specifies an rtp stream id (rid) to be sent using the rid header extension. this parameter cannot be modified using setparameters(). its value can only be set when the transceiver is first created. scaleresolutiondownby only used for senders whose track'...
RTCRtpSendParameters.encodings - Web APIs
. other parameters may further constrain the bit rate, such as the value of maxframerate or transport or physical network limitations. maxframerate a double-precision floating-point value specifying the maximum number of frames per second to allow for this encoding. ptime an unsigned long integer value indicating the preferred duration of a media packet in milliseconds. this is typically only
relevant for audio encodings. the user agent will try to match this as well as it can, but there is no guarantee. rid a domstring which, if set, specifies an rtp stream id (rid) to be sent using the rid header extension. this parameter cannot be modified using setparameters(). its value can only be set when the transceiver is first created. scaleresolutiondownby only used for senders whose track'...
RTCRtpSender.setStreams() - Web APIs
rameters mediastream or [mediastream...] optional an mediastream object—or an array of multiple mediastream objects—identifying the streams to which the rtcrtpsender's track belongs. if this parameter isn't specified, no new streams will be associated with the track. return value none. exceptions invalidstateerror the sender's connection is closed. description setstreams() is pu
rely additive. it doesn't remove the track from any streams; it simply adds it to new ones. if you specify streams to which the track already belongs, that stream is unaffected. once the track has been added to all of the streams, renegotiation of the connection will be triggered by the negotiationneeded event being dispatched to the rtcpeerconnection to which the sender belongs. example this exam...
RTCRtpStreamStats.sliCount - Web APIs
. an sli packet is used by a decoder to let the encoder know that it's detected corruption of one or more consecutive macroblocks in the received media. syntax var slicount = rtcrtpstreamstats.slicount; value an unsigned long integer indicating the number of sli packets the sender received from the receiver due to lost runs of macroblocks. a high value of slicount may be an indication of an un
reliable network. for technical details, see rfc 4585: 6.3.2. note: this value is sent by the sender to the receiver and is only present for video media. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcinboundrtpstreamstats: slicount' in that specification. candidate recommendation initial definition. ...
RTCRtpStreamStats.ssrc - Web APIs
r than that any two objects with the same ssrc value refer to the same source. see rfc 3550, section 8 for additional information about ssrc. note: the specification includes an example that generates values for ssrc using md5. while not part of the standard, exactly, it is a good mechanism that may be used by some browsers; others may use other methods, such as random number generators. do not
rely upon these values meaning anything other than "these objects are associated with the same source." specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcrtpstreamstats.ssrc' in that specification. candidate recommendation initial definition. ...
RTCRtpStreamStats - Web APIs
rned by the rtcpeerconnection.getstats(), rtcrtpsender.getstats(), and rtcrtpreceiver.getstats() methods to provide detailed statistics about webrtc connectivity. while the dictionary has a base set of properties that are present in each of these cases, there are also additional properties added depending on which interface the method is called on. rtcrtpstreamstats is the base class for all rtp-
related statistics reports. it's based on rtcstats and adds the following additional fields. note: this interface was called rtcrtpstreamstats until a specification update in the spring of 2017. check the browser compatibility table to know if and when the name change was implemented in specific browsers. properties the rtcrtpstreamstats dictionary is based on rtcstats, and inherits its properti...
RTCRtpSynchronizationSource.voiceActivityFlag - Web APIs
he stream is using the voice activity detection feature; see the rtcofferoptions flag voiceactivitydetection. syntax var voiceactivity = rtcrtpsynchronizationsource.voiceactivityflag value a boolean value which is true if voice activity is present in the most recently received rtp packet played by the associated source, or false if voice activity is not present. this property is omitted enti
rely if voice activity detection is not enabled on the source, or if the rfc 6464 extension header isn't present. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'voiceactivityflag' in that specification. candidate recommendation initial definition. ...
SVGVKernElement - Web APIs
the svgvkernelement interface corresponds to the <vkern> elements. object-oriented access to the attributes of the <vkern> element via the svg dom is not possible. ...
SVGZoomAndPan - Web APIs
the svgzoomandpan interface is used to reflect the zoomandpan attribute, and is mixed in to other interfaces for elements that support this attribute. ...
Screen.availLeft - Web APIs
(setx, sety); notes in most cases, this property returns 0. if you work with two screens this property, evaluated on the right screen, returns the width of the left one in pixels (thereby indicating the x coordinate of the left edge of the screen on the right). on windows, this property depends on which screen is set as your primary, returning the x coordinate of the leftmost available pixel
relative to the primary screen. that is, the primary screen's left edge always has the x coordinate 0, even if it's not the leftmost screen. if the secondary screen is to the left of the primary screen, it has a negative x coordinate to compensate: [1] [2] - on left screen availleft returns 0, on the right screen it returns the width of the left one [2] [1] - on left screen availleft returns -width...
Selection API - Web APIs
nt handler that is called when a selectionchange event is fired on the current object (i.e. when the selected text range changes). specifications specification status comment selection apithe definition of 'selection' in that specification. working draft the selection api specification is based on the html editing apis specification and focuses on the selection-
related functionality. html editing apisthe definition of 'selection' in that specification. editor's draft initial (older) definition, which is now outdated. browser compatibility selection the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a ...
SensorErrorEvent - Web APIs
constructor sensorerrorevent.sensorerrorevent() creates a new sensorerrorevent object. properties sensorerrorevent.error read only returns the domexception object passed in the event's contructor. ...
Server-sent events - Web APIs
e demo using php specification specification status comment html living standardthe definition of 'server-sent events' in that specification. living standard see also tools eventsource polyfill for node.js remy sharp’s eventsource polyfill yaffle’s eventsource polyfill rick waldron’s jquery plugin intercooler.js declarative sse support
related topics ajax javascript websockets other resources a twitter like application powered by server-sent events and its code on github. html5 and server-sent events server-sent events using asp.net ...
ServiceWorker - Web APIs
) can be associated with the same service worker, each through a unique serviceworker object. a serviceworker object is available in the serviceworkerregistration.active property, and the serviceworkercontainer.controller property — this is a service worker that has been activated and is controlling the page (the service worker has been successfully registered, and the controlled page has been
reloaded.) the serviceworker interface is dispatched a set of lifecycle events — install and activate — and functional events including fetch. a serviceworker object has an associated serviceworker.state,
related to its lifecycle. properties the serviceworker interface inherits properties from its parent, worker. serviceworker.scripturl read only returns the serviceworker serialized scrip...
ServiceWorkerContainer.getRegistration() - Web APIs
l matches the provided document url. the method returns a promise that resolves to a serviceworkerregistration or undefined. syntax serviceworkercontainer.getregistration(scope).then(function(serviceworkerregistration) { ... }); parameters scope optional a unique identifier for a service worker registration — the scope url of the registration object you want to return. this is usually a
relative url. return value a promise that resolves to a serviceworkerregistration object or undefined. example navigator.serviceworker.getregistration('/app').then(function(registration) { if(registration){ document.queryselector('#status').textcontent = 'serviceworkerregistration found.'; } }); specifications specification status comment service workersthe de...
ServiceWorkerContainer.register() - Web APIs
ers scripturl the url of the service worker script. the registered service worker file needs to have a valid javascript mime type. options optional an object containing registration options. currently available options are: scope: a usvstring representing a url that defines a service worker's registration scope; that is, what range of urls a service worker can control. this is usually a
relative url. it is
relative to the base url of the application. by default, the scope value for a service worker registration is set to the directory where the service worker script is located. see the examples section for more information on how it works. return value a promise that resolves with a serviceworkerregistration object. examples the examples described here should be taken toget...
ServiceWorkerContainer - Web APIs
rol (e.g. sent via client.postmessage()). this can be used to react to sent messages earlier, even before that page's content has finished loading. examples the example below first checks to see if the browser supports service workers. if supported, the code registers the service worker and determines if the page is actively controlled by the service worker. if it isn't, it prompts the user to
reload the page so the service worker can take control. the code also reports any registration failures. if ('serviceworker' in navigator) { // register a service worker hosted at the root of the // site using the default scope. navigator.serviceworker.register('/sw.js').then(function(registration) { console.log('service worker registration succeeded:', registration); // at this point...
ServiceWorkerGlobalScope: contentdelete event - Web APIs
contentdelete event of the serviceworkerglobalscope interface is fired when an item is removed from the indexed content via the user agent. bubbles no cancelable no interface contentindexevent event handler property oncontentdelete examples the following example uses a contentdelete event handler to remove cached content
related to the deleted index item. 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.oncontentde...
ServiceWorkerGlobalScope.oncontentdelete - Web APIs
the oncontentdelete property of the serviceworkerglobalscope interface is an event handler fired when an item is removed from the indexed content via the user agent. syntax serviceworkerglobalscope.oncontentdelete = function(event) { ... }; examples the following example uses a contentdelete event handler to remove cached content
related to the deleted index item. 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. unknown initial defini...
ServiceWorkerGlobalScope: pushsubscriptionchange event - Web APIs
the application's control. this may occur if the subscription was refreshed by the browser, but it may also happen if the subscription has been revoked or lost. bubbles no cancelable no interface pushsubscriptionchangeevent event handler property onpushsubscriptionchange usage notes although examples demonstrating how to share subscription
related information with the application server tend to use fetch(), this is not necessarily the best choice for real-world use, since it will not work if the app is offline, for example. consider using another method to synchronize subscription information between your service worker and the app server, or make sure your code using fetch() is robust enough to handle cases where attempts to exchange...
ServiceWorkerGlobalScope - Web APIs
equests are not allowed from within a service worker — only asynchronous requests, like those initiated via the fetch() method, can be used. this interface inherits from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers. ...
ServiceWorkerRegistration - Web APIs
installed. this is initially set to null. serviceworkerregistration.active read only returns a service worker whose state is activated. this is initially set to null. an active worker will control a serviceworkerclient if the client's url falls within the scope of the registration (the scope option set when serviceworkercontainer.register is first called.) serviceworkerregistration.navigationp
reload read only returns the instance of navigationp
reloadmanager associated with the current service worker registration. serviceworkerregistration.pushmanager read only returns a reference to the pushmanager interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. serviceworkerregistration.sync read only return...
StyleSheet.ownerNode - Web APIs
the ownernode property of the stylesheet interface returns the node that associates this style sheet with the document. this is usually an html <link> or <style> element, but can also return a processing instruction node in the case of <?xml-stylesheet ?>. syntax noderef = stylesheet.ownernode example <html lang="en"> <head> <link
rel="stylesheet" href="example.css"> </head> <body> <button onclick="alert(document.stylesheets[0].ownernode)">show example.css’s ownernode</button> </body> </html> // displays "object htmllinkelement" notes for style sheets that are included by other style sheets, such as with @import, the value of this property is null. specifications specification status comment css object model (cssom)the definition of 'styleshe...
SubtleCrypto.deriveBits() - Web APIs
lasslist.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 secu
rely const generatealiceskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); const generatebobskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); promise.all([generatealiceskeypair, generatebobskeypair]).then(values => { const aliceskeypair = values[0]; ...
SyncEvent - Web APIs
the syncevent interface represents a sync action that is dispatched on the serviceworkerglobalscope of a serviceworker. this interface inherits from the extendableevent interface. ...
TaskAttributionTiming - Web APIs
the taskattributiontiming interface of the long tasks api returns information about the work involved in a long task and its associate frame context. the frame context, also called the container, is the iframe, embed or object that is being implicated, on the whole, for a long task. ...
Text - Web APIs
markup, it is parsed into information items and text nodes that form its children. new documents have a single text node for each block of text. over time, more text nodes may be created as the document's content changes. the node.normalize() method merges adjacent text objects back into a single node for each block of text. ...
TextRange - Web APIs
a textrange object represents a fragment of text in a document, similar to the standard defined range interface. this object is used to represent a specific piece of text in the document. ...
getTrackById() - Web APIs
dicating 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. if no match is found, this method returns null. the tracks are searched in their natural order; that is, in the order defined by the media resource itself, or, if the resource doesn't define an order, the
relative order in which the tracks are declared by the media resource. specifications specification status comment html living standardthe definition of 'texttracklist.gettrackbyid()' in that specification. living standard ...
TimeEvent - Web APIs
the timeevent interface, a part of svg smil animation, provides specific contextual information associated with time events. ...
Touch() - Web APIs
s than 90. if the ellipse described by radiusx and radiusy is circular, then rotationangle has no effect. the user agent may use 0 as the value in this case, or it may use any other value in the allowed range. (for example, the user agent may use the rotationangle value from the previous touch event, to avoid sudden changes.). "force", optional and defaulting to 0, of type float, that is the
relative value of pressure applied, in the range 0 to 1, where 0 is no pressure, and 1 is the highest level of pressure the touch device is capable of sensing; 0 if no value is known. in environments where force is known, the absolute pressure represented by the force attribute, and the sensitivity in levels of pressure, may vary. specifications specification status comment ...
Touch.force - Web APIs
essure the hardware can recognize). a value of 0.0 is returned if no value is known (for example the touch device does not support this property). in environments where force is known, the absolute pressure represented by the force attribute, and the sensitivity in levels of pressure, may vary. example this example illustrates using the touch interface's touch.force property. this property is a
relative value of pressure applied, in the range 0.0 to 1.0, where 0.0 is no pressure, and 1.0 is the highest level of pressure the touch device is capable of sensing. 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.addevent...
Touch.radiusX - Web APIs
summary returns the x radius of the ellipse that most closely circumscribes the area of contact with the touch surface. the value is in css pixels of the same scale as touch.screenx. this value, in combination with touch.radiusy and touch.rotationangle constructs an ellipse that approximates the size and shape of the area of contact between the user and the screen. this may be a
relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example. note: this attribute has not been formally standardized. it is specified in the touch events – level 2 draft specification and not in touch events recommendation. this attribute is not widely implemented. syntax var xradius = touchitem.radiusx; return value ...
Touch.rotationAngle - Web APIs
summary returns the rotation angle, in degrees, of the contact area ellipse defined by touch.radiusx and touch.radiusy. the value may be between 0 and 90. together, these three values describe an ellipse that approximates the size and shape of the area of contact between the user and the screen. this may be a
relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example. note: this attribute has not been formally standardized. it is specified in the touch events – level 2 draft specification and not in touch events recommendation. this attribute is not widely implemented. syntax var angle = touchitem.rotationangle; return value angle the number of degrees of rotation to apply to the described e...
Touch.screenX - Web APIs
summary returns the x coordinate of the touch point
relative to the screen, not including any scroll offset. syntax var x = touchitem.screenx; return value x the x coordinate of the touch point
relative to the screen, not including any scroll offset. example this example illustrates how to access the touch object's touch.screenx and touch.screeny properties. the touch.screenx property is the horizontal (x) coordinate of a touch point
relative to the screen in css pixels. the touch.screeny property is the vertical coordinate of a touch point
relative to the screen in css pixels. in following simple code snippet, we assume the user initiates multiple touch contacts on an element with an id of source and then
releases contacts with the surface. when the touchstart event handler is ...
Touch.screenY - Web APIs
example the touch.screenx example includes an example of this property's usage. specifications specification status comment touch events – level 2 draft non-stable version. ...
Multi-touch interaction - Web APIs
uches.length + " ; changedtouches = " + ev.changedtouches.length; o.innerhtml += s + " "; if (printtargetids) { s = ""; for (var i=0; i < ev.targettouches.length; i++) { s += "... id = " + ev.targettouches[i].identifier + " "; } o.innerhtml += s; } } function clearlog(event) { var o = document.getelementsbytagname('output')[0]; o.innerhtml = ""; }
related topics and resources pointer events ...
Lifetime of a WebRTC session - Web APIs
? these need to be agreed upon before the webrtc session can begin. only once signaling has been successfully completed can the true process of opening the webrtc peer connection begin. it's worth noting that the signaling server does not actually need to understand or do anything with the data being exchanged through it by the two peers during signaling. the signaling server is, in essence, a
relay: a common point which both sides connect to knowing that their signaling data can be transferred through it. the server doesn't need to react to this information in any way. the signaling process there's a sequence of things that have to happen in order to make it possible to begin a webrtc session: each peer creates an rtcpeerconnection object representing their end of the webrtc session.
A simple RTCDataChannel sample - Web APIs
up the ice candidates the next step is to set up each connection with ice candidate listeners; these will be called when there's a new ice candidate to tell the other side about. note: in a real-world scenario in which the two peers aren't running in the same context, the process is a bit more involved; each side provides, one at a time, a suggested way to connect (for example, udp, udp with a
relay, tcp, etc.) by calling rtcpeerconnection.addicecandidate(), and they go back and forth until agreement is reached. but here, we just accept the first offer on each side, since there's no actual networking involved. localconnection.onicecandidate = e => !e.candidate || remoteconnection.addicecandidate(e.candidate) .catch(handleaddcandidateerror); remoteconnection.onice...
Taking still photos with WebRTC - Web APIs
ling the canvas with display:none, to avoid cluttering up the screen — the user does not need to see this intermediate stage. we also have an <img> element into which we will draw the image — this is the final display shown to the user. <canvas id="canvas"> </canvas> <div class="output"> <img id="photo" alt="the screen capture will appear in this box."> </div> that's all of the
relevant html. the rest is just some page layout fluff and a bit of text offering a link back to this page. the javascript code now let's take a look at the javascript code. we'll break it up into a few bite-sized pieces to make it easier to explain. initialization we start by wrapping the whole script in an anonymous function to avoid global variables, then setting up various variables we'll be ...
Using DTMF with WebRTC - Web APIs
de name for the system. webrtc doesn't send dtmf codes as audio data. instead, they're sent out-of-band, as rtp payloads. note, however, that although it's possible to send dtmf using webrtc, there is currently no way to detect or receive incoming dtmf. ...
Improving compatibility using WebRTC adapter.js - Web APIs
in addition, some browsers still have prefixes on some or all webrtc apis. while you can manually code around these issues, there is an easier way. the webrtc organization provides on github the webrtc adapter to work around compatibility issues in different browsers' webrtc implementations. the adapter is a javascript shim which lets your code to be written to the specification so that it will "just work" in all browsers with webrtc support. there's no need to conditionally use prefixed apis or implement other workarounds. ...
Writing WebSocket client applications - Web APIs
ta. if you want to open a connection and are flexible about the protocols you support, you can specify an array of protocols: var examplesocket = new websocket("wss://www.example.com/socketserver", ["protocolone", "protocoltwo"]); once the connection is established (that is, readystate is open), examplesocket.protocol will tell you which protocol the server selected. establishing a websocket
relies on the http upgrade mechanism, so the request for the protocol upgrade is implicit when we address the web server as ws://www.example.com or wss://www.example.com. sending data to the server once you've opened your connection, you can begin transmitting data to the server. to do this, simply call the websocket object's send() method for each message you want to send: examplesocket.send("her...
Writing a WebSocket server in C# - Web APIs
function dosend(message) { writetoscreen("sent: " + message); websocket.send(message); } function writetoscreen(message) { output.insertadjacenthtml("afterbegin", "<p>" + message + "</p>"); } function onclickbutton() { var text = textarea.value; text && dosend(text); textarea.value = ""; textarea.focus(); } </script>
related writing websocket servers ...
Writing a WebSocket server in Java - Web APIs
= new byte[6]; byte[] encoded = new byte[] { (byte) 198, (byte) 131, (byte) 130, (byte) 182, (byte) 194, (byte) 135 }; byte[] key = new byte[] { (byte) 167, (byte) 225, (byte) 225, (byte) 210 }; for (int i = 0; i < encoded.length; i++) { decoded[i] = (byte) (encoded[i] ^ key[i & 0x3]); } } } finally { s.close(); } } finally { server.close(); } } }
related writing websocket servers ...
Web Video Text Tracks Format (WebVTT) - Web APIs
ibute long lines; attribute double regionanchorx; attribute double regionanchory; attribute double viewportanchorx; attribute double viewportanchory; attribute scrollsetting scroll; }; methods and properties the methods used in webvtt are those which are used to alter the cue or region as the attributes for both interfaces are different. we can categorize them for better understanding
relating to each interface in webvtt: vttcue the methods which are available in this interface are: getcueashtml to get the html of that cue. vtt constructor for creating new objects of cues. autokeyword. directionsetting: to set the direction of caption or text in a file. linealignment: to adjust the line alignment. positionalignsetting: to adjust the ...
WebXR performance guide - Web APIs
ate( } } this renders a scene. but it's inefficient, because it allocates as local variables a number of things, including at least two matrices, an array of vertices, and more. that means that for every frame, the javascript runtime has to allocate memory for those and set them up—possibly triggering garbage collection—and then when each interaction of the loop is completed, the memory is
released. a simple change can optimize this significantly: const vertexlist = ... const normalmatrix = mat4.create(); const modelviewmatrix = mat4.create(); function drawscene(gl, view, programinfo, buffers, texture, deltatime) { ... for (object in scene) { ... } } now, instead of allocating variables every loop iteration, we're using global constants(or class member constants). this ha...
Controlling multiple parameters with ConstantSourceNode - Web APIs
button"> ▶️ </div> </div> <div class="right"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.8" name="volume" id="volumecontrol"> </div> </div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e and g in the chord.</p> css .controls { width: 400px; position:
relative; vertical-align: middle; height: 44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } ...
Background audio processing using AudioWorklet - Web APIs
ch input and writing the results into the corresponding outputs' channels (keeping in mind that the number of inputs and outputs may differ, and the channel counts on those inputs and outputs may also differ). or you can take all the inputs and perform mixing or other computations that result in a single output being filled with data (or all the outputs being filled with the same data). it's enti
rely up to you. this is a very powerful tool in your audio programming toolkit. processing multiple inputs let's take a look at an implementation of process() that can process multiple inputs, with each input being used to generate the corresponding output. any excess inputs are ignored. process(inputlist, outputlist, parameters) { const sourcelimit = math.min(inputlist.length, outputlist.length...
Using the Web Audio API - Web APIs
text.createmediaelementsource: // get the audio element const audioelement = document.queryselector('audio'); // pass it into the audio context const track = audiocontext.createmediaelementsource(audioelement); note: the <audio> element above is represented in the dom by an object of type htmlmediaelement, which comes with its own set of functionality. all of this has stayed intact; we are me
rely allowing the sound to be available to the web audio api. controlling sound when playing sound on the web, it's important to allow the user to control it. depending on the use case, there's a myriad of options, but we'll provide functionality to play/pause the sound, alter the track's volume, and pan it from left to right. controlling sound programmatically from javascript code is covered by ...
Web Speech API - Web APIs
bout the current state of speechsynthesisutterance objects that have been processed in the speech service. speechsynthesisutterance represents a speech request. it contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.) speechsynthesisvoice represents a voice that the system supports. every speechsynthesisvoice has its own
relative speech service including information about language, name and uri. window.speechsynthesis specced out as part of a [nointerfaceobject] interface called speechsynthesisgetter, and implemented by the window object, the speechsynthesis property provides access to the speechsynthesis controller, and therefore the entry point to speech synthesis functionality. examples the web speech api rep...
Web Storage API - Web APIs
he web storage api provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies. web storage concepts and usage the two mechanisms within web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page
reloads and restores) stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. data is never transferred to the server. storage limit is larger than a cookie (at most 5mb). localstorage does the same thing, but persists even when the browser is closed and reopened. stores data with no expiration date, and gets cleared only through ...
Window.opener - Web APIs
e window that opened the window using open(). in other words, if window a opens window b, b.opener returns a. syntax const openerwindow = window.opener value a window referring to the window that opened the current window (using window.open(), or by a link with target attribute set). if this window was not opened by being linked to or created by another, returns null. in modern browsers, a
rel="noopener noreferrer" attribute on the originating <a> element will prevent the window.opener reference from being set, in which case this property will return null. specifications specification status comment html living standardthe definition of 'window.opener' in that specification. living standard ...
Window.orientation - Web APIs
its only possible values are -90, 0, 90, and 180. positive values are clockwise; negative values are counterclockwise. ...
Window.performance - Web APIs
a performance object, which can be used to gather performance information about the current document. it serves as the point of exposure for the performance timeline api, the high resolution time api, the navigation timing api, the user timing api, and the resource timing api. syntax performancedata = window.performance; value a performance object offering access to the performance and timing-
related information offered by the apis it exposes. specifications specification status comment high resolution timethe definition of 'window.performance' in that specification. recommendation defines now() method. ...
window.postMessage() - Web APIs
ication between window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it. normally, scripts on different pages are allowed to access each other if and only if the pages they originate from share the same protocol, port number, and host (also known as the "same-origin policy"). window.postmessage() provides a controlled mechanism to secu
rely circumvent this restriction (if used properly). broadly, one window may obtain a reference to another (e.g., via targetwindow = window.opener), and then dispatch a messageevent on it with targetwindow.postmessage(). the receiving window is then free to handle this event as needed. the arguments passed to window.postmessage() (i.e., the “message”) are exposed to the receiving window through ...
Window.scroll() - Web APIs
hat you want displayed in the upper left. - or - options is a scrolltooptions dictionary. examples <!-- put the 100th vertical pixel at the top of the window --> <button onclick="scroll(0, 100);">click to scroll down 100 pixels</button> using options: window.scroll({ top: 100, left: 100, behavior: 'smooth' }); notes window.scrollto() is effectively the same as this method. for
relative scrolling, see window.scrollby(), window.scrollbylines(), and window.scrollbypages(). for scrolling elements, see element.scrolltop and element.scrollleft. specification specification status comment css object model (cssom) view modulethe definition of 'window.scroll()' in that specification. working draft initial definition. browser compatibility ...
Window.scrollTo() - Web APIs
cument that you want displayed in the upper left. y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left. - or - options is a scrolltooptions dictionary. examples window.scrollto(0, 1000); using options: window.scrollto({ top: 100, left: 100, behavior: 'smooth' }); notes window.scroll() is effectively the same as this method. for
relative scrolling, see window.scrollby(), window.scrollbylines(), and window.scrollbypages(). for scrolling elements, see element.scrolltop and element.scrollleft. specifications specification status comment css object model (cssom) view modulethe definition of 'window.scroll()' in that specification. working draft initial definition. ...
Window.scrollY - Web APIs
returns the y coordinate of the top edge of the current viewport. if there is no viewport, the returned value is 0. example // make sure and go down to the second page if (window.scrolly) { window.scroll(0, 0); // reset the scroll position to the top left of the document. } window.scrollbypages(1); notes use this property to check that the document hasn't already been scrolled when using
relative scroll functions such as scrollby(), scrollbylines(), or scrollbypages(). the pageyoffset property is an alias for the scrolly property: window.pageyoffset === window.scrolly; // always true for cross-browser compatibility, use window.pageyoffset instead of window.scrolly. additionally, older versions of internet explorer (< 9) do not support either property and must be worked around by c...
Window.sessionStorage - Web APIs
the read-only sessionstorage property accesses a session storage object for the current origin. sessionstorage is similar to localstorage; the difference is that while data in localstorage doesn't expire, data in sessionstorage is cleared when the page session ends. a page session lasts as long as the browser is open, and survives over page
reloads and restores. opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work. opening multiple tabs/windows with the same url creates sessionstorage for each tab/window. closing a tab/window ends the session and clears objects in sessionstorage. data stored in sessionstorage is specific to the protocol of the page. in particular, data stored by a scr...
Window.setImmediate() - Web APIs
timeout for settimeout. this method can be used instead of the settimeout(fn, 0) method to execute heavy operations. the feature can be emulated in a few different ways: postmessage can be used to trigger an immediate but yielding callback. do note that internet explorer 8 includes a synchronous version of postmessage, which means it cannot be used as a fallback. messagechannel can be used
reliably inside of web workers whereas the semantics of postmessage mean it cannot be used there. settimeout(fn, 0) can potentially be used, however as it is clamped to 4ms for timers nested more than 5 levels deep per the html spec, it does not make for a suitable polyfill for the natural immediacy of setimmediate. all of these techniques are incorporated into a robust setimmediate polyfill. spe...
WindowOrWorkerGlobalScope.fetch() - Web APIs
romise that resolves to a response object. exceptions aborterror the request was aborted due to a call to the abortcontroller method abort() method. typeerror the specified url string includes user credentials. this information should instead be provided using an authorization header. examples in our fetch request example (see fetch request live) we create a new request object using the
relevant constructor, then fetch it using a fetch() call. since we are fetching an image, we run body.blob() on the response to give it the proper mime type so it will be handled properly, then create an object url of it and display it in an <img> element. const myimage = document.queryselector('img'); let myrequest = new request('flowers.jpg'); fetch(myrequest) .then(function(response) { if (!r...
WritableStream.WritableStream() - Web APIs
ted for writing. this method will be called only after previous writes have succeeded, and never after the stream is closed or aborted (see below). close(controller) optional this method, also defined by the developer, will be called if the app signals that it has finished writing chunks to the stream. the contents should do whatever is necessary to finalize writes to the underlying sink, and
release access to it. if this process is asynchronous, it can return a promise to signal success or failure. this method will be called only after all queued-up writes have succeeded. the controller parameter passed to this method is a writablestreamdefaultcontroller, which can be used to control the stream at the end of writing. abort(reason) optional this method, also defined by the developer, ...
WritableStream.getWriter() - Web APIs
syntax var writer = writablestream.getwriter(); parameters none. return value a writablestreamdefaultwriter object instance. exceptions typeerror the stream you are trying to create a writer for is not a writablestream. examples the following example illustrates several features of this interface. ...
WritableStream - Web APIs
ing that the producer can no longer successfully write to the stream and it is to be immediately moved to an error state, with any queued writes discarded. writablestream.close() closes the stream. writablestream.getwriter() returns a new instance of writablestreamdefaultwriter and locks the stream to that instance. while the stream is locked, no other writer can be acquired until this one is
released. examples the following example illustrates several features of this interface. it shows the creation of the writablestream with a custom sink and an api-supplied queueing strategy. it then calls a function called sendmessage(), passing the newly created stream and a string. inside this function it calls the stream's getwriter() method, which returns an instance of writablestreamdefault...
WritableStreamDefaultController.error() - Web APIs
however, it can be useful for suddenly shutting down a stream in response to an event outside the normal lifecycle of interactions with the underlying sink. syntax writablestreamdefaultcontroller.error(e); parameters e a domstring representing the error you want future interactions to fail with. return value undefined. ...
WritableStreamDefaultWriter.closed - Web APIs
syntax var closed = writablestreamdefaultwriter.closed; value a promise. examples const writablestream = new writablestream({ start(controller) { }, write(chunk, controller) { ... }, close(controller) { ... }, abort(err) { ... } }, queuingstrategy); ... const writer = writablestream.getwriter(); .. ...
WritableStreamDefaultWriter.desiredSize - Web APIs
to fill the stream's internal queue. syntax var desiredsize = writablestreamdefaultwriter.desiredsize; value an integer. note that this can be negative if the queue is over-full. the value will be null if the stream cannot be successfully written to (due to either being errored, or having an abort queued up), and zero if the stream is closed. exceptions typeerror the writer’s lock is
released. examples const writablestream = new writablestream({ write(chunk) { ... }, close() { ... }, abort(err) { ... } }, queuingstrategy); ... const writer = writablestream.getwriter(); ... // return stream's desired size let size = writer.desiredsize; specifications specification status comment streamsthe definition of 'desiredsize' in that...
XMLDocument - Web APIs
the xmldocument interface represents an xml document. it inherits from the generic document and does not add any specific methods or properties to it: nevertheless, several algorithms behave differently with the two types of documents. ...
Synchronous and asynchronous requests - Web APIs
age = function (event) { if (event.data === "hello") { var xhr = new xmlhttprequest(); xhr.open("get", "myfile.txt", false); // synchronous request xhr.send(null); self.postmessage(xhr.responsetext); } }; note: the effect is asynchronous, because of the use of the worker. this pattern can be useful, for example in order to interact with the server in the background, or to p
reload content. see using web workers for examples and details. adapting sync xhr use cases to the beacon api there are some cases in which the synchronous usage of xmlhttprequest is not replaceable, like during the unload, beforeunload, and pagehide events. you should consider using the fetch() api with the keepalive flag. when fetch with keepalive isn't available, you can consider using the navig...
init() - Web APIs
be null. scriptcontext the script context to use for the request; this must not be null. globalobject the object to use as the global for our request. often, this is the outer window, but it may also be a sandbox or backstage pass. this may be null, but if it is, the request cannot create a document. prior to firefox 23, this was always a window. baseuri the base uri to use when resolving
relative uris when handling the request. this may be null. loadgroup optional an optional load group used when performing the request. if this is specified, it is used even if the global has a window with a load group already established. ...
XMLHttpRequest.open() - Web APIs
the response is received. if true, notification of a completed transaction is provided using event listeners. this must be true if the multipart attribute is true, or an exception will be thrown. note: synchronous requests on the main thread can be easily disruptive to the user experience and should be avoided; in fact, many browsers have deprecated synchronous xhr support on the main thread enti
rely. synchronous requests are permitted in workers. user optional the optional user name to use for authentication purposes; by default, this is the null value. password optional the optional password to use for authentication purposes; by default, this is the null value. specifications specification status comment xmlhttprequestthe definition of 'open()' in that...
XMLHttpRequest - Web APIs
xmlhttprequest (xhr) objects are used to interact with servers. you can retrieve data from a url without having to do a full page refresh. this enables a web page to update just part of a page without disrupting what the user is doing. xmlhttprequest is used heavily in ajax programming. ...
XMLHttpRequestEventTarget.onload - Web APIs
the xmlhttprequesteventtarget.onload is the function called when an xmlhttprequest transaction completes successfully. syntax xmlhttprequest.onload = callback; values callback is the function to be executed when the request completes successfully. it receives a progressevent object as its first argument. the value of this (i.e. the context) is the same xmlhttprequest this callback is
related to. example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onload = function () { // do something with the retrieved data ( found in xmlhttp.response ) }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget - Web APIs
xmlhttprequesteventtarget is the interface that describes the event handlers you can implement in an object that will handle events for an xmlhttprequest. ...
XMLHttpRequestResponseType - Web APIs
explorer. deprecated values moz-chunked-arraybuffer a firefox-only value which instructs xmlhttprequest to deliver arraybuffer objects containing chunks of the incoming data. accessing response during a progress event returns the data received so far. outside the progress event handler, the value of response is always null. you shouldn't use this non-standard (and, as of firefox 68, enti
rely removed) api; instead, consider using the fetch api with readable streams, which offers a standard alternative to accessing the response in a streaming fashion. specifications specification status comment xmlhttprequest unknown live standard, latest version ...
XPathEvaluator.createNSResolver() - Web APIs
this adapter works like the dom level 3 method node.lookupnamespaceuri() in resolving the namespace uri from a given prefix using the current information available in the node's hierarchy at the time the method is called, also correctly resolving the implicit xml prefix. syntax xpathnsresolver xpathevaluator.creatensresolver(noderesolver); parameters noderesolver a node to be used as a context for namespace resolution. ...
XPathEvaluator - Web APIs
the xpathevaluator interface allows to compile and evaluate xpath expressions. it is implemented by the document interface. methods xpathevaluator.createexpression() creates a parsed xpath expression with resolved namespaces. xpathevaluator.creatensresolver() adapts any dom node to resolve namespaces allowing the xpath expression to be evaluated
relative to the context of the node where it appeared within the document. xpathevaluator.evaluate() evaluates an xpath expression string and returns a result of the specified type if possible. example the following example shows the use of the xpathevaluator interface. html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expressi...
XRBoundedReferenceSpace.boundsGeometry - Web APIs
1 in every point in the array. 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. in other words, the bounds are the physical limitations of the available space, shifted so that the reference space's bounds points are all defined
relative to the xrboundedreferencespace's effective origiin. usage notes bounded reference spaces always have their origin located at ground level, where y is 0. as a general rule, with the origin for x and z located in or near the center of the space, and with the orientation set facing in a logical forward direction, as appropriate for the underlying platform or xr hardware. in order to reduce t...
XREnvironmentBlendMode - Web APIs
to capture the real world for use in ar apps. since the real world is being digitally presented, the brightness of each pixel can be controlled, whether it's reality or the rendered xr image, the user's environment can be blended with the virtual environment with each pixel having its color and brightness precisely controlled. in this mode, the xrsession's renderstate.baselayer property provides
relative weights of the artificial layer during the compositing process. pixels whose alpha value is 1.0 are rendered fully opaque, totally obscuring the real world, while pixels with an alpha of 1.0 are totally transparent, leaving the surrounding environment to pass through. specifications specification status comment webxr augmented reality modulethe definition of 'x...
XRFrame.getViewerPose() - Web APIs
the getviewerpose() method, a member of the xrframe interface, returns a xrviewerpose object which describes the viewer's pose (position and orientation)
relative to the specified reference space. see the getpose() method for a way to calculate a pose that represents the difference between two spaces. syntax var xrviewerpose = xrframe.getviewerpose(referencespace); parameters referencespace an xrreferencespace object specifying the space to use as the reference point or base for the computation of the viewer's current pose. return value a xrviewerpose describing the viewer's position and orientation
relative to the specified reference space. exceptions invalidstateerror a domexception indicating that getviewerpose() was not called within the context of a callback t...
XRInputSource.gripSpace - Web APIs
of the user's hand, with the direction extending outward from the back of the hand being +x if the controller is in the user's right hand or -x if the controller is in the left hand. the z-axis along the length of the rod, parallel to the user's palm and along the length of their grip. +z is in the direction of the user's thumb, and -z is in the opposite direction. the y-axis is implied by the
relationship between the other two axes; as is always the case, it's the cross product of the other two axes (lying 90° away from both the x and z axes). examples in tis example, taken from the frame rendering callback, the gripspace is used to render a mesh that represents the position and orieintation of the controller in the virtual environment. for (let source in xrsession.inputsources) { ...
XRInputSource.profiles - Web APIs
visual representation and behavior of the input source. usage notes input profile names an input profile name is a string describing a visual representation and behavior the input source may be configured to use. ...
XRInputSource.targetRayMode - Web APIs
an a gazing device, screen tap, or mouse click. for tracked pointers, a function myrendertargetrayasbeam() is called to render a beam from the input controller's virtual position outward in the direction it's pointing. the code should continue to perform tasks such as drawing controllers or any objects representative of the user's hands' positions in the virtual space, as well as any other input-
related tasks. function updateinputsources(session, frame, refspace) { for (let source of session.getinputsources()) { let targetraypose = frame.getpose(inputsource.targetrayspace, refspace); if (targetraypose) { if (source.targetraymode == "tracked-pointer") { myrendertargetrayasbeam(targetraypose); } } /* ... */ } } see the article inputs and input sourc...
XRInputSourceEvent.frame - Web APIs
nput event described by the object took place. usage notes the event frame does not correspond to a visual frame as is delivered to the frame rendering callback function (see rendering and the webxr frame rendering callback for details on the callback). instead, the xrframe specified by the frame property is simply a method to provide access to the getpose() method, which you can use to get the
relative positions of the objects in the scene at the time the event occurred. 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. examples this code shows a handler for the selectstart event which gets the target ray's po...
XRInputSourceEventInit.frame - Web APIs
reference spaces to the world reference space. usage notes the event frame does not correspond to a visual frame as is delivered to the frame rendering callback function (see rendering and the webxr frame rendering callback for details on the callback). instead, the xrframe specified by the frame property is simply a method to provide access to the getpose() method, which you can use to get the
relative positions of the objects in the scene at the time the event occurred. examples this example creates a new select event and sends it to the xrsession. let event = new xrinputsourceevent("select", { frame: eventframe, inputsource: source }; if (event) { xrsession.dispatchevent(event); } specifications specification status comment webxr device apithe defin...
XRPermissionDescriptor.mode - Web APIs
the mode property of the xrpermissiondescriptor dictionary is a string taken from the xrsessionmode enumerated type, specifying which web xr session mode (inline, immersive-vr, or immersive-ar) the described permissions will be used for. syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeatu
relist, optionalfeatures: optfeatu
relist }; 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. the session's environmentblendmode indicates the method to be used to blen...
XRPermissionStatus.granted - Web APIs
origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable
relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a w...
XRPose.emulatedPosition - Web APIs
s head, but to any object. a hand controller that can directly report its position would have a value of false for this property as well. if its position is computed as an offset from another object (such as by basing it off the model representing the user's body), then this value is true. this information is important because devices whose position is emulated are prone to their offset drifting
relative to the real world space over time. this is because emulating a position based on accelerometer inputs and models tends to introduce minor errors which accumulate over time. specifications specification status comment webxr device apithe definition of 'xrpose.emulatedposition' in that specification. working draft initial definition. ...
XRReferenceSpaceEvent - Web APIs
heriting the properties available on the parent interface, event, xrreferencespaceevent objects include the following properties: referencespace read only an xrreferencespace indicating the reference space that generated the event. transform read only an xrrigidtransform object indicating the position and orientation of the specified referencespace's native origin after the event, defined
relative to the coordinate system before the event. methods while xrreferencespaceevent does not define any methods, it inherits the methods of its parent interface, event. event types reset the reset event is sent to a reference space when its native origin is changed due to a discontinuity, recalibration, or device reset. this is an opportunity for your app to update any stored transforms, ...
XRReferenceSpaceType - Web APIs
origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable
relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a w...
XRSession.end() - Web APIs
the end() method shuts down the xrsession on which it's called, returning a promise which resolves once the session has fully shut down. syntax xrsession.end(); parameters none. return value a promise that resolves without a value after any platform-specific steps
related to shutting down the session have completed. you can use the promise to do things like update ui elements to reflect the shut down connection, trigger application shut down, or whatever else you might need to do. example specifications specification status comment webxr device apithe definition of 'xrsession.end' in that specification. working draft initial definition. ...
XRSession.environmentBlendMode - Web APIs
to capture the real world for use in ar apps. since the real world is being digitally presented, the brightness of each pixel can be controlled, whether it's reality or the rendered xr image, the user's environment can be blended with the virtual environment with each pixel having its color and brightness precisely controlled. in this mode, the xrsession's renderstate.baselayer property provides
relative weights of the artificial layer during the compositing process. pixels whose alpha value is 1.0 are rendered fully opaque, totally obscuring the real world, while pixels with an alpha of 1.0 are totally transparent, leaving the surrounding environment to pass through. specifications specification status comment webxr augmented reality modulethe definition of 'x...
XRSession.onsqueeze - Web APIs
specifications specification status comment webxr device apithe definition of 'xrsession.onsqueeze' in that specification. working draft initial definition. ...
XRSession.requestReferenceSpace() - Web APIs
origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable
relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a w...
XRSpace - Web APIs
the xrspace interface of the webxr device api is an abstract interface providing a common basis for every class which represents a virtual coordinate system within the virtual world, in which its origin corresponds to a physical location. spatial data in webxr is always expressed
relative to an object based upon one of the descendant interfaces of xrspace, at the time at which a given xrframe takes place. numeric values such as pose positions are thus coordinates in the corresponding xrspace,
relative to that space's origin. note: the xrspace interface is never used directly; instead, all spaces are created using one of the interfaces based on xrspace. at this time, those are xrreferencespace and xrboundedreferencespace. interfaces based on xrspace below is a list of interfa...
XRTargetRayMode - Web APIs
an a gazing device, screen tap, or mouse click. for tracked pointers, a function myrendertargetrayasbeam() is called to render a beam from the input controller's virtual position outward in the direction it's pointing. the code should continue to perform tasks such as drawing controllers or any objects representative of the user's hands' positions in the virtual space, as well as any other input-
related tasks. function updateinputsources(session, frame, refspace) { for (let source of session.getinputsources()) { let targetraypose = frame.getpose(inputsource.targetrayspace, refspace); if (targetraypose) { if (source.targetraymode == "tracked-pointer") { myrendertargetrayasbeam(targetraypose); } } /* ... */ } } see the article inputs and input sourc...
XRViewerPose - Web APIs
ource of a position and orientation that make up a view upon the scene. for example, every player in a mmorpg might have an instance of xrviewerpose to provide a way to calculate what they can see; if the game provides a mechanism that tells the player if another player sees them, or that they see another player, this information becomes crucial. an xrviewerpose is always obtained and referenced
relative to an existing xrreferencespace. this ensures that positions and orientations are reported using the expected
relative coordinate system. to render a scene using the xrviewerpose representing the user's head, one would iterate over the views in the views array, rendering them one after another. by calling viewport() on the webgl context, specifying the xrview as input, you can get the viewp...
XRWebGLLayer.framebuffer - Web APIs
attempting to clear, draw to, or read from the framebuffer results in a webgl invalid_framebuffer_operation error (0x0506). calling checkframebufferstatus() on the webgl context from outside the animation frame callback causes the webgl framebuffer_unsupported error (0x8cdd) to be reported. opaque framebuffers initialized with the depth property set to false will not have a depth buffer and will
rely on the coordinates alone to determine distance. opaque framebuffers initialized without specifying a stencil will not have a stencil buffer. opaque framebuffers will not have an alpha channel available unless the alpha property is true when creating the layer. the xr compositor assumes that opaque framebuffers use colors with premultiplied allpha, regardless of whether or not the webgl contex...
XRWebGLLayer - Web APIs
the webxr device api provides a linkage between the webxr device (or simulated xr device, in the case of an inline session) and a webgl context used to render the scene for display on the device. in particular, it provides access to the webgl framebuffer and viewport to ease access to the context. although xrwebgllayer is currently the only type of framebuffer layer supported by webgl, it's enti
rely possible that future updates to the webxr specification may allow for other layer types and corresponding image sources. constructor new xrwebgllayer() creates and returns a new xrwebgllayer object for use by the specified xrsession, using a particular webglrenderingcontext or webgl2renderingcontext as the destination context. properties antialias read only a boolean value indicating...
XRWebGLLayerInit.framebufferScaleFactor - Web APIs
the xrwebgllayerinit dictionary's framebufferscalefactor property, when specified upon instantiating a new xrwebgllayer using its constructor, xrwebgllayer(), specifies the scaling factor to use when determining the size of the frame buffer to use when rendering the scene,
relative to the default xr device display resolution. for example, a value of 1.0 indicates that the frame buffer should be the same resolution as the actual display, while a value of 0.5 indicates that the frame buffer should be half the resolution of the display. a value of 2.0, on the other hand, creates a frame buffer whose resolution is double that of the actual display buffer. there are valid use cases for all of these kinds of scaling. see managing rendering quality in webxr performance guide for more informatio...
XRWebGLLayerInit - Web APIs
ise, no stencil buffer is allocated. the default is false. examples given an xrsession, xrsession, and a webgl rendering context, gl, this snippet sets the rendering layer for the session, specifying the ignoredepthvalues option, indicating that the depth buffer should not be used (or should not exist at all), and that the only source for distance information of any given point is its position
relative to the viewer. const layeroptions = { ignoredepthvalues: true }; xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl, layeroptions); }); specifications specification status comment webxr device apithe definition of 'xrwebgllayerinit' in that specification. working draft initial definition. ...
ARIA Technique Template - Accessibility
description possible effects on user agents and assistive technology note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: code working examples: notes aria attributes used
related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
Using the alertdialog role - Accessibility
alertdialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <div role="document" tabindex="0"> <h2 id="dialog1title">your login session is about to expire</h2> <p id="dialog1desc">to extend your session, click the ok button</p> <button>ok</button> </div> </div> working examples: tbd notes aria attributes used alertdialog aria-labelledby aria-describedby
related aria techniques using the dialog role using the alert role compatibility tbd: add support information for common ua and at product combinations additional resources ...
Using the aria-hidden attribute - Accessibility
this technique demonstrates how to use the aria-hidden attribute. the aria-hidden attribute can either expose or hide non-interactive content from the accessibility api. description adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. this can improve the experience for assistive technology users by hiding: pu
rely decorative content, such as icons or images duplicated content, such as repeated text offscreen or collapsed content, such as menus according to the fourth rule of aria, aria-hidden="true" should not be used on a focusable element. additionally, since this attribute is inherited by an element's children, it should not be added onto the parent or ancestor of a focusable element. using aria-hidden="false" wil...
Using the aria-invalid attribute - Accessibility
lid attribute) notes when aria-invalid is used in conjunction with the aria-required attribute, aria-invalid should not be set to true before the form is submitted - only in response to validation. future expansion may add terms to the vocabulary used for this attribute. ...
Using the aria-label attribute - Accessibility
ia-label attribute is used to provide the label to any assistive technologies. <button aria-label="close" onclick="mydialog.close()">x</button> notes the most common accessibility api mapping for a label is the accessible name property. ...
Using the aria-required attribute - Accessibility
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 ...
ARIA: Complementary role - Accessibility
these sections are frequently presented as sidebars or call-out boxes. if possible, use the html <aside> element instead. <div role="complementary"> <h2>our partners</h2> <!-- complementary section content --> </div> this is a sidebar containing links to event sponsors. description the complementary role is a landmark role. landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. ...
ARIA: document role - Accessibility
ent element and read the text with the screen reader's reading cursor. assistive technologies should switch context back to document mode, possibly intercepting from controls rewired for the parent's dynamic context, re-enabling the standard input events, such as up or down arrow keyboard events, to control the reading cursor. in contrast to the article role, the document role does not have any
relation to other elements with a document role, it me
rely has a
relationship to the containing composit widget. an article can have associated articles. associated wai-aria roles, states, and properties aria-expanded include with a value of true or false if the document element is collapsible, to indicate if the document is currently expanded or collapsed. other values include the default undef...
ARIA: List role - Accessibility
possible in your work, you should use the appropriate semantic html elements to mark up a list and its listitems — <ul>/<ol> and <li>. see best practices for a full example. associated wai-aria roles, states, and properties listitem a single item in a list or directory. elements with role listitem can only be found in an element with the role list or group. group a collection of
related objects, limited to list items when nested in a list, not important enough to have their own place in a pages table of contents. keyboard interactions none. required javascript features none. examples aria lists — some useful examples and thoughts by scott o'hara best practices only use role="list" and role="listitem" if you have to — for example if you don't have control over...
ARIA: Listitem role - Accessibility
a list and its listitems — <ul>/<ol> and <li>. see best practices for a full example. associated wai-aria roles, states, and properties list a list of items. elements with role list must have one or more elements with the role listitem as children, a one or more elements with the role of group that have one or more elements with the listitem role as children. group a collection of
related objects, limited to list items when nested in a list, not important enough to have their own place in a pages table of contents. keyboard interactions none. required javascript features none. examples aria lists — some useful examples and thoughts by scott o'hara best practices only use role="list" and role="listitem" if you have to — for example if you don't have control over...
ARIA: Mark role - Accessibility
to associate the comment with the text being commented, we need to wrap the commented text with an element containing the aria-details attribute, the value of which should be the id of the comment. accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall s...
ARIA: Region role - Accessibility
ute helps this region have an accessible name</h2> <!-- region content --> </div> accessibility concerns use sparingly! landmark roles are intended to be used sparingly, to identify larger overall sections of the document. using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page. only use the region role if no other
relevant content sectioning element or landmark role applies. if multiple regions exist on a page, it may be worth reinvestigating the page's overall structure. best practices prefer html using the <section> element will automatically communicate that a section has a role of region if it is given an accessible name. if at all possible, prefer using it instead. labeling landmarks if there is more...
ARIA: Suggestion role - Accessibility
the suggestion landmark role semantically denotes a single proposed change to an editable document. this should be used on an element that wraps an element with an insertion role, and one with a deletion role. examples when you’ve got a content change that involves an insertion and a deletion, there is no way for a screenreader user to work out if the two are
related or not. this is the job of role="suggestion", which should be set on an element wrapping both of them like so: <p>freida’s pet is a <span role="suggestion"> <span role="deletion">black cat called luna</span> <span role="insertion">purple tyrannosaurus rex called tiny</span> </span>. </p> we could even provide an information box saying who made the suggestion and when, and associate it with the suggestion via ...
ARIA: heading role - Accessibility
<div role="heading" aria-level="1">this is a main page heading</div> this defines the text in the div to be the main heading of the page, indicated by being level 1 via the aria-level attribute. description the heading role indicates to assistive technologies that this element should be treated like a heading. screen readers would read the text and indicate that it is formatted like a heading. ...
ARIA: listbox role - Accessibility
. when the listbox role is added to an element, or such an element becomes visible, screen readers announce the label and role of the listbox when it gets focus. if an option or item is focused within the list, it gets announced next, followed by an indication of the item's position with the list if the screen reader supports this. as focus moves within the list, the screen reader announces the
relevant items. associated aria roles, states, and properties associated roles option one or more nested options are required. all selected options have aria-selected set to true. all options that are not selected have aria-selected set to false. if an option is not selectable, omit the aria-selected. list a section containing listitem elements states and properties aria-activedescendan...
Architecture - Accessibility
cter ahead. if the next character does not exist, proceed to the next accessible in depth first search order and recurse on the first character until a non-embed is found. if the current character falls within a text substring, locate the line ending of that substring or the next embed, whichever comes first: get the current line start and end offsets. ...
HTML To MSAA - Accessibility
elow shows how gecko maps html elements to msaa. this table reflects mapping rules for specific elements only, it doesn't reflect any general rules applicable to all elements. for example, if name column has n/a value then it means specific elements doesn't provide own rules to calculate name but name can be computed from aria markup or @title attribute. ...
Mobile accessibility checklist - Accessibility
text (at least 18 point or 14 point bold.) information conveyed via colour must be also available by other means too (underlined text for links, etc.) visibility content hiding techniques such as zero opacity, z-index order and off-screen placement must not be used exclusively to handle visibility. everything other than the currently visible screen must be truly invisible (especially
relevant for single page apps with multiple cards): use the hidden attribute or visibility or display style properties. unless absolutely unavoidable, aria-hidden attribute should not be used. focus all activatable elements must be focusable: standard controls such as links, buttons, and form fields are focusable by default. non-standard controls must have an appropriate ...
Robust - Accessibility
this article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the robust principle of the web content accessibility guidelines (wcag) 2.0 and 2.1. robust states that content must be robust enough that it can be interpreted
reliably by a wide variety of user agents, including assistive technologies. this can generally be achieved by following web standards and testing rigorously. note: to read the w3c definitions for robust and its guidelines and success criteria, see principle 4: robust — content must be robust enough that it can be interpreted
reliably by a wide variety of user agents, including assistive technologies. guideline 4.1 — compatible: maximize compatibility with current and future user agents, inclu...
-moz-image-rect - CSS: Cascading Style Sheets
f one larger image as backgrounds in different parts of your content. 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. however, this can be used for any css background. the syntax for the rectangle is similar to the rect() function generating a <<shape>()> css type. all four values are
relative to the upper left corner of the image. examples this example loads an image and uses it in four segments to draw the firefox logo in four <div> blocks. clicking on their container causes the four segments to rotate around by swapping the background-image property values among the four <div> blocks. css the css defines one container style, then the styles for the four boxes that comprise ...
-moz-image-region - CSS: Cascading Style Sheets
used in place of the whole image. this allows elements to use different pieces of the same image to improve performance. /* keyword value */ -moz-image-region: auto; /* <shape> value */ -moz-image-region: rect(0, 8px, 4px, 4px); /* global values */ -moz-image-region: inherit; -moz-image-region: initial; -moz-image-region: unset; the syntax is similar to the clip property. all four values are
relative to the upper left corner of the image. note: for a system that works on any background, see -moz-image-rect(). syntax values auto automatically defines the region of the image to use. <shape> a shape defining the part of the image to use. the rect() function defines a rectangle to use as shape. its parameters define the top, right, bottom, and left offsets of the edges of the imag...
-webkit-mask-box-image - CSS: Cascading Style Sheets
> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image. <gradient> a -webkit-gradient function to be used as a mask image. none used to specify that a border box is to have no mask image. <length> the size of the mask image's offset. see <length> for possible units. <percentage> the mask image's offset has a percentage value
relative to the border box's corresponding dimension (width or height). repeat the mask image is repeated as many times as is necessary to span the border box. may include a partial image if the mask image does not divide evenly into the border box. stretch the mask image is stretched to contain the border box exactly. round the mask image is stretched somewhat and repeated such that there is n...
-webkit-mask-position-x - CSS: Cascading Style Sheets
percentages are calculated against the horizontal dimension of the box padding area. that means, a value of 0% means the left edge of the image is aligned with the box's left padding edge and a value of 100% means the right edge of the image is aligned with the box's right padding edge. left equivalent to 0%. center equivalent to 50%. right equivalent to...
-webkit-mask-position-y - CSS: Cascading Style Sheets
percentages are calculated against the vertical dimension of the box padding area. a value of 0% means the top edge of the image is aligned with the box's top padding edge and a value of 100% means the bottom edge of the image is aligned with the box's bottom padding edge. top equivalent to 0%. bottom equivalent to 100%. center equivalent to 50%. formal...
::after (:after) - CSS: Cascading Style Sheets
e experience a semantic disclosure widget created in some other way (such as with details and summary elements) is likely to be more appropriate. html <p>here we have some <span tabindex="0" data-descr="collection of words and punctuation">text</span> with a few <span tabindex="0" data-descr="small popups that appear when hovering">tooltips</span>. ...
::selection - CSS: Cascading Style Sheets
for people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality. if overridden, it is important to ensure that the contrast ratio between the text and background colors of the selection is high enough that people experi...
:active - CSS: Cascading Style Sheets
selects any <a> that is being activated */ a:active { color: red; } the :active pseudo-class is commonly used on <a> and <button> elements. other common targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated <label>. styles defined by the :active pseudo-class will be overridden by any subsequent link-
related pseudo-class (:link, :hover, or :visited) that has at least equal specificity. to style links appropriately, put the :active rule after all other link-
related rules, as defined by the lvha-order: :link — :visited — :hover — :active. note: on systems with multi-button mice, css3 specifies that the :active pseudo-class must only apply to the primary button; on right-handed mice, this is ...
:default - CSS: Cascading Style Sheets
what this selector matches is defined in html standard §4.16.3 pseudo-classes — it may match the <button>, <input type="checkbox">, <input type="radio">, and <option> elements: a default option element is the first one with the selected attribute, or the first enabled option in dom order. multiple <select>s can have more than one selected option, so all will match :default. <input type="checkbox"> and <input type="radio"> match if they have the checked attribute. <button> matches if it is a <form>’s default submission button: the first <button> in dom order that belongs to the form. ...
:empty - CSS: Cascading Style Sheets
tons, etc.). accessible names expose the interactive control to the accessibility tree, an api that communicates information useful for assistive technologies. the text that provides the interactive control's accessible name can be hidden using a combination of properties that remove it visually from the screen but keep it parseable by assistive technology. this is commonly used for buttons that
rely solely on an icon to convey purpose. what is an accessible name? | the paciello group hidden content for better a11y | go make things mdn understanding wcag, guideline 2.4 explanations understanding success criterion 2.4.4 | w3c understanding wcag 2.0 specifications specification status comment selectors level 4the definition of 'the :empty pseudo-class' in t...
:fullscreen - CSS: Cascading Style Sheets
epending on whether or not the document is in full-screen mode. this is done without needing to specifically apply style changes using javascript. html the page's html looks like this: <h1>mdn web docs demo: :fullscreen pseudo-class</h1> <p>this demo uses the <code>:fullscreen</code> pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, enti
rely using css.</p> <button id="fs-toggle">toggle fullscreen</button> the <button> with the id "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode. css the magic happens in the css. there are two rules here. the first establishes the background color of the "toggle full-screen mode" button when the element is not in a full-screen...
:host() - CSS: Cascading Style Sheets
the :host() css pseudo-class function selects the shadow host of the shadow dom containing the css it is used inside (so you can select a custom element from inside its shadow dom) — but only if the selector given as the function's parameter matches the shadow host. the most obvious use of this is to put a class name only on certain custom element instances, and then include the
relevant class selector as the function argument. you can't use this with a descendant selector expression to select only instances of the custom element that are inside a particular ancestor. that's the job of :host-context(). note: this has no effect when used outside a shadow dom. /* selects a shadow root host, only if it is matched by the selector argument */ :host(.special-custom-element) { font-weig...
:hover - CSS: Cascading Style Sheets
the :hover css pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. it is generally triggered when the user hovers over an element with the cursor (mouse pointer). /* selects any <a> element when "hovered" */ a:hover { color: orange; } styles defined by the :active pseudo-class will be overridden by any subsequent link-
related pseudo-class (:link, :visited, or :active) that has at least equal specificity. to style links appropriately, put the :hover rule after the :link and :visited rules but before the :active one, as defined by the lvha-order: :link — :visited — :hover — :active. note: the :hover pseudo-class is problematic on touchscreens. depending on the browser, the :hover pseudo-class might never match, m...
:invalid - CSS: Cascading Style Sheets
der: 5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } input:required:invalid { border-color: #c00000; } result accessibility concerns the color red is commonly used to indicate invalid input. people who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not
rely on color to convey meaning. typically, descriptive text and/or an icon are used. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.1 | w3c understanding wcag 2.0 notes radio buttons if any one of the radio buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected. (grouped radio...
:link - CSS: Cascading Style Sheets
the :link css pseudo-class represents an element that has not yet been visited. it matches every unvisited <a>, <area>, or <link> element that has an href attribute. /* selects any <a> that has not been visited yet */ a:link { color: red; } styles defined by the :link pseudo-class will be overridden by any subsequent link-
related pseudo-class (:active, :hover, or :visited) that has at least equal specificity. to style links appropriately, put the :link rule before all other link-
related rules, as defined by the lvha-order: :link — :visited — :hover — :active. note: use :any-link to select an element independent of whether it has been visited or not. syntax :link examples by default, most browsers apply a special color value to visited links. thus, the links in this example w...
:optional - CSS: Cascading Style Sheets
y concerns if a form contains optional <input>s, required inputs should be indicated using the required attribute. this will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful form submission. required inputs should also be indicated visually, using a treatment that does not
rely solely on color to convey meaning. typically, descriptive text and/or an icon are used. mdn understanding wcag, guideline 3.3 explanations understanding success criterion 3.3.2 | w3c understanding wcag 2.0 specifications specification status comment html living standardthe definition of ':optional' in that specification. living standard no change. ...
:required - CSS: Cascading Style Sheets
ty concerns mandatory <input>s should have the required attribute applied to them. this will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful submission. if the form also contains optional inputs, required inputs should be indicated visually using a treatment that does not
rely solely on color to convey meaning. typically, descriptive text and/or an icon are used. mdn understanding wcag, guideline 3.3 explanations understanding success criterion 3.3.2 | w3c understanding wcag 2.0 specifications specification status comment html living standardthe definition of ':required' in that specification. living standard no change. ...
@charset - CSS: Cascading Style Sheets
the style sheet. it must be the first element in the style sheet and not be preceded by any character; as it is not a nested statement, it cannot be used inside conditional group at-rules. if several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an html element or inside the <style> element where the character set of the html page is
relevant. @charset "utf-8"; this at-rule is useful when using non-ascii characters in some css properties, like content. as there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result) : the value of the unicode byte-order character placed at the beginning of the file. the v...
additive-symbols - CSS: Cascading Style Sheets
nd a non-negative integer weight. the additive system is used to construct sign-value numbering systems such as roman numerals. syntax additive-symbols: 3 "0"; additive-symbols: 3 "0", 2 "\2e\20"; additive-symbols: 3 "0", 2 url(symbol.png); when the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed, use the symbols descriptor instead of additive-symbols. ...
fallback - CSS: Cascading Style Sheets
s to decimal. a couple of scenarios where a fallback style will be used are: when the range descriptor is specified for a counter style, the fallback style will be used to represent values that fall outside the range. 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. ...
negative - CSS: Cascading Style Sheets
a second symbol if specified, will be appended to the representation. the negative descriptor has effect only if the system value is symbolic, alphabetic, numeric, additive, or extends, if the extended counter style itself uses a negative sign. if the negative descriptor is specified for other systems that don't support negative counter values, then the descriptor is ignored. ...
pad - CSS: Cascading Style Sheets
ith the specified pad symbol. marker representations longer than the pad length are constructed as normal. pad descriptor takes the minimum marker length as an integer and a symbol to be used for padding as the second parameter. 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... ...
prefix - CSS: Cascading Style Sheets
r-style rule specifies content that will be prepended to the marker representation. if not specified, the default value will be "" (an empty string). syntax /* <symbol> values */ prefix: "»"; prefix: "page "; prefix: url(bullet.png); values <symbol> specifies a <symbol> that is prepended to the marker representation. it may be a <string>, <image>, or <custom-ident>. ...
range - CSS: Cascading Style Sheets
l result in the range 0 to positive infinity. for extends systems, the range is whatever auto will produce for the extended system. when range is specified as integers, the value infinite can be used to denote infinity. if infinite is specified as the first value in a range, then it is interpreted as negative infinity. if used as upper bound, it is taken as positive infinity. ...
suffix - CSS: Cascading Style Sheets
the suffix descriptor of the@counter-style rule specifies content that will be appended to the marker representation. syntax /* <symbol> values */ suffix: ""; suffix: ") "; suffix: url(bullet.png); values <symbol> specifies a <symbol> that is appended to the marker representation. it may be a <string>, <image>, or <custom-ident>. formal definition
related at-rule@counter-styleinitial value". " (full stop followed by a space)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )...
symbols - CSS: Cascading Style Sheets
24b8" d e; symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9"; symbols: url('first.svg') url('second.svg') url('third.svg'); symbols: indic-numbers; the symbols descriptor must be specified when the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed. when the additive system is used, use the additive-symbols descriptor instead to specify the symbols. ...
system - CSS: Cascading Style Sheets
rently defined counter style name, it will instead extend from the decimal counter style. it must not contain a symbols or additive-symbols descriptor, or else the counter style rule is invalid. if one more more counter styles defenitions form a cycle with their extends values, the browser will treat all the participating counter styles as extending from the decimal style. ...
@counter-style - CSS: Cascading Style Sheets
symbols is currently an 'at risk' feature, and is not implemented in any browser. @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. each additive tuple consists of a counter symbol and a non negative integer weight. the additive tuples must be specified in the descending order of their weights. speak-as describes how to read out the counter style in speech synthesizers, such as screen readers. for example, the value of the marker symbol can be read out as numbers or alpha...
font-display - CSS: Cascading Style Sheets
cessfully loads during this period, it is used normally. font swap period if the font face is not loaded, any element attempting to use it must render a fallback font face. if the font face successfully loads during this period, it is used normally. font failure period if the font face is not loaded, the user agent treats it as a failed load causing normal font fallback. ...
font-family - CSS: Cascading Style Sheets
the font-family css descriptor allows authors to specify the font family for the font specified in an @font-face rule. syntax /* <string> values */ font-family: "font family"; font-family: 'another font family'; /* <custom-ident> value */ font-family: examplefont; values <family-name> specifies the name of the font family. formal definition
related at-rule@font-faceinitial valuen/a (required)computed valueas specified formal syntax <family-name>where <family-name> = <string> | <custom-ident>+ examples setting the font family name @font-face { font-family: examplefont; src: url('examplefont.ttf'); } specifications specification status comment css fonts module level 3the definition of 'font-family' in that specification. candidate recommen...
font-stretch - CSS: Cascading Style Sheets
s, the "wdth" variation is used to implement varying glyph widths. accessibility concerns people with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a low contrast color ratio. ...
font-style - CSS: Cascading Style Sheets
selects a font classified as oblique, and additionally specifies an angle for the slant of the text. oblique with angle range selects a font classified as oblique, and additionally specifies a range of allowable angle for the slant of the text. note that a range is only supported when the font-style is oblique; for font-style: normal or italic, no second value is allowed. ...
font-variation-settings - CSS: Cascading Style Sheets
type axis names is passed to the text layout engine to enable or disable font features. each setting is always a <string> of 4 ascii characters, followed by a <number> indicating the axis value. if the <string> has more or fewer characters or contains characters outside the u+20 - u+7e codepoint range, the whole property is invalid. the <number> can be fractional or negative. ...
font-weight - CSS: Cascading Style Sheets
implement varying weights. 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. ...
unicode-range - CSS: Cascading Style Sheets
egmented so that a browser only needs to download the font resource needed for the text content of a particular page. for example, a site with many localizations could provide separate font resources for english, greek and japanese. for users viewing the english version of a page, the font resources for greek and japanese fonts wouldn't need to be downloaded, saving bandwidth. formal definition
related at-rule@font-faceinitial valueu+0-10ffffcomputed valueas specified formal syntax <unicode-range># examples using a different font for a single character in this example we create a simple html containing a single <div> element, including an ampersand, that we want to style with a different font. to make it obvious, we will use a sans-serif font, helvetica, for the text, and a serif font,...
@import - CSS: Cascading Style Sheets
the @import css at-rule is used to import style rules from other style sheets. 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. the url may be absolute or
relative. note that the url for a mozilla package need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g. chrome://communicator/skin/). see here for more information. list-of-media-queries is a comma-separated list of media queries conditioning the application of the css rules defined in the linked url. if the browser does not support any these queries, it d...
color-index - CSS: Cascading Style Sheets
ax-color-index variants to query minimum and maximum values, respectively. examples basic example html <p>this is a test.</p> css p { color: black; } @media (color-index) { p { color: red; } } @media (min-color-index: 15000) { p { color: #1475ef; } } result custom stylesheet this html will apply a special stylesheet for devices that have at least 256 colors. <link
rel="stylesheet" href="http://foo.bar.com/base.css" /> <link
rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.css" /> specifications specification status comment media queries level 4the definition of 'color-index' in that specification. candidate recommendation the value can now be negative, in which case it compute...
device-height - CSS: Cascading Style Sheets
d to test the height of an output device's rendering surface. syntax the device-height feature is specified as a <length> value. it is a range feature, meaning that you can also use the prefixed min-device-height and max-device-height variants to query minimum and maximum values, respectively. examples this html applies a special stylesheet for devices that are shorter than 800 pixels. <link
rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" /> specifications specification status comment media queries level 4the definition of 'device-height' in that specification. candidate recommendation deprecated in media queries level 4. media queriesthe definition of 'device-height' in that specificat...
device-width - CSS: Cascading Style Sheets
used to test the width of an output device's rendering surface. syntax the device-width feature is specified as a <length> value. it is a range feature, meaning that you can also use the prefixed min-device-width and max-device-width variants to query minimum and maximum values, respectively. examples this html applies a special stylesheet for devices that are narrower than 800 pixels. <link
rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.css" /> specifications specification status comment media queries level 4the definition of 'device-width' in that specification. candidate recommendation deprecated in media queries level 4. media queriesthe definition of 'device-width' in that specificatio...
forced-colors - CSS: Cascading Style Sheets
w 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. user preferences currently no user agent implements this feature, although various operating systems do support such preferences and if this media query is ever implemented user agents will likely
rely on the settings provided by the operating system in use. examples note: no browser currently implements this feature so the following example will not work. this example has an annoying color palette by default. this example does not take advantage of the colors provided by the user agent. html <div class="colors">weird color box</div> css .colors { background-color: red; color: gr...
prefers-contrast - CSS: Cascading Style Sheets
this keyword value evaluates as false in a boolean context. more indicates that user has notified the system that they prefer an interface that has a higher level of contrast. less indicates that user has notified the system that they prefer an interface that has a lower level of contrast. user preferences various operating systems do support such preferences and user agents are likely to
rely on the settings provided by the operating system. examples this example has an annoying low contrast by default. html <div class="contrast">low contrast box</div> css .contrast { width: 100px; height: 100px; outline: 2px dashed black; } @media (prefers-contrast: high) { .contrast { outline: 2px solid black; } } result specifications specification status ...
prefers-reduced-transparency - CSS: Cascading Style Sheets
ue evaluates as false in the boolean context. reduce indicates that user has notified the system that they prefer an interface that minimizes the amount of transparent or translucent layer effects. user preferences currently no user agent implements this feature, although various operating systems do support such preferences and if this media query is ever implemented user agents will likely
rely on the settings provided by the operating systems. examples note: no browser currently implements this feature so the following example will not work. this example has an annoying transparency effect by default. html <div class="transparency">transparent box</div> css .transparency { opacity: 0.5; } @media (prefers-reduced-transparency: reduce) { .transparency { opacity: 1; ...
shape - CSS: Cascading Style Sheets
al, an ellipse for which distinctively rounded designs are appropriate. examples basic example html <h1>hello world!</h1> css h1 { text-align: left; } @media (shape: rect) { h1 { text-align: left; } } @media (shape: round) { h1 { text-align: center; } } custom stylesheet this html will apply a special stylesheet for devices that have round screens. <head> <link
rel="stylesheet" href="default.css" /> <link media="screen and (shape: rect)"
rel="stylesheet" href="rectangle.css" /> <link media="screen and (shape: round)"
rel="stylesheet" href="round.css" /> </head> specifications specification status css round display level 1the definition of 'shape' in that specification. working draft ...
update - CSS: Cascading Style Sheets
as a single keyword value chosen from the list below. none once it has been rendered, the layout can no longer be updated. example: documents printed on paper. slow the layout may change dynamically according to the usual rules of css, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation. examples: e-book readers or seve
rely underpowered devices. fast the layout may change dynamically according to the usual rules of css, and the output device is not unusually constrained in speed, so regularly-updating things like css animations can be used. example: computer screens. examples html <p>if this text animates for you, you are using a fast-updating device.</p> css @keyframes jiggle { from { transform: tra...
@media - CSS: Cascading Style Sheets
itional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in media queries 4 and shouldn't be used. the aural type has been replaced by speech, which is similar. media features media features describe specific characteristics of the user agent, output device, or environment. media feature expressions test for their presence or value, and are enti
rely optional. each media feature expression must be surrounded by parentheses. name summary notes any-hover does any available input mechanism allow the user to hover over elements? added in media queries level 4. any-pointer is any available input mechanism a pointing device, and if so, how accurate is it? added in media queries level 4. as...
bleed - CSS: Cascading Style Sheets
e marks property. syntax /* keyword values */ bleed: auto; /* <length> values */ bleed: 8pt; bleed: 1cm; values auto computes to 6pt if the value of marks is crop. otherwise it computes to zero. <length> specifies by how far outward, in each direction, the bleed area extends past the page box. values may be negative, but there may be implementation-specific limits. formal definition
related at-rule@pageinitial valueautocomputed valueas specified formal syntax auto | <length> examples setting a page bleed of 1cm @page { bleed: 1cm; } specifications specification status comment css paged media module level 3the definition of 'bleed' in that specification. working draft initial definition ...
marks - CSS: Cascading Style Sheets
marks and cross marks are printed outside the page box. to have room to show crop and cross marks, the final pages will have to be somewhat bigger than the page box. syntax /* keyword values */ marks: none; marks: crop; marks: cross; marks: crop cross; values crop crop marks will be displayed. cross cross marks will be displayed. none no marks will be displayed. formal definition
related at-rule@pageinitial valuenonecomputed valueas specified formal syntax none | [ crop | cross ] examples adding crop and cross marks @page { marks: crop cross; } specifications specification status comment css paged media module level 3the definition of 'marks' in that specification. working draft initial definition this css property was initia...
@page - CSS: Cascading Style Sheets
yond the page box at which the page rendering is clipped. description you can't change all css properties with @page. you can only change the margins, orphans, widows, and page breaks of the document. attempts to change any other css properties will be ignored. the @page at-rule can be accessed via the css object model interface csspagerule. note: the w3c is discussing how to handle viewport-
related <length> units, vh, vw, vmin, and vmax. meanwhile do not use them within a @page at-rule. formal syntax @page <page-selector-list> { <page-body> }where <page-selector-list> = [ <page-selector># ]?<page-body> = <declaration>? [ ; <page-body> ]? | <page-margin-box> <page-body>where <page-selector> = <pseudo-page>+ | <ident> <pseudo-page>*<page-margin-box> = <page-margin-box-type> '{' <decla...
max-zoom - CSS: Cascading Style Sheets
keyword value */ max-zoom: auto; /* <number> values */ max-zoom: 0.8; max-zoom: 2.0; /* <percentage> value */ max-zoom: 150%; values auto the user agent will set the document's upper zoom factor limit. <number> a non-negative number limiting the maximum value of the zoom factor. <percentage> a non-negative percentage limiting the maximum value of the zoom factor. ...
min-zoom - CSS: Cascading Style Sheets
keyword value */ min-zoom: auto; /* <number> values */ min-zoom: 0.8; min-zoom: 2.0; /* <percentage> value */ min-zoom: 150%; values auto the user agent will set the document's lower zoom factor limit. <number> a non-negative number limiting the minimum value of the zoom factor. <percentage> a non-negative percentage limiting the minimum value of the zoom factor. ...
orientation - CSS: Cascading Style Sheets
ically based on the device's orientation as determined by an accelerometer (if the device has such a hardware sensor), although there is often a user-controlled, os-level "lock orientation" setting that will trump the accelerometer reading. portrait the document should be locked into portrait orientation. landscape the document should be locked into landscape orientation. formal definition
related at-rule@viewportinitial valueautopercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax auto | portrait | landscape examples setting viewport orientation @viewport { orientation: landscape; } specifications specification status comment css device adaptationthe definition of '"orientation" descriptor' in that specification. ...
user-zoom - CSS: Cascading Style Sheets
ed; syntax values zoom the user can zoom in or out. fixed the user cannot zoom in or out. accessibility concerns disabling zooming capabilities prevents people experiencing low vision conditions from being able to read and understand page content. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition
related at-rule@viewportinitial valuezoompercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax zoom | fixed examples disabling user zoom @viewport { user-zoom: fixed; } specifications specification status comment css device adaptationthe definition of '"user-zoom" descriptor' in that specification. working draft initial definit...
viewport-fit - CSS: Cascading Style Sheets
t variables to ensure that important content doesn't end up outside the display. this descriptor hasn't been added to https://github.com/mdn/data/blob/master/css/at-rules.json yet. accessibility concerns when using the viewport-fit descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the safe area inset variables. formal definition
related at-rule@viewportinitial valueautocomputed valueas specified formal syntax auto | contain | cover examples scaling viewport to fit device display @viewport { viewport-fit: cover; } specifications specification status comment css round display level 1the definition of '"viewport-fit" descriptor' in that specification. working draft initial definition. ...
zoom - CSS: Cascading Style Sheets
*/ zoom: 0.8; zoom: 2.0; /* <percentage> values */ zoom: 150%; values auto the user agent will set the document's initial zoom factor. the user agent may use the size of canvas area on which the document is rendered to determine that factor. <number> a non-negative number used as the zoom factor. <percentage> a non-negative percentage value used as the zoom factor. ...
@viewport - CSS: Cascading Style Sheets
github.com/w3c/csswg-drafts/issues/4766 for discussion around @viewport's removal from the standards track. the @viewport css at-rule lets you configure the viewport through which the document is viewed. it's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as microsoft edge). lengths specified as percentages are calculated
relative to the initial viewport, which is the viewport before any user agent or authored styles have had an opportunity to adjust the viewport. this is typically based on the size of the window on desktop browsers that aren't in full screen mode. on mobile devices (or desktop devices that are in full screen mode), the initial viewport is usually the portion of a device's screen that is available fo...
CSS Animations - CSS: Cascading Style Sheets
animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function css at-rules @keyframes guides detecting css animation support describes a technique for detecting if a browser supports css animations. using css animations step-by-step tutorial about how to create animations using css. this article describes each
relevant css property and at-rule and explains how they interact with each other. css animations tips and tricks tips and tricks to help you get the most out of css animations. currently offers a technique for replaying an animation which has already run through to completion, which the api doesn't support inherently. specifications specification status comment css an...
Using URL values for the cursor property - CSS: Cascading Style Sheets
r example. in gecko (firefox) the limit of the cursor size is 128×128px. larger cursor images are ignored. however, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms. (due to a bug in gecko 1.9.2-1.9.2.6, firefox 3.6-3.6.6 on windows limits to 32×32px. this is fixed in later versions.) translucent cursors are not supported on windows
releases earlier than xp. this is a limitation of the operating system. transparency works on all platforms. url values as cursors are supported in windows, os/2, and linux (when using gtk+ 2.4 or better)
releases of mozilla. mac os x support was added with gecko 2 (firefox 4). ...
CSS Basic User Interface - CSS: Cascading Style Sheets
reference properties appearance box-sizing cursor ime-mode nav-down nav-left nav-right nav-up outline outline-width outline-style outline-color outline-offset resize text-overflow user-select guides using url values for the cursor property explains how a url can be used with the cursor property to produce custom cursors. ...
CSS Color - CSS: Cascading Style Sheets
, opacity, and how you can apply these colors and effects to html content. not all css properties that take a <color> as a value are part of this module, but they do depend upon it. reference properties color color-adjust opacity data types <color> guides applying color to html elements using css a guide to using css to apply color to a variety of types of content. all color-
related css properties are touched upon. tools color picker tool this tool makes it easy to create, adjust, and experiment with custom colors. specifications specification status comment css color module level 4 working draft css color module level 3 recommendation css level 2 (revision 1) recommendation css level 1 ...
CSS Display - CSS: Cascading Style Sheets
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 layout methods backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout
relationship to other layout methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid layout grids, logical values and writing modes css grid layout and acces...
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
em is collapsed by setting visibility: collapse on an item. see the mdn documentation for the visibility property. the specification describes the behaviour as follows: “specifying visibility:collapse on a flex item causes it to become a collapsed flex item, producing an effect similar to visibility:collapse on a table-row or table-column: the collapsed flex item is removed from rendering enti
rely, but leaves behind a "strut" that keeps the flex line’s cross-size stable. thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container’s main size, but is guaranteed to have no effect on its cross size and won’t cause the rest of the page’s layout to "wobble". flex line wrapping is re-done after collapsing, however, so the ...
CSS Flexible Box Layout - CSS: Cascading Style Sheets
ment specification for up to date definitions. also additional alignment properties are now defined in box alignment. justify-content align-content align-items align-self place-content place-items row-gap column-gap gap glossary entries flexbox flex container flex item main axis cross axis flex guides basic concepts of flexbox an overview of the features of flexbox
relationship of flexbox to other layout methods how flexbox
relates to other layout methods, and other css specifications aligning items in a flex container how the box alignment properties work with flexbox. ordering flex items explaining the different ways to change the order and direction of items, and covering the potential issues in doing so. controlling ratios of flex items along the main...
Flow Layout and Overflow - CSS: Cascading Style Sheets
ow-y properties. if you specify only one value for overflow, this value is used for both axes. however, you can specify both values in which case the first is used for overflow-x and therefore the horizontal direction, and the second for overflow-y and the vertical direction. in the below example, i have only specified overflow-y: scroll so we do not get the unwanted horizontal scrollbar. flow
relative properties in the guide to writing modes and flow layout, we looked at the newer properties of block-size and inline-size which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen. the level 3 overflow module also includes flow
relative properties for overflow - overflow-block and overflow-inline. these correspond to overf...
Introduction to formatting contexts - CSS: Cascading Style Sheets
the float. our <div> now becomes a mini-layout inside our layout. any child element will be contained inside it. the problem with using overflow to create a new bfc is that the overflow property is meant for telling the browser how you wish to deal with overflowing content. there are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property pu
rely to create a bfc. in addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow for this purpose. if you do this, it would be a good idea to comment the code to explain. 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 o...
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
</div> dl { display: grid; grid-template-columns: auto 1fr; max-width: 300px; margin: 1em; line-height: 1.4; } dt { grid-column: 1; font-weight: bold; } dd { grid-column: 2; } what can’t we do with auto-placement (yet)? there are a couple of things that often come up as questions. currently we can’t do things like target every other cell of the grid with our items. a
related issue may have already come to mind if you followed the last guide about named lines on the grid. it would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.there is an issue raised about this on the csswg github repository, and you would be welcome to add your own use cases to this. it may be that you come up with you...
Basic Concepts of grid layout - CSS: Cascading Style Sheets
as you can see in the example it has not inherited the grid-gap of the parent and the lines in the nested grid do not align to the lines in the parent grid. subgrid in the working draft of the level 2 grid specification there is a feature called subgrid, which would let us create nested grids that use the track definition of the parent grid. note: this feature shipped ...
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
egative margins to create my gutters. how does the specification define these overrides? the css grid layout specification details why we can overwrite the behavior of certain properties when something becomes a grid item. the key sections of the specification are: establishing grid containers grid items grid item display as this behavior is detailed in the specification, you are safe to
rely on using these overrides in your support for older browsers. nothing that i am describing here should be seen as a "hack", we are taking advantage of the fact that the grid specification details the interaction between different layout methods. other values of display when an element has a parent set to display: grid it is blockified, as defined in the css display specification. in the case of...
Grid template areas - CSS: Cascading Style Sheets
nctionality offered by this shorthand later in these guides when we take a look at auto placement and the grid-auto-flow property. if you have worked through these initial guides you now should be in a position to create grid layouts using line-based placement or named areas. take some time to build some common layout patterns using grid, while there are lots of new terms to learn, the syntax is
relatively straightforward. as you develop examples, you are likely to come up with some questions and use cases for things we haven't covered yet. in the rest of these guides we will be looking at some more of the detail included in the specification – in order that you can begin to create advanced layouts with it. ...
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
> </div> .box1 { grid-area: 1 / 1 / 4 / 2; } .box2 { grid-area: 1 / 3 / 3 / 4; } .box3 { grid-area: 1 / 2 / 2 / 3; } .box4 { grid-area: 3 / 2 / 4 / 4; } this order of values for grid-area can seem a little strange, it is the opposite of the direction in which we specify margins and padding as a shorthand for example. it may help to realize that this is due to grid using the flow-
relative directions defined in the css writing modes specification. we will explore how grids work with writing modes in a later article however we have the concept of four flow-
relative directions: block-start block-end inline-start inline-end we are working in english, a left-to-right language. our block-start is the top row line of the grid container, block-end the final row line of the co...
Using CSS gradients - CSS: Cascading Style Sheets
op to bottom, with the first specified being on top. <div class="layered-image"></div> div { width: 300px; height: 150px; } .layered-image { background: linear-gradient(to right, transparent, mistyrose), url("https://mdn.mozillademos.org/files/15525/critters.png"); } stacked gradients you can even stack gradients with other gradients. as long as the top gradients aren't enti
rely opaque, the gradients below will still be visible. <div class="stacked-linear"></div> div { width: 200px; height: 200px; } .stacked-linear { background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); } using ra...
Consistent list indentation - CSS: Cascading Style Sheets
item and <ul> borders in place, we get the result shown in figure 5. gecko, on the other hand, sets a left padding of 40 pixels for the <ul> element, so given the exact same styles as were used to produce figure 5, loading the example into a gecko-based browser gives us figure 6. as we can see, the markers remain attached to the <li> elements, no matter where they are. the difference is enti
rely in how the <ul> is styled. we can only see the difference if we try to set a background or border on the <ul> element. finding consistency boil it all down, and what we're left with is this: if you want consistent rendering of lists between gecko, internet explorer, and opera, you need to set both the left margin and left padding of the <ul> element. we can ignore <li> altogether for these pur...
Logical properties for sizing - CSS: Cascading Style Sheets
in this guide we will explain the flow-
relative mappings between physical dimension properties and logical properties used for sizing elements on our pages. when specifying the size of an item, the logical properties and values specification gives you the ability to indicate sizing as it
relates to the flow of text (inline and block) rather than physical sizing which
relates to the physical dimensions of horizontal and vertical (e.g. left and right). while these flow
relative mappings may well become the default for many of us, in a design you may well use both physical and logical sizing. you might want some features to always
relate to the physical dimensions whatever the writing mode. mappings for dimensions the table below provides mappings between logical and physical properties. the...
CSS Overflow - CSS: Cascading Style Sheets
in css overflow happens when the content of a box extends past one or more of the box's edges. ink overflow and scrollable overflow there are two types of overflow that you might encounter in css. the first is described as ink overflow. this is the overflow of painting effects which do not affect layout or otherwise extend the scrollable overflow region, such as box shadows, border images, text decoration, overhanging glyphs, outlines, etc. the overflow that we sometimes need to manage in css is described as scrollable overflow. ...
Specificity - CSS: Cascading Style Sheets
specificity is based on the matching rules which are composed of different sorts of css selectors. how is specificity calculated? specificity is a weight that is applied to a given css declaration, determined by the number of each selector type in the matching selector. when multiple declarations have equal specificity, the last declaration found in the css is applied to the element. specificity only applies when the same element is targeted by multiple declarations. ...
CSS Tutorials - CSS: Cascading Style Sheets
ens or printed sheets vary greatly nowadays. media queries are the fundamental building blocks in achieving web sites that render everywhere in their best quality. understanding z-index controlling superposition of boxes is a basic feature that is very quickly needed by web developers. though not that difficult, it requires a basic knowledge of css. intermediate-level css tutorials after the
release of css 2 (level 1), new features have been added to css. some of them are fancy and are pretty self contained. they are easy to use for anybody with a fair knowledge of basic concepts. css counters counting items and pages is an easy task in css. learn to use counter-reset, counter-increment, counters(), and counter(). css animations css3 animations allow you to define configurations of...
WebKit CSS extensions - CSS: Cascading Style Sheets
pseudo-classes :-webkit-animating-full-screen-transition :-webkit-any() :-webkit-any-link* :-webkit-autofill :-webkit-autofill-strong-password :-webkit-drag :-webkit-full-page-media :-webkit-full-screen* :-webkit-full-screen-ancestor :-webkit-full-screen-document :-webkit-full-screen-controls-hidden * now standard. note: if there is an invalid pseudo-class within...
align-content - CSS: Cascading Style Sheets
ight/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis. safe used alongside an alignment keyword. if the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start. unsafe used alongside an alignment keyword. regardless of the
relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored. formal definition initial valuenormalapplies tomulti-line flex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>where <ba...
align-items - CSS: Cascading Style Sheets
stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints. safe used alongside an alignment keyword. if the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start. unsafe used alongside an alignment keyword. regardless of the
relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored. formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]where <baseline-position> = [ first |...
align-self - CSS: Cascading Style Sheets
equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size of all auto-sized items exactly fills the alignment container along the cross axis. safe if the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start. unsafe regardless of the
relative sizes of the item and alignment container, the given alignment value is honored. formal definition initial valueautoapplies toflex items, grid items, and absolutely-positioned boxesinheritednocomputed valueauto computes to itself on absolutely-positioned elements, and to the computed value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has...
animation-fill-mode - CSS: Cascading Style Sheets
me encountered normal even or odd 100% or to reverse even or odd 0% or from alternate even 0% or from alternate odd 100% or to alternate-reverse even 100% or to alternate-reverse odd 0% or from backwards the animation will apply the values defined in the first
relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period. the first
relevant keyframe depends on the value of animation-direction: animation-direction first
relevant keyframe normal or alternate 0% or from reverse or alternate-reverse 100% or to both the animation will follow the rul...
aspect-ratio - CSS: Cascading Style Sheets
ecified by box-sizing. formal definition initial valueautoapplies toall elements except inline boxes and internal ruby or table boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | <ratio> examples mapping width and height to aspect-ratio firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements and other
related elements that accept width and height attributes. this appears in the browser's internal ua stylesheet. chrome is also shipping this feature. in firefox, the internal stylesheet rule looks like this: img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } specifications specification status comment ...
background-image - CSS: Cascading Style Sheets
he interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the background images are drawn on stacking context layers on top of each other. the first layer specified is drawn as if it is closest to the user. the borders of the element are then drawn on top of them, and the background-color is drawn beneath them. how the images are drawn
relative to the box and its borders is defined by the background-clip and background-origin css properties. if a specified image cannot be drawn (for example, when the file denoted by the specified uri cannot be loaded), browsers handle it as they would a none value. note: even if the images are opaque and the color won't be displayed in normal circumstances, web developers should always specify a ...
background-origin - CSS: Cascading Style Sheets
ackground-attachment is fixed. 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. values border-box the background is positioned
relative to the border box. padding-box the background is positioned
relative to the padding box. content-box the background is positioned
relative to the content box. formal definition initial valuepadding-boxapplies toall elements. it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <box>#where <box> = border-box | pa...
background-repeat - CSS: Cascading Style Sheets
when the next image is added, all of the current ones compress to allow room. example: an image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. they will then compress to 225px. no-repeat the image is not repeated (and hence the background image painting area will not necessarily be enti
rely covered). the position of the non-repeated background image is defined by the background-position css property. formal definition initial valuerepeatapplies toall elements. 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-styl...
block-size - CSS: Cascading Style Sheets
pull request. syntax /* <length> values */ block-size: 300px; block-size: 25em; /* <percentage> values */ block-size: 75%; /* keyword values */ block-size: max-content; block-size: min-content; block-size: fit-content(20em); block-size: auto; /* global values */ block-size: inherit; block-size: initial; block-size: unset; if the writing mode is vertically oriented, the value of block-size
relates to the width of the element; otherwise, it
relates to the height of the element. a
related property is inline-size, which defines the other dimension of the element. initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); syntax values the block-size property ...
border-block-end-color - CSS: Cascading Style Sheets
olor property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax border-block-end-color: yellow; border-block-end-color: #f5f6f7;
related properties are border-block-start-color, border-inline-start-color, and border-inline-end-color, which define the other border colors of the element. values <'color'> the color of the border. see color. formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border col...
border-block-end-style - CSS: Cascading Style Sheets
e, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-style'> values */ border-block-end-style: dashed; border-block-end-style: dotted; border-block-end-style: groove;
related properties are border-block-start-style, border-inline-start-style, and border-inline-end-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples ...
border-block-end-width - CSS: Cascading Style Sheets
n the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-block-end-width: 5px; border-block-end-width: thick;
related properties are border-block-start-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is ...
border-block-end - CSS: Cascading Style Sheets
d to set the values for one or more of border-block-end-width, border-block-end-style, and border-block-end-color. the physical border to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation.
related properties are border-block-start, border-inline-start, and border-inline-end, which define the other borders of the element. values the border-block-end is specified with one or more of the following, in any order: <'border-width'> the width of the border. see border-width. <'border-style'> the line style of the border. see border-style. <'color'> the color of the border. see color...
border-block-start-color - CSS: Cascading Style Sheets
or property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax border-block-start-color: blue; border-block-start-color: #4c5d21;
related properties are border-block-end-color, border-inline-start-color, and border-inline-end-color, which define the other border colors of the element. values <'color'> see border-color formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text...
border-block-start-style - CSS: Cascading Style Sheets
ection, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-style'> values */ border-block-start-style: dashed; border-block-start-style: dotted; border-block-start-style: groove;
related properties are border-block-end-style, border-inline-start-style, and border-inline-end-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples da...
border-block-start-width - CSS: Cascading Style Sheets
e values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-block-start-width: 5px; border-block-start-width: thick;
related properties are border-block-end-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border. see...
border-block-start - CSS: Cascading Style Sheets
et the values for one or more of border-block-start-width, border-block-start-style, and border-block-start-color. the physical border to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation.
related properties are border-block-end, border-inline-start, and border-inline-end, which define the other borders of the element. values the border-block-start is specified with one or more of the following, in any order: <'border-width'> the width of the border. see border-width. <'border-style'> the line style of the border. see border-style. <'color'> the color of the border. see color...
border-image-outset - CSS: Cascading Style Sheets
nt's corresponding border-widths. for example, if an element has border-width: 1em 2px 0 1.5rem, and border-image-outset: 2, the final border-image-outset would be calculated as 2em 4px 0 3rem. formal definition initial value0applies toall elements, except internal table elements when border-collapse is collapse. ...
border-image-slice - CSS: Cascading Style Sheets
third creates a slice measured from the bottom. when four positions are specified, they create slices measured from the top, right, bottom, and left in that order (clockwise). the optional fill value, if used, can be placed anywhere in the declaration. values <number> represents an edge offset in pixels for raster images and coordinates for vector images. for vector images, the number is
relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases. <percentage> represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets. fill preserves the middle image region and displays it like a background image, but stacked above the actual backg...
border-inline-end-color - CSS: Cascading Style Sheets
erty depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax border-inline-end-color: rebeccapurple; border-inline-end-color: #663399;
related properties are border-block-start-color, border-block-end-color, and border-inline-start-color, which define the other border colors of the element. initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color values <'color'> the color of the border. see color. formal definition initial valuecurrentcolorapplies toall elementsinheritedno...
border-inline-end-style - CSS: Cascading Style Sheets
direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-style'> values */ border-inline-end-style: dashed; border-inline-end-style: dotted; border-inline-end-style: groove;
related properties are border-block-start-style, border-block-end-style, and border-inline-start-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples h...
border-inline-end-width - CSS: Cascading Style Sheets
the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-inline-end-width: 2px; border-inline-end-width: thick;
related properties are border-block-start-width, border-block-end-width, and border-inline-start-width, which define the other border widths of the element. initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border. se...
border-inline-end - CSS: Cascading Style Sheets
ax border-inline-end: 1px; border-inline-end: 2px dashed; border-inline-end: medium dashed blue; the physical border to which border-inline-end maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation.
related properties are border-block-start, border-block-end, and border-inline-start, which define the other borders of the element. initial valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shortha...
border-inline-start-color - CSS: Cascading Style Sheets
r property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax border-inline-start-color: red; border-inline-start-color: #ee4141;
related properties are border-block-start-color, border-block-end-color, and border-inline-end-color, which define the other border colors of the element. values <'color'> the color of the border. see color. formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> ...
border-inline-start-style - CSS: Cascading Style Sheets
ion, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-style'> values */ border-inline-start-style: dashed; border-inline-start-style: dotted; border-inline-start-style: groove;
related properties are border-block-start-style, border-block-end-style, and border-inline-end-style, which define the other border styles of the element. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete values <'border-style'> the line style of the border. see border-style. formal definition initial valuenoneapplies toall elementsinheritedno...
border-inline-start-width - CSS: Cascading Style Sheets
values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-inline-start-width: 5px; border-inline-start-width: thick;
related properties are border-block-start-width, border-block-end-width, and border-inline-end-width, which define the other border widths of the element. values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is non...
border-inline-start - CSS: Cascading Style Sheets
r-inline-start: 1px; border-inline-start: 2px dotted; border-inline-start: medium dashed green; the physical border to which border-inline-start maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation.
related properties are border-block-start, border-block-end, and border-inline-end, which define the other borders of the element. values the border-inline-start is specified with one or more of the following, in any order: <'border-width'> the width of the border. see border-width. <'border-style'> the line style of the border. see border-style. <'color'> the color of the border. see color...
border-spacing - CSS: Cascading Style Sheets
for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the
relevant (horizontal or vertical) border-spacing and the
relevant (top, right, bottom, or left) padding on the table. note: the border-spacing property is equivalent to the deprecated cellspacing <table> attribute, except that it has an optional second value that can be used to set different horizontal and vertical spacing. syntax /* <length> */ border-spacing: 2px; /* horizontal <length> | ver...
box-shadow - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the box-shadow property enables you to cast a drop shadow from the frame of almost any element. ...
box-sizing - CSS: Cascading Style Sheets
ou added, and the content box will shrink to absorb that extra width. this typically makes it much easier to size elements. note: it is often useful to set box-sizing to border-box to layout elements. this makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. on the other hand, when using position:
relative or position: absolute, use of box-sizing: content-box allows the positioning values to be
relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable. syntax the box-sizing property is specified as a single keyword chosen from the list of values below. values content-box this is the initial and default value as specified by the css st...
calc() - CSS: Cascading Style Sheets
are treated as simple parentheses. formal syntax calc( <calc-sum> )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when calc() is used for controlling text size, be sure that one of the values includes a
relative length unit, for example: h1 { font-size: calc(1.5rem + 3vw); } this ensures that text size will scale if the page is zoomed. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 usage with integers when calc() is used where an <integer> is expected, the value will be rounded to the nearest integer. for example: .m...
clip-path - CSS: Cascading Style Sheets
flex: 1 auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: center; flex: 1; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { display: inline-block; border: 1px dotted grey; position:
relative; } .container:before { content: 'margin'; position: absolute; top: 2px; left: 2px; font: italic .6em sans-serif; } .viewbox { box-shadow: 1rem 1rem 0 #efefef inset, -1rem -1rem 0 #efefef inset; } .container.viewbox:after { content: 'viewbox'; position: absolute; left: 1.1rem; top: 1.1rem; font: italic .6em sans-serif; } .cell span { display: block; margin-bottom...
clip - CSS: Cascading Style Sheets
applies toabsolutely positioned elementsinheritednocomputed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position:
relative; width: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 175px 113px 0); } #middle { left: 280px; clip: rect(119px 255px 229px 80px); } #bottom-right { left: 200px; clip: rect(235px 335px 345px 160px); } html <p class="dotted-border"> <img src="https://udn.realityripple.com/samples/8f/...
column-count - CSS: Cascading Style Sheets
olumn-count: 3; /* global values */ column-count: inherit; column-count: initial; column-count: unset; values auto the number of columns is determined by other css properties, such as column-width. <integer> is a strictly positive <integer> describing the ideal number of columns into which the content of the element will be flowed. if the column-width is also set to a non-auto value, it me
rely indicates the maximum allowed number of columns. formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritednocomputed valueas specifiedanimation typean integer formal syntax <integer> | auto examples splitting a paragraph across three columns html <p class="content-box"> this is a bunch of text split into three columns using the css `column-coun...
column-width - CSS: Cascading Style Sheets
or this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property can help you create responsive designs that fit different screen sizes. especially in the presence of the column-count property (which has precedence), you must specify all
related length values to achieve an exact column width. in horizontal text these are width, column-width, column-gap, and column-rule-width. 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 specifie...
columns - CSS: Cascading Style Sheets
n any order. values <'column-width'> the ideal column width, defined as a <length> or the keyword auto. the actual width may be wider or narrower to fit the available space. see column-width. <'column-count'> the ideal number of columns into which the element's content should be flowed, defined as an <integer> or the keyword auto. if neither this value nor the column's width are auto, it me
rely indicates the maximum allowable number of columns. see column-count. formal definition initial valueas each of the properties of the shorthand:column-width: autocolumn-count: autoapplies toblock containers except table wrapper boxesinheritednocomputed valueas each of the properties of the shorthand:column-width: the absolute length, zero or largercolumn-count: as specifiedanimation typeas eac...
cursor - CSS: Cascading Style Sheets
ry keyword value. each <url> should point to an image file. the browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified). each <url> may be optionally followed by a pair of space-separated numbers, which represent <x><y> coordinates. these will set the cursor's hotspot,
relative to the top-left corner of the image. 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. more than o...
<display-box> - CSS: Cascading Style Sheets
these keywords define whether an element generates display boxes at all. syntax valid <display-box> values: contents these elements don't produce a specific box by themselves. they are replaced by their pseudo-box and their child boxes. please note that the css display level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered pu
rely by css box concepts such as replaced elements. see appendix b: effects of display: contents on unusual elements for more details. due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. see the accessibility concerns section below for more details. none turns off the display of an element so that it has no effe...
hue-rotate() - CSS: Cascading Style Sheets
the hue-rotate() css function rotates the hue of an element and its contents. its result is a <filter-function>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax hue-rotate(angle) parameters angle the
relative change in hue of the input sample, specified as an <angle>. a value of 0deg leaves the input unchanged. a positive hue rotation increases the hue value, while a negative rotation decreases the hue value. the lacuna value for interpolation is 0. there is no minimum or maximum value; hue-rotate(ndeg) evaluates to n modulo 360. examples hue-rotate(-90deg) /* same as 270deg rotation */ hue-rotate(...
fit-content() - CSS: Cascading Style Sheets
min-height, max-width and max-height, where the maximum and minimum sizes refer to the content size. syntax the fit-content() function accepts a <length> or a <percentage> as an argument. /* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%) values <length> an absolute length. <percentage> a percentage
relative to the available space in the given axis. in grid properties it is
relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. otherwise it is
relative to the available inline size or block size of the laid out box depending on the writing mode. examples sizing grid columns with fit-content html <div id="container"> <...
<flex> - CSS: Cascading Style Sheets
syntax the <flex> data type is specified as a <number> followed by the unit fr. the fr unit represents a fraction of the leftover space in the grid container. as with all css dimensions, there is no space between the unit and the number. ...
font-family - CSS: Cascading Style Sheets
nteractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. values are separated by commas to indicate that they are alternatives. the browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule. it is often convenient to use the shorthand property font to set font-size and other font
related properties all at once. 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. this lets the browser select an acceptable fallback font when necessary. the font-family property specifies a list of fonts, from highest priority to lowest. font selection does not simply stop at the first font in the list th...
justify-content - CSS: Cascading Style Sheets
size exactly fills the alignment container along the main axis. note: stretch is not supported by flexible boxes (flexbox). safe used alongside an alignment keyword. if the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start. unsafe used alongside an alignment keyword. regardless of the
relative sizes of the item and alignment container, and regardless of whether overflow which causes data loss might happen, the given alignment value is honored. formal definition initial valuenormalapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]where <c...
justify-items - CSS: Cascading Style Sheets
y auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container. safe if the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start. unsafe regardless of the
relative sizes of the item and alignment container, the given alignment value is honored. legacy makes the value inherited by the box descendants. note that if a descendant has a justify-self: auto value, the legacy keyword is not considered by the descend, only the left, right, or center value associated to it. formal definition initial valuelegacyapplies toall elementsinheritednocomputed value...
justify-self - CSS: Cascading Style Sheets
y auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container. safe if the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start. unsafe regardless of the
relative sizes of the item and alignment container, the given alignment value is honored. formal definition initial valueautoapplies toblock-level boxes, absolutely-positioned boxes, and grid itemsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]where <baseline-position...
line-height - CSS: Cascading Style Sheets
ess <number> multiplied by the element's own font size. the computed value is the same as the specified <number>. in most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance. <length> the specified <length> is used in the calculation of the line box height. values given in em units may produce unexpected results (see example below). <percentage>
relative to the font size of the element itself. the computed value is this <percentage> multiplied by the element's computed font size. percentage values may produce unexpected results (see the second example below). -moz-block-height sets the line height to the content height of the current block. accessibility concerns use a minimum value of 1.5 for line-height for main paragraph content. t...
list-style-position - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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;. by default this includes <li> elements. because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items. ...
margin-block - CSS: Cascading Style Sheets
the margin-block css shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. /* <length> values */ margin-block: 10px 20px; /* an absolute length */ margin-block: 1em 2em; /*
relative to the text size */ margin-block: 5% 2%; /*
relative to the nearest block container's width */ margin-block: 10px; /* sets both start and end values */ /* keyword values */ margin-block: auto; /* global values */ margin-block: inherit; margin-block: initial; margin-block: unset; these values corresponds to the margin-top and margin-bottom, or margin-right, and margin-left property depending on the values defined for writing-mode, direction, and text-orientation. con...
margin-inline-end - CSS: Cascading Style Sheets
defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ margin-inline-end: 10px; /* an absolute length */ margin-inline-end: 1em; /*
relative to the text size */ margin-inline-end: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-inline-end: auto; /* global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset; it
relates to margin-block-start, margin-block-end, and margin-inline-start, which define the other margins of the element. values the mar...
margin-inline-start - CSS: Cascading Style Sheets
efined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ margin-inline-start: 10px; /* an absolute length */ margin-inline-start: 1em; /*
relative to the text size */ margin-inline-start: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-inline-start: auto; /* global values */ margin-inline-start: inherit; it
relates to margin-block-start, margin-block-end, and margin-inline-end, which define the other margins of the element. values the margin-inline-start property takes the same values as t...
margin - CSS: Cascading Style Sheets
om, the second to the left and right. when three values are specified, the first margin applies to the top, the second to the right and left, the third to the bottom. when four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise). values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage,
relative to the width of the containing block. auto the browser selects a suitable margin to use. for example, in certain cases this value can be used to center an element. formal syntax [ <length> | <percentage> | auto ]{1,4} examples simple example html <div class="center">this element is centered.</div> <div class="outside">this element is positioned outside of its container.</div> css ...
mask-border-outset - CSS: Cascading Style Sheets
left in that order (clockwise). values <length> the size of the mask border outset as a dimension. <number> the size of the mask border outset as a multiple of the corresponding border-width. formal definition initial value0applies 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 typediscrete formal syntax [ <length> | <number> ]{1,4} examples basic usage this property doesn't appear to be supported anywhere yet. when it eventually starts to be supported, it will serve to move the mask away from the inner edge of the element's border box — you can use it to make the mask start from part way across the border, ra...
mask-border-slice - CSS: Cascading Style Sheets
third creates a slice measured from the bottom. when four positions are specified, they create slices measured from the top, right, bottom, and left in that order (clockwise). the optional fill value, if used, can be placed anywhere in the declaration. values <number> represents an edge offset in pixels for raster images and coordinates for vector images. for vector images, the number is
relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases. <percentage> represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets. fill preserves the middle image region. its width and height are sized to match the top and left image regions, re...
mask-position - CSS: Cascading Style Sheets
the mask-position css property sets the initial position,
relative to the mask position layer set by mask-origin, for each defined mask image. /* keyword values */ mask-position: top; mask-position: bottom; mask-position: left; mask-position: right; mask-position: center; /* <position> values */ mask-position: 25% 75%; mask-position: 0px 0px; mask-position: 10% 8em; /* multiple values */ mask-position: top right; mask-position: 1rem 1rem, center; /* global values */ mask-position: inherit; mask-position: initial; mask-position: unset; syntax one or more <position> values, separated by commas. values <position> one to four values representing a 2d position regarding the edges of the element's box.
relative or absolute offsets can be given. note that the position can be set outsid...
mask-repeat - CSS: Cascading Style Sheets
o be added. when the next image is added, all of the current ones compress to allow room. example: an image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. they will then compress to 225px. no-repeat the image is not repeated (and hence the mask painting area will not necessarily be enti
rely covered). the position of the non-repeated mask image is defined by the mask-position css property. formal definition initial valueno-repeatapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where...
mask-size - CSS: Cascading Style Sheets
. for the other dimension, use the image's corresponding intrinsic dimension if there is one. if there is no such intrinsic dimension, use the corresponding dimension of the mask positioning area. ...
mask-type - CSS: Cascading Style Sheets
ype: unset; this property may be overridden by the mask-mode property, which has the same effect but applies to the element where the mask is used. alpha masks will generally be faster to render. syntax the mask-type property is specified as one of the keyword values listed below. values luminance is a keyword indicating that the associated mask image is a luminance mask, i.e., that its
relative luminance values must be used when applying it. alpha is a keyword indicating that the associated mask image is an alpha mask, i.e., that its alpha channel values must be used when applying it. formal definition initial valueluminanceapplies to<mask> elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples setting an alpha mask ht...
mask - CSS: Cascading Style Sheets
sk-image: as specified, but with <url> values made absolutemask-mode: as specifiedmask-repeat: consists of two keywords, one per dimensionmask-position: consists 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.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: discre...
max-inline-size - CSS: Cascading Style Sheets
the max-inline-size css property defines the horizontal or vertical maximum size of an element's block depending on its writing mode. it corresponds to the max-width or the max-height property depending on the value defined for writing-mode. if the writing mode is vertically oriented, the value of max-inline-size
relates to the maximal height of the element, otherwise it
relates to the maximal width of the element. it
relates to max-block-size, which defines the other dimension of the element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ max-inline-size: 300px; max-inline-size: 25em...
max() - CSS: Cascading Style Sheets
size</h1> <h1 class="responsive">this text is always legible, and is responsive, to a point</h1> think of the max() function as finding the minimum value allowed for a property. accessibility concerns when max() is used for controlling text size, make sure the text is always large enough to read. a suggestion is to use the min() function nested within a max() that has as its second value a
relative length unit that is always large enough to read. for example: small { font-size: max(min(0.5vw, 0.5em), 1rem); } this ensures a minimum size of 1rem, with a text size that scales if the page is zoomed. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 specifications specification status comment ...
minmax() - CSS: Cascading Style Sheets
, min and max. each parameter can be a <length>, a <percentage>, a <flex> value, or one of the keyword values max-content, min-content, or auto. if max < min, then max is ignored and minmax(min,max) is treated as min. as a maximum, a <flex> value sets the flex factor of a grid track; it is invalid as a minimum. values <length> a non-negative length. <percentage> a non-negative percentage
relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. if the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto. the user agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the...
offset-position - CSS: Cascading Style Sheets
ght 20px; offset-position: right 3em bottom 10px; offset-position: bottom 10px right; offset-position: top right 10px; /* global values */ offset-position: inherit; offset-position: initial; offset-position: unset; values auto the initial position is the position of the box specified by the position property. <position> a <position>. a position defines an x/y coordinate, to place an item
relative to the edges of an element's box. it can be defined using one to four values. if two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. if only one value is specified, the second value is assumed to be center. if three or four values are used, the length-percentage values are offsets for the preceding keyword value...
offset-rotate - CSS: Cascading Style Sheets
this is the default value. <angle> the element has a constant clockwise rotation transformation applied to it by the specified rotation angle. auto <angle> if auto is followed by an <angle>, the computed value of the angle is added to the computed value of auto. reverse the element is rotated similar to auto, except it faces the opposite direction. i...
offset - CSS: Cascading Style Sheets
svg) 30deg / 50px 100px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor:
relativetowidthandheightcomputed valueas each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percentageoffset-anchor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specifiedanimation typeas each of the properties of the shorthand...
outline-offset - CSS: Cascading Style Sheets
places the outline so that there is no space between it and the element. description an outline is a line that is drawn around an element, outside the border edge. the space between an element and its outline is transparent. in other words, it is the same as the parent element's background. ...
Guide to scroll anchoring - CSS: Cascading Style Sheets
he specification also details some suppression triggers, which will disable scroll anchoring in places where it might be problematic. if any of the triggers happen on the anchor node, or an ancestor of it, anchoring is suppressed. these suppression triggers are changes to the computed value of any of the following properties: top, left, right, or bottom margin or padding any width or height-
related properties transform additionally, position changes anywhere inside the scrolling box also disable scroll anchoring. in bug 1584285 the layout.css.scroll-anchoring.suppressions.enabled flag was added to firefox nightly in order to allow the disabling of these triggers further reading explainer document on the wicg site scroll anchoring for web developers on the chromium blog imple...
overscroll-behavior-block - CSS: Cascading Style Sheets
scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 3000px; width: 500px; background-color: white; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position:
relative; top: 50px; left: 50px; overscroll-behavior-block: contain; } div > div { height: 1500px; width: 100%; background-color: yellow; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-color: rgba(255,0,0,0.5); margin: 0; width: 340px; position:
relative; top: 10px; left...
overscroll-behavior-inline - CSS: Cascading Style Sheets
scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 400px; width: 3000px; background-color: white; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position:
relative; top: 50px; left: 50px; overscroll-behavior-inline: contain; } div > div { height: 100%; width: 1500px; background-color: yellow; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-color: rgba(255,0,0,0.5); margin: 0; width: 360px; position:
relative; top: 10px; left...
overscroll-behavior-x - CSS: Cascading Style Sheets
bly inside the viewport, but its content is given a large width so it will scroll horizontally. by default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. to avoid this, you can set overscroll-behavior-x: contain on the inner box: main > div { height: 300px; width: 500px; overflow: auto; position:
relative; top: 100px; left: 100px; overscroll-behavior-x: contain; } specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-x' in that specification. working draft ...
padding-bottom - CSS: Cascading Style Sheets
ng-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. unlike margins, negative values are not allowed for padding. values <length> the size of the padding as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage,
relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the ...
padding-left - CSS: Cascading Style Sheets
e */ 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. unlike margins, negative values are not allowed for padding. values <length> the size of the padding as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage,
relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the ...
padding-right - CSS: Cascading Style Sheets
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. unlike margins, negative values are not allowed for padding. values <length> the size of the padding as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage,
relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the ...
padding-top - CSS: Cascading Style Sheets
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. unlike margins, negative values are not allowed for padding. values <length> the size of the padding as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage,
relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the ...
padding - CSS: Cascading Style Sheets
the second to the left and right. when three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom. when four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise). values <length> the size of the padding as a fixed value. <percentage> the size of the padding as a percentage,
relative to the width of the containing block. formal definition initial valueas each of the properties of the shorthand:padding-bottom: 0padding-left: 0padding-right: 0padding-top: 0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to...
paint-order - CSS: Cascading Style Sheets
rst, then fill and stroke */ /* multiple values */ paint-order: stroke fill; /* draw the stroke first, then the fill, then the markers */ paint-order: markers stroke fill; /* draw markers, then stroke, then fill */ if no value is specified, the default paint order is fill, stroke, markers. when one value is specified, that one is painted first, followed by the other two in their default order
relative to one another. when two values are specified, they will be painted in the order they are specified in, followed by the unspecified one. note: in the case of this property, markers are only appropriate when drawing svg shapes involving the use of the marker-* properties (e.g. marker-start) and <marker> element. they do not apply to html text, so in that case, you can only determine the ord...
<percentage> - CSS: Cascading Style Sheets
numerous properties can use percentages, such as width, height, margin, padding, and font-size. note: only calculated values can be inherited. thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a <length> value) will be accessible on the inherited property, not the percentage value. syntax the <percentage> data type consists of a <number> followed by the percentage sign (%). optionally, it may be preceded by a single + or - sign, although negative values are not valid for all properties. ...
place-content - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
place-items - CSS: Cascading Style Sheets
if the second value is not set, the first value is also used for it. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
place-self - CSS: Cascading Style Sheets
if the second value is not present, the first value is also used for it. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
radial-gradient() - CSS: Cascading Style Sheets
points. to create a smooth gradient, the radial-gradient() function draws a series of concentric shapes radiating out from the center to the ending shape (and potentially beyond). the ending shape may be either a circle or an ellipse. color-stop points are positioned on a virtual gradient ray that extends horizontally from the center towards the right. percentage-based color-stop positions are
relative to the intersection between the ending shape and this gradient ray, which represents 100%. each shape is a single color determined by the color on the gradient ray it intersects. examples simple gradient <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%)...
<resolution> - CSS: Cascading Style Sheets
syntax the <resolution> data type consists of a strictly positive <number> followed by one of the units listed below. as with all css dimensions, there is no space between the unit literal and the number. units dpi represents the number of dots per inch. screens typically contains 72 or 96 dots per inch, but the dpi for printed documents is usually much greater. ...
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
or grid, you will need to use the prefixed property as in the interactive example above. syntax /* <length> values */ row-gap: 20px; row-gap: 1em; row-gap: 3vmin; row-gap: 0.5cm; /* <percentage> value */ row-gap: 10%; /* global values */ row-gap: inherit; row-gap: initial; row-gap: unset; values <length-percentage> is the width of the gutter separating the rows. <percentage> values are
relative to the dimension of the element. formal definition initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax no...
ruby-position - CSS: Cascading Style Sheets
it can be position over the element (over), under it (under), or between the characters, on their right side (inter-character). /* keyword values */ ruby-position: over; ruby-position: under; ruby-position: inter-character; /* global values */ ruby-position: inherit; ruby-position: initial; ruby-position: unset; syntax values over is a keyword indicating that the ruby has to be placed over the main text for horizontal scripts and right to it for vertical scripts. ...
scroll-padding-block-end - CSS: Cascading Style Sheets
unset; values <length-percentage> an inwards offset from the block end edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentages
relative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block-end' in that specification. candidate recommendation ...
text-decoration-thickness - CSS: Cascading Style Sheets
ont file doesn't include this information, behave as if auto was set, with the browser choosing an appropriate thickness. <length> specifies the thickness of the text decoration line as a <length>, overriding the font file suggestion or the browser default. <percentage> specifies the thickness of the text decoration line as a <percentage> of 1em in the current font. a percentage inherits as a
relative value, and so therefore scales with changes in the font. the browser must use a minimum of 1 device pixel. for a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font size. formal definition initial valueautoapplies toall elements. it also applies to ::first-letter and ::first-line.inheri...
text-indent - CSS: Cascading Style Sheets
repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box. syntax /* <length> values */ text-indent: 3mm; text-indent: 40px; /* <percentage> value
relative to the containing block width */ text-indent: 15%; /* keyword values */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* global values */ text-indent: inherit; text-indent: initial; text-indent: unset; values <length> indentation is specified as an absolute <length>. negative values are allowed. see <length> values for possible units. <per...
text-underline-offset - CSS: Cascading Style Sheets
values auto the browser chooses the appropriate offset for underlines. <length> specifies the offset of underlines as a <length>, overriding the font file suggestion and the browser default. it is recommended to use em units so the offset scales with the font size. <percentage> specifies the offset of underlines as a <percentage> of 1 em in the element's font. a percentage inherits as a
relative value, and so therefore scales with changes in the font. for a given application of this property, the offset is constant across the whole box that the underline is applied to, even if there are child elements with different font sizes or vertical alignment. formal definition initial valueautoapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyespercentage...
<time> - CSS: Cascading Style Sheets
syntax the <time> data type consists of a <number> followed by one of the units listed below. optionally, it may be preceded by a single + or - sign. as with all dimensions, there is no space between the unit literal and the number. note: although the number 0 is always the same regardless of unit, the unit may not be omitted. in other words, 0 is invalid and does not represent 0s or 0ms. units s represents a time in seconds. examples: 0s, 1.5s, -60s. ms represents a time in milliseconds. ...
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. values content-box the content box is used as the reference box. the reference box of a <table> is the border box of its table wrapper box, not its table box. border-box the border box is used as the reference box. ...
skew() - CSS: Cascading Style Sheets
function is specified with either one or two values, which represent the amount of skewing to be applied in each direction. skew(ax) skew(ax, ay) values ax is an <angle> representing the angle to use to distort the element along the abscissa. ay is an <angle> representing the angle to use to distort the element along the ordinate. if not defined, its default value is 0, resulting in a pu
rely horizontal skewing. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle html <div>normal</div> <div...
translateZ() - CSS: Cascading Style Sheets
in ℝ3 and can't be represented using a cartesian-coordinate matrix. 10000100001t0001 examples in this example, two boxes are created. one is positioned normally on the page, without being translated at all. the second is altered by applying perspective to create a 3d space, then moved towards the user. html <div>static</div> <div class="moved">moved</div> css div { position:
relative; width: 60px; height: 60px; left: 100px; background-color: skyblue; } .moved { transform: perspective(500px) translatez(200px); background-color: pink; } what really matters here is the class "moved"; let's take a look at what it does. first, the perspective() function positions the viewer
relative to the plane that lies where z=0 (in essence, the surface of the screen). a val...
transition-timing-function - CSS: Cascading Style Sheets
jump-both includes pauses at both the 0% and 100% marks, effectively adding a step during the transition time. start same as jump-start. end same as jump-end. step-start equal to steps(1, jump-start) step-end equal to steps(1, jump-end) accessibility concerns some animations can be helpful such as to guide users to understand what actions are expected, to show
relationships within the user interface, and to inform users as to what actions have occurred. animations can help reduce cognitive load, prevent change blindness, and establish better recall in spatial
relationships. however, some animations can be problematic for people with cognitive concerns such as attention deficit hyperactivity disorder (adhd) and certain kinds of motion can be a trigger for v...
<url> - CSS: Cascading Style Sheets
data type. this change was not only awkward but, debatably, unnecessary, since urns are almost never used in actual css. to alleviate the confusion, css level 3 returned to the narrower, initial definition. now, url() denotes only true <url>s. syntax the <url> data type is specified using the url() functional notation. it may be written without quotes, or surrounded by single or double quotes.
relative urls are allowed, and are
relative to the url of the stylesheet (not to the url of the web page). if you choose to write the url without quotes, use a backslash (\) before any parentheses, whitespace characters, single quotes (') and double quotes (") that are part of the url. <a_css_property>: url("http://mysite.example.com/mycursor.png") <a_css_property>: url('http://mysite.example.com/m...
widows - CSS: Cascading Style Sheets
specification status comment css fragmentation module level 3the definition of 'widows' in that specification. candidate recommendation extends widows to apply to any type of fragment, including pages, regions, or columns. css multi-column layout modulethe definition of 'widows' in that specification. working draft recommendations to consider widows in
relation to columns. css level 2 (revision 1)the definition of 'widows' in that specification. recommendation initial definition. ...
CSS: Cascading Style Sheets
nt of various parts of css specification was done synchronously, which allowed versioning of the latest recommendation. you might have heard about css1, css2.1, css3. however, css4 has never become an official version. from css3, the scope of the specification increased significantly and the progress on different css modules started to differ so much, that it became more effective to develop and
release recommendations separately per module. instead of versioning the css specification, w3c now periodically takes a snapshot of the latest stable state of the css specification. css introduction if you're new to web development, be sure to read our css basics article to learn what css is and how to use it. css tutorials our css learning area contains a wealth of tutorials to take you...
Community - Developer guides
if you know of useful mailing lists, newsgroups, forums, or other communities
related to ajax, please link to them here. ajax resources ajax workshops and courses skillsmatter.com: courses and events on javascript, ajax, and reverse ajax technologies telerik.com: an active community forum for ajax community.tableau.com: community support forum and courses available for ajax codementor.io: social platform with ajax forums and tutorials lynda.com: tutorials available for learning the fundamentals of ajax ajax interview questions and answer and answerinterwiki links ...
Getting Started - Developer guides
h servers. it can send and receive information in various formats, including json, xml, html, and text files. ajax’s most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page. the two major features of ajax allow you to do the following: make requests to the server without
reloading the page receive and work with data from the server step 1 – how to make an http request in order to make an http request to the server with javascript, you need an instance of an object with the necessary functionality. this is where xmlhttprequest comes in. its predecessor originated in internet explorer as an activex object called xmlhttp. then, mozilla, safari, and other browsers ...
Live streaming web audio and video - Developer guides
live streaming technology is often employed to
relay live events such as sports, concerts and more generally tv and radio programmes that are output live. often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. this is a fairly complex and nascent subject with a lot of variables, so in this article, we'll introduce you to the subject and let you know how you can get started. the key consideration when streaming media to a browser is the fact that rather than playing a finite file we are
relaying a file that is being created on the fly and has no pre-determined start or end. key differences between streamed and static media in this case, we are using static media to describe media that is represented by a file, wheth...
Setting up adaptive streaming media sources - Developer guides
hls encoding http live streaming (hls) is an http-based media streaming protocol implemented by apple. it's incorporated into ios and osx platforms and works well on mobile and desktop safari and most android devices with some caveats. media is usually encoded as mpeg-4 (h.264 video and aac...
Writing Web Audio API code that works in every browser - Developer guides
ties and method names that are not present in standards-compliant browsers: safari uses the old method names, firefox uses the new ones, and chrome and opera use both. in addition, not all features of web audio are already implemented in firefox yet. what do we do!? we don't want to maintain two or more separate code bases, and feature detection code is cumbersome! plus we want to write code that
reliably works in the future, or at least, works with a minimum amount of changes. is there a way to satisfy all these constraints at the same time? probably! writing for today (and tomorrow) first, get a copy of audiocontext-monkeypatch by chris wilson. this little library will "normalise" the interfaces for you and make it look as if your code is running in a standards compliant browser, by aliasin...
Audio and video manipulation - Developer guides
ds a boost (or attenuation) to the lower frequencies. high shelf: allows all frequencies through, but adds a boost (or attenuation) to the higher frequencies. peaking: allows all frequencies through, but adds a boost (or attenuation) to a range of frequencies. notch: allows all frequencies through, except for a set of frequencies. allpass: allows all frequencies through, but changes the phase
relationship between the various frequencies. note: see biquadfilternode for more information. convolutions and impulses it's also possible to apply impulse responses to audio using the convolvernode. an impulse response is the sound created after a brief impulse of sound (like a hand clap). an impulse response will signify the environment in which the impulse was created (for example, an echo ...
Block formatting context - Developer guides
the float. our <div> now becomes a mini-layout inside our layout. any child element will be contained inside it. the problem with using overflow to create a new bfc is that the overflow property is meant for telling the browser how you want to deal with overflowing content. there are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property pu
rely to create a bfc. in addition, it is potentially not readable for a future developer, as it might not be obvious why you used overflow for this purpose. if you use overflow, it is a good idea to comment the code to explain. using display: flow-root a newer value of display lets us create a new bfc without any other potentially problematic side-effects. using display: flow-root on the containing...
Media events - Developer guides
might not fire this event. durationchange the metadata has loaded or changed, indicating a change in duration of the media. this is sent, for example, when the media has loaded enough that the duration is known. emptied the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to
reload it. encrypted the user agent has encountered initialization data in the media data. ended sent when playback completes. error sent when an error occurs. the element's error attribute contains more information. see htmlmediaelement.error for details. loadeddata the first frame of the media has finished loading. loadedmetadata the me...
Orientation and motion data explained - Developer guides
the x axis is in the plane of the screen and is positive toward the right and negative toward the left. the y axis is in the plane of the screen and is positive toward the top and negative toward the bottom. the z axis is perpendicular to the screen or keyboard, and is positive extending outward from the screen. note: on a phone or tablet, the orientation of the device is always considered in
relation to the standard orientation of the screen; this is the "portrait" orientation on most devices. on a laptop computer, the orientation is considered in
relation to the keyboard. if you want to detect changes in device orientation in order to compensate, you can use the orientationchange event. about rotation rotation is described about any given axis in terms of the number of degrees of diff...
Event developer guide - Developer guides
s you're given by the browser mean. this article provides details about the coordinate systems at play and how you use them.overview of events and handlersevents and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page,
relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing.touch events (mozilla experimental)the experimental touch events api described on this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to gecko/firefox 17. you should instead use the standard touch events api, supported since gecko/firefo...
Making content editable - Developer guides
ltparagraphseparator since firefox 55. this is useful if your web application expects the older firefox behavior, and you don't want to or don't have the time to update it to use the new behavior. you can use the older firefox behavior with this line: document.execcommand("defaultparagraphseparator", false, "br"); security for security reasons, firefox doesn't let javascript code use clipboard
related features (copy, paste, etc.) by default. you can enable them by setting the preferences shown below using about:config: user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); user_pref("capability.policy.allowclipboard.clipboard.cutcopy", "allaccess"); user_pref("capability.policy.allowclipboard.clipboard.
Introduction to Web development - Developer guides
advanced javascript concepts javascript garden — documentation of the most quirky parts of javascript. resources w3c web education community group wiki covers web design, html and html5, css, javascript and accessibility. this is a good starting point for beginners wishing to learn web development fundamentals across a number of areas. sitepoint a
reliable reference site for learning html, css and javascript which also mentions feature support across different browsers and known browser bugs. htmldog an excellent and comprehensive reference site on html and css for beginners. google's html, css, and javascript from the ground up these easily digestible video tutorials from google's expert web developers cover the basics of ...
A hybrid approach - Developer guides
has better performance than pure responsive design. the bad one downside of mixing approaches is that it can lead to an increase in the number of code paths, both on the client and server side. this can make it more time-consuming to develop than other approaches. with proper planning, though, the code can still be organized in a maintainable way. another downside is that because this approach
relies on responsive design, it typically works best on a new project or one that has an existing flexible layout, not as a retrofit. similarly, because it uses user-agent detection, you will have to update your detection rules as time goes on. when it is right to choose this option combining server-side and client-side techniques is something that is always worth considering; there are so many opt...
Mobile-friendliness - Developer guides
ps. mobile users, however, are probably more interested in checking-in for a flight or seeing if their flight is delayed. they’ve adjusted their site’s content to reflect this, and it meets the needs of mobile users. goal #3 (performance) “give your users a smooth experience, even on a slow connection.” though things have been getting better in recent years, browsing the internet over a wi
reless data connection can still be pretty painful. this makes it more essential than ever to practice good performance practices, only sending the user the bits they will actually need. know your audience while not strictly a part of the definition of being mobile friendly, defining who your target audience is makes these goals much more concrete. for example, it is absolutely critical to keep in mi...
Printing - Developer guides
nting a specially-formatted version of your content before printing begins. there may be other cases in which you want to manage the printing process, but these are some of the most common scenarios. this article provides tips and techniques for helping your web content print better. using a print style sheet add the following to your <head> tag. <link href="/path/to/print.css" media="print"
rel="stylesheet" /> using media queries to improve layout detecting print requests some browsers (including firefox 6 and later and internet explorer) send beforeprint and afterprint events to let content determine when printing may have occurred. you can use this to adjust the user interface presented during printing (such as by displaying or hiding user interface elements during the print proce...
The HTML autocomplete attribute - HTML: Hypertext Markup Language
ls in different orders when addresses are written. address-level1 always represents the broadest administrative division; it is the least-specific portion of the address short of the country name. form layout flexibility given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields enti
rely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within. variations the way each administrative level is used will vary from country to country. below are some examples; this is not meant to be an exhaustive list. united states a typical home address within th...
HTML attribute: crossorigin - HTML: Hypertext Markup Language
cript> element to tell a browser to execute the https://example.com/example-framework.js script without sending user-credentials. <script src="https://example.com/example-framework.js" crossorigin="anonymous"></script> example: webmanifest with credentials the use-credentials value must be used when fetching a manifest that requires credentials, even if the file is from the same origin. <link
rel="manifest" href="/app.webmanifest" crossorigin="use-credentials"> specifications specification status comment html living standardthe definition of 'cors settings attributes' in that specification. living standard html living standardthe definition of 'crossorigin' in that specification. living standard ...
HTML attribute: multiple - HTML: Hypertext Markup Language
living standardthe definition of 'multiple attribute' in that specification. living standard html5the definition of 'multiple attribute' in that specification. recommendation accessibility concerns provide instructions to help users understand how to complete the form and use individual form controls. indicate any required and optional input, data formats, and other
relevant information. when using the multiple attribute, inform the user that multiple values are allowed and provide directions on how to provide multiple values, such as "separate email addresses with a comma." setting size="1" on a multiple select can make it appear as a single select in some browsers, but then it doesn't expand on focus, harming usability. don't do that. if you do change the app...
HTML attribute: readonly - HTML: Hypertext Markup Language
dation. the readonly attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, and number<input> types and the <textarea> form control elements. if present on any of these input types and elements, the :read-only pseudo class will match. if the attribute is not included, the :read-write pseudo class will match. the attribute is not supported or
relevant to <select> or input types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a value, such as the file input type. range and color, as both have default values. it is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. nor is it supported on any of the button types, including image. note: only te...
HTML attribute: required - HTML: Hypertext Markup Language
ported by text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, <input> types along with the <select> and <textarea> form control elements. if present on any of these input types and elements, the :required pseudo class will match. if the attribute is not included, the :optional pseudo class will match. the attribute is not supported or
relevant to range and color, as both have default values. it is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. nor is it supported on any of the button types, including image. note color and range don't support required, but type color defaults to #00000, and range defaults to the midpoint between min and max -- with min and max defaulting to 0 ...
HTML attribute: step - HTML: Hypertext Markup Language
html living standardthe definition of 'step attribute' in that specification. living standard html5the definition of 'step attribute' in that specification. recommendation accessibility concerns provide instructions to help users understand how to complete the form and use individual form controls. indicate any required and optional input, data formats, and other
relevant information. when using the min attribute, ensure this minimum requirement is understood by the user. providing instructions within the <label> may be sufficient. if providing instructions outside of labels, which allows more flexible positioning and design, consider using aria-labelledby or aria-describedby. ...
Date and time formats used in HTML - HTML: Hypertext Markup Language
html uses a variation of the iso 8601 standard for its date and time strings. it's worth reviewing the descriptions of the formats you're using in order to ensure that your strings are in fact compatible with html, as the html specification includes algorithms for parsing these st...
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
htmlheadingelement attributes these elements only include the global attributes. the align attribute is obsolete; don't use it. usage notes heading information may be used by user agents, for example, to construct a table of contents for a document automatically. avoid using heading tags to resize text. instead, use the css font-size property. headings use size to indicate their
relative importance, but css is preferred for general-purpose resizing. avoid skipping heading levels: always start from <h1>, next use <h2> and so on. you should only use one <h1> per page. using more than one will not result in an error, but using only one is seen as a best practice. it makes logical sense — <h1> is the most important heading, and tells you what the purpose of the overall page ...
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
viations or acronyms. see the example defining an abbreviation below. grammar considerations in languages with grammatical number (that is, languages where the number of items affects the grammar of a sentence), use the same grammatical number in your title attribute as inside your <abbr> element. this is especially important in languages with more than two numbers, such as arabic, but is also
relevant in english. default styling the purpose of this element is pu
rely for the convenience of the author and all browsers display it inline (display: inline) by default, though its default styling varies from one browser to another: some browsers, like internet explorer, do not style it differently than a <span> element. opera, firefox, and some others add a dotted underline to the content ...
<acronym> - HTML: Hypertext Markup Language
as global attributes, which are common to all elements. dom interface this element implements the htmlelement interface. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. example <p>the <acronym title="world wide web">www</acronym> is only a component of the internet.</p> default styling though the purpose of this tag is pu
rely for the convenience of the author, its default styling varies from one browser to another: some browsers, like internet explorer, do not style it differently than a <span> element. opera, firefox, chrome, and some others add a dotted underline to the content of the element. a few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something...
<article>: The Article Contents element - HTML: Hypertext Markup Language
roles application, document, feed, main, none, presentation, region dom interface htmlelement attributes this element only includes the global attributes. usage notes each <article> should be identified, typically by including a heading (<h1>-<h6> element) as a child of the <article> element. when an <article> element is nested, the inner element represents an article
related to the outer element. for example, the comments of a blog post can be <article> elements nested in the <article> representing the blog post. author information of an <article> element can be provided through the <address> element, but it doesn't apply to nested <article> elements. the publication date and time of an <article> element can be described using the datetime attribute of a <time>...
<b>: The Bring Attention To element - HTML: Hypertext Markup Language
or cases like keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced (but not including any special importance). do not confuse the <b> element with the <strong>, <em>, or <mark> elements. the <strong> element represents text of certain importance, <em> puts some emphasis on the text and the <mark> element represents text of certain
relevance. the <b> element doesn't convey such special semantic information; use it only when no others fit. similarly, do not mark titles and headings using the <b> element. for this purpose, use the <h1> to <h6> tags. further, stylesheets can change the default style of these elements, with the result that they are not necessarily displayed in bold. it is a good practice to use the class attribut...
<br>: The Line Break element - HTML: Hypertext Markup Language
t. permitted content none, it is an empty element. tag omission must have a start tag, and must not have an end tag. in xhtml documents, write this element as <br />. permitted parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles none, presentation dom interface htmlb
relement specifications specification status comment html living standardthe definition of '<br>' in that specification. living standard html5the definition of '<br>' in that specification. recommendation html 4.01 specificationthe definition of '<br>' in that specification. recommendation ...
<button>: The Button element - HTML: Hypertext Markup Language
if you want to visually hide the button's text, an accessible way to do so is to use a combination of css properties to remove it visually from the screen, but keep it parseable by assistive technology. however, it is worth noting that leaving the button text visually apparent can aid people who may not be familiar with the icon's meaning or understand the button's purpose. this is especially
relevant for people who are not technologically sophisticated, or who may have different cultural interpretations for the icon the button uses. what is an accessible name? | the paciello group mdn understanding wcag, guideline 4.1 explanations understanding success criterion 4.1.2 | w3c understanding wcag 2.0 size and proximity size interactive elements such as buttons should provide an area...
<cite>: The Citation element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, phrasing content, palpable content. ...
<col> - HTML: Hypertext Markup Language
css attribute selectors like [colspan=n], though this is not trivial. width this attribute specifies a default width for each column in the current column group. in addition to the standard pixel and percentage values, this attribute might take the special form 0*, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents.
relative widths such as 0.5* also can be used. examples please see the <table> page for examples on <col>. specifications specification status comment html living standardthe definition of '<col>' in that specification. living standard html5the definition of '<col>' in that specification. recommendation html 4.01 specificationthe defini...
<data> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. ...
<dir>: The Directory element (obsolete) - HTML: Hypertext Markup Language
lement (<dir>) is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the user agent. do not use this obsolete element; instead, you should use the <ul> element for lists, including lists of files. usage note: do not use this element. though present in early html specifications, it has been deprecated in html 4, and has since been removed enti
rely. no major browsers support this element. dom interface this element implements the htmldirectoryelement interface. attributes like all other html elements, this element supports the global attributes. compact this boolean attribute hints that the list should be rendered in a compact style. the interpretation of this attribute depends on the user agent and it doesn't work in all browsers.
<dt>: The Description Term element - HTML: Hypertext Markup Language
the html <dt> element specifies a term in a description or definition list, and as such must be used inside a <dl> element. it is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element. the subsequent <dd> (description details) element provides the definition or other
related text associated with the term specified using <dt>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories none. permitted content flow content, but with no <header>, <footer>, sectioning content or heading...
<embed>: The Embed External Content element - HTML: Hypertext Markup Language
ike to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: this topic documents only the element that is defined as part of html5. it does not address earlier, non-standardized implementation of the element. keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so
relying upon <embed> is generally not wise if you want your site to be operable on the average user's browser. content categories flow content, phrasing content, embedded content, interactive content, palpable content. permitted content none, it is an empty element. tag omission must have a start tag, and must not have an end tag. permitted parents any...
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
led, which allows you to disable the <fieldset> and all its contents in one go. attributes this element includes the global attributes. disabled if this boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not editable and won't be submitted along with the <form>. they won't receive any browsing events, like mouse clicks or focus-
related events. by default browsers display such controls grayed out. note that form elements inside the <legend> element won't be disabled. form this attribute takes the value of the id attribute of a <form> element you want the <fieldset> to be part of, even if it is not inside the form. name the name associated with the group. note: the caption for the fieldset is given by the first <legend> ...
<footer> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, palpable content. ...
<form> - HTML: Hypertext Markup Language
ossible values: off: the browser may not automatically complete entries. (browsers tend to ignore this for suspected login forms; see the autocomplete attribute and login fields.) on: the browser may automatically complete entries. name the name of the form. deprecated as of html 4 (use id instead). it must be unique among the forms in a document and not an empty string as of html5.
rel creates a hyperlink or annotation depending on the value, see the
rel attribute for details. attributes for form submission the following attributes control behavior during form submission. action the url that processes the form submission. this value can be overridden by a formaction attribute on a <button>, <input type="submit">, or <input type="image"> element. enctype if the value o...
<hr>: The Thematic Break (Horizontal Rule) element - HTML: Hypertext Markup Language
ng appropriate css. content categories flow content. permitted content none, it is an empty element. tag omission it must have start tag, but must not have an end tag. permitted parents any element that accepts flow content. implicit aria role separator permitted aria roles presentation or none dom interface htmlh
relement attributes this element's attributes include the global attributes. align sets the alignment of the rule on the page. if no value is specified, the default value is left. color sets the color of the rule through color name or hexadecimal value. noshade sets the rule to have no shading. size sets the height, in pixels, of the rule. width sets the length of the ru...
<img>: The Image Embed element - HTML: Hypertext Markup Language
sync decode the image synchronously, for atomic presentation with other content. async decode the image asynchronously, to reduce delay in presenting other content. auto default: no preference for the decoding mode. the browser decides what is best for the user. height the intrinsic height of the image, in pixels. must be an integer without a unit. importance indicates the
relative download importance of the resource. priority hints allow the values: auto: no preference. the browser may use its own heuristics to prioritize the image. high: the image is of high priority. low: the image is of low priority. intrinsicsize this attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. sp...
<input type="button"> - HTML: Hypertext Markup Language
="clear canvas"> </div> <canvas class="mycanvas"> <p>add suitable fallback here.</p> </canvas> body { background: #ccc; margin: 0; overflow: hidden; } .toolbar { background: #ccc; width: 150px; height: 75px; padding: 5px; } input[type="color"], input[type="button"] { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position:
relative; bottom: 5px; } var canvas = document.queryselector('.mycanvas'); var width = canvas.width = window.innerwidth; var height = canvas.height = window.innerheight-85; var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); var colorpicker = document.queryselector('input[type="color"]'); var sizepicker = document.queryselector('input[type="range"]')...
<input type="checkbox"> - HTML: Hypertext Markup Language
orm is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the value attribute. if the value is not otherwise specified, it is the string on by default. this is demonstrated in the section value above. using checkbox inputs we already covered the most basic use of checkboxes above. let's now look at the other common checkbox-
related features and techniques you'll need. handling multiple checkboxes the example we saw above only contained one checkbox; in real-world situations you'll be likely to encounter multiple checkboxes. if they are completely un
related, then you can just deal with them all separately, as shown above. however, if they're all
related, things are not quite so simple. for example, in the following de...
<input type="hidden"> - HTML: Hypertext Markup Language
data you want to include when the form is submitted to the server. this specifically can't be edited or seen by the user via the user interface, although you could edit the value via browser developer tools. important: while the value isn't displayed to the user in the page's content, it is visible—and can be edited—using any browser's developer tools or "view source" functionality. do not
rely on hidden inputs as a form of security. additional attributes in addition to the attributes common to all <input> elements, hidden inputs offer the following attributes: attribute description name like all input types, the name of the input to report when submitting the form; the special value _charset_ causes the hidden input's value to be reported as the charact...
<input type="reset"> - HTML: Hypertext Markup Language
a default click event handler that resets all of the inputs in the form to their initial values. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. you should usually avoid including reset buttons in your forms. they're ra
rely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button). value a domstring used as the button's label events click supported common attributes type and value idl attributes value methods none value an <input type="reset"> element's value attribute contain...
<label> - HTML: Hypertext Markup Language
e notes: the form control that the label is labeling is called the labeled control of the label element. one input can be associated with multiple labels. when a <label> is clicked or tapped and it is associated with a form control, the resulting click event is also raised for the associated control. attributes this element includes the global attributes. for the id of a labelable form-
related element in the same document as the <label> element. the first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. if it is not labelable then the for attribute has no effect. if there are other elements which also match the id value, later in the document, they are not considered. note: a <la...
<main> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. a document mustn't have more than one <main> element that doesn't have the hidden attribute specified. content categories flow content, palpable content. ...
<menuitem> - HTML: Hypertext Markup Language
adiogroup or type. default this boolean attribute indicates use of the same command as the menu's subject element (such as a button or input). disabled boolean attribute which indicates that the command is not available in the current state. note that disabled is distinct from hidden; the disabled attribute is appropriate in any context where a change in circumstances might render the command
relevant. icon image url, used to provide a picture to represent the command. label the name of the command as shown to the user. required when a command attribute is not present. radiogroup this attribute specifies the name of a group of commands to be toggled as radio buttons when selected. may only be used where the type attribute is radio. type this attribute indicates the kind of command...
Standard metadata names - HTML: Hypertext Markup Language
ike the document name or a status. simple web pages shouldn't define an application-name. author: the name of the document's author. description: a short and accurate summary of the content of the page. several browsers, like firefox and opera, use this as the default description of bookmarked pages. generator: the identifier of the software that generated the page. keywords: words
relevant to the page's content separated by commas. referrer: controls the http referer header for to requests sent from the document: values for the content attribute of <meta name="referrer"> no-referrer do not send a http referer header. origin send the origin of the document. no-referrer-when-downgrade send the full url when the de...
<meter>: The HTML Meter element - HTML: Hypertext Markup Language
. permitted content phrasing content, but there must be no <meter> element among its descendants. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlmete
relement attributes this element includes the global attributes. value the current numeric value. this must be between the minimum and maximum values (min attribute and max attribute) if they are specified. if unspecified or malformed, the value is 0. if specified, but not within the range given by the min attribute and max attribute, the value is equal to the nearest end of the range. n...
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
23, 1991 though november 23, 1992 this early version of html introduced <nextid> in a non-sgml compliant form that simply used the numeric value alone as an "attribute." html "0.d" - from november 26, 1992 through may 24, 1993 during this span, next and the oldest surviving dtd's show <nextid> to take only a number for a value of its newly-introduced attribute n. html "1.k" - version 1 (first
release) in this first published draft of html, <nextid> is the same as it would take in html 2, finally allowing the use of a name instead of only a number for its attribute value. html "1.m" - version 1 (second
release) in the next published draft of html, <nextid> <nextid> can be individually deselected for display with a simple sgml command. html version 2 level 1 this is like the level 2 de...
<object> - HTML: Hypertext Markup Language
a space-separated list of uris for archives of resources for the object. borderdeprecated since html4.01obsolete since html5 the width of a border around the control, in pixels. classidhtml 4 onlyobsolete since html5 the uri of the object's implementation. it can be used together with, or in place of, the data attribute. codebasehtml 4 onlyobsolete since html5 the base path used to resolve
relative uris specified by classid, data, or archive. if not specified, the default is the base uri of the current document. codetypehtml 4 onlyobsolete since html5 the content type of the data specified by classid. data the address of the resource as a valid url. at least one of data and type must be defined. declarehtml 4 onlyobsolete since html5 the presence of this boolean attribute makes t...
<optgroup> - HTML: Hypertext Markup Language
mitted aria roles no role permitted dom interface htmloptgroupelement note: optgroup elements may not be nested. attributes this element includes the global attributes. disabled if this boolean attribute is set, none of the items in this option group is selectable. often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-
related ones. label the name of the group of options, which the browser can use when labeling the options in the user interface. this attribute is mandatory if this element is used. examples <select> <optgroup label="group 1"> <option>option 1.1</option> </optgroup> <optgroup label="group 2"> <option>option 2.1</option> <option>option 2.2</option> </optgroup> <optgroup labe...
<option>: The HTML Option element - HTML: Hypertext Markup Language
<datalist> element. implicit aria role option permitted aria roles no role permitted dom interface htmloptionelement attributes this element includes the global attributes. disabled if this boolean attribute is set, this option is not checkable. often browsers grey out such control and it won't receive any browsing event, like mouse clicks or focus-
related ones. if this attribute is not set, the element can still be disabled if one of its ancestors is a disabled <optgroup> element. label this attribute is text for the label indicating the meaning of the option. if the label attribute isn't defined, its value is that of the element text content. selected if present, this boolean attribute indicates that the option is initially selected. if t...
<p>: The Paragraph element - HTML: Hypertext Markup Language
paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag. see “tag omission” below. the source for this interactive example is stored in a github repository. ...
<q>: The Inline Quotation element - HTML: Hypertext Markup Language
tes this element includes the global attributes. cite the value of this attribute is a url that designates a source document or message for the information quoted. this attribute is intended to point to information explaining the context or the reference for the quote. example <p>according to mozilla's website, <q cite="https://www.mozilla.org/about/history/details/">firefox 1.0 was
released in 2004 and became a big success.</q></p> specifications specification status comment html living standardthe definition of '<q>' in that specification. living standard html5the definition of '<q>' in that specification. recommendation html 4.01 specificationthe definition of '<q>' in that specification. recommendation in...
<s> - HTML: Hypertext Markup Language
however, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories phrasing content or flow content. permitted content phrasing content. ...
<select>: The HTML Select element - HTML: Hypertext Markup Language
w</option> <option value="albatross">albatross</option> </optgroup> </select> </label> you'll see that: multiple options are selectable because we've included the multiple attribute. the size attribute causes only 4 lines to display at a time; you can scroll to view all the options. we've included <optgroup> elements to divide the options up into different groups. this is a pu
rely visual grouping, its visualization generally consists of the group name being bolded, and the options being indented. the "hamster" option includes a disabled attribute and therefore can't be selected at all. technical summary content categories flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element per...
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
age given by the <img> element. <picture> <source srcset="mdn-logo-wide.png" media="(min-width: 800px)"> <source srcset="mdn-logo-medium.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="mdn web docs"> </picture> with the <picture> element, you must always include an <img> with a fallback image, with an alt attribute to ensure accessibility (unless the image is an ir
relevant background decorative image). specifications specification status comment html living standardthe definition of '<source>' in that specification. living standard ...
<sub>: The Subscript element - HTML: Hypertext Markup Language
as. examples footnote numbers traditional footnotes are denoted using numbers which are rendered in subscript. this is a common use case for <sub>: <p>according to the computations by nakamura, johnson, and mason<sub>1</sub> this will result in the complete annihilation of both particles.</p> the resulting output looks like this: variable subscripts in mathematics, families of variables
related to the same concept (such as distances along the same axis) are represented using the same variable name with a subscript following. for example: <p>the horizontal coordinates' positions along the x-axis are represented as <var>x<sub>1</sub></var> ... <var>x<sub>n</sub></var>.</p> the resulting output: chemical formulas when writing a chemical formula, such as h20, the number of atoms o...
<tbody>: The Table Body element - HTML: Hypertext Markup Language
ther for the same parent table. you may use more than one <tbody> per table as long as they are all consecutive. this lets you divide the rows in large tables into sections, each of which may be separately formatted if so desired. examples below are some examples showing the use of the <tbody> element. for more examples of this tag in use, see the examples for <table>. 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. html the table's html is shown here. note that all of the body cells including information about students are contained within a single <tbody> element. <table> <thead> <tr> <th>student id</th> <th>name</th> <th>major</t...
<td>: The Table Data Cell element - HTML: Hypertext Markup Language
this attribute is ignored. charoff this attribute is used to shift column data to the right of the character specified by the char attribute. its value specifies the length of this shift. height this attribute is used to define a recommended cell height. use the css height property instead. scope this enumerated attribute defines the cells that the header (defined in the <th>) element
relates to. only use this attribute with the <th> element to define the row or column for which it is a header. valign this attribute specifies how a text is vertically aligned inside a cell. possible values for this attribute are: baseline: positions the text near the bottom of the cell and aligns it with the baseline of the characters instead of the bottom. if characters don't descend below...
<textarea> - HTML: Hypertext Markup Language
ft but changes appearance to white-space: pre so line segments exceeding cols are not wrapped and the <textarea> becomes horizontally scrollable. if this attribute is not specified, soft is its default value. styling with css <textarea> is a replaced element — it has intrinsic dimensions, like a raster image. by default, its display value is block. compared to other form elements it is
relatively easy to style, with its box model, fonts, color scheme, etc. being easily manipulable using regular css. styling html forms provides some useful tips on styling <textarea>s. baseline inconsistency the html specification doesn't define where the baseline of a <textarea> is, so different browsers set it to different positions. for gecko, the <textarea> baseline is set on the baseline of t...
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
purple = "#800080" teal = "#008080" fuchsia = "#ff00ff" aqua = "#00ffff" usage note: do not use this attribute, as it is non-standard and only implemented some versions of microsoft internet explorer: the <tfoot> element should be styled using css. to give a similar effect to the bgcolor attribute, use the css property background-color, on the
relevant <td> or <th> elements. char deprecated since html4obsolete since html5 this attribute is used to set the character to align the cells in a column on. typical values for this include a period (.) when attempting to align numbers or monetary values. if align is not set to char, this attribute is ignored. note: do not use this attribute as it is obsolete (and not supported) in the lates...
<thead>: The Table Head element - HTML: Hypertext Markup Language
purple = "#800080" teal = "#008080" fuchsia = "#ff00ff" aqua = "#00ffff" usage note: do not use this attribute, as it is non-standard and only implemented in some versions of microsoft internet explorer: the <thead> element should be styled using css. to give a similar effect to the bgcolor attribute, use the css property background-color, on the
relevant <td> or <th> elements. char in html 4, in html5 this attribute is used to set the character to align the cells in a column on. typical values for this include a period (.) when attempting to align numbers or monetary values. if align is not set to char, this attribute is ignored. note: do not use this attribute as it is obsolete (and not supported) in the latest standard. to achi...
<var>: The Variable element - HTML: Hypertext Markup Language
rmitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. ...
accesskey - HTML: Hypertext Markup Language
r browser keyboard shortcut, or assistive technology functionality. what may work for one combination of operating system, assistive technology, and browser may not work with other combinations. certain accesskey values may not be present on certain keyboards, especially when internationalization is a concern. so adapting to specific languages could cause further problems. accesskey values that
rely on numbers may be confusing to individuals experiencing cognitive concerns, where the number doesn't have a logical association with the functionality it triggers. informing the user that accesskeys are present, so that they are aware of the functionality. if the system lacks a method of notifying the user about this feature, the user might accidentally activate accesskeys. because of these ...
dir - HTML: Hypertext Markup Language
es: this attribute is mandatory for the <bdo> element where it has a different semantic meaning. this attribute is not inherited by the <bdi> element. if not set, its value is auto. this attribute can be overridden by the css properties direction and unicode-bidi, if a css page is active and the element supports these properties. as the directionality of the text is semantically
related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the
related css properties when possible. that way, the text will display correctly even on a browser that doesn't support css or has the css deactivated. the auto value should be used for data with an unknown directionality, like data coming from user input, eventually stored...
id - HTML: Hypertext Markup Language
element when linking (using a fragment identifier), scripting, or styling (with css). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this attribute's value is an opaque string: this means that web authors should not
rely on it to convey human-readable information (although having your ids somewhat human-readable can be useful for code comprehension, e.g. consider ticket-18659 versus r45tgfe-freds&$@). id's value must not contain whitespace (spaces, tabs etc.). browsers treat non-conforming ids that contain whitespace as if the whitespace is part of the id. in contrast to the class attribute, which allows space...
itemref - HTML: Hypertext Markup Language
ts of an element with the itemscope attribute can be associated with an item using the global attribute itemref. 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. note: the itemref attribute is not part of the microdata data model. it is me
rely a syntactic construct to aid authors in adding annotations to pages where the data to be annotated does not follow a convenient tree structure. for example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells. example html <div itemscope id="amanda" itemref="a b"></div> <p id="a">name: <span itemprop="name">amanda<...
spellcheck - HTML: Hypertext Markup Language
like <textarea spellcheck></textarea> is not allowed. the correct usage is <textarea spellcheck="true"></textarea>. if this attribute is not set, its default value is element-type and browser-defined. this default value may also be inherited, which means that the element content will be checked for spelling errors only if its nearest ancestor has a spellcheck state of true. this attribute is me
rely a hint for the browser: browsers are not required to check for spelling errors. typically non-editable elements are not checked for spelling errors, even if the spellcheck attribute is set to true and the browser supports spellchecking. specifications specification status comment html living standardthe definition of 'spellcheck' in that specification. living sta...
style - HTML: Hypertext Markup Language
interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. usage note: this attribute must not be used to convey semantic information. even if all styling is removed, a page should remain semantically correct. typically it shouldn't be used to hide ir
relevant information; this should be done using the hidden attribute. specifications specification status comment html living standardthe definition of 'style' in that specification. living standard no change from latest snapshot, html 5.1 html 5.1the definition of 'style' in that specification. recommendation snapshot of html living standard, no change...
tabindex - HTML: Hypertext Markup Language
ter any positive tabindex values and its order is defined by the document's source order. a positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. that is, tabindex="4" is focused before tabindex="5" and tabindex="0", but after tabindex="3". if multiple elements share the same positive tabindex value, their order
relative to each other follows their position in the document source. the maximum value for tabindex is 32767. if not specified, it takes the default value 0. avoid using tabindex values greater than 0. doing so makes it difficult for people who
rely on assistive technology to navigate and operate page content. instead, write the document with the elements in a logical sequence. if you se...
Link types: noopener - HTML: Hypertext Markup Language
the noopener keyword for the
rel attribute of the <a>, <area>, and <form> elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the window.opener property on the opened window (it returns null). this is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the window.opener property (see about
rel=noopener for more details), while still providing the referer http header (unless noreferrer is used as well). note that when noopener is used, nonempty target names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab. specifications specif...
Link types: noreferrer - HTML: Hypertext Markup Language
the noreferrer keyword for the
rel attribute of the <a>, <area>, and <form> elements instructs the browser, when navigating to the target resource, to omit the referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified. specifications specification status comment html living standardthe definition of 'noreferrer' in that specification. living standard ...
Link types: preconnect - HTML: Hypertext Markup Language
the preconnect keyword for the
rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin. specifications specification status comment html living standardthe definition of 'preconnect' in that specification. living standard ...
Link types: prefetch - HTML: Hypertext Markup Language
the prefetch keyword for the
rel attribute of the <link> element is a hint to browsers that the user is likely to need the target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource. specifications specification status comment html living standardthe definition of 'prefetch' in that specification. living standard ...
Link types: prerender - HTML: Hypertext Markup Language
the prerender keyword for the
rel attribute of the <link> element is a hint to browsers that the user might need the target resource for the next navigation, and therefore the browser can likely improve the user experience by preemptively fetching and processing the resource — for example, by fetching its subresources or performing some rendering in the background offscreen. specifications specification status comment html living standardthe definition of 'prerender' in that specification. living standard ...
HTML reference - HTML: Hypertext Markup Language
rence elements in html have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want. global attributes global attributes are attributes common to all html elements; they can be used on all elements, though they may have no effect on some elements. link types in html, the following link types indicate the
relationship between two documents, in which one links to the other using an <a>, <area>, or <link> element. content categories every html element is a member of one or more content categories — these categories group elements that share common characteristics. date and time formats used in html certain html elements allow you to specify dates and/or times as the value or as the value of an att...
Identifying resources on the Web - HTTP
n abstraction handled by web servers without any physical reality. query ?key1=value1&key2=value2 are extra parameters provided to the web server. those parameters are a list of key/value pairs separated with the & symbol. the web server can use those parameters to do extra stuff before returning the resource to the user. each web server has its own rules regarding parameters, and the only
reliable way to know how a specific web server is handling parameters is by asking the web server owner. fragment #somewhereinthedocument is an anchor to another part of the resource itself. an anchor represents a sort of "bookmark" inside the resource, giving the browser the directions to show the content located at that "bookmarked" spot. on an html document, for example, the browser will sc...
Basics of HTTP - HTTP
on top of these basic concepts, numerous extensions have been developed over the years that add updated functionality and semantics with new http methods or headers. articles overview of http describes what http is and its role in web architecture, including its position in the protocol stack. evolution of http http was created in the early 1990s and has been extended several times. this article goes through its history and describes http/0.9, http/1.0, http/1.1, and the modern http/2, as well as novelties introduced over the years. ...
Reason: CORS request did not succeed - HTTP
in many cases, it is caused by a browser plugin (e.g. an ad blocker or privacy protector) blocking the request. other possible causes include: trying to access an https resource that has an invalid certificate will cause this error. ...
Cross-Origin Resource Sharing (CORS) - HTTP
are: application/x-www-form-urlencoded multipart/form-data text/plain no event listeners are registered on any xmlhttprequestupload object used in the request; these are accessed using the xmlhttprequest.upload property. no readablestream object is used in the request. note: these are the same kinds of cross-site requests that web content can already issue, and no response data is
released to the requester unless the server sends an appropriate header. therefore, sites that prevent cross-site request forgery have nothing new to fear from http access control. note: webkit nightly and safari technology preview place additional restrictions on the values allowed in the accept, accept-language, and content-language headers. if any of those headers have ”nonstandard” values, ...
Content Security Policy (CSP) - HTTP
ed. sample violation report let's consider a page located at http://example.com/signup.html. it uses the following policy, disallowing everything but stylesheets from cdn.example.com. content-security-policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports the html of signup.html looks like this: <!doctype html> <html> <head> <title>sign up</title> <link
rel="stylesheet" href="css/style.css"> </head> <body> ... content ... </body> </html> can you spot the mistake? stylesheets are allowed to be loaded only from cdn.example.com, yet the website tries to load one from its own origin (http://example.com). a browser capable of enforcing csp would send the following violation report as a post request to http://example.com/_/csp-reports, when the...
List of default Accept values - HTTP
user agent value comment firefox 4 text/css,*/*;q=0.1 see bug 170789 source internet explorer 8 or earlier */* see ie and the accept header (ieinternals' msdn blog) internet explorer 9 text/css see fiddler is better with internet explorer 9 (ieinternals' msdn blog) ...
Using Feature Policy - HTTP
le it, and neither can any of the child's descendants. enforcing best practices for good user experiences it's difficult to build a website that uses all the latest best practices and provides great performance and user experiences. as the website evolves, it can become even harder to maintain the user experience over time. you can use feature policies to specify the desired best practices, and
rely on the browser to enforce the policies to prevent regressions. there are several policy-controlled features designed to represent functionality that can negatively impact the user experience. these features include: layout-inducing animations unoptimized (poorly compressed) images oversized images synchronous scripts synchronous xmlhttprequest unsized media to avoid breaking existing ...
Accept-CH-Lifetime - HTTP
syntax accept-ch-lifetime: <age> examples accept-ch: viewport-width, dpr accept-ch-lifetime: 86400 ...
Accept-CH - HTTP
the accept-ch header is set by the server to specify which client hints headers a client should include in subsequent requests. header type response header forbidden header name ? note: client hints are accessible only on secure origins (via tls). accept-ch and accept-ch-lifetime headers should be persisted for all secure requests to ensure client hints are sent
reliably. 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-Encoding - HTTP
pression algorithm. br a compression format using the brotli algorithm. identity indicates the identity function (i.e. no compression, nor modification). this value is always considered as acceptable, even if not present. * matches any content encoding not already listed in the header. this is the default value if the header is not present. it doesn't mean that any algorithm is supported; me
rely that no preference is expressed. ;q= (qvalues weighting) any value is placed in an order of preference expressed using a
relative quality value called weight. examples accept-encoding: gzip accept-encoding: gzip, compress, br accept-encoding: br;q=1.0, gzip;q=0.8, *;q=0.1 specifications specification title rfc 7231, section 5.3.4: accept-encoding hypertext trans...
Accept-Ranges - HTTP
eader name no syntax accept-ranges: <range-unit> accept-ranges: none directives <range-unit> defines the range unit the server supports. though bytes is the only range unit formally defined by rfc 7233, additional range units may be registered in the http range unit registry. none no range unit is supported, this makes the header equivalent of its own absence and is therefore ra
rely used, though some browsers, like ie9, it is used to disable or remove the pause buttons in the download manager. examples accept-ranges: bytes specifications specification title rfc 7233, section 2.3: accept-ranges hypertext transfer protocol (http/1.1): range requests ...
Accept - HTTP
lication/xhtml+xml, application/xml;q=0.9, image/webp, */*;q=0.8 directives <mime_type>/<mime_subtype> a single, precise mime type, like text/html. <mime_type>/* a mime type, but without any subtype. image/* will match image/png, image/svg, image/gif and any other image types. */* any mime type ;q= (q-factor weighting) any value used is placed in an order of preference expressed using
relative quality value called the weight. examples accept: text/html accept: image/* // general default accept: */* // default for navigation requests accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8 specifications specification title rfc 7231, section 5.3.2: accept hypertext transfer protocol (http/1.1): semantics and context ...
Access-Control-Allow-Credentials - HTTP
setting the credentials mode for the xhr, fetch, or ajax request) must indicate that they’re opting in to including credentials. header type response header forbidden header name no syntax access-control-allow-credentials: true directives true the only valid value for this header is true (case-sensitive). if you don't need credentials, omit this header enti
rely (rather than setting its value to false). examples allow credentials: access-control-allow-credentials: true using xhr with credentials: var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/', true); xhr.withcredentials = true; xhr.send(null); using fetch with credentials: fetch(url, { credentials: 'include' }) specifications specification status comment...
Clear-Site-Data - HTTP
r), sessionstorage (executes sessionstorage.clear), indexeddb (for each database execute idbfactory.deletedatabase), service worker registrations (for each service worker registration, execute serviceworkerregistration.unregister), appcache, websql databases, filesystem api data, plugin data (flash via npp_clearsitedata). "executioncontexts" indicates that the server wishes to
reload all browsing contexts for the origin of the response (location.
reload). "*" (wildcard) indicates that the server wishes to clear all types of data for the origin of the response. if more data types are added in future versions of this header, they will also be covered by it. examples sign out of web site if a user signs out of your website or service, you might want to remove locally sto...
Content-Language - HTTP
;=. syntax content-language: de-de content-language: en-us content-language: de-de, en-ca directives language-tag multiple language tags are separated by comma. each language tag is a sequence of one or more case-insensitive subtags, each separated by a hyphen character ("-", %x2d). in most cases, a language tag consists of a primary language subtag that identifies a broad family of
related languages (e.g., "en" = english), which is optionally followed by a series of subtags that refine or narrow that language's range (e.g., "en-ca" = the variety of english as communicated in canada). 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. examples indicating the language a...
Content-Location - HTTP
e direct url to use to access the resource, without further content negotiation in the future. location is a header associated with the response, while content-location is associated with the data returned. this distinction may seem abstract without examples. header type entity header forbidden header name no syntax content-location: <url> directives <url> a
relative (to the request url) or absolute url. examples requesting data from a server in different formats let's say a site's api can return data in json, xml, or csv formats. if the url for a particular document is at https://example.com/documents/foo, the site could return different urls for content-location depending on the request's accept header: request header response header ...
CSP: manifest-src - HTTP
italization and whitespace matter, including leading or trailing whitespace. see unsafe inline script for an example. in csp 2.0 this applied only to inline scripts. csp 3.0 allows it in the case of script-src for external scripts. examples violation cases given this csp header: content-security-policy: manifest-src https://example.com/ the following <link> is blocked and won't load: <link
rel="manifest" href="https://not-example.com/manifest"> specifications specification status comment content security policy level 3the definition of 'manifest-src' in that specification. working draft initial definition. ...
CSP: prefetch-src - HTTP
his applied only to inline scripts. csp 3.0 allows it in the case of script-src for external scripts. 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. working draft initial definition. ...
CSP: referrer - HTTP
pecify information in the referer header (with a single r as this was a typo in the original spec) for links away from a page. this api is deprecated and removed from browsers. use the referrer-policy header instead. syntax content-security-policy: referrer <referrer-policy>; where <referrer-policy> can be one of the following values: "no-referrer" the referer header will be omitted enti
rely. no referrer information is sent along with requests. "none-when-downgrade" this is the user agent's default behavior if no policy is specified. the origin is sent as referrer to a-priori as-much-secure destination (https->https), but isn't sent to a less secure destination (https->http). "origin" only send the origin of the document as the referrer in all cases. the document https://exampl...
CSP: style-src-elem - HTTP
csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive. ...
Content-Security-Policy-Report-Only - HTTP
violation report let's consider a page located at http://example.com/signup.html. it uses the following policy, disallowing everything but stylesheets from cdn.example.com. content-security-policy-report-only: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports the html of signup.html looks like this: <!doctype html> <html> <head> <title>sign up</title> <link
rel="stylesheet" href="css/style.css"> </head> <body> ... content ... </body> </html> can you spot the violation? stylesheets are only allowed to be loaded from cdn.example.com, yet the website tries to load one from its own origin (http://example.com). a browser capable of enforcing csp will send the following violation report as a post request to http://example.com/_/csp-reports, when th...
Content-Security-Policy - HTTP
to be prefetched or prerendered. script-src specifies valid sources for javascript. script-src-elem specifies valid sources for javascript <script> elements. script-src-attr specifies valid sources for javascript inline event handlers. style-src specifies valid sources for stylesheets. style-src-elem specifies valid sources for stylesheets <style> elements and <link> elements with
rel="stylesheet". style-src-attr specifies valid sources for inline styles applied to individual dom elements. worker-src specifies valid sources for worker, sharedworker, or serviceworker scripts. document directives document directives govern the properties of a document or worker environment to which a policy applies. base-uri restricts the urls which can be used in a document's <base...
Cross-Origin-Opener-Policy - HTTP
otential attackers can't access to your global object if they were opening it in a popup, preventing a set of cross-origin attacks dubbed xs-leaks. if a cross-origin document with coop is opened in a new window, the opening document will not have a reference to it, and the window.opener property of the new window will be null. this allows you to have more control over references to a window than
rel=noopener, which only affects outgoing navigations. header type response header forbidden header name no syntax cross-origin-opener-policy: unsafe-none | same-origin-allow-popups | same-origin directives unsafe-none this is the default value. allows the document to be added to its opener's browsing context group unless the opener itself has a coop of same-ori...
Index - HTTP
preferred. (by languages, we mean natural languages, such as english, and not programming languages.) using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the content-language response header. browsers set adequate values for this header according to their user interface language and even if a user can change it, this happens ra
rely (and is frowned upon as it leads to fingerprinting). 6 accept-ranges http, http header, range requests, reference, response header the accept-ranges response http header is a marker used by the server to advertise its support of partial requests. the value of this field indicates the unit that can be used to define a range. 7 access-control-allow-credentials c...
Location - HTTP
ent-location indicates the direct url to use to access the resource when content negotiation happened, without the need of further content negotiation. location is a header associated with the response, while content-location is associated with the entity returned. header type response header forbidden header name no syntax location: <url> directives <url> a
relative (to the request url) or absolute url. examples location: /index.html specifications specification title rfc 7231, section 7.1.2: location hypertext transfer protocol (http/1.1): semantics and content ...
SameSite cookies - HTTP
cookies are misusing the “samesite“ attribute, so it won’t work as expected. cookie “mycookie” has “samesite” policy set to “lax” because it is missing a “samesite” attribute, and “samesite=lax” is the default value for this attribute. the warning appears because the samesite policy for a cookie has not specified explicitly: set-cookie: flavor=choco while you could
rely on modern browsers to apply samesite=lax automatically, you should rather specify it explicitly to clearly communicate your intent which samesite policy applies to your cookie. this will also improve the experience across browsers as not all of them default to lax yet. set-cookie: flavor=choco; samesite=lax example: rewriteengine on rewritebase "/" rewritecond "%{http_host}" "^example\.
Set-Cookie - HTTP
g. if unspecified, the cookie becomes a session cookie. a session finishes when the client shuts down, and session cookies will be removed. warning: many web browsers have a session restore feature that will save all tabs and restore them next time the browser is used. session cookies will also be restored, as if the browser was never closed. when an expires date is set, the deadline is
relative to the client the cookie is being set on, not the server. max-age=<number> optional number of seconds until the cookie expires. a zero or negative number will expire the cookie immediately. if both expires and max-age are set, max-age has precedence. domain=<domain-value> optional host to which the cookie will be sent. if omitted, defaults to the host of the current document url, n...
SourceMap - HTTP
the sourcemap http response header links generated code to a source map, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger. header type response header forbidden header name no syntax sourcemap: <url> x-sourcemap: <url> (deprecated) directives <url> a
relative (to the request url) or absolute url pointing to a source map file. examples sourcemap: /path/to/file.js.map specifications specification title draft document source map revision 3 proposal ...
WWW-Authenticate - HTTP
a common type is "basic". iana maintains a list of authentication schemes. realm=<realm> a description of the protected area. if no realm is specified, clients often display a formatted hostname instead. charset=<charset> tells the client the server's prefered encoding scheme when submitting a username and password. the only allowed value is the case insensitive string "utf-8". this does not
relate to the encoding of the realm string. examples typically, a server response contains a www-authenticate header that looks like these: www-authenticate: basic www-authenticate: basic realm="access to the staging site", charset="utf-8" see also http authentication for examples on how to configure apache or nginx servers to password protect your site with http basic authentication. specifi...
HTTP Public Key Pinning (HPKP) - HTTP
ha256=\"base64+backup==\"; max-age=5184000; includesubdomains" nginx adding the following line and inserting the appropriate pin-sha256="..." values will enable hpkp on your nginx. this requires the ngx_http_headers_module. add_header public-key-pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includesubdomains' always; lighttpd the following line with your
relevant key information (pin-sha256="..." fields) will enable hpkp on lighttpd. setenv.add-response-header = ( "public-key-pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includesubdomains") note: this requires the mod_setenv server.module loaded which can be included by the following if not already loaded. server.modules += ( "mod_setenv" ) iis add ...
HTTP range requests - HTTP
fulfilled, the range request will be issued and the server sends back a 206 partial content answer with the appropriate body. if the condition is not fulfilled, the full resource is sent back, with a 200 ok status. this header can be used either with a last-modified validator, or with an etag, but not with both. if-range: wed, 21 oct 2015 07:28:00 gmt partial request responses there are three
relevant statuses, when working with range requests: in case of a successful range request, the 206 partial content status is sent back from a server. in case of a range request that is out of bounds (none of the range values overlap the extent of the resource, i.e first-byte-pos of all ranges is greater than the resource length), the server responds with a 416 requested range not satisfiable sta...
HTTP resources and specifications - HTTP
http was first specified in the early 1990s. designed with extensibility in mind, it has seen numerous additions over the years; this lead to its specification being scattered through numerous specification documents (in the midst of experimental abandoned extensions). this page lists
relevant resources about http. specification title status rfc 7230 hypertext transfer protocol (http/1.1): message syntax and routing proposed standard rfc 7231 hypertext transfer protocol (http/1.1): semantics and content proposed standard rfc 7232 hypertext transfer protocol (http/1.1): conditional requests proposed standard rfc 7233 hypertext transfer protocol (http/1.1): range requests proposed standard rfc 7234 hype...
103 Early Hints - HTTP
syntax 103 early hints specifications specification status comments rfc 8297: 103 early hints ietf rfc initial definition browser compatibility the compatibility table in this page is generated from structured data. ...
300 Multiple Choices - HTTP
the http 300 multiple choices redirect status response code indicates that the request has more than one possible responses. the user-agent or the user should choose one of them. as there is no standardized way of choosing one of the responses, this response code is very ra
rely used. if the server has a preferred choice, it should generate a location header. status 300 multiple choices specifications specification title rfc 7231, section 6.4.1: 300 multiple choices hypertext transfer protocol (http/1.1): semantics and content ...
406 Not Acceptable - HTTP
able 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. proactive content negotiation headers include: accept accept-charset accept-encoding accept-language in practice, this error is very ra
rely used. instead of responding using this error code, which would be cryptic for the end user and difficult to fix, servers ignore the
relevant header and serve an actual page to the user. it is assumed that even if the user won't be completely happy, they will prefer this to an error code. if a server returns such an error status, the body of the message should contain the list of the available r...
408 Request Timeout - HTTP
ervers, even without any previous request by the client. a server should send the "close" connection header field in the response, since 408 implies that the server has decided to close the connection rather than continue waiting. this response is used much more since some browsers, like chrome, firefox 27+, and ie9, use http pre-connection mechanisms to speed up surfing. note: some servers me
rely shut down the connection without sending this message. status 408 request timeout specifications specification title rfc 7231, section 6.5.7: 408 request timeout hypertext transfer protocol (http/1.1): semantics and content ...
503 Service Unavailable - HTTP
he server is not ready to handle the request. common causes are a server that is down for maintenance or that is overloaded. this response should be used for temporary conditions and the retry-after http header should, if possible, contain the estimated time for the recovery of the service. note: together with this response, a user-friendly page explaining the problem should be sent. caching-
related headers that are sent along with this response should be taken care of, as a 503 status is often a temporary condition and responses shouldn't usually be cached. status 503 service unavailable specifications specification title rfc 7231, section 6.6.4: 503 service unavailable hypertext transfer protocol (http/1.1): semantics and content ...
About JavaScript - JavaScript
x 4) and ionmonkey were added to the spidermonkey javascript engine over time. work is always ongoing to improve javascript execution performance. besides the above implementations, there are other popular javascript engines such as:- google's v8, which is used in the google chrome browser and recent versions of opera browser. this is also the engine used by node.js. the javascriptcore (squir
relfish/nitro) used in some webkit browsers such as apple safari. carakan in old versions of opera. the chakra engine used in internet explorer (although the language it implements is formally called "jscript" in order to avoid trademark issues). each of mozilla's javascript engines expose a public api which application developers can use to integrate javascript into their software. by far, the m...
Closures - JavaScript
riggered by the user (such as a click or a keypress). the code is attached as a callback (a single function that is executed in response to the event). for instance, suppose we want to add buttons to a page to adjust the text size. one way of doing this is to specify the font-size of the body element (in pixels), and then set the size of the other elements on the page (such as headers) using the
relative em unit: body { font-family: helvetica, arial, sans-serif; font-size: 12px; } h1 { font-size: 1.5em; } h2 { font-size: 1.2em; } such interactive text size buttons can change the font-size property of the body element, and the adjustments are picked up by other elements on the page thanks to the
relative units. here's the javascript: function makesizer(size) { return function...
Equality comparisons and sameness - JavaScript
g., math.min(-0, +0) evaluates to -0. refer to the documentation for the individual methods. ~ << >> each of these operators uses the toint32 algorithm internally. since there is only one representation for 0 in the internal 32-bit integer type, -0 will not survive a round trip after an inverse operation. e.g., both object.is(~~(-0), -0) and object.is(-0 << 2 >> 2, -0) evaluate to false.
relying on object.is when the signedness of zeros is not taken into account can be hazardous. of course, when the intent is to distinguish between -0 and +0, it does exactly what's desired. caveat: object.is and nan the object.is specification treats all instances of nan as the same object. however, since typed arrays are available, we can have distinct instances, which don't behave identically in ...
Concurrency model and the event loop - JavaScript
tmessage() } queue.waitformessage() waits synchronously for a message to arrive (if one is not already available and waiting to be handled). "run-to-completion" each message is processed completely before any other message is processed. this offers some nice properties when reasoning about your program, including the fact that whenever a function runs, it cannot be pre-empted and will run enti
rely before any other code runs (and can modify data the function manipulates). this differs from c, for instance, where if a function runs in a thread, it may be stopped at any point by the runtime system to run some other code in another thread. a downside of this model is that if a message takes too long to complete, the web application is unable to process user interactions like click or scroll.
Control flow and error handling - JavaScript
y…catch…finally statement. it is also important to note that the finally block will execute whether or not an exception is thrown. if an exception is thrown, however, the statements in the finally block execute even if no catch block handles the exception that was thrown. you can use the finally block to make your script fail gracefully when an exception occurs. for example, you may need to
release a resource that your script has tied up. the following example opens a file and then executes statements that use the file. (server-side javascript allows you to access files.) if an exception is thrown while the file is open, the finally block closes the file before the script fails. using finally here ensures that the file is never left open, even if an error occurs. openmyfile(); try { ...
Functions - JavaScript
« previousnext » functions are one of the fundamental building blocks in javascript. a function in javascript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious
relationship between the input and the output. to use a function, you must define it somewhere in the scope from which you wish to call it. see also the exhaustive reference chapter about javascript functions to get to know the details. defining functions function declarations a function definition (also called a function declaration, or function statement) consists of the function keyword, followed by: the name of the function. a list of parameters...
Grammar and types - JavaScript
ue is not defined. number. an integer or floating point number. for example: 42 or 3.14159. bigint. an integer with arbitrary precision. for example: 9007199254740992n. string. a sequence of characters that represent a text value. for example: "howdy" symbol (new in ecmascript 2015). a data type whose instances are unique and immutable. and object although these data types are
relatively few, they enable you to perform useful functions with your applications. objects and functions are the other fundamental elements in the language. you can think of objects as named containers for values, and functions as procedures that your script can perform. data type conversion javascript is a dynamically typed language. this means you don't have to specify the data type of a variabl...
Introduction - JavaScript
al objects; for example: client-side javascript extends the core language by supplying objects to control a browser and its document object model (dom). for example, client-side extensions allow an application to place elements on an html form and respond to user events such as mouse clicks, form input, and page navigation. server-side javascript extends the core language by supplying objects
relevant to running javascript on a server. for example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server. this means that in the browser, javascript can change the way the webpage (dom) looks. and, likewise, node.js javascript on the server can r...
Numbers and dates - JavaScript
g, and manipulating dates. it does not have any properties. javascript handles dates similarly to java. the two languages have many of the same date methods, and both languages store dates as the number of milliseconds since january 1, 1970, 00:00:00, with a unix timestamp being the number of seconds since january 1, 1970, 00:00:00. the date object range is -100,000,000 days to 100,000,000 days
relative to 01 january, 1970 utc. to create a date object: var dateobjectname = new date([parameters]); where dateobjectname is the name of the date object being created; it can be a new object or a property of an existing object. calling date without the new keyword returns a string representing the current date and time. the parameters in the preceding syntax can be any of the following: n...
Using Promises - JavaScript
e is emptied at the end of the current run of the javascript event loop, i.e. pretty soon: const wait = ms => new promise(resolve => settimeout(resolve, ms)); wait().then(() => console.log(4)); promise.resolve().then(() => console.log(2)).then(() => console.log(3)); console.log(1); // 1, 2, 3, 4 nesting simple promise chains are best kept flat without nesting, as nesting can be a result of ca
reless composition. see common mistakes. nesting is a control structure to limit the scope of catch statements. specifically, a nested catch only catches failures in its scope and below, not errors higher up in the chain outside the nested scope. when used correctly, this gives greater precision in error recovery: dosomethingcritical() .then(result => dosomethingoptional(result) .then(optionalres...
JavaScript language resources - JavaScript
ecmascript is the scripting language that forms the basis of javascript. ecmascript standardized by the ecma international standards organization in the ecma-262 and ecma-402 specifications. ...
TypeError: can't define property "x": "obj" is not extensible - JavaScript
e in both, strict mode and sloppy mode, a call to object.defineproperty() throws when adding a new property to a non-extensible object. var obj = { }; object.preventextensions(obj); object.defineproperty(obj, 'x', { value: "foo" } ); // typeerror: can't define property "x": "obj" is not extensible to fix this error, you will either need to remove the call to object.preventextensions() enti
rely, or move it to a position so that the property is added earlier and only later the object is marked as non-extensible. of course you can also remove the property that was attempted to be added, if you don't need it. 'use strict'; var obj = {}; obj.x = 'foo'; // add property first and only then prevent extensions object.preventextensions(obj); ...
Warning: expression closures are deprecated - JavaScript
closures are deprecated" occurs when the non-standard expression closure syntax (shorthand function syntax) is used. message warning: expression closures are deprecated error type warning. javascript execution won't be halted. what went wrong? the non-standard expression closure syntax (shorthand function syntax) is deprecated and shouldn't be used anymore. this syntax will be removed enti
rely in bug 1083458 and scripts using it will throw a syntaxerror then. examples deprecated syntax expression closures omit curly braces or return statements from function declarations or from method definitions in objects. var x = function() 1; var obj = { count: function() 1 }; standard syntax to convert the non-standard expression closures syntax to standard ecmascript syntax, you can ad...
Arrow function expressions - JavaScript
urrent scope, an arrow function ends up finding the this from its enclosing scope. thus, in the following code, the this within the function that is passed to setinterval has the same value as the this in the lexically enclosing function: function person(){ this.age = 0; setinterval(() => { this.age++; // |this| properly refers to the person object }, 1000); } var p = new person();
relation with strict mode given that this comes from the surrounding lexical context, strict mode rules with regard to this are ignored. var f = () => { 'use strict'; return this; }; f() === window; // or the global object all other strict mode rules apply normally. correction: start note: the previous statement seems false. strict mode should prevent creating global variables when assigning to...
Functions - JavaScript
rows an error the function name also appears when the function is serialized via function's tostring method. on the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope in which the function is declared. as the 4th example shows, the function name can be different from the variable the function is assigned to. they have no
relation to each other. a function declaration also creates a variable with the same name as the function name. thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in: a function defined by 'new function' does not have a function name. however, in the spidermonkey javascript engine, the serialized...
Array.prototype.indexOf() - JavaScript
e at the beginning of your scripts. this will allow you to use indexof() when there is still no native support. this algorithm matches the one specified in ecma-262, 5th edition, assuming typeerror and math.abs() have their original values. // this version tries to optimize by only checking for "in" when looking for undefined and // skipping the definitely fruitless nan search. other parts are me
rely cosmetic conciseness. // whether it is actually faster remains to be seen. if (!array.prototype.indexof) array.prototype.indexof = (function(object, max, min) { "use strict" return function indexof(member, fromindex) { if (this === null || this === undefined) throw typeerror("array.prototype.indexof called on null or undefined") var that = object(this), len = that.
Array.prototype.length - JavaScript
which causes the third element to be a non-iterable empty slot. const arr = [1, 2]; console.log(arr); // [ 1, 2 ] arr.length = 5; // set array length to 5 while currently 2. console.log(arr); // [ 1, 2, <3 empty items> ] arr.foreach(element => console.log(element)); // 1 // 2 as you can see, the length property does not necessarily indicate the number of defined values in the array. see also
relationship between length and numerical properties. property attributes of array.prototype.length writable yes enumerable no configurable no writable: if this attribute set to false, the value of the property cannot be changed. configurable: if this attribute set to false, any attempts to delete th...
Array.prototype.push() - JavaScript
equest. syntax arr.push([element1[, ...[, elementn]]]) parameters elementn the element(s) to add to the end of the array. return value the new length property of the object upon which the method was called. description the push method appends values to an array. push is intentionally generic. this method can be used with call() or apply() on objects resembling arrays. the push method
relies on a length property to determine where to start inserting the given values. if the length property cannot be converted into a number, the index used is 0. this includes the possibility of length being nonexistent, in which case length will also be created. although strings are native, array-like objects, they are not suitable in applications of this method, as strings are immutable. similar...
Array - JavaScript
t it's also possible to quote the array indexes as well (e.g., years['2'] instead of years[2]), although it's not necessary. the 2 in years[2] is coerced into a string by the javascript engine through an implicit tostring conversion. as a result, '2' and '02' would refer to two different slots on the years object, and the following example could be true: console.log(years['2'] != years['02'])
relationship between length and numerical properties a javascript array's length property and numerical properties are connected. several of the built-in array methods (e.g., join(), slice(), indexof(), etc.) take into account the value of an array's length property when they're called. other methods (e.g., push(), splice(), etc.) also result in updates to an array's length property. const fruits...
BigInt.prototype.toLocaleString() - JavaScript
active-examples and send us a pull request. syntax bigintobj.tolocalestring([locales [, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose formatting conventions should be used. in implementations that ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation-dependent. see the intl.numberformat() constructor for details on these parameters and how to use them. return value a string with a language-sensitive representation of the given bigint. performance when formatting large numbers of numbers, it is better to create a numberformat object and use the function provided by its numberformat.format property. examples using tolocal...
BigInt - JavaScript
bigint can be used for arbitrarily large integers. description a bigint is created by appending n to the end of an integer literal — 10n — or by calling the function bigint(). ...
Date.prototype[@@toPrimitive] - JavaScript
e]() tries to call the tostring method. if the tostring property does not exist, it tries to call the valueof method and if the valueof does not exist either, [@@toprimitive]() throws a typeerror. if hint is "number", [@@toprimitive]() first tries to call valueof, and if that fails, it calls tostring. javascript calls the [@@toprimitive]() method to convert an object to a primitive value. you ra
rely need to invoke the [@@toprimitive]() method yourself; javascript automatically invokes it when encountering an object where a primitive value is expected. examples returning date primitives const testdate = new date(1590757517834); // "date fri may 29 2020 14:05:17 gmt+0100 (british summer time)" testdate[symbol.toprimitive]('string'); // returns "date fri may 29 2020 14:05:17 gmt+0100 (brit...
Date.parse() - JavaScript
the date.parse() method parses a string representation of a date, and returns the number of milliseconds since january 1, 1970, 00:00:00 utc or nan if the string is unrecognized or, in some cases, contains illegal date values (e.g. 2015-02-31). it is not recommended to use date.parse as until es5, parsing of strings was enti
rely implementation dependent. there are still many differences in how different hosts parse date strings, therefore date strings should be manually parsed (a library can help if many different formats are to be accommodated). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax direct call:...
Date.prototype.setDate() - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax dateobj.setdate(dayvalue) parameters dayvalue an integer representing the day of the month. return value the number of milliseconds between 1 january 1970 00:00:00 utc and the given date (the date object is also changed in place). description if the dayvalue is outside of the range of date values for the month, setdate() will update the date object accordingly. ...
Date.prototype.toString() - JavaScript
ion of the timezone, which might be an abbreviation or full name (there is no standard for names or abbreviations of timezones), e.g. "line islands time" or "lint" right bracket, i.e. ")" e.g. "sat sep 01 2018 14:53:26 gmt+1400 (lint)" until ecmascript 2018 (edition 9), the format of the string returned by date.prototype.tostring was implementation dependent. therefore it should not be
relied upon to be in the specified format. the tostring() method is automatically called when a date is to be represented as a text value, e.g. console.log(new date()), or when a date is used in a string concatenation, such as var today = 'today is ' + new date(). tostring() is a generic method, it does not require that its this is a date instance. however, it must have an internal [[timevalue]] pr...
Error.prototype.stack - JavaScript
to the actual objects, scalar values could be retrieved (though it may be — it is still possible in firefox 14 — easier to use arguments.callee.caller.arguments, as could the function name be retrieved by arguments.callee.caller.name). "undefined" is listed as "(void 0)". note that if string arguments were passed in with values such as "@", "(", ")" (or if in file names), you could not easily
rely on these for breaking the line into its component parts. thus, in firefox 14 and later this is less of an issue. different browsers set this value at different times. for example, firefox sets it when creating an error object, while phantomjs sets it only when throwing the error, and archived msdn docs also seem to match the phantomjs implementation. examples using the stack property the fol...
Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript
re requested and are supported for this locale are included in locale. calendar e.g. "gregory" numberingsystem the values requested using the unicode extension keys "ca" and "nu" or filled in as default values. timezone the value provided for this property in the options argument; undefined (representing the runtime's default time zone) if none was provided. warning: applications should not
rely on undefined being returned, as future versions may return a string value identifying the runtime’s default time zone instead. hour12 the value provided for this property in the options argument or filled in as a default. weekday era year month day hour minute second timezonename the values resulting from format matching between the corresponding properties in the options argument ...
Intl.DateTimeFormat.supportedLocalesOf() - JavaScript
ate and time formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall back to the default locale. examples using supportedlocalesof assuming a runtime that supports indonesian and german but not balinese in date and time formatting, supportedlocalesof returns the indonesian and german language tags unchanged, even though pinyin collation is neither
relevant to date and time formatting nor used with indonesian, and a specialized german for indonesia is unlikely to be supported. note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well. var locales = ['...
Intl.DisplayNames.supportedLocalesOf() - JavaScript
ate and time formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall back to the default locale. examples using supportedlocalesof assuming a runtime that supports indonesian and german but not balinese in date and time formatting, supportedlocalesof returns the indonesian and german language tags unchanged, even though pinyin collation is neither
relevant to date and time formatting nor used with indonesian, and a specialized german for indonesia is unlikely to be supported. note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well. const locales = ...
Intl.ListFormat.supportedLocalesOf() - JavaScript
ate and time formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall back to the default locale. examples using supportedlocalesof assuming a runtime that supports indonesian and german but not balinese in date and time formatting, supportedlocalesof returns the indonesian and german language tags unchanged, even though pinyin collation is neither
relevant to date and time formatting nor used with indonesian, and a specialized german for indonesia is unlikely to be supported. note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well. const locales = ...
Intl.NumberFormat.supportedLocalesOf() - JavaScript
a locale in number formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall back to the default locale. examples using supportedlocalesof assuming a runtime that supports indonesian and german but not balinese in number formatting, supportedlocalesof returns the indonesian and german language tags unchanged, even though pinyin collation is neither
relevant to number formatting nor used with indonesian, and a specialized german for indonesia is unlikely to be supported. note the specification of the "lookup" algorithm here — a "best fit" matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well. var locales = ['ban', '...
Intl.PluralRules.supportedLocalesOf() - JavaScript
locale in plural formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall back to the default locale. examples using supportedlocalesof() assuming a runtime that supports indonesian and german but not balinese in plural formatting, supportedlocalesof returns the indonesian and german language tags unchanged, even though pinyin collation is neither
relevant to plural formatting nor used with indonesian, and a specialized german for indonesia is unlikely to be supported. note the specification of the lookup algorithm here — a best fit matcher might decide that indonesian is an adequate match for balinese since most balinese speakers also understand indonesian, and therefore return the balinese language tag as well. var locales = ['ban', 'id-u...
Intl.PluralRules - JavaScript
constructor intl.pluralrules.pluralrules() creates a new intl.pluralrules object. static methods intl.pluralrules.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.pluralrules.prototype.resolvedoptions() returns a new object with properties reflecting the locale and collation options computed during initialization of the object. intl.pluralrules.prototype.select() returns a string indicating which plural rule to use for locale-aware formatting. ...
JSON.stringify() - JavaScript
nsole.log(e); // "syntaxerror: unterminated string literal" } // no need for a catch eval('(' + jsfriendlyjsonstringify(s) + ')'); // console.log in firefox unescapes the unicode if // logged to console, so we use alert alert(jsfriendlyjsonstringify(s)); // {"a":"\u2028","b":"\u2029"} note: properties of non-array objects are not guaranteed to be stringified in any particular order. do not
rely on ordering of properties within the same object within the stringification. var a = json.stringify({ foo: "bar", baz: "quux" }) //'{"foo":"bar","baz":"quux"}' var b = json.stringify({ baz: "quux", foo: "bar" }) //'{"baz":"quux","foo":"bar"}' console.log(a !== b) // true // some memoization functions use json.stringify to serialize arguments, // which may cause a cache miss when encountering ...
JSON - JavaScript
tionally including only certain properties or replacing property values in a user-defined manner. by default, all instances of undefined are replaced with null, and other unsupported native data types are censored. the replacer option allows for specifying other behavior. examples example json { "browsers": { "firefox": { "name": "firefox", "pref_url": "about:config", "
releases": { "1": { "
release_date": "2004-11-09", "status": "retired", "engine": "gecko", "engine_version": "1.7" } } } } } specifications specification ecmascript (ecma-262)the definition of 'json' in that specification. ...
Map - JavaScript
s()) { console.log(key) } // 0 // 1 for (let value of mymap.values()) { console.log(value) } // zero // one for (let [key, value] of mymap.entries()) { console.log(key + ' = ' + value) } // 0 = zero // 1 = one iterating map with foreach() maps can be iterated using the foreach() method: mymap.foreach(function(value, key) { console.log(key + ' = ' + value) }) // 0 = zero // 1 = one
relation with array objects let kvarray = [['key1', 'value1'], ['key2', 'value2']] // use the regular map constructor to transform a 2d key-value array into a map let mymap = new map(kvarray) mymap.get('key1') // returns "value1" // use array.from() to transform a map into a 2d key-value array console.log(array.from(mymap)) // will show you exactly the same array as kvarray // a succinct way to ...
Math.max() - JavaScript
nt in a numeric array, by comparing each value: var arr = [1,2,3]; var max = arr.reduce(function(a, b) { return math.max(a, b); }); the following function uses function.prototype.apply() to get the maximum of an array. getmaxofarray([1, 2, 3]) is equivalent to math.max(1, 2, 3), but you can use getmaxofarray() on programmatically constructed arrays. this should only be used for arrays with
relatively few elements. function getmaxofarray(numarray) { return math.max.apply(null, numarray); } the new spread operator is a shorter way of writing the apply solution to get the maximum of an array: var arr = [1, 2, 3]; var max = math.max(...arr); however, both spread (...) and apply will either fail or return the wrong result if the array has too many elements, because they try to pass t...
Math.random() - JavaScript
in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range. the implementation selects the initial seed to the random number generation algorithm; it cannot be chosen or reset by the user. math.random() does not provide cryptographically secure random numbers. do not use them for anything
related to security. use the web crypto api instead, and more precisely the window.crypto.getrandomvalues() method. syntax math.random() return value a floating-point, pseudo-random number between 0 (inclusive) and 1 (exclusive). examples note that as numbers in javascript are ieee 754 floating point numbers with round-to-nearest-even behavior, the ranges claimed for the functions below (exclu...
Math.random() - JavaScript
in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range. the implementation selects the initial seed to the random number generation algorithm; it cannot be chosen or reset by the user. math.random() does not provide cryptographically secure random numbers. do not use them for anything
related to security. use the web crypto api instead, and more precisely the window.crypto.getrandomvalues() method. syntax math.random() return value a floating-point, pseudo-random number between 0 (inclusive) and 1 (exclusive). examples note that as numbers in javascript are ieee 754 floating point numbers with round-to-nearest-even behavior, the ranges claimed for the functions below (exclu...
Number.prototype.toLocaleString() - JavaScript
ractive-examples and send us a pull request. syntax numobj.tolocalestring([locales [, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose formatting conventions should be used. in implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation dependent. see the intl.numberformat() constructor for details on these parameters and how to use them. return value a string with a language-sensitive representation of the given number. performance when formatting large numbers of numbers, it is better to create a numberformat object and use the function provided by its numberformat.format property. examples using to...
Object.prototype.constructor - JavaScript
hetree.constructor) this example displays the following output: thetree.constructor is function tree(name) { this.name = name } changing the constructor of an object the following example shows how to modify the constructor value of generic objects. only true, 1, and "test" will not be affected (as they have read-only native constructors). this example shows that it is not always safe to
rely on the constructor property of an object. function type () {} let types = [ new array(), [], new boolean(), true, // remains unchanged new date(), new error(), new function(), function () {}, math, new number(), 1, // remains unchanged new object(), {}, new regexp(), /(?:)/, new string(), 'test' // remains unchanged ] for...
Object.create() - JavaScript
as shown, objects modified this way now look very much like ordinary objects. polyfill this polyfill covers the main use case, which is creating a n...
Object.prototype.toString() - JavaScript
u want to inspect as the first parameter (called thisarg). const tostring = object.prototype.tostring; tostring.call(new date); // [object date] tostring.call(new string); // [object string] tostring.call(math); // [object math] // since javascript 1.8.5 tostring.call(undefined); // [object undefined] tostring.call(null); // [object null] using tostring() in this way is un
reliable; objects can change the behavior of object.prototype.tostring() by defining a symbol.tostringtag property, leading to unexpected results. for example: const mydate = new date(); object.prototype.tostring.call(mydate); // [object date] mydate[symbol.tostringtag] = 'mydate'; object.prototype.tostring.call(mydate); // [object mydate] date.prototype[symbol.tostringtag] = 'prototype po...
Object.prototype.valueOf() - JavaScript
ject, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax object.valueof() return value the primitive value of the specified object. a (unary) plus sign can sometimes be used as a shorthand for valueof, e.g. in +new number()). also see using unary plus. description javascript calls the valueof method to convert an object to a primitive value. you ra
rely need to invoke the valueof method yourself; javascript automatically invokes it when encountering an object where a primitive value is expected. by default, the valueof method is inherited by every object descended from object. every built-in core object overrides this method to return an appropriate value. if an object has no primitive value, valueof returns the object itself. you can use val...
Promise.prototype.finally() - JavaScript
essing or cleanup once the promise is settled, regardless of its outcome. the finally() method is very similar to calling .then(onfinally, onfinally) however there are a couple of differences: when creating a function inline, you can pass it once, instead of being forced to either declare it twice, or create a variable for it a finally callback will not receive any argument, since there's no
reliable means of determining if the promise was fulfilled or rejected. this use case is for precisely when you do not care about the rejection reason, or the fulfillment value, and so there's no need to provide it. so for example: unlike promise.resolve(2).then(() => {}, () => {}) (which will be resolved with undefined), promise.resolve(2).finally(() => {}) will be resolved with 2. similarl...
Promise - JavaScript
eturns a new promise resolving to the return value of the callback if it is called, or to its original fulfillment value if the promise is instead fulfilled. promise.prototype.then() appends fulfillment and rejection handlers to the promise, and returns a new promise resolving to the return value of the called handler, or to its original settled value if the promise was not handled (i.e. if the
relevant handler onfulfilled or onrejected is not a function). promise.prototype.finally() appends a handler to the promise, and returns a new promise that is resolved when the original promise is resolved. the handler is called when the promise is settled, whether fulfilled or rejected. examples basic example let myfirstpromise = new promise((resolve, reject) => { // we call resolve(...) whe...
null - JavaScript
teractive-examples and send us a pull request. syntax null description the value null is written with a literal: null. null is not an identifier for a property of the global object, like undefined can be. instead, null expresses a lack of identification, indicating that a variable points to no object. in apis, null is often retrieved in a place where an object can be expected but no object is
relevant. // foo does not exist. it is not defined and has never been initialized: foo; //referenceerror: foo is not defined // foo is known to exist now but it has no type or value: var foo = null; foo; //null examples difference between null and undefined when checking for null or undefined, beware of the differences between equality (==) and identity (===) operators, as the former performs ...
Nullish coalescing operator (??) - JavaScript
chaining with and or or operators it is not possible to combine both the and (&&) and or operators (||) directly with ??. a syntaxerror will be thrown in such cases. null || undefined ?? "foo"; // raises a syntaxerror true || undefined ?? "foo"; // raises a syntaxerror however, providing parenthesis to explicitly indicate precedence is correct: (null || undefined) ?? "foo"; // returns "foo"
relationship with the optional chaining operator (?.) the nullish coalescing operator treats undefined and null as specific values and so does the optional chaining operator (?.) which is useful to access a property of an object which may be null or undefined. let foo = { somefooprop: "hi" }; console.log(foo.somefooprop?.touppercase() ?? "not available"); // "hi" console.log(foo.somebarprop?.toupp...
delete operator - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax delete expression where expression should evaluate to a property reference, e.g.: delete object.property delete object['property'] parameters object the name of an object, or an expression evaluating to an object. property the property to delete. ...
in operator - JavaScript
ay. let empties = new array(3).fill(undefined) 2 in empties // returns true inherited properties the in operator returns true for properties in the prototype chain. (if you want to check for only non-inherited properties, use object.prototype.hasownproperty() instead.) 'tostring' in {} // returns true specifications specification ecmascript (ecma-262)the definition of '
relational operators' in that specification. ...
void operator - JavaScript
mple is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax void expression description this operator allows evaluating expressions that produce a value into places where an expression that evaluates to undefined is desired. the void operator is often used me
rely to obtain the undefined primitive value, usually using "void(0)" (which is equivalent to "void 0"). in these cases, the global variable undefined can be used. it should be noted that the precedence of the void operator should be taken into account and that parentheses can help clarify the resolution of the expression following the void operator: void 2 == '2'; // (void 2) == '2', returns fal...
yield - JavaScript
next() method is called, the generator resumes execution, and runs until it reaches one of the following: a yield, which causes the generator to once again pause and return the generator's new value. the next time next() is called, execution resumes with the statement immediately after the yield. throw is used to throw an exception from the generator. this halts execution of the generator enti
rely, and execution resumes in the caller (as is normally the case when an exception is thrown). the end of the generator function is reached. in this case, execution of the generator ends and an iteratorresult is returned to the caller in which the value is undefined and done is true. a return statement is reached. in this case, execution of the generator ends and an iteratorresult is returned to ...
Expressions and operators - JavaScript
to number type and then negates it. ~ bitwise not operator. ! logical not operator. arithmetic operators arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value. + addition operator. - subtraction operator. / division operator. * multiplication operator. % remainder operator. ** exponentiation operator.
relational operators a comparison operator compares its operands and returns a boolean value based on whether the comparison is true. in the in operator determines whether an object has a given property. instanceof the instanceof operator determines whether an object is an instance of another object. < less than operator. > greater than operator. <= less than or equal operator. >= grea...
continue - JavaScript
active example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax continue [label]; label identifier associated with the label of the statement. description in contrast to the break statement, continue does not terminate the execution of the loop enti
rely: instead, in a while loop, it jumps back to the condition. in a for loop, it jumps to the update expression. the continue statement can include an optional label that allows the program to jump to the next iteration of a labeled loop statement instead of the current loop. in this case, the continue statement needs to be nested within this labeled statement. examples using continue wit...
for await...of - JavaScript
data from an api. this example first creates an async iterable for a stream of data, then uses it to find the size of the response from the api. async function* streamasynciterable(stream) { const reader = stream.getreader(); try { while (true) { const { done, value } = await reader.read(); if (done) { return; } yield value; } } finally { reader.
releaselock(); } } // fetches data from url and calculates response size using the async generator. async function getresponsesize(url) { const response = await fetch(url); // will hold the size of the response, in bytes. let responsesize = 0; // the for-await-of loop. async iterates over each portion of the response. for await (const chunk of streamasynciterable(response.body)) { // ...
function* - JavaScript
parameter for the function. statements the statements comprising the body of the function. description generators are functions that can be exited and later re-entered. their context (variable bindings) will be saved across re-entrances. generators in javascript -- especially when combined with promises -- are a very powerful tool for asynchronous programming as they mitigate -- if not enti
rely eliminate -- the problems with callbacks, such as callback hell and inversion of control. however, an even simpler solution to these problems can be achieved with async functions. calling a generator function does not execute its body immediately; an iterator object for the function is returned instead. when the iterator's next() method is called, the generator function's body is executed until...
import - JavaScript
/un-exported/file"; import { export1 , export2 as alias2 , [...] } from "module-name"; import defaultexport, { export1 [ , [...] ] } from "module-name"; import defaultexport, * as name from "module-name"; import "module-name"; var promise = import("module-name"); defaultexport name that will refer to the default export from the module. module-name the module to import from. this is often a
relative or absolute path name to the .js file containing the module. certain bundlers may permit or require the use of the extension; check your environment. only single quoted and double quoted strings are allowed. name name of the module object that will be used as a kind of namespace when referring to the imports. exportn name of the exports to be imported. aliasn names that will refer to t...
var - JavaScript
.hasownproperty('foo') // true in ecmascript 5, this behavior was changed for strict mode. assignment to an unqualified identifier in strict mode will result in a referenceerror, to avoid the accidental creation of properties on the global object. note that the implication of the above, is that, contrary to popular misinformation, javascript does not have implicit or undeclared variables, it me
rely has a syntax that looks like it does. var hoisting because variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. this also means that a variable can appear to be used before it's declared. this behavior is called "hoisting", as it appears that the variable declaration is...
with - JavaScript
n ecmascript 5 strict mode. the recommended alternative is to assign the object whose properties you want to access to a temporary variable. performance pro & contra pro: the with statement can help reduce file size by reducing the need to repeat a lengthy object reference without performance penalty. the scope chain change required by 'with' is not computationally expensive. use of 'with' will
relieve the interpreter of parsing repeated object references. note, however, that in many cases this benefit can be achieved by using a temporary variable to store a reference to the desired object. contra: the with statement forces the specified object to be searched first for all name lookups. therefore all identifiers that aren't members of the specified object will be found more slowly in a 'wi...
Transitioning to strict mode - JavaScript
s done was an error. strict mode throws in such cases. if your code base contains such cases, testing will be necessary to be sure nothing is broken. once again, it can happen at the function granularity level. setting a value to an undeclared variable function f(x) { 'use strict'; var a = 12; b = a + x * 35; // error! } f(42); this used to change a value on the global object which is ra
rely the expected effect. if you really want to set a value to the global object, pass it as an argument and explicitly assign it as a property: var global = this; // in the top-level context, "this" always // refers to the global object function f(x) { 'use strict'; var a = 12; global.b = a + x * 35; } f(42); trying to delete a non-configurable property 'use strict'; del...
Template literals (Template strings) - JavaScript
`; in es2015 with nested template literals: const classes = `header ${ islargescreen() ? '' : `icon-${item.iscollapsed ? 'expander' : 'collapser'}` }`; tagged templates a more advanced form of template literals are tagged templates. tags allow you to parse template literals with a function. the first argument of a tag function contains an array of string values. the remaining arguments are
related to the expressions. the tag function can then perform whatever operations on these arguments you wish, and return the manipulated string. (alternatively, it can return something completely different, as described in one of the following examples.) the name of the function used for the tag can be whatever you want. let person = 'mike'; let age = 28; function mytag(strings, personexp, ageex...
JavaScript shells - JavaScript
they are extremely useful for developing and debugging code. standalone javascript shells the following javascript shells are stand-alone environments, like perl or python. node.js - node.js is a platform for easily building fast, scalable network applications. jsdb - a standalone javascript shell, with compiled binaries for windows, mac, and linux. javalikescript - a standalone, extensible javascript shell including both native and javascript libraries. gluescript - a standalone javascript shell for writing cross-platform javascript applications. ...
icons - Web app manifests
on/lowres", "sizes": "48x48" }, { "src": "icon/hd_hi.ico", "sizes": "72x72 96x96 128x128 256x256" }, { "src": "icon/hd_hi.svg", "sizes": "72x72" } ] values image objects may contain the following values: member description sizes a string containing space-separated image dimensions. src the path to the image file. if src is a
relative url, the base url will be the url of the manifest. type a hint as to the media type of the image. the purpose of this member is to allow a user agent to quickly ignore images with media types it does not support. purpose defines the purpose of the image, for example if the image is intended to serve some special purpose in the context of the host os (i.e., for be...
serviceworker - Web app manifests
worker contain the following values (only src is required): member description src the url to download the service worker script from. this is the only required member of the serviceworker member. scope a string representing a url that defines a service worker's registration scope; that is, what range of urls a service worker can control. this is usually a
relative url,
relative to the base url of the application. by default, the scope value for a service worker registration is set to the directory where the service worker script is located. type ? update_via_cache whether the user agent cache should be bypassed when fetching the service worker. ...
start_url - Web app manifests
type string mandatory no the start_url member is a string that represents the start url of the web application — the prefered url that should be loaded when the user launches the web application (e.g., when the user taps on the web application's icon from a device's application menu or homescreen). note: the start_url member is pu
rely advisory, and a user agent may ignore it or allow the user to alter it at install time or afterwards. examples absolute url "start_url": "https://example.com"
relative url if the url is
relative, the manifest url is used as the base url to resolve it. "start_url": "../startpoint.html" specification specification status comment feedback web app manifestthe definition of 'start_url' i...
Values - MathML
lengths several mathml presentation elements have attributes that accept length values used for size or spacing. mathml accepts different units and constants for specifying lengths. units unit description em font-
relative unit ex font-
relative unit. (the "x"-height of the element, 1ex ≈ 0.5em in many fonts) px pixels in inches (1 inch = 2.54 centimeters) cm centimeters mm millimeters pt points (1 point = 1/72 inch) pc picas (1 pica = 12 points) % percentage of the default value. constants a replacement for the deprecated constants below is: veryverythinmathspace => 0.05555555555555555em verythinmathspace => 0.1111111111111111em thinmathspace ...
MathML
rter (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 - turn handwritten equations into mathml or latex mathjax - cross-browser javascript display engine for mathematics. to force mathjax to use native mathml, try this mozilla add-on, this safari extension or this greasemonkey script.
related topics css html svg ...
Digital video concepts - Web media technologies
one color. the greyscale sensor is 120 megapixels, while the color sensor is only about 7 megapixels. these sensors physically occupy the same surface, called the retina, at the back of the eye. there are three types of cones, each of which responds to a particular wavelength band of incoming light, but also to the intensity of the light at that wavelength. each type of cone, then, captures the
relative reponse peaks at various wavelengths, and the brain uses this data to figure out the intensity and hue of the color of the light arriving at that part of the retina. as our eyes capture a scene, they essentially take two photos at once: a finely-detailed greyscale image and a somewhat fuzzy, lower-resolution map of the colors of light received across the retina at the same time. the final c...
The "codecs" parameter in common media types - Web media technologies
ter is the letter h. the high tier is only available for level 4.0 and up. dd the two-digit component bit depth. this value must be one of 8, 10, or 12; which values are valid varies depending on the profile and other properties. m the one-digit monochrome flag; if this is 0, the video includes the u and v planes in addition to the y plane. otherwise, the video data is enti
rely in the y plane and is therefore monochromatic. see yuv in digital video concepts for details on how the yuv color system works. the default value is 0 (not monochrome). ccc ccc indicates the chroma subsampling as three digits. the first digit is subsampling_x, the second is subsampling_y. if both of those are 1, the third is the value of chroma_sample_position; otherwise, the th...
Media type and format guide: image, audio, and video content - Web media technologies
rly its beginning, the web has included support for some form of visual media presentation. originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web. the modern web has powerful features to support the presentation and manipulation of media, with several media-
related apis supporting various types of content. generally, the media formats supported by a browser are enti
rely up to the browser's creators, which can complicate the work of a web developer. this guide provides an overview of the media file types, codecs, and algorithms that may comprise media used on the web. it also provides browser support information for various combinations of these, and su...
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
ould work. mozilla then brought the idea up in the wicg community group and discussed it further until representatives from chrome were onboard with the idea. due to this work, browsers are working on adding a new mechanism for sizing images before the actual image is loaded. firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements, and other
related elements that accept width and height attributes. this appears in the browser's internal ua stylesheet, similar to the following: img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } this actually affects any element that acts as a container for complex or mixed visual media — <embed>, <iframe>, <marquee>, <object>, <table>...
Using images in HTML - Web media technologies
additionally, this article provides guidance for selecting the best image file type for a given situation. mapping the width and height attributes of media container elements to their aspect-ratio this changes how browsers load images so their aspect ratios are calculated by the browser early on and can later be used to correct the display size of an image before it's loaded. other topics
related topics that may be of interest. learn html: responsive images in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them. ...
Web media technologies
formed so that it sounds like it's coming from the direction of its source. this guide covers how to accomplish this. playing video in a 3d environment in this guide, we examine how to play video into a 3d scene. this technique can be used in both standard webgl applications presented on a flat computer screen, or in a webxr-generated virtual or augmented reality environment. other topics
related topics which may be of interest, since they can be used in tandem with media apis in interesting ways. the canvas api the canvas api lets you draw into an <canvas>, manipulating and changing the contents of an image. this can be used with media in many ways, including by setting a <canvas> element as the destination for video playback or camera capture so that you can capture and manipula...
Optimizing startup performance - Web Performance
on't do one chunk of data after another; do them all at once when possible! don't include scripts or stylesheets that don't participate in the critical path in your startup html file. load them only when needed. reduce the side of your javascript files. try to send the minify version of the file to the browser and use compression like gzip or brotli. utilize resource hints (like preconnect or p
reload) whenever possible to indicate to the browser which files are more critical for your application. the more stuff you can do asynchronously, the better advantage your app can take of multicore processors. porting issues once the initial loading is done and the app's main code starts to run, it's possible your app may necessarily be single-threaded,especially if it's a port. the most importa...
Performance budgets - Web Performance
e to focus on other metrics. for a text-heavy site such as a blog or a news site, the first contentful paint metric could reflect more closely the user behavior. (i.e. how fast can users start reading), which will inform file specific budgets (e.g. font size), and their optimizations. (e.g. using font-display to improve perceived performance). the ultimate value of a performance budget is to cor
relate the impact of performance on business or product goals. when defining metrics, you should focus on user experience, which will dictate not only the bounce or conversion rate but how likely is that user to return. how do i implement a performance budget? during development, there are a few tools to run checks against new or modified assets: a module bundler (e.g. webpack), has performance ...
from - SVG: Scalable Vector Graphics
the from attribute indicates the initial value of the attribute that will be modified during the animation. when used with the to attribute, the animation will change the modified attribute from the from value to the to value. when used with the by attribute, the animation will change the attribute
relatively from the from value by the value specified in by. four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" height="100"> <animate attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> usage notes value see below default value none animatable ...
markerHeight - SVG: Scalable Vector Graphics
presents the height of the viewport into which the <marker> is to be fitted when it is rendered according to the viewbox and preserveaspectratio attributes. only one element is using this attribute: <marker> usage notes value <length-percentage> | <number> default value 3 animatable yes <length-percentage> this value defines either an absolute or a
relative height of the marker.
relative values refer to the height specified via the viewbox and preserveaspectratio attributes. <number> this value defines the height of the marker in the units defined by the markerunits attribute. a value of zero disables rendering of the element and negative values are an error. specifications specification status comment scalabl...
markerWidth - SVG: Scalable Vector Graphics
epresents the width of the viewport into which the <marker> is to be fitted when it is rendered according to the viewbox and preserveaspectratio attributes. only one element is using this attribute: <marker> usage notes value <length-percentage> | <number> default value 3 animatable yes <length-percentage> this value defines either an absolute or a
relative width of the marker.
relative values refer to the width specified via the viewbox and preserveaspectratio attributes. <number> this value defines the width of the marker in the units defined by the markerunits attribute. a value of zero disables rendering of the element and negative values are an error. specifications specification status comment scalable v...
maskContentUnits - SVG: Scalable Vector Graphics
nt of the element. value userspaceonuse | objectboundingbox default value userspaceonuse animatable yes userspaceonuse this value indicates that all coordinates inside the <mask> element refer to the user coordinate system as defined when the mask was created. objectboundingbox this value indicates that all coordinates inside the <mask> element are
relative to the bounding box of the element the mask is applied to. a bounding box could be considered the same as if the content of the <mask> were bound to a "0 0 1 1" viewbox. specifications specification status comment css masking module level 1the definition of 'maskcontentunits' in that specification. candidate recommendation scalable vector graph...
opacity - SVG: Scalable Vector Graphics
ore detail what this attribute applies to. css color module level 3the definition of 'opacity' in that specification. recommendation defines in more detail what this attribute applies to. scalable vector graphics (svg) 2the definition of 'opacity' in that specification. candidate recommendation references the specification in css color 3 and notes that there are some
related attributes. scalable vector graphics (svg) 1.1 (second edition)the definition of 'opacity' in that specification. recommendation initial definition ...
orient - SVG: Scalable Vector Graphics
auto-start-reverse if placed by marker-start, the marker is oriented 180° different from the orientation that would be used if auto where specified. for all other markers, auto-start-reverse means the same as auto. note: this allows a single arrowhead marker to be defined that can be used for both the start and end of a path, i.e. whic...
patternContentUnits - SVG: Scalable Vector Graphics
ent. value userspaceonuse | objectboundingbox default value userspaceonuse animatable yes userspaceonuse this value indicates that all coordinates inside the <pattern> element refer to the user coordinate system as defined when the pattern tile was created. objectboundingbox this value indicates that all coordinates inside the <pattern> element are
relative to the bounding box of the element the pattern is applied to. a bounding box could be considered the same as if the content of the <pattern> were bound to a "0 0 1 1" viewbox for a pattern tile of width and height of 100%. specifications specification status comment scalable vector graphics (svg) 2the definition of 'patterncontentunits' in that specification. ...
pointer-events - SVG: Scalable Vector Graphics
t'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 to any element but it is mostly
relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use> usage notes value bounding-box | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all ...
stroke-miterlimit - SVG: Scalable Vector Graphics
nd miter joins have been specified for stroke-linejoin, it is possible for the miter to extend far beyond the thickness of the line stroking the path. the stroke-miterlimit ratio is used to define when the limit is exceeded, if so the join is converted from a miter to a bevel. ...
style - SVG: Scalable Vector Graphics
e <style> default value none animatable no <style> the syntax of style data depends on the style sheet language. by default, the style sheet language is css. note: in theory, the contentstyletype attribute could be used to specify styling languages other than css, like xsl(t). however, this was never implemented satisfactorily in browsers, so you should not
rely on it. specifications specification status comment scalable vector graphics (svg) 2the definition of 'style' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'style' in that specification. recommendation initial definition ...
tabindex - SVG: Scalable Vector Graphics
the tabindex attribute allows you to control whether an element is focusable and to define the
relative order of the element for the purposes of sequential focus navigation. all elements are using this attribute. html, body, svg { height: 100%; } <?xml version="1.0"?> <svg viewbox="0 0 260 260" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="15" tabindex="1" /> <circle cx="60" cy="160" r="30" tabindex="3" /> <circle cx="160" cy="60" r="30" tabindex="2" /> <circle cx="160" cy="160" r="60" tabindex="4" /> </svg> usage notes value valid integer default value none animatable no valid integer
relative order of the element for the purposes of sequential focus navigation. specifications specificat...
targetX - SVG: Scalable Vector Graphics
the targetx attribute determines the positioning in horizontal direction of the convolution matrix
relative to a given target pixel in the input image. the leftmost column of the matrix is column number zero. the value must be such that: 0 <= targetx < orderx. only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(orderx / 2) animatable yes <integer> this value indicates the positioning in horizontal direction of the convolution matrix
relative to a given target pixel in the input image. specifications specification status comment filter effects module level 1the definition of 'targetx' in that specification. working draft no change scalable vec...
targetY - SVG: Scalable Vector Graphics
the targety attribute determines the positioning in vertical direction of the convolution matrix
relative to a given target pixel in the input image. the topmost row of the matrix is row number zero. the value must be such that: 0 <= targety < ordery. only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(ordery / 2) animatable yes <integer> this value indicates the positioning in vertical direction of the convolution matrix
relative to a given target pixel in the input image. specifications specification status comment filter effects module level 1the definition of 'targety' in that specification. working draft no change scalable vector graphic...
text-anchor - SVG: Scalable Vector Graphics
it is not applicable to other types of auto-wrapped text. for those cases you should use text-align. for multi-line text, the alignment takes place for each line. the text-anchor attribute is applied to each individual text chunk within a given <text> element. ...
v-alphabetic - SVG: Scalable Vector Graphics
the v-alphabetic attribute defines indicates the alignment coordinate for glyphs to achieve alphabetic baseline alignment. the value is an offset in the font coordinate system
relative to the glyph-specific vert-origin-x attribute. only one element is using this attribute: <font-face> usage notes value <number> default value none animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'v-alphabetic' in that specification. recommendation initial definition ...
v-hanging - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none animatable no <number> this value indicates the alignment coordinate for the glyphs to achieve hanging baseline alignment. ...
v-ideographic - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none animatable no <number> this value indicates the alignment coordinate for the glyphs. ...
v-mathematical - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none animatable no <number> this value indicates the alignment coordinate for the glyphs. ...
SVG Attribute reference - SVG: Scalable Vector Graphics
name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy
rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashof...
<altGlyph> - SVG: Scalable Vector Graphics
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. value type: <list-of-coordinates> ; default value:
relative y-coordinate of ancestor <text> or <tspan>; animatable: yes rotate this attribute defines the supplemental rotation that will be applied to the element. value type: <list-of-numbers> ...
<animateColor> - SVG: Scalable Vector Graphics
example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="50"> <animatecolor attributename="fill" attributetype="xml" from="black" to="red" dur="6s" repeatcount="indefinite"/> </circle> </svg> result specifications specification status comment scalable vector graphics (svg) 1.1 (sec...
<circle> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications ...
<cursor> - SVG: Scalable Vector Graphics
o that the cursor can be visible over most backgrounds. usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes conditional processing attributes core attributes xlink attributes externalresourcesrequired specific attributes x y xlink:href dom interface this element implements the svgcurso
relement interface. specifications specification status comment scalable vector graphics (svg) 2the definition of '<cursor>' in that specification. candidate recommendation replaced xlink:href by href attribute. scalable vector graphics (svg) 1.1 (second edition)the definition of '<cursor>' in that specification. recommendation initial definition ...
<ellipse> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications ...
<feComponentTransfer> - SVG: Scalable Vector Graphics
cg>, and <fefunca> return. usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<fefunca>, <fefuncr>, <fefuncb>, <fefuncg> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in dom interface this element implements the svgfecomponenttransfe
relement interface. example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 300"> <defs> <lineargradient id="rainbow" gradientunits="userspaceonuse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.6" stop-color="#00...
<feConvolveMatrix> - SVG: Scalable Vector Graphics
attribute, "targety" represents the value of the ‘targety’ attribute, "kernelmatrix" represents the value of the ‘kernelmatrix’ attribute, "divisor" represents the value of the ‘divisor’ attribute, and "bias" represents the value of the ‘bias’ attribute. note in the above formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees
relative to the source and destination images in order to match convolution theory as described in many computer graphics textbooks. to illustrate, suppose you have a input image which is 5 pixels by 5 pixels, whose color values for one of the color channels are as follows: 0 20 40 235 235 100 120 140 235 235 200 220 240 235 235 225 225 255 255 255 225 225 255 255 255 and you define a 3-by-3 ...
<feFuncR> - SVG: Scalable Vector Graphics
itive defines the transfer function for the red component of the input graphic of its parent <fecomponenttransfer> element. usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes transfer function attributes specific attributes none dom interface this element implements the svgfefunc
relement interface. specifications specification status comment filter effects module level 1the definition of '<fefuncr>' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of '<fefuncr>' in that specification. recommendation initial definition ...
<feGaussianBlur> - SVG: Scalable Vector Graphics
on, which defines the bell-curve. usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in stddeviation edgemode dom interface this element implements the svgfegaussianblu
relement interface. example simple example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="blurme"> <fegaussianblur in="sourcegraphic" stddeviation="5" /> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg> resu...
<filter> - SVG: Scalable Vector Graphics
example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg"> <filter id="blurme"> <fegaussianblur stddeviation="5"/> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample specifications specification status comment ...
<foreignObject> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<for...
<g> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradi...
<line> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications ...
<path> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification ...
<polygon> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications ...
<polyline> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications ...
<rect> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications ...
<solidcolor> - SVG: Scalable Vector Graphics
rs. a workaround is to use a <lineargradient> with only one color stop. this is less elegant, and unlike <solidcolor>, cannot itself be used in the definition of gradients. usage context missing attributes global attributes core attributes global event attributes presentation attributes style attributes specific attributes none. dom interface this element implements the svgsolidcolo
relement interface. example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 200" height="150"> <defs> <!-- solidcolor is experimental. --> <solidcolor id="mycolor" solid-color="gold" solid-opacity="0.8"/> <!-- lineargradient with a single color stop is a less elegant way to achieve the same effect, but it works in current browsers. --> <lineargradient id="m...
<svg> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradi...
<symbol> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradi...
<text> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, text content elementpermitted contentcharacter data and any number of the following elements, in any order:animation elementsdescriptive elementstext content eleme...
<textPath> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:title usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive ele...
<tspan> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>...
<use> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:href, xlink:title usage notes categoriesgraphics element, graphics referencing element, structural elementpermitted contentany number of the following elements, in any order:ani...
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
e support. element notes structure module svg implemented. currentscale and currenttranslate dom attributes are implemented, but there is no pan and zoom user interface. svgsvgelement unimplemented attributes: contentscripttype, contentstyletype, viewport, currentview unimplemented bindings: getintersectionlist, getenclosu
relist, checkintersection, checkenclosure g implemented. defs implemented. desc implemented. only stored in the dom, no user interface. title implemented. the title is displayed as a tooltip when the mouse hovers over the svg object. ...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
e> implementation status unknown paths change notes b and b path commands implementation status unknown z and z path commands to add path coordinate data to previous command implementation status unknown not render <path>, <polygon> and <polyline> with no data implementation status unknown svgpathseg*, svganimatedpathdata and
related methods removed from svgpathelement implementation status unknown d attribute as css property implementation status unknown basic shapes change notes pathlength attribute for all basic shapes implementation status unknown svganimatedpoints.animatedpoints as alias of svganimatedpoints.points implementation status unknown a...
Specification Deviations - SVG: Scalable Vector Graphics
we have consciously decided to make gecko deviate from or extend the svg specification. this page lists those deviations/extensions and our reasoning for them. the 'class' and 'style' attributes unlike html and mathml, the svg specification does not specify the 'style' and 'class' attributes on all svg elements. nevertheless, to allow mozilla to more cleanly share internal 'class' and 'style'
related code, we will implement these attributes on all svg elements as of firefox 3. in general this change will not be visible to svg authors (the elements for which the svg specification does not define the 'class' and 'style' attribute are elements that are not displayed directly). however, there are two exceptions. extending the 'class' attribute to apply to all svg elements will allow svg autho...
Basic Transformations - SVG: Scalable Vector Graphics
ou specify for the element and its children might not follow the 1:1 pixel mapping, but are also distorted, skewed, translated and scaled according to the transformation. <svg width="100" height="100"> <g transform="scale(2)"> <rect width="50" height="50" /> </g> </svg> the resulting rectangular in the above example will be 100x100px. the more intriguing effects arise, when you
rely on attributes like userspaceonuse and the such. embedding svg in svg in contrast to html, svg allows you to embed other svg elements seamlessly. this way you can also simply create new coordinate systems by utilizing the viewbox, width and height of the inner svg element. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <svg width="100" height="100" viewbox=...
Getting started - SVG: Scalable Vector Graphics
extension for these files is ".svg" (all lowercase). due to the potentially massive size svg files can reach when used for some applications (e.g., geographical applications), the svg specification also allows for gzip-compressed svg files. the recommended filename extension for these files is ".svgz" (all lowercase). unfortunately, it is very problematic to get gzip-compressed svg files to work
reliably across all svg capable user agents when served from a microsoft iis server, and firefox cannot load gzip-compressed svg from the local computer. avoid gzip-compressed svg except when you are publishing to a webserver that you know will serve it correctly (see below). a word on webservers now that you have an idea of how to create basic svg files, the next stage is to upload them to a webse...
Positions - SVG: Scalable Vector Graphics
0" height="100" /> defines a rectangle from the upper left corner, that spans from there 100px to the right and to the bottom. what are "pixels"? in the most basic case one pixel in an svg document maps to one pixel on the output device (a.k.a. the screen). but svg wouldn't have the "scalable" in its name, if there weren't several possibilities to change this behaviour. much like absolute and
relative font sizes in css, svg defines absolute units (ones with a dimensional identifier like "pt" or "cm") and so-called user units, that lack that identifier and are plain numbers. without further specification, one user unit equals one screen unit. to explicitly change this behaviour, there are several possibilities in svg. we start with the svg root element: <svg width="100" height="100"> t...
Texts - SVG: Scalable Vector Graphics
t of a text is the font in which it is displayed. svg offers a set of attributes, many similar to their css counterparts, to enable font selection. each of the following properties can be set as an attribute or via a css declaration: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration. other text-
related elements tspan this element is used to mark up sub-portions of a larger text. it must be a child of a text element or another tspan element. a typical usecase is to paint one word of a sentence bold red. <text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> playable code <svg width="350" height="60" xmlns="http://www.w3.org/2000/svg"> <text> this is <tspa...
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
gedit) and search for "svg". change every occurance of "image/svg-xml" (or whatever the invalid media type is) to "image/svg+xml". normally, this matters just for the entry "hkey_classes_root\.svg\content type". after correcting the os file associations you will probably need to re-clean your mimetypes.rdf as described in the section above. fixing the bug need to look at the exthandler code.
related bugs: bug 332690 and bug 303581. ...
SVG: Scalable Vector Graphics
r graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics. as such, it's a text-based, open web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including css, dom, javascript, and smil. svg is, essentially, to graphics what html is to text. svg images and their
related behaviors are defined in xml text files, which means they can be searched, indexed, scripted, and compressed. additionally, this means they can be created and edited with any text editor or with drawing software. compared to classic bitmapped image formats such as jpeg or png, svg-format vector images can be rendered at any size without loss of quality and can be easily localized by updating...
How to fix a website with blocked mixed content - Web security
in chrome and internet explorer, it is very likely that if your website works in both of these browsers, it will work equally well in firefox with mixed content blocking. in any case, the best way to know if something is broken in firefox is to download the latest firefox edition, open different pages on your website with the web console open (enable the "security" messages) and see if anything
related to mixed content is reported. or use a free online crawler like ssl-check or missing padlock, a desktop crawler like httpschecker, or a cli tool like mcdetect to check your website recursively and find links to insecure content. if nothing is said about mixed content, your website is in good shape: keep making excellent websites! how to fix your website the best strategy to avoid mixed cont...
Referer header: privacy and security concerns - Web security
removing any third party content (e.g. social networking widgets embedded in <iframe>) from secure areas of your website, like password reset pages, payment forms, login areas, etc. you can also mitigate such risks using: the referrer-policy header on your server to control what information is sent through the referer header. again, a directive of no-referrer would omit the referer header enti
rely. the referrerpolicy attribute on html elements that are in danger of leaking such information (such as <img> and <a>). this can for example be set to no-referrer to stop the referer header being sent altogether. the
rel attribute set to noreferrer on html elements that are in danger of leaking such information (such as <img> and <a>). see link types and search for noreferrer for more informati...
Secure contexts - Web security
articular document is in a secure context is based only on considering it within the top-level browsing context with which it is associated — and not whether a non-secure context happened to be used to create it. locally-delivered resources such as those with http://127.0.0.1 urls, http://localhost urls (under certain conditions), and file:// urls are also considered to have been delivered secu
rely. resources that are not local, to be considered secure, must meet the following criteria: must be served over https:// or wss:// urls the security properties of the network channel used to deliver the resource must not be considered deprecated feature detection pages can use feature detection to check whether they are in a secure context or not by using the issecurecontext boolean, which...
Types of attacks - Web security
nts via a hidden input field. this token should be unique per user and stored (for example, in a cookie) such that the server can look up the expected value when the request is sent. for all non-get requests that have the potential to perform an action, this input field should be compared against the expected value. if there is a mismatch, the request should be aborted. this method of protection
relies on an attacker being unable to predict the user's assigned csrf token. the token should be regenerated on sign-in. cookies that are used for sensitive actions (such as session cookies) should have a short lifetime with the samesite attribute set to strict or lax. (see samesite cookies above). in supporting browsers, this will have the effect of ensuring that the session cookie is not sent alo...
HTML Imports - Web Components
rm. see this status update for more information. until there is a consensus on the standard or alternative mechanisms are worked out, you can use a polyfill such as google's webcomponents.js. html imports is intended to be the packaging mechanism for web components, but you can also use html imports by itself. you import an html file by using a <link> tag in an html document like this: <link
rel="import" href="myfile.html"> the import link type is new. specification specification status comment html imports working draft initial definition. ...
Axes - XPath
the following is an extremely brief description of the thirteen available axes and the degree of support available in gecko. for further information on using xpath expressions, please see the for further reading section at the end of transforming xml with xslt document. also see the 'axes' section in the xpath spec. ...
current - XPath
thus in <xsl:value-of select="foo/bar[. = x]"/> the . returns the bar node, which may be different from the current node. defined xslt 1.0 12.4 gecko support supported. ...
Introduction to using XPath in JavaScript - XPath
d='_myid'] (this approach works well for dynamic xpath's where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace. read more on how to create a user-defined namespace resolver, if you wish to take the latter approach. notes adapts any dom node to resolve namespaces so that an xpath expression can be easily evaluated
relative to the context of the node where it appeared within the document. this adapter works like the dom level 3 method lookupnamespaceuri on nodes in resolving the namespaceuri from a given prefix using the current information available in the node's hierarchy at the time lookupnamespaceuri is called. also correctly resolves the implicit xml prefix. specifying the return type the returned variab...
Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
eature controls how serializing the constructed output document works. however firefox never serializes the output document and so the attribute isn't really applicable. while we could try to add some heuristics to serialize and reparse just the part of the output document which has disable-output-escaping applied, heuristics often get things wrong and lead to surprising results, hence we've been
reluctant to add this so far. often times stylesheets contain code like <xsl:text disable-output-escaping="yes"> </xsl:text>, this is equivalent to simply putting   in the stylesheet which will work great in all xslt engines. we do realize that the lack of disable-output-escaping is a problem and we'd like to find a solution for it, however so far we haven't found any good solutions. the <...
<xsl:attribute> - XSLT: Extensible Stylesheet Language Transformations
f the output (like <xsl:choose> or <xsl:apply-templates> etc.). syntax <xsl:attribute name=name namespace=uri> template </xsl:attribute> required attributes name specifies the name of the attribute to be created in the output document. the name must be a valid qname. optional attributes namespace defines the namespace uri for this attribute in the output document. you cannot set the
related namespace prefix with this element. type instruction, appears within a template or an <xsl:attribute-set> element. defined xslt, section 7.1.3. gecko support supported. ...
<xsl:namespace-alias> - XSLT: Extensible Stylesheet Language Transformations
the most common use for this element is in generating a stylesheet from another stylesheet. to prevent a normally xsl:-prefixed literal result element (which should simply be copied as-is to the result tree) from being misunderstood by the processor, it is assigned a temporary namespace which is appropriately re-converted back to the xslt namespace in the output tree. ...
<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
her default-collation attribute on an inner element. it also determines the collation used by certain xslt constructs (such as <xsl:key> and xsl:for-each-group) within its scope. default-mode defines the default value for the mode attribute of all <xsl:template> and <xsl:apply-templates> elements within its scope. default-validation defines the default value of the validation attribute of all
relevant instructions appearing within its scope. expand-text determines whether descendant text nodes of the element are treated as text value templates. id specifies an id for this stylesheet. this is most often used when the stylesheet is embedded in another xml document. input-type-annotations specifies whether type annotations are stripped from the element so the same results are produced ...
<xsl:text> - XSLT: Extensible Stylesheet Language Transformations
axes the <xsl:text> element writes literal text to the output tree. it may contain #pcdata, literal text, and entity references. syntax <xsl:text disable-output-escaping="yes" | "no"> text </xsl:text> required attributes none. optional attributes disable-output-escaping (netscape does not serialize the result of transformation - the "output" below - so this attribute is essentially ir
relevant in context. to output html-entities, use numerical values instead, eg   for ) specifies whether special characters are escaped when written to the output. the available values are "yes" or "no". if "yes" is set, for example, the character > is output as >, not as >. type instruction, appears within a template. defined xslt, section 7.2 gecko support supported as noted. ...
<xsl:value-of> - XSLT: Extensible Stylesheet Language Transformations
nd writes that string to the result tree. syntax <xsl:value-of select=expression disable-output-escaping="yes" | "no" /> required attributes select specifies the xpath expression to be evaluated and written to the output tree. optional attributes disable-output-escaping (netscape does not serialize the result of transformation - the "output" below - so this attribute is essentially ir
relevant in context. to output html-entities, use numerical values instead, eg   for  ) specifies whether special characters are escaped when written to the output. the available values are "yes" or "no". if "yes" is set, for example, the character > is output as >, not as ">". type instruction, appears with a template. defined xslt, section 7.6.1. gecko support supported except as ...
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
nsform>. an instruction, on the other hand, is associated with a template. a stylesheet may include several templates. a third type of element, not discussed here, is the literal result element (lre). an lre also appears in a template. it consists of any non-instruction element that should be copied as-is to the result document, for example, an <hr> element in an html conversion stylesheet. on a
related note, any attribute in an lre and some attributes of a limited number of xslt elements can also include what is known as an attribute value template. an attribute value template is simply a string that includes an embedded xpath expression which is used to specify the value of an attribute. at run-time the expression is evaluated and the result of the evaluation is substituted for the xpath e...
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
' to a nodeset containing all <book> elements in the 'http://www.example.org/mynamespace' namespace: <?xslt-param-namespace prefix="my" namespace="http://www.example.org/mynamespace"?> <?xslt-param name="books" select="//my:book"?> supported versions supported as of firefox 2.0.0.1. the value attribute is supported in firefox 2, but the select attribute crashes for some expressions in the 2.0
release. possible future developments should we allow any xslt functions in the expression? document() seems useful, but it seems tricky to maintain the invariant that generate-id() should produce the same string for the same document. what about querying url parameters in the xslt stylesheet? e.g. passing them to specified <xsl:param>'s. ...
An Overview - XSLT: Extensible Stylesheet Language Transformations
lled the tree, is what is actually manipulated by the processor. the tree is an abstract datatype, a conceptual model which can be implemented in various ways depending on the parser and the processor. :netscape's uses a structure similar to the w3c dom as its tree structure, but others are possible. the only requirements concern the disposition of objects in the tree, their properties, and their
relationships. the tree consists of a hierarchical framework of nodes. it can be made up of seven different types of nodes: the single root node, element nodes, text nodes, attribute nodes, comment nodes, processing instruction nodes, and namespace nodes. at the top of the tree is the root node. the root node does not correspond to any individual part of the xml document: it represents the docume...
Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes an overview the separation of content and presentation is a key design feature of xml. the structure of an xml document is designed to reflect and clarify important
relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented. this intelligent structuring is particularly important as more and more data transfers are automated and take place between highly heterogeneous machines linked by a network. yet eventually much of the content stored in xml documents will need to be presented to human readers. because a browser provides a familiar and highly flexible interface, it is an ideal mechanism fo...
Web technology for developers
ppets (small code samples) available for developers of extensions for the various mozilla applications. many of these samples can also be used in xulrunner applications, as well as in actual mozilla code itself. view all... web technology references web apis reference material for each of the individual apis that comprise the web's powerful scriptability, including the dom and all of the
related apis and interfaces you can use to build web content and apps. html hypertext markup language is the language used to describe and define the content of a web page. css cascading style sheets are used to describe the appearance of web content. svg scalable vector graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the siz...