CSP: media-src - HTTP
the http content-security-policy (csp) media-src directive specifies valid sources for loading media using the <audio> and <video> elements. csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the media-src policy: content-security-policy: media-src <source>; content-security-policy: media-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as...
... dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. when generating the hash, don't include the <script> or <style> tags and note that capitalization 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. ...
...en generating the hash, don't include the <script> or <style> tags and note that capitalization 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. ...
...And 2 more matches

CSP: worker-src - HTTP
the http content-security-policy (csp) worker-src directive specifies valid sources for worker, sharedworker, or serviceworker scripts. csp version 3 directive type fetch directive fallback if this directive is absent, the user agent will first look for the child-src directive, then the script-src directive, then finally for the default-src directive, when governing worker execution. chrome 59 and higher skips the child-src directive. edge 17 skips the script-src directive (bug). ...
... fallback if this directive is absent, the user agent will first look for the child-src directive, then the script-src directive, then finally for the default-src directive, when governing worker execution. chrome 59 and higher skips the child-src directive. edge 17 skips the script-src directive (bug). syntax one or more sources can be allowed for the worker-src policy: content-security-policy: worker-src <source>; content-security-policy: worker-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*')...
... dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. when generating the hash, don't include the <script> or <style> tags and note that capitalization 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. ...
...And 2 more matches

SVGFontFaceSrcElement - Web APIs
the svgfontfacesrcelement interface corresponds to the <font-face-src> elements. object-oriented access to the attributes of the <font-face-src> element via the svg dom is not possible. ...
...-face-src> element via the svg dom is not possible. ...
... methods this interface has no methods but inherits methods from its parent, svgelement. ...
... recommendation initial definition ...

CSP: child-src - HTTP
the http content-security-policy (csp) child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>. for workers, non-compliant requests are treated as fatal network errors by the user agent. csp version 2 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the child-src policy: content-security-policy: child-src <source>; content-security-policy: child-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. t...
... dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. when generating the hash, don't include the <script> or <style> tags and note that capitalization 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. ...
...en generating the hash, don't include the <script> or <style> tags and note that capitalization 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: child-src https://example.com/ this <iframe> and worker are blocked and won't load: <iframe src="https://not-example.com"></iframe> <script> var blockedworker = new worker("data:application/javascript,..."); </script> specifications specification status comment content security policy level 3the definition of 'child-src' in that specification. working draft no changes. ...
...on't load: <iframe src="https://not-example.com"></iframe> <script> var blockedworker = new worker("data:application/javascript,..."); </script> specifications specification status comment content security policy level 3the definition of 'child-src' in that specification. working draft no changes. content security policy level 2the definition of 'child-src' in that specification. recommendation initial definition. ...

CSP: font-src - HTTP
the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face. csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the font-src policy: content-security-policy: font-src <source>; content-security-policy: font-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicatin...
... dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. when generating the hash, don't include the <script> or <style> tags and note that capitalization 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. ...
...hen generating the hash, don't include the <script> or <style> tags and note that capitalization 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: font-src https://example.com/ the following font resource loading is blocked and won't load: <style> @font-face { font-family: "myfont"; src: url("https://not-example.com/font"); } body { font-family: "myfont"; } </style> specifications specification status comment content security policy level 3the definition of 'font-src' in that specification. working ...
... <style> @font-face { font-family: "myfont"; src: url("https://not-example.com/font"); } body { font-family: "myfont"; } </style> specifications specification status comment content security policy level 3the definition of 'font-src' in that specification. working draft no changes. content security policy level 2the definition of 'font-src' in that specification. recommendation initial definition. ...

CSP: prefetch-src - HTTP
the http content-security-policy (csp) prefetch-src directive specifies valid resources that may be prefetched or prerendered. csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the prefetch-src policy: content-security-policy: prefetch-src <source>; content-security-policy: prefetch-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the ...
...dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. when generating the hash, don't include the <script> or <style> tags and note that capitalization 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. ...
...> tags and note that capitalization 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. ...
... 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 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: style-src-attr - HTTP
the http content-security-policy (csp) style-src-attr directive specifies valid sources for inline styles applied to individual dom elements. 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. ...
... valid sources for inline styles applied to individual dom elements. 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. ...
...idual dom elements. 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. syntax one or more sources can be allowed for the style-src-attr policy: content-security-policy: style-src-attr <source>; content-security-policy: style-src-attr <source> <source>; style-src-attr can be used in conjunction with style-src: content-security-policy: style-src <source>; content-security-policy: style-src-attr <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's ...
...dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. when generating the hash, don't include the <script> or <style> tags and note that capitalization 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. 'report-sample' requires a sample of the violating code to be included in the violation report. examples todo: add examples specifications specification status comment content security policy level 3the definition of 'style-src-attr' in that specification. working draft initial definition. ...

CSP: style-src-elem - HTTP
the http content-security-policy (csp) style-src-elem directive specifies valid sources for stylesheets <style> elements and <link> elements with rel="stylesheet". 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. ...
...lesheets <style> elements and <link> elements with rel="stylesheet". 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. ...
...h rel="stylesheet". 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. syntax one or more sources can be allowed for the style-src-elem policy: content-security-policy: style-src-elem <source>; content-security-policy: style-src-elem <source> <source>; style-src-elem can be used in conjunction with style-src: content-security-policy: style-src <source>; content-security-policy: style-src-elem <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the sit...
...dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. when generating the hash, don't include the <script> or <style> tags and note that capitalization 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. 'report-sample' requires a sample of the violating code to be included in the violation report. examples todo: add examples specifications specification status comment content security policy level 3the definition of 'style-src-elem' in that specification. working draft initial definition. ...

treecell.src - Archive of obsolete content
« xul reference home src type: uri set this to the uri of an image to appear in the tree cell. if this attribute is left out, no image appears. you can have both an image and a label. ...
... « xul reference home src type: uri set this to the uri of an image to appear in the tree cell. if this attribute is left out, no image appears. you can have both an image and a label. ...
... « xul reference home src type: uri set this to the uri of an image to appear in the tree cell. if this attribute is left out, no image appears. you can have both an image and a label. ...

HTMLImageElement.lowSrc - Web APIs
the htmlimageelement interface's obsolete lowsrc property can be used to specify the url of a reduced-quality or otherwise faster-loading version of the image specified by the src property. this property reflects the html lowsrc attribute. syntax htmlimageelement.lowsrc = imageurl; imageurl = htmlimageelement.lowsrc; value a domstring specifying the url of a version of the image specified by src which has been modified in some fashion so that it loads significantly more quickly than the primary image. there are a number of ways to achieve this; primary among them: higher compression levels (for example, a primary image saved as a jpeg using 85% quality might have a lowsrc version saved at 15%. reduced color depth; a primary image in 32-bit color might have an alternate image in...
...me fashion so that it loads significantly more quickly than the primary image. there are a number of ways to achieve this; primary among them: higher compression levels (for example, a primary image saved as a jpeg using 85% quality might have a lowsrc version saved at 15%. reduced color depth; a primary image in 32-bit color might have an alternate image in 8-bit color. important: the lowsrc property is obsolete and should not be used. instead, you should use an image format which loads progressively (such as progressive jpeg). or simply make sure your images are all well-optimized and balanced for appearance versus size. usage notes lowsrc is a strange case. it was never technically part of the html specification (it was a mozilla extension to html); however, html 5 does list it ...
...te attributes. 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. ...

RTCRtpStreamStats.ssrc - Web APIs
the rtcrtpstreamstats dictionary's ssrc property provides the synchronization source (ssrc), an integer which uniquely identifies the source of the rtp packets whose statistics are covered by the rtcstatsreport that includes this rtcrtpstreamstats dictionary. syntax var ssrc = rtcrtpstreamstats.ssrc; value the synchronization source (ssrc) is a 32-bit integer uniquely identifying the source of the rtp packets whose statistics are covered by the rtcstatsreport object of which this rtcrtpstreamstats object is a component. the manner in which these values are generated is not mandated by the specification, although it does make recommendations. you should not make any assumptions based on the value of ssrc other than that any two objects with the same ssrc value refer to the same source. s...
...tsreport object of which this rtcrtpstreamstats object is a component. the manner in which these values are generated is not mandated by the specification, although it does make recommendations. you should not make any assumptions based on the value of ssrc other 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 specifica...
... candidate recommendation initial definition. ...

SpeechGrammar.src - Web APIs
the src property of the speechgrammar interface sets and returns a string containing the grammar from within in the speechgrammar object. syntax var mygrammar = speechgrammarinstance.src; value a domstring representing the grammar. examples var grammar = '#jsgf v1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarl...
... draft ...
...onlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; console.log(speechrecognitionlist[0].src); // should return the same as the contents of the grammar variable console.log(speechrecognitionlist[0].weight); // should return 1 - the same as the weight set in line 4. specifications specification status comment web speech apithe definition of 'src' in that specification. draft ...

CSP: frame-src - HTTP
the http content-security-policy (csp) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>. csp version 1 directive type fetch directive fallback if this directive is absent, the user agent will look for the child-src directive (which falls back to the default-src directive). syntax one or more sources can be allowed for the frame-src policy: content-security-policy: frame-src <source>; content-security-policy: frame-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk charac...
... dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. when generating the hash, don't include the <script> or <style> tags and note that capitalization 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: frame-src https://example.com/ the following <iframe> is blocked and won't load: <iframe src="https://not-example.com/"></iframe> specifications specification status comment content security policy level 3the definition of 'frame-src' in that specification. workin...
...les violation cases given this csp header: content-security-policy: frame-src https://example.com/ the following <iframe> is blocked and won't load: <iframe src="https://not-example.com/"></iframe> specifications specification status comment content security policy level 3the definition of 'frame-src' in that specification. working draft undeprecates frame-src. content security policy level 2the definition of 'frame-src' in that specification. recommendation deprecates frame-src. ...

CSP: manifest-src - HTTP
the http content-security-policy: manifest-src directive specifies which manifest can be applied to the resource. csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the manifest-src policy: content-security-policy: manifest-src <source>; content-security-policy: manifest-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, ...
... dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. when generating the hash, don't include the <script> or <style> tags and note that capitalization 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. ...
...generating the hash, don't include the <script> or <style> tags and note that capitalization 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. ...

checkbox.src - Archive of obsolete content
« xul reference home 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. ...
... « xul reference home 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. ...

prefpane.src - Archive of obsolete content
« xul reference home src type: uri the uri of the overlay contents of preference pane. if this is not specified, the contents of the prefpane element is used. ...
... « xul reference home src type: uri the uri of the overlay contents of preference pane. if this is not specified, the contents of the prefpane element is used. ...

stringbundle.src - Archive of obsolete content
« xul reference home src type: uri the uri of the property file that contains the localized strings. ...
... « xul reference home src type: uri the uri of the property file that contains the localized strings. ...

treecol.src - Archive of obsolete content
« xul reference home src type: uri set this attribute to have the treecol element use an image for the header instead of a label. you cannot have both an image and a label displayed in the header. set this to the url of an image to appear on the tree column header. if this attribute is left out, no image appears and the label is used instead. the class treecol-image must be used on the treecol element for the image to appear. you should still specify a label for use in the column picker if ignoreincolumnpicker is not true and hidecolumnpicker is not true on the tree. ...
...header. ...

HTMLMediaElement.currentSrc - Web APIs
the htmlmediaelement.currentsrc property contains the absolute url of the chosen media resource. this could happen, for example, if the web server selects a media file based on the resolution of the user's display. the value is an empty string if the networkstate property is empty. syntax var mediaurl = audioobject.currentsrc; value a domstring object containing the absolute url of the chosen media source; this may be an empty string if networkstate is empty; otherwise, it will be one of the resources listed by the htmlsourceelement contained within the media element, or the value or src if no <source> element is provided. ...
...oobject.currentsrc; value a domstring object containing the absolute url of the chosen media source; this may be an empty string if networkstate is empty; otherwise, it will be one of the resources listed by the htmlsourceelement contained within the media element, or the value or src if no <source> element is provided. example var obj = document.createelement('video'); console.log(obj.currentsrc); // "" specifications specification status comment html living standardthe definition of 'htmlmediaelement.currentsrc' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement.currentsrc' in that specification. recommendation initial definition. ...

HTMLMediaElement.src - Web APIs
the htmlmediaelement.src property reflects the value of the html media element's src attribute, which indicates the url of a media resource to use in the element. note: the best way to know the url of the media resource currently in active use in this element is to look at the value of the currentsrc attribute, which also takes into account selection of a best or preferred media resource from a list provided in an htmlsourceelement (which represents a <source> element). syntax var mediaurl = htmlmediaelement.src; value a usvstring object containing the url of a media resource to use in the element; this property reflects the value of the html element's src attribute. ...
...on of a best or preferred media resource from a list provided in an htmlsourceelement (which represents a <source> element). syntax var mediaurl = htmlmediaelement.src; value a usvstring object containing the url of a media resource to use in the element; this property reflects the value of the html element's src attribute. example var obj = document.createelement('video'); console.log(obj.src); // "" specifications specification status comment html living standardthe definition of 'htmlmediaelement.src' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement.src' in that specification. recommendation initial definition. ...

script.src - Archive of obsolete content
« xul reference home src type: uri the uri of the script. ...

src - Archive of obsolete content
« xul reference src type: url gets and sets the value of the src attribute. ...

Event.srcElement - Web APIs
initially implemented in internet explorer, event.srcelement is a now-standard alias (defined in the dom standard but flagged as "historical") for the event.target property. it's supported in all major browser engines, but only for compatibility reasons. use event.target instead. specifications specification status comment domthe definition of 'event.srcelement' in that specification. living standard ...

srcdoc - Web APIs
the srcdoc property of the htmliframeelement specifies the content of the page. examples var iframe = document.createelement("iframe"); iframe.srcdoc = `<!doctype html><p>hello world!</p>`; document.body.appendchild(iframe); specifications specification status comment html living standardthe definition of 'htmliframeelement: srcdoc' in that specification. living standard ...

HTMLTrackElement.src - Web APIs
the htmltrackelement.src property reflects the value of the <track> element's src attribute, which indicates the url of the text track's data. syntax var texttrackurl = htmltrackelement.src; value a domstring object containing the url of the text track data. example // coming soon specifications specification status comment html living standardthe definition of 'htmltrackelement.src' in that specification. living standard no change from html5 html5the definition of 'htmltrackelement.src' in that specification. recommendation initial definition. ...

TaskAttributionTiming.containerSrc - Web APIs
the containersrc readonly property of the taskattributiontiming interface returns the container's src attribute. a container is the iframe, embed or object etc. that is being implicated, on the whole, for a long task. syntax var containersrc = taskattributiontiming.containersrc; value a domstring containing the container's src attribute. specifications specification status comment long tasks api 1the definition of 'containersrc' in that specification. working draft initial definition. ...

<font-face-src> - SVG: Scalable Vector Graphics
the <font-face-src> svg element corresponds to the src descriptor in css @font-face rules. it serves as container for <font-face-name>, pointing to locally installed copies of this font, and <font-face-uri>, utilizing remotely defined fonts. usage context categoriesfont elementpermitted contentone or more of the following elements, in any order:<font-face-name>, <font-face-uri> attributes global attributes core attributes specific attributes none dom interface this element implements the svgfontfacesrcelement interface. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<font-face-src>' in that specification. recommendation initial definition ...

Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
atomy 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 says two things. first of all, it lists the subdirectories that make up the extension, so the build system knows where to look for additional makefiles. secondly, it instructs the build...
...econdly, it instructs the build system to create a new extension, rather than copying the components directly into firefox's binary directory. the main advantage of using an extension is that it is easy to package everything up and install it on another machine. so here's your basic, plain-vanilla top-level makefile (makefile.in in the main extension directory): depth = ../.. ...
...structs the build system to create a new extension, rather than copying the components directly into firefox's binary directory. the main advantage of using an extension is that it is easy to package everything up and install it on another machine. so here's your basic, plain-vanilla top-level makefile (makefile.in in the main extension directory): depth = ../.. ...
...And 42 more matches

Index - Web APIs
have to redraw it and everything that was drawn before it. it takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it's running on. 522 basic usage of canvas canvas, graphics, html, intermediate, tutorial at first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes. indeed, the <canvas> element has only two attributes, width and height. these are both optional and can also be set using dom properties. when no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. the element can be sized arbitrarily by css, but during rendering the image is scaled to fit its layout size: if the css siz...
...vent interface is a boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via eventtarget.dispatchevent(). 1249 event.msconverturl() api, api:microsoft extensions, method, non-standard, reference, msconverturl the msconverturl method instructs the html paste operation on how to modify the src attribute that corresponds to each file in the clipboarddata.files collection, allowing otherwise inaccessible files to be converted to blob or data uris. 1250 event.originaltarget api, dom, gecko, needsexample, needshelp, non-standard, property the original target of the event before any retargetings. (mozilla-specific) 1251 event.preventdefault() api, dom, ev...
...ventdefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. 1252 event.returnvalue api, dom, event, property, reference, action, default, returnvalue the event property returnvalue indicates whether the default action for this event has been prevented or not. 1253 event.srcelement api, dom, property, reference, events event.srcelement is a proprietary alias (implemented in internet explorer) for the standard event.target property, which is supported in some other browsers for web compatibility purposes. 1254 event.stopimmediatepropagation() api, event, level 3, method, reference, stopimmediatepropagation the stopimmediatepropagation() ...
...And 27 more matches

MathML Torture Test
on value="texgyrepagella">tex gyre pagella</option> <option value="texgyreschola">tex gyre schola</option> <option value="texgyretermes">tex gyre termes</option> <option value="xits">xits</option> </select> <br/> </p> <table> <tr> <td></td> <th scope="col">as rendered by tex</th> <th scope="col">as rendered by your browser</th></tr> <tr> <td>1</td> <td><img src="https://udn.realityripple.com/samples/45/d5a0dbbca3.png" width="38" height="22" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </math> </td></tr> <tr> <td...
...ripple.com/samples/45/d5a0dbbca3.png" width="38" height="22" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </math> </td></tr> <tr> <td>2</td> <td><img src="https://udn.realityripple.com/samples/b8/da4a50ea34.png" width="30" height="17" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <!-- <mrow> <msub><mi></mi><mn>2</mn></msub> <msub><mi>f</mi><mn>3</mn></msub> </mrow> --> <mrow> <mmultiscripts> <mi>f</mi> <mn>3</m...
... <mrow> <msub><mi></mi><mn>2</mn></msub> <msub><mi>f</mi><mn>3</mn></msub> </mrow> --> <mrow> <mmultiscripts> <mi>f</mi> <mn>3</mn><none/> <mprescripts/> <mn>2</mn><none/> </mmultiscripts> </mrow> </math> </td></tr> <tr> <td>3</td> <td><img src="https://udn.realityripple.com/samples/8a/1d0e6e073c.png" width="58" height="47" alt="texbook, 17-17.1" /></td> <td> <math display="block"> <mrow> <mfrac> <mrow> <mi>x</mi> <mo>+</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> <mrow> ...
...And 23 more matches

Responsive images - Learn web development
features — and look at what tools html provides to help implement them. this helps to improve performance across different devices. responsive images are just one part of responsive design, a future css topic for you to learn. prerequisites: you should already know the basics of html and how to add static images to a web page. objective: learn how to use features like srcset and the <picture> element to implement responsive image solutions on websites. why responsive images? let's examine a typical scenario. a typical website may contain a header image and some content images below the header. the header image will likely span the whole of the width of the header, and the content image will fit somewhere inside the content column. here's a simple example: ...
...lement solutions. responsive image technologies 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 <im...
...css module. resolution switching: different sizes so, what is the problem that we want to solve with resolution switching? we want to display identical image content, just larger or smaller depending on the device — this is the situation we have with the second content image in our example. ...
...And 19 more matches

filter - CSS: Cascading Style Sheets
<thead> <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th> <th style="text-align: left;" scope="col">svg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="srgb"> <filter id="svgblur" x="-5%" y="-5%" width="11...
... <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%"> <fegaussianblur in="sourcegraphic" stddeviation="3.5"/> </filter> <image xlink:href="/files/3710/test_form_2.jpeg" filter="url(#svgblur)" width="212px" height="161px"/> </svg> </div> </td> <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3711/test_form_2_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande", "lucida sans unicode", "dejavu sans", lucida, arial, helvetica, sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -webkit-filter:blur(5px); -ms-filter:blur(5px); filter:blur...
... <thead> <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th> <th style="text-align: left;" scope="col">svg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3708/test_form.jpg" style="width: 100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3708/test_form.jpg" style="width: 100%;" /></td> <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="srgb"> <filter id="brightness"> <fecomponenttransfer> <fefun...
...And 19 more matches

How Mozilla's build system works
mplete documentation for make is beyond the scope of this document but is available here. one concept you will need be familiar with is variables in make. variables are defined by the syntax variable = value, and the value of a variable is referenced by writing $(variable). all variables are strings. all makefile.in files in mozilla have the same basic format: depth = ../../../.. ...
... for make is beyond the scope of this document but is available here. one concept you will need be familiar with is variables in make. variables are defined by the syntax variable = value, and the value of a variable is referenced by writing $(variable). all variables are strings. all makefile.in files in mozilla have the same basic format: depth = ../../../.. ...
...e is beyond the scope of this document but is available here. one concept you will need be familiar with is variables in make. variables are defined by the syntax variable = value, and the value of a variable is referenced by writing $(variable). all variables are strings. all makefile.in files in mozilla have the same basic format: depth = ../../../.. ...
...And 17 more matches

Hacking Tips
pp, a function named js::disassembleatpc can print the bytecode of a script. some variants of this function such as js::dumpscript etc are convenient for debugging. printing the js stack (from gdb) in jsobj.cpp, a function named js::dumpbacktrace prints a backtrace à la gdb for the js stack. the backtrace contains in the following order, the stack depth, the interpreter frame pointer (see js/src/vm/stack.h, stackframe class) or (nil) if compiled with ionmonkey, the file and line number of the call location and under parentheses, the jsscript pointer and the jsbytecode pointer (pc) executed. $ gdb --args js […] (gdb) b js::reportoverrecursed (gdb) r js> function f(i) { if (i % 2) f(i + 1); else f(i + 3); } js> f(0) breakpoint 1, js::reportoverrecursed (maybecx=0xfdca70) at /home/n...
...s) or (nil) if compiled with ionmonkey, the file and line number of the call location and under parentheses, the jsscript pointer and the jsbytecode pointer (pc) executed. ...
..., we have a gdb unwinder. this unwinder is able to read the frames created by the jit, and to display the frames which are after these jit frames. ...
...And 16 more matches

Audio and Video Delivery - Developer guides
, 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 preload="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 preload as much audio as possible for smooth playback. note: the preload attrib...
....mp3">download audio</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth playback. note: the preload attribute may be ignored by some mobile browsers. ...
... much audio as possible for smooth playback. note: the preload attribute may be ignored by some mobile browsers. ...
...And 16 more matches

HTTP Index - HTTP
absent, the user agent will use the value in the <base> element. 78 csp: block-all-mixed-content csp, content-security-policy, directive, http, mixed content, reference, security, block-all-mixed-content the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets using http when the page is loaded using https. 79 csp: child-src csp, child, content-security-policy, directive, http, reference, security, child-src, source the http content-security-policy (csp) child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>. for workers, non-compliant requests are treated as fatal network errors by the user agent. 80 csp: conn...
... csp, child, content-security-policy, directive, http, reference, security, child-src, source the http content-security-policy (csp) child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>. for workers, non-compliant requests are treated as fatal network errors by the user agent. 80 csp: connect-src csp, content-security-policy, directive, http, reference, security, connect-src, source the http content-security-policy (csp) connect-src directive restricts the urls which can be loaded using script interfaces. ...
...rkers, non-compliant requests are treated as fatal network errors by the user agent. 80 csp: connect-src csp, content-security-policy, directive, http, reference, security, connect-src, source the http content-security-policy (csp) connect-src directive restricts the urls which can be loaded using script interfaces. the apis that are restricted are: 81 csp: default-src csp, content-security-policy, directive, http, reference, security, default, default-src, source the http content-security-policy (csp) default-src directive serves as a fallback for the other csp fetch directives. ...
...And 16 more matches

Content-Security-Policy - HTTP
t security policy (csp). header type response header forbidden header name no syntax content-security-policy: <policy-directive>; <policy-directive> where <policy-directive> consists of: <directive> <value> with no internal punctuation. directives fetch directives fetch directives control the locations from which certain resource types may be loaded. ...
...directive>; <policy-directive> where <policy-directive> consists of: <directive> <value> with no internal punctuation. directives fetch directives fetch directives control the locations from which certain resource types may be loaded. child-src defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>. instead of child-src, if you want to regulate nested browsing contexts and workers, you should use the frame-src and worker-src directives, respectively. ...
... fetch directives control the locations from which certain resource types may be loaded. child-src defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>. instead of child-src, if you want to regulate nested browsing contexts and workers, you should use the frame-src and worker-src directives, respectively. connect-src restricts the urls which can be loaded using script interfaces default-src serves as a fallback for the other fetch directives. font-src specifies valid sources for fonts loaded using @font-face. ...
...And 15 more matches

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
fig. 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 patch and recompile that source rpm (check bug 295329) ; patch: [root@b008-02 sources]# cat thunderbird-autoconfigandldap.patch diff -ur thunderbird-3.0/configure thunderbird-3.0.autoldap/configure --- thunderbird-3.0/configure 2009-06-29 11:37:21.677372297 +0200 +++ thunderbird-3.0.autoldap/configure 2009-06-29 14:41:11.547435040 +0200 @@ -12855,7 +12855,7 @@ moz_...
...erbird (1.0.x). it was apparently supposed to increase the load of the binary for a feature not used by lots of individuals. however for enterprise deployment, it is vital! so we needed to recompile thunderbird with autoconfig support, it's just a matter of adding --enable-extensions=pref in mozconfig file. ...
...rease the load of the binary for a feature not used by lots of individuals. however for enterprise deployment, it is vital! so we needed to recompile thunderbird with autoconfig support, it's just a matter of adding --enable-extensions=pref in mozconfig file. ...
...And 14 more matches

Migrating from webkitAudioContext - Web APIs
s, and in the newer versions of the specification, the noteon() and notegrainon() methods were consolidated into a single start() method, and the noteoff() method was renamed to the stop() method. in order to port your code, you can just rename the method that you're using. ...
...specification, the noteon() and notegrainon() methods were consolidated into a single start() method, and the noteoff() method was renamed to the stop() method. in order to port your code, you can just rename the method that you're using. ...
...) and notegrainon() methods were consolidated into a single start() method, and the noteoff() method was renamed to the stop() method. in order to port your code, you can just rename the method that you're using. ...
...And 13 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
the html <img> element embeds an image into the document. 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 above example shows usage of the <img> element: the src attribute is required, and contains the path to the image you want to embed. the alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot. there are m...
...on: for example, network errors, content blocking, or linkrot. there are many other attributes to achieve various purposes: referrer/cors control for security and privacy: see crossorigin and referrerpolicy. use both width and height to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts. responsive image hints with sizes and srcset (see also the <picture> element and our responsive images tutorial). supported image formats the html standard doesn't list what image formats to support, so each user agent supports different formats. a complete guide to image formats supported by web browsers is available. below is a list of the image formats that are most commonly used on the web, as well as some older formats that shoul...
...s, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later. image loading errors if an error occurs while loading or rendering an image, and an onerror event handler has been set on the error event, that event handler will get called. this can happen in a number of situations, including: the src attribute is empty ("") or null. the src url is the same as the url of the page the user is currently on. the image is corrupted in some way that prevents it from being loaded. the image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <img> element's attributes. the image is in a format not supported by the user ag...
...And 11 more matches

Python binding for NSS
ated cvs documentation can be found here: getting mozilla source code using cvs. the old deprecated python-nss cvs source code location is mozilla/security/python/nss. release information release 1.0.1 release date 2017-02-28 scm tag pynss_release_1_0_1 source download https://ftp.mozilla.org/pub/mozilla.org/security/python-nss/releases/pynss_release_1_0_1/src/ change log add tls 1.3 cipher suites ssl_cipher_info.py now attempts to enable tls 1.3 fix build issue in setup.py. python-nss can now be build as python wheel, e.g. `pip wheel -w dist .` the following constants were added: ssl.tls_aes_128_gcm_sha256 ssl.tls_aes_256_gcm_sha384 ssl.tls_chacha20_poly1305_sha256 ...
... allow custom include root in setup.py as command line arg. add tls chacha20 poly1305 constants. remove checks for whether a socket is open for reading. it's not possible for the binding to know in all cases, especially if the socket is created from an xternal socket passed in. ...
...a single code base supports both py2 (minimum version 2.7) and py3 when built for py2: text will be a unicode object binary data will be a str object ints will be python long object when built for py3: text will be a str object ...
...And 10 more matches

WebGL2RenderingContext.uniform[1234][uif][v]() - Web APIs
integer, i for integer, f for float, and v for vector. not all combinations are valid: u cannot be combined with f. see the syntax table below. ...
...er, f for float, and v for vector. not all combinations are valid: u cannot be combined with f. see the syntax table below. ...
... are valid: u cannot be combined with f. see the syntax table below. ...
...And 10 more matches

Cross-browser audio basics - Developer guides
mp4 files typically contain aac encoded audio. you can use type="audio/mp4". (currently, browsers that support mp3 also suppor...
...mp4 files typically contain aac encoded audio. you can use type="audio/mp4". (currently, browsers that support mp3 also suppor...
..., browsers that support mp3 also support mp4 audio). here we define an <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 disp...
...And 10 more matches

Rich-Text Editing in Mozilla - Developer guides
ange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="pri...
...lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="print" onclick="printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaalewaacxmbajqcgaaaaad0su1fb9oebxczfmgboiwaaaaidevydenvbw1lbnqa9sywvwaaaufjrefuomvtlutsjfeux//n3nn0ydpbh1abrpt4lfqtqkc3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+ufza/rtth76zavocdptr...
...jcuhdxcul6mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo90fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtjpx4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" onclick="formatdoc('undo');" src="data:image/gif;base64,r0lgodlhfgawaomkadljwlie33morpgjuykl8aezxqpd+7/i19dv3nha7p///////////////////////yh5baekaa8alaaaaaawabyaaarr8mljq7046807tkayejjbnes4eeujvigapwyac0csocq7sdlwjkakca6tomywiargqf3mrqviejkksvlibsfewhdrih4fh/dzmice3/c4nbqbads=" /> <img class="intlink" title="redo" onclick="formatdoc('redo');" src="data:image/gif;base64,r0lgodlhfgawamihab1chdljwl9vj1ie34kl8apd+7/i1////yh5baekaacal...
...And 10 more matches

Making content editable - Developer guides
ange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="pri...
...lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="print" onclick="printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaalewaacxmbajqcgaaaaad0su1fb9oebxczfmgboiwaaaaidevydenvbw1lbnqa9sywvwaaaufjrefuomvtlutsjfeux//n3nn0ydpbh1abrpt4lfqtqkc3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+ufza/rtth76zavocdptr...
...jcuhdxcul6mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo90fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtjpx4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" onclick="formatdoc('undo');" src="data:image/gif;base64,r0lgodlhfgawaomkadljwlie33morpgjuykl8aezxqpd+7/i19dv3nha7p///////////////////////yh5baekaa8alaaaaaawabyaaarr8mljq7046807tkayejjbnes4eeujvigapwyac0csocq7sdlwjkakca6tomywiargqf3mrqviejkksvlibsfewhdrih4fh/dzmice3/c4nbqbads=" /> <img class="intlink" title="redo" onclick="formatdoc('redo');" src="data:image/gif;base64,r0lgodlhfgawamihab1chdljwl9vj1ie34kl8apd+7/i1////yh5baekaacal...
...And 10 more matches

Table Layout Regression Tests - Archive of obsolete content
. prerequisites in order to run these tests, you will need to have: make sure that your build is a debug build (in short you need ac_add_options --enable-debug in your .mozconfig file). to build the layoutdebugger itself, build either all extensions or include layoutdebug in your .mozconfig file. for example ac_add_options --enable-extensions=all. a mozilla tree with the test files at %moz_src%/layout/html/tests, disable_tests should not be defined (so ac_add_options --enable-tests), patience and time. test runs go to the %moz_src%/layout/html/tests/block directory. avoid the nasty assertions to pop up by set xpcom_debug_break=warn, the world would be a much better place if we could first fix those assertions. as you will probably run your normal mozilla in parallel with the te...
...world would be a much better place if we could first fix those assertions. as you will probably run your normal mozilla in parallel with the testing issue then: set moz_no_remote=1 at the command prompt. start the layout debugger via mozilla -layoutdebug - p foo where foo is just another profile than your main profile. select from the regression-test menu the add new list...entry. select %moz_src%/layout/html/tests/block/rtest.lst. execute the baseline test shutdown the layoutdebugger execute mozilla -layoutdebug - p foo >selftest.txt execute the verify test make a note which tests have failed grep 'failed' selftest.txt (these are false positives, quite frequently they indicate reflow problems, pages showing differently when loaded from cache) make your changes to the source, recomp...
...writing regression data t...
...And 9 more matches

Using images - Web APIs
urce canvas before using it in your target canvas. one of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas. creating an image from scratch another option is to create new htmlimageelement objects in our script. to do this, you can use the convenient image() constructor: var img = new image(); // create new img element img.src = 'myimage.png'; // set source path when this script gets executed, the image starts loading. if you try to call drawimage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). so you need to be sure to use the load event so you don't try this before the image has loaded: var img = new image(); // create new img element img.addev...
... loading. if you try to call drawimage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). so you need to be sure to use the load event so you don't try this before the image has loaded: var img = new image(); // create new img element img.addeventlistener('load', function() { // execute drawimage statements here }, false); img.src = 'myimage.png'; // set source path if you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. it's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind. embedding an image via data: url another possible way to include images is via the data: url. ...
...something more clever. it's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind. embedding an image via data: url another possible way to include images is via the data: url. data urls allow you to completely define an image as a base64 encoded string of characters directly in your code. var img = new image(); // create new img element img.src = 'data:image/gif;base64,r0lgodlhcwalaiaaaaaa3pn/zih5baeaaaealaaaaaalaasaaaiuha+hkcuo4lmnvindo7qyrixigbyaow=='; one advantage of data urls is that the resulting image is available immediately without another round trip to the server. another potential advantage is that it is also possible to encapsulate in one file all of your css, javascript, html, and images, making it more portable to other ...
...And 9 more matches

Content Security Policy (CSP) - HTTP
policy. to enable csp, you need to configure your web server to return the content-security-policy http header. (sometimes you may see mentions of the x-content-security-policy header, but that's an older version and you don't need to specify it anymore.) alternatively, the <meta> element can be used to configure a policy, for example: <meta http-equiv="content-security-policy" content="default-src 'self'; img-src https://*; child-src 'none';"> threats mitigating cross site scripting a primary goal of csp is to mitigate and report xss attacks. xss attacks exploit the browser's trust of the content received from the server. malicious scripts are executed by the victim's browser because the browser trusts the source of the content, even when it's not coming from where it seems to be coming...
...the content-security-policy http header to specify your policy, like this: content-security-policy: policy the policy is a string containing the policy directives describing your content security policy. writing a policy a policy is described using a series of policy directives, each of which describes the policy for a certain resource type or policy area. ...
...scribing your content security policy. writing a policy a policy is described using a series of policy directives, each of which describes the policy for a certain resource type or policy area. your policy should include a default-src policy directive, which is a fallback for other resource types when they don't have policies of their own (for a complete list, see the description of the default-src directive). a policy needs to include a default-src or script-src directive to prevent inline scripts from running, as well as blocking the use of eval(). a policy needs to include a default-src or style-src directive to restrict inline styles from being applied from a <style> element or a style attribute. there are specific directives for a wide variety of types of items, so that each type can h...
...And 9 more matches

Index - HTTP
ent, then any uri is allowed. if this directive is absent, the user agent will use the value in the <base> element. 30 csp: block-all-mixed-content csp, directive, http, mixed content, reference, security the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets using http when the page is loaded using https. ...
...nt. 30 csp: block-all-mixed-content csp, directive, http, mixed content, reference, security the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets using http when the page is loaded using https. ...
... https. 31 csp: child-src csp, directive, http, reference, security the deprecated http content-security-policy (csp) child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>. for workers, non-compliant requests are treated as fatal network errors by the user agent. 32 csp: connect-src csp, directive, http, reference, security the http content-security-policy (csp) connect-src directive restricts the urls which can be loaded using script interfaces. ...
...And 9 more matches

Images in HTML - Learn web development
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 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 cal...
...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 an images subdirectory, which was inside the same directory as the html page (which google recommends for seo/indexing purposes), then you'd embed it like this: <img src="images/dinosaur.jpg"> and so on. note: search engines also read image filenames and count them towards seo. therefore, you should give your image a descriptive filename; dinosaur.jpg is b...
...you'll almost always keep the images for your website on the same server as your html. ...
...And 8 more matches

HTMLMedia​Element​.textTracks - Web APIs
ist object representing the list of text tracks included in the media element. the list of tracks can be accessed using array notation, or using the object's gettrackbyid() method. each track is represented by a texttrack object which provides information about the track. ...
...ks included in the media element. the list of tracks can be accessed using array notation, or using the object's gettrackbyid() method. each track is represented by a texttrack object which provides information about the track. ...
...accessed using array notation, or using the object's gettrackbyid() method. each track is represented by a texttrack object which provides information about the track. ...
...And 8 more matches

Index - Archive of obsolete content
table layout strategy gecko the table layout algorithm is based on two w3c recommendations: html 4.01 (chapter 11) and css2.1 (chapter 17).in css2 a distinction between fixed and auto layout of tables has been introduced. the auto-layout mechanism is implemented in basictablelayoutstrategy.cpp the fixed-layout in fixedtablelayoutstrategy.cpp. all these files are in the layout/html/table/src subdirectory. 650 tamarin javascript, landing, tamarin no summary! 651 abcasm abcasm - an abc assembler 652 tamarin acceptance testing in order to ensure that changes to the tamarin code base are high quality before submitting, all developers are required to complete the following steps. 653 abc assembler tests ...
...tonlabelhelp xul attributes, xul reference no summary! 795 buttonorient xul attributes, xul reference no summary! 796 buttonpack xul attributes, xul reference no summary! 797 buttons xul attributes, xul reference no summary! 798 checkstate xul attributes, xul reference no summary! 799 checkbox.src xul attributes, xul reference no summary! 800 checked xul attributes, xul reference no summary! 801 chromemargin xul, xul attribute, xul reference no summary! 802 class xul attributes, xul reference no summary! 803 clicktoscroll clicktoscroll, if true, the arrows must be clicked to scroll the scrollbox ...
... 1022 preference-editable xul attributes, xul reference no summary! 1023 preference.name xul attributes, xul reference no summary! 1024 preference.type needshelp, reference, référence(2), xul attributes, xul reference no summary! 1025 prefpane.selected xul attributes, xul reference no summary! 1026 prefpane.src xul attributes, xul reference no summary! 1027 prefwindow.onload no summary! 1028 prefwindow.type xul attributes, xul reference no summary! 1029 primary xul attributes, xul reference no summary! 1030 priority xul attributes, xul reference no summary! 1031 progressmeter.max no summa...
...And 7 more matches

2D maze game with device orientation - Game development
can see cyber orb source code on github. the folder structure is quite straightforward: the starting point is the index.html file where we initialize the framework and set up an <canvas> to render the game on. you can open the index file in your favourite browser to launch the game and try it. there are also three folders in the directory: img: all the images that we will use in the game. src: the javascript files with all the source code of the game defined inside. audio: the sound files used in the game. setting up the canvas we will be rendering our game on canvas, but we won't do it manually — this will be taken care of by the framework. let’s set it up: our starting point is the index.html file with the following content. you can create this yourself if you want to follow...
...on canvas, but we won't do it manually — this will be taken care of by the framework. let’s set it up: our starting point is the index.html file with the following content. ...
...nvas, but we won't do it manually — this will be taken care of by the framework. let’s set it up: our starting point is the index.html file with the following content. ...
...And 7 more matches

Introducing a complete toolchain - Learn web development
lled, you'll get a version number returned like 2.0.2; if not, it'll return something along the lines of "command not found". if this is the case, install it using the following command: npm install prettier -g now that prettier is installed, running and tidying your code can be done on the command line on an individual file basis from anywhere on your computer, for example: prettier --write ./src/index.html note: in the command above, i use prettier with the --write flag. prettier understands this to mean "if there's problems in my code format, go ahead and fix them, then save my file". this is fine for our development process, but we can also use prettier without the flag and it will only check the file. checking the file (and not saving it) is useful for purposes like checks that run ...
.... however, bear in mind that if you want to refine and enforce a rule about how your code looks (or validates), it's very likely that it can be done with the right eslint configuration. a little later in this chapter, we'll provide the eslint config. once a working configuration is in place, running the command can generate some useful information. here is an example eslint output: ./my-project/src/index.js 2:8 error 'react' is defined but never used no-unused-vars 22:20 error 'body' is defined but never used no-unused-vars 96:19 error 'b' is defined but never used no-unused-vars ✖ 3 problems (3 errors, 0 warnings) note: we'll install eslint in the next section; don't worry about this for now. as with other tools, code editor integration support is typically good for esl...
... navigating to a place that you'll be able to find and get to easily. the desktop perhaps, or your home or documents folder? next, run the following commands to create a folder to keep your project in, and go inside the folder: mkdir will-it-miss cd will-it-miss now we will create a new directory for all of our web site's development code to live in. run the following now: mkdir src code organization tends to be quite subjective from team to team. for this project, the source code will live in src. making sure you are inside the root of the will-it-miss directory, enter the following command to start git’s source control functionality working on the directory: git init this means that you'll now be able to start storing revisions to the folder's contents, sa...
...And 7 more matches

Plug-in Basics - Plugins
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 displays video: <object data="newave.avi" type="video/avi" width="320" height="200" autostart="true" loop="true"> </object> a hidden plug-in is a type of embedded plug-in that is not dr...
...html page. for example, this object element calls a plug-in that displays video: <object data="newave.avi" type="video/avi" width="320" height="200" autostart="true" loop="true"> </object> a hidden plug-in is a type of embedded plug-in that is not drawn on the screen when it is invoked. it is created by using the hidden attribute of the embed element. here's an example: <embed src="audiplay.aiff" type="audio/x-aiff" hidden="true"> note: whether a plug-in is windowed or windowless is not meaningful if the plug-in is invoked with the hidden attribute. you can also create hidden plug-ins using the object element. though the object element has no hidden attribute, you can create css rules to override the sizing attributes of the object element object { visibility: visi...
...is the url of the specific object implementation. this attribute is similar to the code attribute of the applet element. though gecko does not support this object attribute, you can nest object elements with different attributes to use the object element for embedding plug-ins on any browser platform (see the example above). data represents the url of the object's data; this is equivalent to the src attribute of embed. codebase represents the url of the plug-in; this is the same as the codebase attribute of the applet element. for plug-ins, codebase is the same as pluginspace. type represents the mime type of the plug-in; this is the same as the type attribute of embed. height, width, align are basic img/embed/applet attributes supported by object. height and width are required for object...
...And 7 more matches

HTMLImageElement - Web APIs
om its parent, htmlelement. htmlimageelement.alt a domstring that reflects the alt html attribute, thus indicating the alternate fallback content to be displayed if the image has not been loaded. htmlimageelement.complete read only returns a boolean that is true if the browser has finished fetching the image, whether successful or not. that means this value is also true if the image has no src value indicating an image to load. htmlimageelement.crossorigin a domstring specifying the cors setting for this image element. see cors settings attributes for further details. this may be null if cors is not used. htmlimageelement.currentsrc read only returns a usvstring representing the url from which the currently displayed image was loaded. this may change as the image is adjusted due t...
...read this article for details on the possible values of this string. htmlimageelement.sizes a domstring reflecting the sizes html attribute. this string specifies a list of comma-separated conditional sizes for the image; that is, for a given viewport size, a particular image size is to be used. read the documentation on the sizes page for details on the format of this string. htmlimageelement.src a usvstring that reflects the src html attribute, which contains the full url of the image including base uri. you can load a different image into the element by changing the url in the src attribute. htmlimageelement.srcset a usvstring reflecting the srcset html attribute. this specifies a list of candidate images, separated by commas (',', u+002c comma). each candidate image is a url followe...
... htmlimageelement.usemap a domstring reflecting the usemap html attribute, containing the page-local url of the <map> element describing the image map to use. the page-local url is a pound (hash) symbol (#) followed by the id of the <map> element, such as #my-map-element. ...
...And 7 more matches

WebGLRenderingContext.blendFuncSeparate() - Web APIs
the webglrenderingcontext.blendfuncseparate() method of the webgl api defines which function is used for blending pixel arithmetic for rgb and alpha components separately. syntax void gl.blendfuncseparate(srcrgb, dstrgb, srcalpha, dstalpha); parameters srcrgb a glenum specifying a multiplier for the red, green and blue (rgb) source blending factors. the default value is gl.one. for possible values, see below. dstrgb a glenum specifying a multiplier for the red, green and blue (rgb) destination blending factors. the default value is gl.zero. for possible values, see below. srcalpha a glenum specifying a multiplier for the alpha source blending factor. the default value is gl.one. for possible values, see below. dstalpha a glenum specifying a multiplier for the alpha destination ...
...tors. the default value is gl.zero. for possible values, see below. srcalpha a glenum specifying a multiplier for the alpha source blending factor. the default value is gl.one. for possible values, see below. dstalpha a glenum specifying a multiplier for the alpha destination blending factor. the default value is gl.zero. for possible values, see below. return value none. exceptions if srcrgb, dstrgb, srcalpha, or dstalpha is not one of the listed possible values, a gl.invalid_enum error is thrown. if a constant color and a constant alpha value are used together as source (srcrgb) and destination (dstrgb) factors, a gl.invalid_enum error is thrown. ...
...zero. for possible values, see below. return value none. exceptions if srcrgb, dstrgb, srcalpha, or dstalpha is not one of the listed possible values, a gl.invalid_enum error is thrown. if a constant color and a constant alpha value are used together as source (srcrgb) and destination (dstrgb) factors, a gl.invalid_enum error is thrown. ...
...And 7 more matches

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
the html <audio> element is used to embed sound content in documents. it may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. it can also be the destination for streamed media, using a mediastream. 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 above example shows simple usage of the <audio> element. ...
...iastream. 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 above example shows simple usage of the <audio> element. in a similar manner to the <img> element, we include a path to the media we want to embed inside the src attribute; we can include other attributes to specify information such as whether we want it to autoplay and loop, whether we want to show the browser's default audio controls, etc. the content inside the opening and closing <audio></audio> tags is shown as a fallback in browsers that don't support the element. attributes this element's attributes include the global attributes. autoplay a ...
...e auto value. the default value is different for each browser. the spec advises it to be set to metadata. usage notes: the autoplay attribute has precedence over preload. if autoplay is specified, the browser would obviously need to start downloading the audio for playback. the browser is not forced by the specification to follow the value of this attribute; it is a mere hint. src the url of the audio to embed. this is subject to http access controls. this is optional; you may instead use the <source> element within the audio block to specify the audio to embed. events event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed. canplay the browser can play the media, but estimates that n...
...And 7 more matches

Autoplay guide for media and Web Audio APIs - Web media technologies
audio to begin to play without the user specifically requesting that playback begin. this includes both the use of html attributes to autoplay media as well as the user of javascript code to start playback outside the context of handling user input. that means that both of the following are considered autoplay behavior, and are therefore subject to the browser's autoplay blocking policy: <audio src="/music.mp4" autoplay> and audioelement.play(); the following web features and apis may be affected by autoplay blocking: the html <audio> and <video> elements the web audio api from the user's perspective, a web page or app that spontaneously starts making noise without warning can be jarring, inconvenient, or off-putting. because of that, browsers generally only allow autoplay to occur...
...y the element has been created during page load enough media has been received to 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 triggere...
...hen 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 time after the page is opened. consider this html for a media element: <video src="myvideo.mp4" autoplay onplay=handlefirstplay(event)"> here we have a <video> element whose autoplay attribute is set, with an onplay event handler set up; the event is handled by a function called handlefirstplay(), which receives as input the play event. handlefirstplay() looks like this: function handlefirstplay(event) { let vid = event.target; vid.onplay = null; // start whatever y...
...And 7 more matches

Index - Archive of obsolete content
buttonlabelhelp xul attributes, xul reference no summary! 48 buttonorient xul attributes, xul reference no summary! 49 buttonpack xul attributes, xul reference no summary! 50 buttons xul attributes, xul reference no summary! 51 checkstate xul attributes, xul reference no summary! 52 checkbox.src xul attributes, xul reference no summary! 53 checked xul attributes, xul reference no summary! 54 chromemargin xul, xul attribute, xul reference no summary! 55 class xul attributes, xul reference no summary! 56 clicktoscroll clicktoscroll, if true, the arrows must be clicked to scroll the scrollbox cont...
... 291 preference-editable xul attributes, xul reference no summary! 292 preference.name xul attributes, xul reference no summary! 293 preference.type needshelp, reference, référence(2), xul attributes, xul reference no summary! 294 prefpane.selected xul attributes, xul reference no summary! 295 prefpane.src xul attributes, xul reference no summary! 296 prefwindow.onload no summary! 297 prefwindow.type xul attributes, xul reference no summary! 298 primary xul attributes, xul reference no summary! 299 priority xul attributes, xul reference no summary! 300 progressmeter.max no summary! ...
...xul reference no summary! 317 resizer.type xul, xul attribute no summary! 318 right no summary! 319 rows needshelp, xul attributes, xul reference no summary! 320 screenx xul attributes, xul reference no summary! 321 screeny xul attributes, xul reference no summary! 322 script.src xul attributes, xul reference no summary! 323 script.type xul attributes, xul reference no summary! 324 searchsessions xul attributes, xul reference no summary! 325 searchbutton xul attributes, xul reference no summary! 326 searchlabel xul attributes, xul reference no summary! 327 selected ...
...And 6 more matches

Getting started with React - Learn web development
ike this: application structure create-react-app gives us everything we need to develop a react application. its initial file structure looks like this: moz-todo-react ├── readme.md ├── node_modules ├── package.json ├── package-lock.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── app.css ├── app.js ├── app.test.js ├── index.css ├── index.js ├── logo.svg └── serviceworker.js the src directory is where we'll spend most of our time, as it's where the source code for our application lives. the public directory contains files that will be read by your browser while you're developing the app; the most i...
...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 can be big or small, but they are usually clearly defined: they serve a single, obvious purpose. ...
...y are usually clearly defined: they serve a single, obvious purpose. let's open src/app.js, since our browser is prompting us to edit it. this file contains our first component, app, and a few other lines of code: import react from 'react'; import logo from './logo.svg'; import './app.css'; function app() { return ( <div classname="app"> <header classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to reload. </p> <a classname="app-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > learn react </a> </header> </div> ); } export default app; the app.js file consists of thre...
...And 6 more matches

Starting our Svelte Todo list app - Learn web development
browse their tasks. mark tasks as completed/pending without deleting them. remove tasks. add new tasks. filter tasks by status: all tasks, active tasks, or completed tasks. edit tasks. mark all tasks as active/completed. remove all completed tasks. building our first component let's create a todos.svelte component — this will contain our list of todos. ...
...m. remove tasks. add new tasks. filter tasks by status: all tasks, active tasks, or completed tasks. edit tasks. mark all tasks as active/completed. remove all completed tasks. building our first component let's create a todos.svelte component — this will contain our list of todos. create a new folder — src/components. ...
...ed. remove all completed tasks. building our first component let's create a todos.svelte component — this will contain our list of todos. create a new folder — src/components. note: you can put your components anywhere inside the src folder, but the components folder is a recognized convention to follow, allowing you to find your components easily. ...
...And 6 more matches

WebGL2RenderingContext.uniformMatrix[234]x[234]fv() - Web APIs
the webgl2renderingcontext.uniformmatrix[234]x[234]fv() methods of the webgl 2 api specify matrix values for uniform variables. there are no 2x2, 3x3, and 4x4 versions of this method. they are abbreviated in 2, 3, and 4, respectively. see the syntax below. ...
... the webgl2renderingcontext.uniformmatrix[234]x[234]fv() methods of the webgl 2 api specify matrix values for uniform variables. there are no 2x2, 3x3, and 4x4 versions of this method. they are abbreviated in 2, 3, and 4, respectively. see the syntax below. ...
...t.uniformmatrix[234]x[234]fv() methods of the webgl 2 api specify matrix values for uniform variables. there are no 2x2, 3x3, and 4x4 versions of this method. they are abbreviated in 2, 3, and 4, respectively. see the syntax below. ...
...And 6 more matches

context-menu - Archive of obsolete content
tent 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"), contentscript: 'self.on("click", function (node, data) {' + ' self.postmessage(node.src);' + '});', onmessage: function (imgsrc) { openimageeditor(imgsrc); } }); updating a menu item's label each menu item must be created with a label, but you can change its label later using a couple of methods. the simplest method is to set the menu item's label property. this example updates the item's label based on the number of times it's been clicked: var numclick...
...postmessage(document.url);' + '});', onmessage: function (pageurl) { editsource(pageurl); } }); show an "edit image" item when the menu is invoked on an image: var cm = require("sdk/context-menu"); cm.item({ label: "edit image", context: cm.selectorcontext("img"), contentscript: 'self.on("click", function (node, data) {' + ' self.postmessage(node.src);' + '});', onmessage: function (imgsrc) { openimageeditor(imgsrc); } }); show an "edit mozilla image" item when the menu is invoked on an image in a mozilla.org or mozilla.com page: var cm = require("sdk/context-menu"); cm.item({ label: "edit mozilla image", context: [ cm.urlcontext(["*.mozilla.org", "*.mozilla.com"]), cm.selectorcontext("img") ], conte...
... context: cm.pagecontext(), contentscript: 'self.on("context", function (node)...
...And 5 more matches

Rosetta - Archive of obsolete content
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(" the previous code has been automatically translated from \"" + smimetype + "\" to \"text/ecmascript\". "); if (!odicts.hasownproperty(smimetype)) { alert("ros...
...rn; } var ocompiled = document.createelement("script"); oscript.parentnode.insertbefore(obaton, oscript); oscript.parentnode.removechild(oscript); for (var aattrs = oscript.attributes, nattr = 0; nattr < aattrs.length; nattr++) { ocompiled.setattribute(aattrs[nattr].name, aattrs[nattr].value); } ocompiled.type = "text\/ecmascript"; if (oxhr200) { ocompiled.src = "data:text\/javascript," + encodeuricomponent(odicts[smimetype](oxhr200.responsetext)); } ocompiled.text = oxhr200 ? "" : odicts[smimetype](oscript.text); obaton.parentnode.insertbefore(ocompiled, obaton); } function reqerror (oerror) { throw new urierror("the script " + oerror.target.src + " is not accessible."); } function reqsuccess () { createscript(this.refscript...
...iled, obaton); } function reqerror (oerror) { throw new urierror("the script " + oerror.target.src + " is not accessible."); } function reqsuccess () { createscript(this.refscript, this); } function getsource (oscript) { var oreq = new xmlhttprequest(); oreq.onload = reqsuccess; oreq.onerror = reqerror; oreq.refscript = oscript; oreq.open("get", oscript.src, true); oreq.send(null); } function parsescript (oscript) { if (oscript.hasattribute("type") && !rignoremimes.test(oscript.getattribute("type").tolowercase())) { oscript.hasattribute("src") ? getsource(oscript) : createscript(oscript); } } function parsedocument () { for ( var ascripts = document.getelementsbytagname("script"), nidx = 0; ...
...And 5 more matches

JavaScript Daemons Management - Archive of obsolete content
sing the date in gmtstring format, or a number expressing the number of milliseconds since january 1, 1970, 00:00:00 utc. only the length property will be modified. ...
... the number of milliseconds since january 1, 1970, 00:00:00 utc. only the length property will be modified. ...
...the @context object must contain *at least* |*| a "perform" property pointing to what you want to be the @callback function of the daemon. |*| ...
...And 5 more matches

HTML: A good basis for accessibility - Learn web development
— image and video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people. we cover video and audio content in detail in the accessible multimedia, but for this article we'll look at accessibility for the humble <img> element. ...
...nt cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people. we cover video and audio content in detail in the accessible multimedia, but for this article we'll look at accessibility for the humble <img> element. ...
...media, but for this article we'll look at accessibility for the humble <img> element. ...
...And 5 more matches

HTML: A good basis for accessibility - Learn web development
— image and video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people. we cover video and audio content in detail in the accessible multimedia, but for this article we'll look at accessibility for the humble <img> element. ...
...nt cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people. we cover video and audio content in detail in the accessible multimedia, but for this article we'll look at accessibility for the humble <img> element. ...
...media, but for this article we'll look at accessibility for the humble <img> element. ...
...And 5 more matches

TypeScript support in Svelte - Learn web development
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 type todotype = { id: number name: string completed: boolean } note: the svelte template uses svelte-preprocess 4.0.0 to support typescript. from that version onward you have to use export/import type syntax to import types and interfaces. check this section ...
... for the three-dotted hints: alert.svelte let's start with our alert.svelte component. add lang="ts" into your alert.svelte component's <script> tag. you'll see some warnings in the output of the validate script: $ npm run validate -- --watch > svelte-check "--watch" ./svelte-todo-typescript getting svelte diagnostics... ...
...rnings in the output of the validate script: $ npm run validate -- --watch > svelte-check "--watch" ./svelte-todo-typescript getting svelte diagnostics... ==================================== ./svelte-todo-typescript/src/components/alert.svelte:8:7 warn: variable 'visible' implicitly has an 'any' type, but a better type may be inferred from usage. (ts) let visible ./svelte-todo-typescript/src/components/alert.svelte:9:7 warn: variable 'timeout' implicitly has an 'any' type, but a better type may be inferred from usage. ...
...And 5 more matches

WebGL2RenderingContext.blitFramebuffer() - Web APIs
dstx0, dsty0, dstx1, dsty1 a glint specifying the bounds of the destination rectangle. mask a glbitfield specifying a bitwise or mask indicating which buffers are to be copied. ...
... dstx0, dsty0, dstx1, dsty1 a glint specifying the bounds of the destination rectangle. mask a glbitfield specifying a bitwise or mask indicating which buffers are to be copied. ...
... dstx0, dsty0, dstx1, dsty1 a glint specifying the bounds of the destination rectangle. mask a glbitfield specifying a bitwise or mask indicating which buffers are to be copied. ...
...And 5 more matches

Signaling and video calling - Web APIs
var clickedusername = evt.target.textcontent; if (clickedusername === myusername) { alert("i'm afraid i can't let you talk to yourself. that would be weird."); return; } targetusername = clickedusername; createpeerconnection(); navigator.mediadevices.getusermedia(mediaconstraints) .then(function(localstream) { document.getelementbyid("local_video").srcobject = localstream; localstream.gettracks().foreach(track => mypeerconnection.addtrack(track, localstream)); }) .catch(handlegetusermediaerror); } } this begins with a basic sanity check: is the user already connected? if there's already a rtcpeerconnection, they obviously can't make a call. then the name of the user that was clicked upon is obtained from the event target's text...
...ices, 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 rarely 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 to the rtcpeerconnection. even though the connection is not fully established yet, you can begin sending data when you feel it's appropriate to do so. media received before the...
...unction handlevideooffermsg(msg) { var localstream = null; targetusername = msg.name; createpeerconnection(); var desc = new rtcsessiondescription(msg.sdp); mypeerconnection.setremotedescription(desc).then(function () { return navigator.mediadevices.getusermedia(mediaconstraints); }) .then(function(stream) { localstream = stream; document.getelementbyid("local_video").srcobject = localstream; localstream.gettracks().foreach(track => mypeerconnection.addtrack(track, localstream)); }) .then(function() { return mypeerconnection.createanswer(); }) .then(function(answer) { return mypeerconnection.setlocaldescription(answer); }) .then(function() { var msg = { name: myusername, target: targetusername, type: "video-answer", ...
...And 5 more matches

@font-face - CSS: Cascading Style Sheets
the @font-face css at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer. syntax @font-face { font-family: "open sans"; src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); } descriptors font-display determines how a font face is displayed based on whether and when it is downloaded and ready to use. font-family specifies a name that will be used as the font face value for font properties. font-stretch a font-stretch value. since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-stretch: 50% 200%; ...
...range that is supported by a font-face, for example font-weight: 100 400; font-variant a font-variant value. font-feature-settings allows control over advanced typographic features in opentype fonts. font-variation-settings allows low-level control over opentype or truetype font variations, by specifying the four letter axis names of the features to vary, along with their variation values. ...
... unicode-range the range of unicode code points to be used from the font. ...
...And 5 more matches

Using Dependent Libraries In Extension Components - Archive of obsolete content
tory/install.rdf extension-directory/libraries/dependent1.dll extension-directory/libraries/dependent2.dll extension-directory/libraries/component.dll extension-directory/components/interface1.xpt extension-directory/components/interface2.xpt extension-directory/components/bsmedberg_stub.dll extensions/stub/makefile.in # copyright (c) 2005 benjamin smedberg <benjamin@smedbergs.us> depth = ../.. ...
...ll.rdf extension-directory/libraries/dependent1.dll extension-directory/libraries/dependent2.dll extension-directory/libraries/component.dll extension-directory/components/interface1.xpt extension-directory/components/interface2.xpt extension-directory/components/bsmedberg_stub.dll extensions/stub/makefile.in # copyright (c) 2005 benjamin smedberg <benjamin@smedbergs.us> depth = ../.. ...
...nsion-directory/libraries/dependent1.dll extension-directory/libraries/dependent2.dll extension-directory/libraries/component.dll extension-directory/components/interface1.xpt extension-directory/components/interface2.xpt extension-directory/components/bsmedberg_stub.dll extensions/stub/makefile.in # copyright (c) 2005 benjamin smedberg <benjamin@smedbergs.us> depth = ../.. ...
...And 4 more matches

Porting NSPR to Unix Platforms - Archive of obsolete content
tructions you can use different threading packages to implement nspr threads. nspr has a user-level threading library where thread context switches are done by <tt>setjmp/longjmp</tt> or <tt>sigsetjmp/siglongjmp</tt>. this is called the local threads only version of classic nspr. you should attempt to do a local threads only port first. the classic nspr source files are in <tt>mozilla/nsprpub/pr/src/threads</tt> and <tt>mozilla/nsprpub/pr/src/io</tt>. if the platform has pthreads, you can also use pthreads as an implementation strategy. this is referred to as pthreads nspr. pthreads nspr has relatively orthogonal source code in the thread management, thread synchronization, and i/o area. the pthreads source files are in <tt>mozilla/nsprpub/pr/src/pthreads</tt>. i use the netbsd port i recent...
...find a <tt>jb_sp</tt> macro, you must resort to brute-force experiments. i usually print out every element in the <tt>jmp_buf</tt> and see which one is the closest to the address of a local variable (local variables are allocated on the stack). on some platforms, <tt>jmp_buf</tt> is a struct, then you should look for a struct member named <tt>sp</tt> or something similar. ...
...ing similar. <tt>mozilla/nsprpub/pr/src/md/unix/netbsd.c</tt> you need to modify the following existing files: <tt>mozilla/nsprpub/pr/include/md/makefile</tt> <tt>mozilla/nsprpub/pr/include/md/_unixos.h</tt>: just fix the compiling errors, usually pointed out by the <tt>#error</tt> preprocessor directives we inserted. ...
...And 4 more matches

prefpane - Archive of obsolete content
ference panel in a prefwindow. 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. ...
...directly as children of the prefpane element, or the src attribute may be used to put a pane in a separate file. in this latter case, the 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. ...
...a pane in a separate file. in this latter case, the 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 preferenceforelement <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?" p...
...And 4 more matches

Debugging a XULRunner Application - Archive of obsolete content
debugging :) venkman follow these instructions to install venkman into your xulrunner application (xulrunner 1.9 and later): get venkman from addons.mozilla.org (v0.9.87 at the time of writing). to download the package, right-click the install link and save the package locally. create a directory <application>/distribution/bundles/venkman. unzip the package into that directory. add <script src="chrome://venkman/content/venkman-overlay.js" /> to one of your xul windows. add ui to open venkman to your window (it could be a menu item or a toolbar button). make it call start_venkman() when activated. troubleshooting x-jsd is not a registered protocol if the message "x-jsd is not a registered protocol" appears when trying to open *.js files in venkman, then add an empty file called .au...
...e: content venkman jar:venkman.jar!/content/venkman/ contentaccessible=yes i get errors about not being able to open contentareautils.js, contentareadd.js, findutils.js, or contentareautils.js... ...
...ible=yes i get errors about not being able to open contentareautils.js, contentareadd.js, findutils.js, or contentareautils.js... ...
...And 4 more matches

Using LDAP XPCOM with XULRunner - Archive of obsolete content
pendent libraries in extension components: the component library is just a loader of the real library and all its dependencies, so as all the needed libraries are loaded. create a subdirectory extensions/ldapstub in the mozilla source code directory, containing two files, makefile.in and ldapstubloader.cpp: makefile.in: # copyright (c) 2005 benjamin smedberg <benjamin@smedbergs.us> depth = ../.. ...
...braries in extension components: the component library is just a loader of the real library and all its dependencies, so as all the needed libraries are loaded. create a subdirectory extensions/ldapstub in the mozilla source code directory, containing two files, makefile.in and ldapstubloader.cpp: makefile.in: # copyright (c) 2005 benjamin smedberg <benjamin@smedbergs.us> depth = ../.. ...
...extension components: the component library is just a loader of the real library and all its dependencies, so as all the needed libraries are loaded. create a subdirectory extensions/ldapstub in the mozilla source code directory, containing two files, makefile.in and ldapstubloader.cpp: makefile.in: # copyright (c) 2005 benjamin smedberg <benjamin@smedbergs.us> depth = ../.. ...
...And 4 more matches

Examples - Archive of obsolete content
pt</code> element and surrounded by a comment. </p> <dl> <dt>mozilla 1.1+/opera 7</dt> <dd>do not apply css or execute the javascript.</dd> <dt>netscape 7.0x/mozilla 1.0.x</dt> <dd>do not apply css but does execute the javascript.</dd> <dt>internet explorer 5.5+</dt> <dd>can not display the document.</dd> </dl> <p> <a href="http://validator.w3.org/check/referer"><img src="https://udn.realityripple.com/samples/8a/9e64asf935.png" alt="valid xhtml 1.0!" height="31" width="88" /></a> </p> </body> </html> back to the article problem 3 <!-- this file should have a .xhtml extension and will generate an error when parsed. --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http...
...html 1.0 strict served as <code>text/html</code>. </p> <p> this document contains inline css rules contained in a <code>style</code> element and surrounded by a sgml comment. </p> <p> note how the css rules for the background are applied in netscape 7.x, mozilla, opera 7 and internet explorer 5.5+. ...
... document contains inline css rules contained in a <code>style</code> element and surrounded by a sgml comment. </p> <p> note how the css rules for the background are <strong>not</strong> applied in netscape 7.x, mozilla and opera 7 and that internet explorer 5.5+ can not display the page correctly at all. ...
...And 4 more matches

From object to iframe — other embedding technologies - Learn web development
= htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/qh2-tgulwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" sty...
...ed using <iframe>s. there are some serious security concerns to consider with <iframe>s, as we'll discuss below, but this doesn't mean that you shouldn't use them in your websites — it just requires some knowledge and careful thinking. let's explore the code in a bit more detail. ...
...he <iframe> is able to be placed in fullscreen mode using the full screen api (somewhat beyond scope for this article.) frameborder if set to 1, this tells the browser to draw a border between this frame and other frames, which is the default behaviour. 0 removes the border. using this isn't really recommended any more, as the same effect can be better achieved using border: none; in your css. src this attribute, as with <video>/<img>, contains a path pointing to the url of the document to be embedded. width and height these attributes specify the width and height you want the iframe to be. fallback content in the same way as other similar elements like <video>, you can include fallback content between the opening and closing <iframe></iframe> tags that will appear if the browser does...
...And 4 more matches

Graceful asynchronous programming with Promises - Learn web development
e stream created from the selected sources, getusermedia() returns a promise which is resolved with the mediastream once it's available. the code that the video chat application would use might look something like this: function handlecallbutton(evt) { setstatusmessage("calling..."); navigator.mediadevices.getusermedia({video: true, audio: true}) .then(chatstream => { selfviewelem.srcobject = chatstream; chatstream.gettracks().foreach(track => mypeerconnection.addtrack(track, chatstream)); setstatusmessage("connected"); }).catch(err => { setstatusmessage("failed to connect"); }); } this function starts by using a function called setstatusmessage() to update a status display with the message "calling...", indicating that a call is being attempted. it...
...lt, we'll need to wrap the function body in curly braces this time (otherwise it'll throw an error). add the following to the end of your code: let promise3 = promise2.then(myblob => { }) now let's fill in the body of the executor function. ...
...nes inside the curly braces: let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); here we are running the url.createobjecturl() method, passing it as a parameter the blob returned when the second promise fulfills. this will return a url pointing to the object. then we create an <img> element, set its src attribute to equal the object url and append it to the dom, so the image will display on the page! if you save the html file you've just created and load it in your browser, you'll see that the image is displayed in the page as expected. good work! note: you will probably notice that these examples are somewhat contrived. you could just do away with the whole fetch() and blob() chain, and j...
...And 4 more matches

Getting started with Svelte - Learn web development
ponent state management. the compiler only intervenes in very specific situations and only in the context of svelte components. extensions to the javascript language are minimal and carefully picked in order to not break javascript syntax nor alienate developers. in fact, you will be mostly working with vanilla javascript. first steps with svelte being a compiler, you can't just add a <script src="svelte.js"> tag to your page and import it into your app. you'll have to set up your development environment in order to let the compiler do its job. requirements in order to work with svelte you need to have node.js installed. it's recommended that you use the long-term support (lts) version. node includes npm (the node package manager), and npx (the node package runner). note that you can al...
...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...
...le bundler. this configuration file tells rollup how to compile and build your app. if you prefer webpack you can create your starter project with npx degit sveltejs/template-webpack svelte-app instead. scripts: contains setup scripts as required. currently should only contain setuptypescript.js, a script that sets up typescript support in svelte. we'll talk about this more in the last article. src: this directory is where the source code for your application lives — where you'll be creating the code for your app. app.svelte: this is the top-level component of your app. so far it just renders the 'hello world!' message. main.js: the entry point to our application. it just instantiates the app component and binds it to the body of our html page. public: this directory contai...
...And 4 more matches

Introduction to automated testing - Learn web development
tting up gulp automation let's look at setting up gulp and using it to automate some testing tools. to begin with, create a test npm project using the procedure detailed at the bottom of the previous section. next, you'll need some sample html, css and javascript content to test your system on — make copies of our sample index.html, main.js, and style.css files in a subfolder with the name src inside your project folder. you can try your own test content if you like, but bear in mind that such tools won't work on internal js/css — you need external files. first, install gulp globally (meaning, it will be available across all projects) using the following command: npm install --global gulp-cli next, run the following command inside your npm project directory root to set up gulp ...
...all --save-dev gulp-htmltidy note: --save-dev adds the package as a dependency to your project. if you look in your project's package.json file, you'll see an entry for it in the devdependencies property. add the following dependency to gulpfile.js: const htmltidy = require('gulp-htmltidy'); add the following test to the bottom of gulpfile.js: function html(cb) { return gulp.src('src/index.html') .pipe(htmltidy()) .pipe(gulp.dest('build')); cb(); } here we are grabbing our development index.html file with gulp.src(), which allows us to grab a source file to do something with. we next use the pipe() function to pass that source to another command to do something else with. we can chain as many of these together as we want. we first run htmltidy()...
... has been created. ...
...And 4 more matches

Obsolete Build Caveats and Tips
: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. ...
... 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. ...
...he 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 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. ...
...And 4 more matches

SpiderMonkey Build Documentation
ditionally need nspr. and of course, you'll need to get the spidermonkey source code. non-developer (optimized) build use these steps if you want to install spidermonkey for production use or run performance benchmarks. (if you want to use spidermonkey as a library in your c++ application, or work on improving spidermonkey itself, do a developer/debug build instead, as described below.) cd js/src # this name should end with "_opt.obj" to make the version control system ignore it. mkdir build_opt.obj cd build_opt.obj /bin/sh ../configure.in # use "mozmake" on windows make a few notes about this: the most common build problems are dependency problems. see the build prerequisites page for your platform. spidermonkey does not support building in your source directory. you must ...
...files to /usr/local/include, and the js executable to/usr/local/bin. developer (debug) build for developing and debugging spidermonkey itself, it is best to have both a debug build (for everyday debugging) and an optimized build (for performance testing), in separate build directories. thus, in addition to following the steps above, you should also create a debug build using these steps: cd js/src # this name should end with "_dbg.obj" to make 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...
... you don't need to do so again until you re-run configure. if you'd like to pass certain flags to the compiler, you can set the cxxflags environment variable when you run configure. for example, if you're using the gnu toolchain, the following will pass the -g3 flag to the compiler, causing it to emit debug information about macros. then you can use those macros in gdb commands: $ cxxflags=-g3 $src/configure ... checking whether the c++ compiler (c++ -g3 ) works... yes ... $ cross-compiling options for cross-compiling you will need a cross-compiling compiler. that tends to be easier with clang as clang has cross-compiling support built in. you may need other libraries though. for example on debian linux you'll need the following to cross compile from x86_64 to x86. apt install clang li...
...And 4 more matches

Index
spidermonkey: the mozilla javascript runtime spidermonkey standalone source code releases can be found on the releases page. 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. 4 foss guide, spidermonkey feel free to add your own spidermonkey-based open source projects (and if necessary add categories)! 5 future directions guide, mozilla, spidermonkey this article documents future directions in functionality, design, and coding practices for spidermonkey. it can be read ...
... if scopechain is supplied, it uses scopechain as its enclosing scope. if scopechain is omitted, it creates a new function object in cx's global. this can be helpful if funobj is an extant function that you wish to use as if it were enclosed by a newly-created global object. 31 js::compile jsapi reference, reference, référence(2), spidermonkey js::compile compiles a script, srcbuf, chars, bytes, or file, for execution. 32 js::compilefunction jsapi reference, reference, référence(2), spidermonkey js::compilefunction compiles a function from a text string chars, bytes, or srcbuf. 33 js::compileoffthread jsapi reference, reference, référence(2), spidermonkey js::compileoffthread compiles a script, chars for execution. 34...
...urrentglobalornull jsapi reference, reference, référence(2), spidermonkey js::currentglobalornull() returns the global object for whatever function is currently running on the context. in other words, it returns the global object on the current scope chain. 38 js::deflatestringtoutf8buffer jsapi reference, refere, spidermonkey js::deflatestringtoutf8buffer encodes src as utf8. the caller must either ensure dst has enough space to encode the entire string, or pass the length of the buffer as dstlenp. in which case, the function will encode characters from the string until the buffer is exhausted. does not write the null terminator. 39 js::doublenanvalue jsapi reference, reference, référence(2), spidermonkey js::doublenanvalue returns a va...
...And 4 more matches

Add to iPhoto
g to take away from this is that this method returns either null or the image node the user right-clicked on. if they right-clicked anything other than an image, it returns null. responding when the "add image to iphoto" option is chosen when the user chooses to add the image to iphoto, the add() method is executed. add: function() { var node = iphoto.getcurrentnode(); if (node) { var src = node.getattribute("src"); // get the url of the image if (src && src != "") { iphoto.addimagebyurl(src); } } } this fetches the node representing the image the user wants to add, and, if it's an image, fetches the image's url from its src attribute, then passes it into our addimagebyurl() method, which will do all the heavy lifting. adding the image to iphoto the addimagebyu...
... if it's an image, fetches the image's url from its src attribute, then passes it into our addimagebyurl() method, which will do all the heavy lifting. adding the image to iphoto the addimagebyurl() method handles actually retrieving the image and adding it to iphoto. let's take a look at its code, then explore how it works. this is where all our js-ctypes usage occurs. ...
...the heavy lifting. adding the image to iphoto the addimagebyurl() method handles actually retrieving the image and adding it to iphoto. let's take a look at its code, then explore how it works. this is where all our js-ctypes usage occurs. ...
...And 4 more matches

vertical-align - CSS: Cascading Style Sheets
ke to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the vertical-align property can be used in two contexts: to vertically align an inline element's box inside its containing line box. ...
...ples and send us a pull request. the vertical-align property can be used in two contexts: to vertically align an inline element's box inside its containing line box. ...
...y align an inline element's box inside its containing line box. ...
...And 4 more matches

<script>: The Script element - HTML: Hypertext Markup Language
ive explanation of its valid arguments. defer this boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing domcontentloaded. scripts with the defer attribute will prevent the domcontentloaded event from firing until the script has loaded and finished evaluating. this attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect. the defer attribute has no effect on module scripts — they defer by default. scripts with the defer attribute will execute in the order in which they appear in the document. this attribute allows the elimination of parser-blocking javascript where the browser would have to load and evaluate scripts befo...
...ered free of unexpected manipulation. see subresource integrity. nomodule this boolean attribute is set to indicate that the script should not be executed in browsers that support es2015 modules — in effect, this can be used to serve fallback scripts to older browsers that do not support modular javascript code. nonce a cryptographic nonce (number used once) to whitelist scripts in a script-src content-security-policy. the server must generate a unique nonce value each time it transmits a policy. it is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial. referrerpolicy indicates which referrer to send when fetching the script, or resources fetched by the script: no-referrer: the referer header will not be sent. no-referrer-whe...
...n empty string value ("") is both the default value, and a fallback value if referrerpolicy is not supported. if referrerpolicy is not explicitly specified on the <script> element, it will adopt a higher-level referrer policy, i.e. one set on the whole document or domain. if a higher-level policy is not available, the empty string is treated as being equivalent to no-referrer-when-downgrade. src this attribute specifies the uri of an external script; this can be used as an alternative to embedding a script directly within a document. type this attribute indicates the type of script represented. the value of this attribute will be in one of the following categories: omitted or a javascript mime type: this indicates the script is javascript. the html5 specification urges auth...
...And 4 more matches

Progressive loading - Progressive web apps (PWAs)
ces when needed. render-blocking resources bundling is a problem, because the browser has to load the html, css, and javascript before it can paint their rendered results onto the screen. during the few seconds between initial 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...
... can be optimized. first of all, you should use tools or services similar to tinypng, which will reduce the file size of your images without altering the quality too much. if you're past that point, then you can start thinking about optimizing the image loading using javascript. we'll expain this below. ...
...ng using javascript. we'll expain this below. placeholder image instead of having all the screenshots of games referenced in <img> element src attributes, which will force the browser to download them automatically, we can do it selectively via javascript. the js13kpwa app uses a placeholder image instead, which is small and lightweight, while the final paths to target images are stored in data-src attributes: <img src='data/img/placeholder.png' data-src='data/img/slug.jpg' alt='name'> those images will be loaded via javascript after the site finishes building the html structure. the placeholder image is scaled the same way the original images are, so it will take up the same space and not cause the layout to repaint as the images load. loading via javascript the app.js file processes ...
...And 4 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
ent browsers support different resolution media query types and even units. brett jankord has a good explanation at cross browser retina/high resolution media queries. <video> html5 video is fairly well catered for in terms of responsive capabilities. if you wish, you can point to multiple video files via <source> attributes, each with their own source and mime type: <video controls> <source src="videos/720/crystal720.mp4" type="video/mp4"> <source src="videos/720/crystal720.webm" type="video/webm"> </video> but you can go one step further. you can include media attributes on the <source> element containing media queries — the video loaded in the browser will depend on both the format the browser supports, and the results of the media tests. so for example: <video controls> <sour...
...ideos/720/crystal720.mp4" type="video/mp4"> <source src="videos/720/crystal720.webm" type="video/webm"> </video> but you can go one step further. you can include media attributes on the <source> element containing media queries — the video loaded in the browser will depend on both the format the browser supports, and the results of the media tests. ...
...deo/webm"> </video> but you can go one step further. you can include media attributes on the <source> element containing media queries — the video loaded in the browser will depend on both the format the browser supports, and the results of the media tests. ...
...And 4 more matches

editor - Archive of obsolete content
tors, 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. ...
...oes 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. however, an issue is that if you specify the src attribute initially on the editor tag in the xul file, the document does not become editable by default. to enable editing on an editor, do either of the following: set the src attribute on the editor after the outer window has loaded, for example, in the onload handler. you might also set the src attribute based on what the user selects from a file dialog. in this case, set the editortype att...
...itor after the outer window has loaded, for example, in the onload handler. you might also set the src attribute based on what the user selects from a file dialog. in this case, set the editortype attribute on the editor. call the makeeditable method to make the document loaded in the editor editable. enable the design mode of the document loaded in the editor. to edit a new document, set the src attribute to about:blank. to access most of the functionality of the editor, your application must be part of an extension or part of the chrome. xul applications loaded via a url from a web server will not be able to access most of the features of the editor. ...
...And 3 more matches

prefwindow - Archive of obsolete content
pensubdialog("chrome://myextension/content/options-sub.xul", "", null) issues when using prefpanes in prefwindow when you wish to put non-<prefpane> elements to prefwindow, you should place them after all of <prefpane>s. if you put other elements before the first <prefpane>, you possibly see strange behaviors about switching panes. this is due to bug 296418. ...
...ptions-sub.xul", "", null) issues when using prefpanes in prefwindow when you wish to put non-<prefpane> elements to prefwindow, you should place them after all of <prefpane>s. if you put other elements before the first <prefpane>, you possibly see strange behaviors about switching panes. this is due to bug 296418. ...
...g prefpanes in prefwindow when you wish to put non-<prefpane> elements to prefwindow, you should place them after all of <prefpane>s. if you put other elements before the first <prefpane>, you possibly see strange behaviors about switching panes. this is due to bug 296418. ...
...And 3 more matches

Video and audio content - Learn web development
dwidth consumption. ovps even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. we'll be discussing this kind of service a bit more in the next article. the <video> element the <video> element allows you to embed a video very easily. a really simple example looks like this: <video src="rabbit320.webm" controls> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </video> the features of note are: src in the same way as for the <img> element, the src (source) attribute contains a path to the video you want to embed. it works in exactly the same way. controls users must be able to control video and audio pla...
...sion does. on top of that, both desktop and mobile browsers may be designed to offload handling of media playback (either for all media or only for specific types it can't handle internally). this means media support is partly dependent on what software the user has installed. so how do we do this? take a look at the following updated example (try it live here, also): <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> here we've taken the src attribute out of the actual <video> tag, and instead included separate <source> elements that point to their own sources. in this case the browser will go through t...
...rmats 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 preload="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 these attributes or with css. in both cases, videos main...
...And 3 more matches

Making asynchronous programming easier with async and await - Learn web development
promise code with async/await let's look back at a simple fetch example that we saw in the previous article: fetch('coffee.jpg') .then(response => { if (!response.ok) { throw new error(`http error! ...
... but let's convert this to use async/await to see how much simpler it makes things: async function myfetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { throw new error(`http error! status: ${response.status}`); } else { let myblob = await response.blob(); let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } } myfetch() .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); it makes code much simpler and easier to understand — no more .then() blocks everywhere! since an async keyword turns a function into a promise, you could refactor your code to use a hybrid approach of promises and await, brin...
... but how does it work? you'll note that we've wrapped the code inside a function, and we've included the async keyword before the function keyword. this is necessary — you have to create an async function to define ...
...And 3 more matches

Image gallery - Learn web development
ask us for help — see the assessment or further help section at the bottom of this page. project brief you have been provided with some html, css and image assets and a few lines of javascript code; you need to write the necessary javascript to turn this into a working program. ...
...again, the darken effect is removed again. to give you more of an idea, have a look at the finished example (no peeking at the source code!) steps to complete the following sections describe what you need to do. looping through the images we've already provided you with lines that store a reference to the thumb-bar <div> inside a constant called thumbbar, create a new <img> element, set its src attribute to a placeholder value xxx, and append this new <img> element inside thumbbar. you need to: put the section of code below the "looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image. in each loop iteration, replace the xxx placeholder value with a string that will equal the path to th...
... new <img> element inside thumbbar. you need to: put the section of code below the "looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image. in each loop iteration, replace the xxx placeholder value with a string that will equal the path to the image in each case. ...
...And 3 more matches

Deploying our app - Learn web development
tomatically trigger the entire build routine. if all is well, we get a live change deployed automatically. the only action we need to perform is that initial "push". however, we do have to set these steps up, and we'll look at that now. the build process again, because we're using parcel for development, the build option is extremely simple to add. instead of running the server with npx parcel src/index.html, we can run it with npx parcel build src/index.html and parcel will build everything ready for production instead of just running it for development and testing purposes. this includes doing minification and tree-shaking of code, and cache-busting on filenames. the newly-created production code is placed in a new directory called dist, which contains all the files required to run the ...
... rely on npm run build to always do the complete build step, without needing to remember the specific build command arguments for each project. 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. add the following line to your project now: "scripts": { ... "build": "parcel build src/index.html" } note: if the scripts property already has a command inside it, put a comma at the end of it. keep the json valid. you should now be able to run the following command in the root of your project directory to run the production build step (first quit the running process with ctrl + c if you need to): npm run build this should give you an output like the following,...
.... keep the json valid. ...
...And 3 more matches

Mozilla accessibility architecture
h enough to provide everything the assistive technologies on their platform will need. accessibility api module directory structure general rules for the directory structure: interfaces, both internally-used cross-platform and toolkit-specific interfaces exist in accessible/public. the implementations for each kind of object (document, text, table, edit box, button, etc.) exist in accessible/src. code and interfaces for specific toolkits should go in the appropriate directoy. toolkit specific implementations should have "wrap" appended to the class name. for example, document specific code for each toolkit goes in nsdocaccessiblewrap: public nsdocaccessible. directory purpose accessible/public common interfaces shared by all toolkits ...
...ch toolkit goes in nsdocaccessiblewrap: public nsdocaccessible. ...
... accessible/public common interfaces shared by all toolkits accessible/public/msaa custom com interfaces that we use to extend msaa's iaccessible accessible/public/atk internal xpcom atk interfaces accessible/src/base common implementations shared by html and xul implementations accessible/src/html/ document and html object implementations accessible/src/xul/ user interface and xul object implementations accessible/src/msaa/ windows implementations accessible/src/atk/ atk implementations, may eventually be used on platforms other than linux and unix accessible/src/mac/ empty implementations of...
...And 3 more matches

Configuring Build Options
t directory). options prefixed with ac_add_options are passed to configure, and affect the build process. building with an objdir this means that the source code and object files are not intermingled in your directory system and you can build multiple applications (e.g., firefox and thunderbird) from the same source tree. if you do not specify a moz_objdir, it will be automatically set to @topsrcdir@/obj-@config_guess@. if you need to re-run configure, the easiest way to do it is using ./mach configure; running configure manually is strongly discouraged. adding the following line to your mozconfig allows you to change the objdir: mk_add_options moz_objdir=@topsrcdir@/obj-@config_guess@ it is a good idea to have your objdir name start with obj so that mercurial ignores it. sometimes ...
...fig_guess@ it is a good idea to have your objdir name start with 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. ...
...times 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. 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...
...And 3 more matches

Creating JavaScript jstest reftests
the js/src/tests directories test files are run by the jstest harness in the shell and the reftest harness in the browser. this directory contains tests of spidermonkey conformance to ecmascript as well as spidermonkey non-standard extenstions to ecmascript. directory overview in the js/src/tests directory, there are a few important subdirectories. non262 tests the directory js/src/tests/non262/ should contain all tests of the following type: regressions of spidermonkey non-standard spidermonkey extensions to the javascript language test of "implementation-defined" details of the ecmascript standard for example, the exact definition of pi or some details of array sorting. you should not add tests of the following type: tests of the jit test of jit corr...
...st suite, read more here. performance tests or stress tests tests of spidermonkey's comformance to the ecmascript standard a brief history: in 2017, spidermonkey started comsuming test262, a comprehensive tests suite for ecmascript implementations. ...
... you should contribute directly to test262 in the following scenarios: you are writing tests for the implementation of a new feature or feature proposal for ecmascript. ...
...And 3 more matches

How to build an XPCOM component in JavaScript
o applications in the mozilla-central repository, you can create a makefile listing the idl files and the build system will automatically generate the typelib. a sample makefile.in # this source code form is subject to the terms of the mozilla public # license, v. 2.0. if a copy of the mpl was not distributed with this # file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
... in the mozilla-central repository, you can create a makefile listing the idl files and the build system will automatically generate the typelib. a sample makefile.in # this source code form is subject to the terms of the mozilla public # license, v. 2.0. if a copy of the mpl was not distributed with this # file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...mozilla-central repository, you can create a makefile listing the idl files and the build system will automatically generate the typelib. a sample makefile.in # this source code form is subject to the terms of the mozilla public # license, v. 2.0. if a copy of the mpl was not distributed with this # file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...And 3 more matches

Using files from web applications - Web APIs
++) { const file = files[i]; if (!file.type.startswith('image/')){ continue } const img = document.createelement("img"); img.classlist.add("obj"); img.file = file; preview.appendchild(img); // assuming that "preview" is the div output where the content will be displayed. const reader = new filereader(); reader.onload = (function(aimg) { return function(e) { aimg.src = e.target.result; }; })(img); reader.readasdataurl(file); } } here our loop handling the user-selected files looks at each file's type attribute to see if its mime type begins with the string "image/"). for each file that is an image, we create a new img element. css can be used to establish any pretty borders or shadows and to specify the size of the image, so that doesn't need to be do...
...nously loading the image and attaching it to the img element. after creating the new filereader object, we set up its onload function and then call readasdataurl() to start the read operation in the background. when the entire contents of the image file are loaded, they are converted into a data: url which is passed to the onload callback. our implementation of this routine sets the img element's src attribute to the loaded image which results in the image appearing in the thumbnail on the user's screen. using object urls the dom url.createobjecturl() and url.revokeobjecturl() methods let you create simple url strings that can be used to reference any data that can be referred to using a dom file object, including local files on the user's computer. when you have a file object you'd like t...
...ndlefiles() { if (!this.files.length) { filelist.innerhtml = "<p>no files selected!</p>"; } else { filelist.innerhtml = ""; const list = document.createelement("ul"); filelist.appendchild(list); for (let i = 0; i < this.files.length; i++) { const li = document.createelement("li"); list.appendchild(li); const img = document.createelement("img"); img.src = url.createobjecturl(this.files[i]); img.height = 60; img.onload = function() { url.revokeobjecturl(this.src); } li.appendchild(img); const info = document.createelement("span"); info.innerhtml = this.files[i].name + ": " + this.files[i].size + " bytes"; li.appendchild(info); } } } this starts by fetching the url of the <div> with the id ...
...And 3 more matches

HTMLScriptElement - Web APIs
olas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlscriptelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlscriptelement.type is a domstring representing the mime type of the script. it reflects the type attribute. htmlscriptelement.src is a domstring representing the url of an external script. it reflects the src attribute. htmlscriptelement.event is a domstring; an obsolete way of registering event handlers on elements in an html document. htmlscriptelement.charset is a domstring representing the character encoding of an external script. it reflects the charset attribute. htmlscriptelement.async htmlscriptelement.d...
...nt handlers on elements in an html document. htmlscriptelement.charset is a domstring representing the character encoding of an external script. it reflects the charset attribute. htmlscriptelement.async htmlscriptelement.defer the async and defer attributes are boolean attributes that control how the script should be executed. the defer and async attributes must not be specified if the src attribute is absent. there are three possible execution modes: if the async attribute is present, then the script will be executed asynchronously as soon as it downloads. if the async attribute is absent but the defer attribute is present, then the script is executed when the page has finished parsing. if neither attribute is present, then the script is fetched and executed immedi...
...ynamically importing scripts let's create a function that imports new scripts within a document creating a <script> node immediately before the <script> that hosts the following code (through document.currentscript). these scripts will be asynchronously executed. for more details, see the defer and async properties. ...
...And 3 more matches

Using the Screen Capture API - Web APIs
.log(), console.error(), and so on to log information to the log box in the document. starting display capture the startcapture() method, below, starts the capture of a mediastream whose contents are taken from a user-selected area of the screen. startcapture() is called when the "start capture" button is clicked. async function startcapture() { logelem.innerhtml = ""; try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); dumpoptionsinfo(); } catch(err) { console.error("error: " + err); } } after clearing the contents of the log in order to get rid of any leftover text from the previous attempt to connect, startcapture() calls getdisplaymedia(), passing into it the constraints object defined by displaymediaoptions. using await,...
...ed by displaymediaoptions. using await, the following line of code does not get executed until after the promise returned by getdisplaymedia() resolves. upon resolution, the promise returns a mediastream, which will stream the contents of the screen, window, or other region selected by the user. the stream is connected to the <video> element by storing the returned mediastream into the element's srcobject. the dumpoptionsinfo() function—which we will look at in a moment—dumps information about the stream to the log box for educational purposes. if any of that fails, the catch() clause outputs an error message to the log box. stopping display capture the stopcapture() method is called when the "stop capture" button is clicked. it stops the stream by getting its track list using medias...
...the log box for educational purposes. if any of that fails, the catch() clause outputs an error message to the log box. stopping display capture the stopcapture() method is called when the "stop capture" button is clicked. it stops the stream by getting its track list using mediastream.gettracks(), then calling each track's {domxref("mediastreamtrack.stop, "stop()")}} method. ...
...And 3 more matches

Touch.radiusX - Web APIs
most closely circumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated by touch.rotationangle. the touch.rotationangle is the angle (in degrees) that the ellipse described by radiusx and radiusy is rotated clockwise about its center. the following simple code snippet, registers a single handler for the touchstart, touchmove and touchend events. ...
...d by radiusx and radiusy is rotated clockwise about its center. the following simple code snippet, registers a single handler for the touchstart, touchmove and touchend events. when the src element is touched, the element's width and height will be calculate based on the touch point's radiusx and radiusy values and the element will then be rotated using the touch point's rotationangle. <div id="src"> ... ...
...y is rotated clockwise about its center. the following simple code snippet, registers a single handler for the touchstart, touchmove and touchend events. when the src element is touched, the element's width and height will be calculate based on the touch point's radiusx and radiusy values and the element will then be rotated using the touch point's rotationangle. <div id="src"> ... ...
...And 3 more matches

WebGLRenderingContext.blendFunc() - Web APIs
wing constants can be used for sfactor and dfactor. the formula for the blending color can be described like this: color(rgba) = (sourcecolor * sfactor) + (destinationcolor * dfactor). the rbga values are between 0 and 1. constant factor description gl.zero 0,0,0,0 multiplies all colors by 0. gl.one 1,1,1,1 multiplies all colors by 1. gl.src_color rs, gs, bs, as multiplies all colors by the source colors. gl.one_minus_src_color 1-rs, 1-gs, 1-bs, 1-as multiplies all colors by 1 minus each source color. gl.dst_color rd, gd, bd, ad multiplies all colors by the destination color. gl.one_minus_dst_color 1-rd, 1-gd, 1-bd, 1-ad multiplies all colors by 1 minus each destination color. ...
... gl.dst_alpha ad, ad, ad, ad multiplies all colors by the destination alpha value. ...
...-rs, 1-gs, 1-bs, 1-as multiplies all colors by 1 minus each source color. gl.dst_color rd, gd, bd, ad multiplies all colors by the destination color. gl.one_minus_dst_color 1-rd, 1-gd, 1-bd, 1-ad multiplies all colors by 1 minus each destination color. gl.src_alpha as, as, as, as multiplies all colors by the source alpha value. gl.one_minus_src_alpha 1-as, 1-as, 1-as, 1-as multiplies all colors by 1 minus the source alpha value. gl.dst_alpha ad, ad, ad, ad multiplies all colors by the destination alpha value. gl.one_minus_dst_alpha 1-ad, 1-ad, 1-ad, 1-ad multiplies all colors by 1 minus the destination alpha value. gl.constant_color rc, gc, bc, ac multiplies all colors by a constant col...
...And 3 more matches

WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
rnalformat, width, height, border, arraybufferview? ...
... height, border, arraybufferview? ...
...aybufferview? ...
...And 3 more matches

Animating textures in WebGL - Web APIs
we set it to autoplay, mute the sound, and loop the video. we then set up two events to make sure the video is playing and the time has been updated. we need both of these checks because it will produce an error if you upload a...
...you upload a video to webgl that has no data available yet. checking for both of these events guarantees there is data available and it's safe to start uploading video to a webgl texture. in the code above, we confirm whether we got both of those events; if so, we set a global variable, copyvideo, to true to indicate that it's safe to start copying the video to a texture. and finally, we set the src attribute to start and call play to start loading and playing the video. the video must be loaded from a secure source in order to be used to provide texture data to webgl. that means that you'll not only need to deploy code like using a secure web server, but you'll need a secure server to test with as well. see how do you set up a local testing server? for help. using the video frames as a te...
... inittexture(gl) { const texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); // because video has to be download over the internet // they might take a moment until it's ready so // put a single pixel in the texture so we can // use it immediately. const level = 0; const internalformat = gl.rgba; const width = 1; const height = 1; const border = 0; const srcformat = gl.rgba; const srctype = gl.unsigned_byte; const pixel = new uint8array([0, 0, 255, 255]); // opaque blue gl.teximage2d(gl.texture_2d, level, internalformat, width, height, border, srcformat, srctype, pixel); // turn off mips and set wrapping to clamp to edge so it // will work regardless of the dimensions of the video. gl.texparameteri(gl.te...
...And 3 more matches

Using textures in WebGL - Web APIs
es have to be download over the internet // they might take a moment until they are ready. // until then put a single pixel in the texture so we can // use it immediately. when the image has finished downloading // we'll update the texture with the contents of the image. ...
...he internet // they might take a moment until they are ready. // until then put a single pixel in the texture so we can // use it immediately. when the image has finished downloading // we'll update the texture with the contents of the image. ...
...g // we'll update the texture with the contents of the image. ...
...And 3 more matches

Border-image generator - CSS: Cascading Style Sheets
this tool can be used to generate css3 border-image values. ...
... this tool can be used to generate css3 border-image values. ...
...image generator html content <div id="container"> <div id="gallery"> <div id="image-gallery"> <img class="image" src="https://udn.realityripple.com/samples/2c/fa0192d18e.png" data-stateid="border1"/> <img class="image" src="https://udn.realityripple.com/samples/b8/dacdd63e77.png" data-stateid="border2"/> <img class="image" src="https://udn.realityripple.com/samples/07/1fcc357205.png" data-stateid="border3"/> <img class="image" src="https://udn.realityripple.com/samples/7b/dd37c1d691.png" data-stateid="border4"/> <img class="image" src="https://udn.realityripple.com/samples/a9/b9fff72dab.png" data-stateid="border5"/> <img class="image" src="https://udn.realityripple.com/sa...
...And 3 more matches

Audio and video manipulation - Developer guides
lementing a "play video in greyscale" feature, you'd probably add display: none to the style for the <video> element, to keep the source video from being drawn to the screen while showing only the canvas showing the altered frames. html we can set up our video player and <canvas> element like this: <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <canvas id="my-canvas" width="480" height="270"></canvas> javascript this code handles altering the frames. var processor = { timercallback: function() { if (this.video.paused || this.video.ended) { return;...
... the rate of playback, for example 0.5 represents half speed while 2 represents double speed. note that the playbackrate property works with both <audio> and <video>, but in both cases, it changes the playback speed but not the pitch. to manipulate the audio's pitch you need to use the web audio api. see the audiobuffersourcenode.playbackrate property. ...
...e audio's pitch you need to use the web audio api. see the audiobuffersourcenode.playbackrate property. ...
...And 3 more matches

<input type="image"> - HTML: Hypertext Markup Language
of an image rather than text. 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. value none — the value attribute should not be specified. events none. supported common attributes alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget idl attributes none. methods none. value <input type="image"> elements do not accept value attributes. the path to the image to be displayed is specified in the src attribute. additional attributes in addition to the attributes shared by all <input> elements, image button inputs suppo...
...if provided, it must be a non-empty string a...
...loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. if the current context is the topmost context, this behaves the same as _self. this attribute is also available on <input type="submit"> and <button> elements. height a number specifying the height, in css pixels, at which to draw the image specified by the src attribute. src a string specifying the url of the image file to display to represent the graphical submit button. when the user interacts with the image, the input is handled like any other button input. width a number indicating the width at which to draw the image, in css pixels. obsolete attributes the following attribute was defined by html 4 for image inputs, but was not implemented by...
...And 3 more matches

<picture>: The Picture element - HTML: Hypertext Markup Language
the html <picture> element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios. the browser will consider each child <source> element and choose the best match among them. if no matches are found—or the browser doesn't support the <picture> element—the url of the <img> element's src attribute is selected. ...
...tribute is selected. the selected image is then presented in the space occupied by the <img> 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. to decide which url to load, the user agent examines each <source>'s srcset, media, and type attributes to select a compatible image that best matches the current layout and capabilities of the display device. the <img> element serves two purposes: it describes the size and other attributes of the image and its presentation. it provides a fallback in case none of the offered <source> elements are able to provide a usable image. common use cases for <picture>: ...
...a conditions (for example, loading a simpler version of an image which has too many details, on smaller displays). offering alternative image formats, for cases where certain formats are not supported. saving bandwidth and speeding page load times by loading the most appropriate image for the viewer's display. if providing higher-density versions of an image for high-dpi (retina) display, use srcset on the <img> element instead. this lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit media conditions. content categories flow content, phrasing content, embedded content permitted content zero or more <source> elements, followed by one <img> element, optionally intermixed with script-supporting elements. t...
...And 3 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
rience. 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 above example shows simple usage of the <video> element. in a similar manner to the <img> element, we include a path to the media we want to display inside the src attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc. the content inside the opening and closing <video></video> tags is shown as a fallback in browsers that don't support the element. attributes like all other html elements, this element suppo...
...nym of the auto value. the default value is different for each browser. the spec advises it to be set to metadata. note: the autoplay attribute has precedence over preload. if autoplay is specified, the browser would obviously need to start downloading the video for playback. the specification does not force the browser to follow the value of this attribute; it is a mere hint. src the url of the video to embed. this is optional; you may instead use the <source> element within the video block to specify the video to embed. width the width of the video's display area, in css pixels (absolute values only; no percentages). events event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed. ca...
...d by the currenttime attribute has been updated. volumechange the volume has changed. waiting playback has stopped because of a temporary lack of data usage notes browsers don't all support the same video formats; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands. <video controls> <source src="myvideo.mp4" type="video/mp4"> <source src="myvideo.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="myvideo.mp4">link to the video</a> instead.</p> </video> we offer a substantive and thorough guide to media file types and the guide to the codecs supported for video. also available is a guide to audio codecs that can be used with them. other us...
...And 3 more matches

itemprop - HTML: Hypertext Markup Language
ue itemprop name avatar itemprop director james cameron itemprop genre science fiction itemprop trailer ../movies/avatar-theatrical-trailer.html properties properties have values that are either a string or a url. when a string value is a url, it is expressed using the <a> element and its href attribute, the <img> element and its src attribute, or other elements that link to or embed external resources. three properties with values that are strings <div itemscope> <p>my name is <span itemprop="name">neil</span>.</p> <p>my band is called <span itemprop="band">four parts water</span>.</p> <p>i am <span itemprop="nationality">british</span>.</p> </div> one property, "image", whose value is a url <div itemscope> ...
...ents that link to or embed external resources. three properties with values that are strings <div itemscope> <p>my name is <span itemprop="name">neil</span>.</p> <p>my band is called <span itemprop="band">four parts water</span>.</p> <p>i am <span itemprop="nationality">british</span>.</p> </div> one property, "image", whose value is a url <div itemscope> <img itemprop="image" src="google-logo.png" alt="google"> </div> when a string value can't be easily read and understood by a person (e.g., a long string of numbers and letters), it can be displayed using the value attribute of the data element, with the more easily-understood-by-a human-version given in the element's contents (which is not part of the structured data - see example below). an item with a property whose ...
...-friendly, so the product's name is used the human-visible text instead of the id. <h1 itemscope> <data itemprop="product-id" value="9678aou879">the instigator 2000</data> </h1> for numeric data, the meter element and its value attribute can be used. ...
...And 3 more matches

Using Feature Policy - HTTP
a policy are separated by semicolons. allowlist an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...
...amera *; feature-policy: unsized-media 'none' feature-policy: geolocation 'self' https://example.com feature-policy: camera *; the iframe allow attribute the second way to use feature policy is for controlling content within an iframe. use the allow attribute to specify a policy list for embedded content. ...
...And 3 more matches

CSP: upgrade-insecure-requests - HTTP
ecure-requests; examples // header content-security-policy: upgrade-insecure-requests; // meta tag <meta http-equiv="content-security-policy" content="upgrade-insecure-requests"> with the above header set on a domain example.com that wants to migrate from http to https, non-navigational insecure resource requests are automatically upgraded (first-party as well as third-party requests). ...
...ent-security-policy: upgrade-insecure-requests; // meta tag <meta http-equiv="content-security-policy" content="upgrade-insecure-requests"> with the above header set on a domain example.com that wants to migrate from http to https, non-navigational insecure resource requests are automatically upgraded (first-party as well as third-party requests). ...
...omatically upgraded (first-party as well as third-party requests). <img src="http://example.com/image.png"> <img src="http://not-example.com/image.png"> these urls will be rewritten before the request is made, meaning that no insecure requests will hit the network. note that, if the requested resource is not actually available via https, the request will fail without any fallback to http. ...
...And 3 more matches

Authoring MathML - MathML
thml support unfortunately, some browsers are not able to render mathml equations or only have a limited support. hence you will need to use a mathml polyfill to provide some fallback rendering. if you need only basic mathematical constructions such as those used on this mdn wiki then a small mathml.css stylesheet might be enough. ...
... you need only basic mathematical constructions such as those used on this mdn wiki then a small mathml.css stylesheet might be enough. ...
...t src="https://fred-wang.github.io/mathjax.js/mpadded-min.js"></script> note that these two scripts perform feature detection of the mspace or mpadded elements (see the browser compatibility table on these pages). there is also a similar script to display a warning at the top of the page for browsers without good mathml support and let the users choose between one of the fallback above: <script src="https://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script> if you don't want to use this link to github but instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of mathml support. for example the following function verifies the mathml support by testing the mspace element (you may replace mspace with mpadded): ...
...And 3 more matches

Compiling an Existing C Module to WebAssembly - WebAssembly
, 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. $ git clone https://github.com/webmproject/libwebp to start off simple, expose webpgetencoderversion() from encode.h to javascript by writing a c file called webp.c: #include "emscripten.h" #include "src/webp/encode.h" emscripten_keepalive int version() { return webpgetencoderversion(); } this is a good 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...
...ll 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. emscripten provides emconfigure and emmake to wrap these commands and inject the appropriate parameters. you can find more in the emscripten documentation. now you only need some html and javascript to load your ...
...ux,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. emscripten provides emconfigure and emmake to wrap these commands and inject the appropriate parameters. you can find more in the emscripten documentation. now you only need some html and javascript to load your new module: <script src="./a.out.js"></script> <script> module.onruntimeinitialized = async _ => { const api = { version: module.cwrap('version', 'number', []), }; console.log(api.version()); }; </script> and you will see the correct version number in the output: note: libwebp returns the current version a.b.c as a hexadecimal number 0xabc. for example, v0.6.1 is encoded as 0x000601 = 1537. ...
...And 3 more matches

Standard Makefile Header - Archive of obsolete content
each mozilla makefile uses a standard header. ...
... each mozilla makefile uses a standard header. ...
... each mozilla makefile uses a standard header. ...
...And 2 more matches

File.macAlias - Archive of obsolete content
file.macalias in this example, a mac alias is created for software (applecd audio player) that is installed locally. ...
... file.macalias in this example, a mac alias is created for software (applecd audio player) that is installed locally. ...
... file.macalias in this example, a mac alias is created for software (applecd audio player) that is installed locally. ...
...And 2 more matches

Anonymous Content - Archive of obsolete content
the menupopup will be added to the content in the location specified by the children element. note that to dom functions, the content will appear as it was in the xul file, so the menupopup will be a child of the menu. the xbl content is hidden away so the xul develope...
... element. note that to dom functions, the content will appear as it was in the xul file, so the menupopup will be a child of the menu. the xbl content is hidden away so the xul developer doesn't need to even know it is there. the resulting content would be: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> <textbox flex="1"/> <button src="chrome://global/skin/images/dropbox.jpg"/> </menu> includes attribute in some cases, you may wish to only include specific types of content and not others. or, you may wish to place different types of content in different places. the includes attribute can be used to allow only certain elements to appear in the content. its value should be set to a single tag name, or to a list of tags separate...
...s that don't match) will be used instead of the bound content. here is another example. let's say that we wanted to create a widget that displayed an image with a zoom in and zoom out button on each side of it. this would be created with a box to hold the image and two buttons. the image element has to be placed outside the xbl as it will differ with each use. ...
...And 2 more matches

Content Panels - Archive of obsolete content
ement which may be used to create wizard interfaces. this will be described in a later section. another approach is to use the iframe element, which works much like the html element of the same name. it creates a separate document within the window. it has the advantage that it can be placed anywhere and the contents can be loaded from a different file. set the url to appear in the frame with the src attribute. this url may point to any kind of file, although it will usually point to an html file or another xul file. you can use a script to change the contents of the iframe without affecting the main window. in the mozilla browser window, the area where the web page is displayed is created by using an iframe. when the user enters a url or clicks on a link in a document, the source of the fram...
...a where the web page is displayed is created by using an iframe. when the user enters a url or clicks on a link in a document, the source of the frame is changed. iframe example example 1 : source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="back" /> <toolbarbutton label="forward" /> <textbox id="urlfield" /> </toolbar> </toolbox> <iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1" /> the example here has created a very simple interface for a web browser. a box has been created containing two elements: a toolbox and an iframe. a back button, a forward button and a field for typing is urls has been added to the only toolbar (we'll learn about toolbar in a later section). the web pages would appear inside the iframe. in this case,...
...ated containing two elements: a toolbox and an iframe. a back button, a forward button and a field for typing is urls has been added to the only toolbar (we'll learn about toolbar in a later section). the web pages would appear inside the iframe. in this case, the file index.html would appear by default. this example isn't functionally complete. next, we would want to add script which changes the src attribute at the desired time, for example when the user presses the enter key. browsers there is a second type of content panel, using the browser tag. you would use this when you want to create a frame that displays content like a browser. actually, the iframe can do this too, but the browser has a variety of additional features. for example, the browser maintains a page history for use wi...
...And 2 more matches

iframe - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an inner frame that works much like the html <iframe> element. 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://...". when used in this case, please see displaying web content in an extension without security...
...eged 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://...". when used in this case, please see displaying web content in an extension without security issues. more information is available in the xul tutorial. ...
...tself. this can be a serious security vulnerability, for example if you use src="http://...". when used in this case, please see displaying web content in an extension without security issues. more information is available in the xul tutorial. ...
...And 2 more matches

Visual typescript game engine - Game development
staff like login, register etc. client config if you want web app without any networking then setup: appusenetwork: boolean = false; you want to use communication for multiplayer but you don't want to use server database account sessions. the setup this on false in main client config class. appuseaccountssystem: boolean = false; networking is disabled by default. find configuration at ./src/lib/client-config.ts /** * addson * all addson are ansync loaded scripts. * - cache is based on webworkers. * - hackertimer is for better performace also based on webworkers. * - dragging is script for dragging dom elements. */ private addson: addson = [ { name: "cache", enabled: true, scriptpath: "externals/cacheinit.ts", }, { name: "hackertimer", ...
......
......
...And 2 more matches

Accessible multimedia - Learn web development
ailable for making multimedia more accessible. simple images we already covered simple text alternatives for html images in our html: a good basis for accessibility article — you can refer back to there for the full details. in short, you should ensure that where possible visual content has an alternative text available for screenreaders to pick up and read to their users. for example: <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> accessible audio and video controls implementing controls for web-based audio/video shouldn't be a problem, right? let's investigate. the problem with native html5 controls html5 video and audio instances even come with a set of ...
... accessible audio and video controls implementing controls for web-based audio/video shouldn't be a problem, right? let's investigate. the problem with native html5 controls html5 video and audio instances even come with a set of inbuilt controls that allow you to control the media straight out of the box. for example (see native-controls.html source code and live): <audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <p>your browser doesn't support html5 audio. here is a <a href="viper.mp3">link to the audio</a> instead.</p> </audio> <br> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.mp4">l...
... controls to them. basic setup first, grab a copy of our custom-controls-start.html, custom-controls.css, rabbit320.mp4, and rabbit320.webm files and save them in a new directory on your hard drive. create a new file called main.js and save it in the same directory. first of all, let's look at the html for the video player, in the html: <section class="player"> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> <div class="controls"> <button class="playpause">play</button> <button class="stop">stop</button> <button class="rwd">rwd</button> <button class="fwd">fwd</button> ...
...And 2 more matches

Positioning - Learn web development
y the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. ...
...y the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. ...
...y the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. ...
...And 2 more matches

Video and Audio APIs - Learn web development
first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to use browser apis to control video and audio playback. html5 video and audio the <video> and <audio> elements allow us to embed video and audio into web pages. as we showed in video and audio content, a typical implementation looks like this: <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> this creates a video player inside the browser like so: you can review what all the html features do in the article linked above; for our purposes here, the most interesting attribute is...
...wnloaded our examples repo, you'll find it in javascript/apis/video-audio/start/ at this point, if you load the html you should see a perfectly normal html5 video player, with the native controls rendered. exploring the html open the html index file. ...
...is/video-audio/start/ at this point, if you load the html you should see a perfectly normal html5 video player, with the native controls rendered. exploring the html open the html index file. ...
...And 2 more matches

Framework main features - Learn web development
ate an authorcredit component to go with each article. this component needs to display a portrait of the author and a short byline about them. in order to know what image to render, and what byline to print, authorcredit needs accept some props. ...
...orcredit component to go with each article. this component needs to display a portrait of the author and a short byline about them. in order to know what image to render, and what byline to print, authorcredit needs accept some props. ...
...r and a short byline about them. in order to know what image to render, and what byline to print, authorcredit needs accept some props. a react representation of this authorcredit component might look something like this: function authorcredit(props) { return ( <figure> <img src={props.src} alt={props.alt} /> <figcaption>{props.byline}</figcaption> </figure> ); } {props.src}, {props.alt}, and {props.byline} represent where our props will be inserted into the component. ...
...And 2 more matches

Componentizing our React app - Learn web development
a component out of the most reused, most important piece of the ui: a todo list item. make a <todo /> before we can make a component, we should create a new file for it. in fact, we should make a directory just for our components. the following commands make a components directory and then, within that, a file called todo.js. make sure you're in the root of your app before you run these! mkdir src/components touch src/components/todo.js our new todo.js file is currently empty! open it up and give it its first line: import react from "react"; since we're going to make a component called todo, you can start adding the code for that to todo.js too, as follows. in this code, we define the function and export it on the same line: export default function todo() { return ( ); } this is ...
... currently empty! open it up and give it its first line: import react from "react"; since we're going to make a component called todo, you can start adding the code for that to todo.js too, as follows. ...
...p our code with one of javascript's core abilities: iteration. to use iteration, we should first re-think our tasks. tasks as data each of our tasks currently contains three pieces of information: its name, whether it has been checked, and its unique id. this data translates nicely to an object. since we have more than one task, an array of objects would work well in representing this data. ...
...And 2 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
ent is currently just displaying static markup; let's start making it a bit more dynamic. we'll take the tasks information from the markup and store it in a todos array. we'll also create two variables to keep track of the total number of tasks and the completed tasks. the state of our component will be represented by these three top-level variables. ...
... component will accept a todos attribute, which when omitted will be initialized to an empty array. have a look at the app, and you'll see the "nothing to do here!" message. this is because we are currently not passing any value into it from app.svelte, so it's using the default value. now let's move our todos to app.svelte and pass them to the todos.svelte component as a prop. ...
...just like they did before, except that now we're passing them in from the app.svelte component. toggling and removing todos let's add some functionality to toggle the task status. svelte has the on:eventname directive for listening to dom events. let's add a handler to the on:click event of the checkbox input to toggle the completed value. update the <input type="checkbox"> element inside src/components/todos.svelte as follows: <input type="checkbox" id="todo-{todo.id}" on:click={() => todo.completed = !todo.completed} checked={todo.completed} /> next we'll add a function to remove a todo from our todos array. at the bottom of the todos.svelte <script> section, add the removetodo() function like so: function removetodo(todo) { todos = todos.filter(t => t.id !== todo.
...And 2 more matches

Getting started with Vue - Learn web development
g sites, which is why vue prides itself on being a progressive framework. this is a great option when migrating an existing project using a library like jquery to vue. with this method, you can use a lot of the core features of vue, such as the attributes, custom components, and data-management. development script (unoptimized, but includes console warnings. ...
...to build more complex apps, you’ll want to use the vue npm package. ...
...logo. index.html: this is the template for your app. your vue app is run from this html page, and you can use lodash template syntax to interpolate values into it. note: this is not the template for managing the layout of your application — this template is for managing static html that sits outside of your vue app. editing this file typically only occurs in advanced use cases. src: this directory contains the core of your vue app. main.js: this is the entry point to your application. currently, this file initializes your vue application and signifies which html element in the index.html file your app should be attached to. this file is often where you register global components or additional vue libraries. app.vue: this is the top-level component in your vue app. ...
...And 2 more matches

Handling common JavaScript problems - Learn web development
ry. we are going to write code to fetch the flowers image and display it in the page. next, save copies of the fetch polyfill and the es6-promises polyfill in the same directory as the html. ...
... the flowers image and display it in the page. next, save copies of the fetch polyfill and the es6-promises polyfill in the same directory as the html. ...
...lable on the page already when we start trying to use fetch: <script src="es6-promise.js"></script> <script src="fetch.js"></script> inside the original <script>, add the following code: const myimage = document.queryselector('.my-image'); fetch('flowers.jpg').then(function(response) { response.blob().then(function(myblob) { let objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); now if you load it in a browser that doesn't support fetch (safari and ie are obvious candidates), you should still see the flower image appear — cool! note: you can find our finished version at fetch-polyfill-finished.html (see also the source code). note: again, there are many different ways to make use of the different polyfills you will encounter — cons...
...And 2 more matches

Creating localizable web applications
a> : <a href=\"%s\">" . _("sign in") . "</a> : " . _("forgot your password?"), $locale_conf->url('/'), $locale_conf->url('/signin'));?> </p> snippet 7. bad: <p class="description"><?= _("<strong>description:</strong>");?></p> snippet 8. good: <p class="description"><strong><?= _("description:");?></strong></p> snippet 9. ...
...n"><?= _("<strong>description:</strong>");?></p> snippet 8. good: <p class="description"><strong><?= _("description:");?></strong></p> snippet 9. good: <h1> <?printf("<a href=\"%s\"><img src=\"/static/img/logo.png\" alt=\"" . _("mozilla labs personas") . "\" /></a>", $locale_conf->url('/'));?> </h1> snippet 10. better: <h1> <a href="<?= $locale_conf->url('/') ?>"> <img src="/static/img/logo.png" alt="<?= /* l10n: link title attribute */ _("mozilla labs personas"); ?> " /> </a> </h1> ...but don't sacrifice flexibility don't sacrifice flexibility trying to satisfy the rule above. make sure the content supports changing the order of the sentence, which may be required by some grammars. snippet 1. bad: <p class="added"><?= _("<strong>added:</strong>") . $persona[...
...omments, 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> <a href="<?= $locale_conf->url('/') ?>"> <img src="/static/img/logo.png" alt="<?= /* l10n: link title attribute */ _("mozilla labs personas") ?> " /> </a> </h1> snippet 3. bad: <p class="added"><? printf(_("<strong>added:</strong> %s"), $persona['date']);?></p> snippet 4. good: ...
...And 2 more matches

Installing Pork
see the mcpp manual. in particular, -k tells mcpp to add the macro annotations we use to get exact source positions. c++ files from ot...
...an be preprocessed with gcc -e -wp,-w0,-k. building a 32-bit mcpp on a 64-bit system this is dark magic, and i hope i've got it right. first i built gcc in a separate --prefix=/builds/gcc-3.4.6-installed. note: once you do this, you can only use this version of gcc in -m32 mode. apply this patch: note: this doesn't seem necessary in the latest version; cppflags is already an argument. ...
...his is dark magic, and i hope i've got it right. first i built gcc in a separate --prefix=/builds/gcc-3.4.6-installed. note: once you do this, you can only use this version of gcc in -m32 mode. apply this patch: note: this doesn't seem necessary in the latest version; cppflags is already an argument. ...
...And 2 more matches

Introduction to the JavaScript shell
les that can be set to alter js shell behavior. js_stdout=file redirect stdout to file. js_stderr=file redirect stderr to file. built-in functions to make the javascript shell more useful, there are a number of built-in functions provided that you can use either from javascript programs or in interactive mode. note: this list is incomplete and overlaps with shell global objects. see js/src/shell/js.cpp (around shell_functions) for more. build() returns the date and time at which the javascript shell was built. note: clear() with no parameters really clears everything. this includes all these built-in functions. clone(function, [scope]) clones the specified function object. if scope isn't specified, the new object's parent is the same as the original object's. otherwise, the n...
...ript engine, for testing evalinsandbox-like environments in the shell. gc() runs the garbage collector to free up memory. gcparam(name[, value]) added in spidermonkey 1.8 read or configure garbage collector parameters. the name must be one of the parameter keys (such as 'maxbytes', 'maxmallocbytes' or 'gcnumber') defined by for_each_gc_param in https://searchfox.org/mozilla-central/source/js/src/builtin/testingfunctions.cpp#464. if value is not specified, gcparam() returns the current value associated with gc parameter named name. if value is specified, it must be convertable to a positive uint32; gcparam() sets gc parameter name to value. for more information, see the c/c++ functions js_getgcparameter and js_setgcparameter. gczeal(level) added in spidermonkey 1.8 debug only. set t...
...this function only works with programs loaded from files, either using the -f flag on launching the shell, or by using the load() function. if your program includes a function, dostuff(), like this: function dostuff(input) { print("enter a number: "); var n1 = rea...
...And 2 more matches

JS_CompileScriptForPrincipals
obsolete since jsapi 28this 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. compile a security-enabled script for execution. ...
...ved at any time. try to avoid using it. compile a security-enabled script for execution. ...
...*principals, const char *src, size_t length, const char *filename, unsigned int lineno); jsscript * js_compileucscriptforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const jschar *src, size_t length, const char *filename, unsigned int lineno); jsobject * js_compilescriptforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *src, size_t length, const char *filename, unsigned int lineno, jsversion version); // obsoleted since jsapi 19 jsobject * js_compileucscriptforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const jschar *src, size_t length, const char *filename, unsigned int lineno, jsversion version); // obsoleted since jsapi 19 name type description ...
...And 2 more matches

Setting up the Gecko SDK
same properties that are configured in the visual c++ project (see building a microsoft visual cpp project). for a listing of the commands that appear in this listing, see the make manual. sample makefile for the gecko sdk module = mozshim # change this to point at your gecko sdk directory. gecko_sdk_path ?= $(home)/tmp/xr xpidl ?= $(gecko_sdk_path)/bin/xpidl cxx ?= c++ xpidlsrcs = \ interfacea.idl \ interfaceb.idl \ $(null) cppsrcs = \ sourcea.cpp \ sourceb.cpp \ $(null) cppflags += -fno-rtti \ -fno-exceptions \ -fshort-wchar \ -fpic \ $(null) # gcc only define which allows us to not have to #include mozilla-config # in every .cpp file. if your not using gcc remove this line and add # #include "mozilla-config...
...this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 o...
...this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later. distribution o...
...And 2 more matches

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. ...
...chment's manipulation, printing, streaming the message content to eml format string, etc. ...
...ner aurllistener [optional] in boolean alocalonly); boolean ismsginmemcache(in nsiuri aurl, in nsimsgfolder afolder, out nsicacheentrydescriptor acacheentry); nsimsgdbhdr messageuritomsghdr(in string uri); methods copymessage() pass in the uri for the message you want to have copied. acopylistener already knows about the destination folder. void copymessage(in string asrcuri, in nsistreamlistener acopylistener, in boolean amovemessage, in nsiurllistener aurllistener, in nsimsgwindow amsgwindow, out nsiuri aurl); parameters asrcuri the string url of the message to copy. acopylistener an nsistreamlistener to be notified of copy events. amovemessage set to true if you ...
...And 2 more matches

XUL Overlays
thus, given the following base: ... <menu id="file-menu"> <menupopup id="menu_filepopup"> <menuitem name="new"/...
...thus, given the following base: ... <menu id="file-menu"> <menupopup id="menu_filepopup"> <menuitem name="new"/> <menuitem name="open"/> <menuitem name="s...
...ributes in addition to new elements and subtrees, you can also overlay attributes into existing elements. in xul, attributes control important features of the skin like image sources, as in the following example, where an overlay destructively overwrites the image source in the base file with a replacement. ...
...And 2 more matches

Type conversion
; somecfunction(buffer); // here ctypes.char.array(10)() is converted to ctypes.char.ptr type implicit conversion can be tested in the following way: var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.bool } ])(); mystruct.v = 1; console.log(mystruct.v.tostring()); // 'true' boolean type target type source converted value ctypes.bool js boolean src js number (0 or 1) if src == 0: false if src == 1: true var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.bool } ])(); mystruct.v = true; console.log(mystruct.v.tostring()); // 'true' mystruct.v = false; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 1; console.log(mystruct.v.tostring()); // 'true' mystruct.v = 0; console.log(mystruct.v.to...
...false; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 1; console.log(mystruct.v.tostring()); // 'true' mystruct.v = 0; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 10; // throws error mystruct.v = "a"; // throws error integer types target type source converted value ctypes.char16_t js string (only if its length == 1) src.charcodeat(0) any integer types js number (only if fits to the size) src js boolean if src == true: 1 if src == false: 0 var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.char16_t } ])(); mystruct.v = 0x41; console.log(mystruct.v.tostring()); // "a" mystruct.v = true; console.log(mystruct.v.tostring()); // "\x01" mystruct.v = "x"; consol...
...ypes.uint16_t ctypes.unsigned_short var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.int16_t } ])(); mystruct.v = ctypes.int8_t(10); console.log(mystruct.v.tostring()); // 10 mystruct.v = ctypes.int32_t(10); // throws error float types target type source converted value any float types js number (only if fits to the size) src pointer types target type source converted value any pointer types null nullptr ctypes.voidptr_t any pointer types src any array types src.addressofelement(0) ctypes.pointertype(t) ctypes.arraytype(t) src.addressofelement(0) ctypes.arraytype(t, n) src.addressofelement(0) var mystruct = ctypes.struct...
...And 2 more matches

HTMLImageElement.alt - Web APIs
tive—or of limited informational value, should have their alt attributes set to the empty string (""). this is shown in the example below. html in the html for this example, shown below, the <img> element includes the alt property, which will prevent the image from having any alternate text, since it's simply a decorational detail. <div class="container"> <div class="left-margin"> <img src="/files/16861/margin-flourish.svg" alt=""> </div> <div class="contents"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque quis orci ligula. lorem ipsum dolor sit amet, consectetur adipiscing elit. in ac neque libero. vivamus consectetur rhoncus elit eget porta. etiam pulvinar ex id sapien laoreet, quis aliquet odio lobortis. nam ac mauris at risus la...
...d be the same text you would use in a textual button to serve the same purpose. for example, in the snippet of html below, a toolbar which uses icon images as link labels provides alt attributes for each giving a textual label to use instead of the icon when the icons cannot be or are intentionally not used. ...
...r example, in the snippet of html below, a toolbar which uses icon images as link labels provides alt attributes for each giving a textual label to use instead of the icon when the icons cannot be or are intentionally not used. ...
...And 2 more matches

HTMLMediaElement - Web APIs
list read only returns a domtokenlist that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls. the domtokenlist takes one or more of three possible values: nodownload, nofullscreen, and noremoteplayback. htmlmediaelement.crossorigin a domstring indicating the cors setting for this media element. htmlmediaelement.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 t...
... returns a mediakeys object or null. mediakeys is a set of keys that an associated htmlmediaelement can use for decryption of media data during playback. htmlmediaelement.mozaudiocaptured read only returns a boolean. related to audio stream capture. htmlmediaelement.mozfragmentend is a double that provides access to the fragment end time if the media element has a fragment uri for currentsrc, otherwise it is equal to the media duration. htmlmediaelement.mozframebufferlength is a unsigned long that indicates the number of samples that will be returned in the framebuffer of each mozaudioavailable event. this number is a total for all channels, and by default is set to be the number of channels * 1024 (e.g., 2 channels * 1024 samples = 2048 total). the mozframebufferlength pro...
... the media is in the process of seeking to a new position. htmlmediaelement.sinkid read only returns a domstring that is the unique id of the audio device delivering output, or an empty string if it is using the user agent default. this id should be one of the mediadeviceinfo.deviceid values returned from mediadevices.enumeratedevices(), id-multimedia, or id-communications. htmlmediaelement.src is a domstring that reflects the src html attribute, which contains the url of a media resource to use. htmlmediaelement.srcobject is a mediastream representing the media to play or that has played in the current htmlmediaelement, or null if not assigned. htmlmediaelement.texttracks read only returns the list of texttrack objects contained in the element. htmlmediaelement.videotracks read ...
...And 2 more matches

Recording a media element - Web APIs
reach() to call mediastreamtrack.stop() on each track in the stream. ...
... preview.srcobject = stream; downloadbutton.href = stream; preview.capturestream = preview.capturestream || preview.mozcapturestream; return new promise(resolve => preview.onplaying = resolve); }).then(() => startrecording(preview.capturestream(), recordingtimems)) .then (recordedchunks => { let recordedblob = new blob(recordedchunks, { type: "video/webm" }); recording.src = url.createobjecturl(recordedblob); downloadbutton.href = recording.src; downloadbutton.download = "recordedvideo.webm"; log("successfully recorded " + recordedblob.size + " bytes of " + recordedblob.type + " media."); }) .catch(log); }, false); when a click event occurs, here's what happens: lines 2-4 navigator.mediadevices.getusermedia() is called to request a new...
...e + " bytes of " + recordedblob.type + " media."); }) .catch(log); }, false); when a click event occurs, here's what happens: lines 2-4 navigator.mediadevices.getusermedia() is called to request a new mediastream that has both video and audio tracks. this is the stream we'll record. lines 5-9 when the promise returned by getusermedia() is resolved, the preview <video> element's srcobject property is set to be the input stream, which causes the video being captured by the user's camera to be displayed in the preview box. since the <video> element is muted, the audio won't play. the "download" button's link is then set to refer to the stream as well. then, in line 8, we arrange for preview.capturestream() to call preview.mozcapturestream() so that our code will work on firefo...
...And 2 more matches

WebGLRenderingContext.bufferSubData() - Web APIs
possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. ...
...possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. ...
...possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. ...
...And 2 more matches

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
origin <iframe> should be allowed to invoke the payment request api. this attribute is considered a legacy attribute and redefined as allow="payment". csp a content security policy enforced for the embedded resource. see htmliframeelement.csp for details. height the height of the frame in css pixels. default is 150. importance the download priority of the resource in the <iframe>'s src attribute. allowed values: auto (default) no preference. the browser uses its own heuristics to decide the priority of the resource. high the resource should be downloaded before other lower-priority page resources. low the resource should be downloaded after other higher-priority page resources. loading indicates how the browser should load the iframe: eager: load the i...
...ndbox attribute — making it no more secure than not using the sandbox attribute at all. sandboxing is useless if the attacker can display content outside a sandboxed iframe — such as if the viewer opens the frame in a new tab. such content should be also served from a separate origin to limit potential damage. the sandbox attribute is unsupported in internet explorer 9 and earlier. ...
... such as if the viewer opens the frame in a new tab. such content should be also served from a separate origin to limit potential damage. the sandbox attribute is unsupported in internet explorer 9 and earlier. src the url of the page to embed. use a value of about:blank to embed an empty page that conforms to the same-origin policy. also note that programatically removing an <iframe>'s src attribute (e.g. via element.removeattribute()) causes about:blank to be loaded in the frame in firefox (from version 65), chromium-based browsers, and safari/ios. srcdoc inline html to embed, overriding the src attribute. if a browser does not support the srcdoc attribute, it will fall back to the url in the src attribute. width the width of the frame in css pixels. default is 300. deprecat...
...And 2 more matches

<source>: The Media or Image Source element - HTML: Hypertext Markup Language
edia query of the resource's intended media; this should be used only in a <picture> element. sizes is a list of source sizes that describes the final rendered width of the image represented by the source. each source size consists of a comma-separated list of media condition-length pairs. this information is used by the browser to determine, before laying the page out, which image defined in srcset to use. please note that sizes will have its effect only if width dimension descriptors are provided with srcset instead of pixel ratio values (200w instead of 2x for example). the sizes attribute has an effect only when the <source> element is the direct child of a <picture> element. src required for <audio> and <video>, address of the media resource. the value of this attribute is igno...
...each string is composed of: one url specifying an image. a width descriptor, which consists of a string containing a positive integer directly followed by "w", such as 300w. ...
...e floating number directly followed by "x". the default value, if missing, is 1x. each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. among the list, there must be only one string containing the same tuple of width descriptor and pixel density descriptor. the browser chooses the most adequate image to display at a given point of time. the srcset attribute has an effect only when the <source> element is the direct child of a <picture> element. type the mime media type of the resource, optionally with a codecs parameter. if the type attribute isn't specified, the media's type is retrieved from the server and checked to see if the user agent can handle it; if it can't be rendered, the next <source> is checked. if the type attribute...
...And 2 more matches

<track>: The Embed Text Track element - HTML: Hypertext Markup Language
video content. suitable for users who are blind or where the video cannot be seen. chapters chapter titles are intended to be used when the user is navigating the media resource. metadata tracks used by scripts. not visible to the user. label a user-readable title of the text track which is used by the browser when listing available text tracks. ...
... visible to the user. label a user-readable title of the text track which is used by the browser when listing available text tracks. src address of the track (.vtt file). must be a valid url. this attribute must be specified and its url value must have the same origin as the document — unless the <audio> or <video> parent element of the track element has a crossorigin attribute. srclang language of the track text data. it must be a valid bcp 47 language tag. if the kind attribute is set to subtitles, then srclang must be defined. usage notes track data types the type of data that track adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata. the element points to a source file containing timed text...
...must be defined. usage notes track data types the type of data that track adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata. the element points to a source file containing timed text that the browser exposes when the user requests additional data. a media element cannot have more than one track with the same kind, srclang, and label. detecting cue changes the underlying texttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed. this happens even if the track isn't associated with a media element. if the track is associated with a media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also se...
...And 2 more matches

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 the debugger server the developer too...
... { mypanel: mypanel } }); panel document environment the panel document loaded from the url property can of course include css and javascript just like a normal web page: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id="content"></div> </body> <script src="./my-panel.js"></script> </html> it doesn't have access to any privileged apis, including the add-on sdk apis. 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 the debugger server the developer tools are targeting. communicating with the panel document the main add-on code can't directly access the panel docu...
...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. ...
...tocol. we're still working on documenting exactly which messages are supported by volcan.js. to use volcan.js, you can just include it from your panel's html like this: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id = "content"></div> </body> <script src="./my-panel.js"></script> </html> here's a script that uses volcan.js to get the selected tab and display its url: // my-panel.js var content = document.getelementbyid("content"); window.addeventlistener("message", function(event) { var debuggee = event.ports[0]; volcan.connect(debuggee). then(listtabs). then(writetablist); }); function listtabs(root) { return root.listtabs(); ...

Setting Up a Development Environment - Archive of obsolete content
window, run "make -ver", and get the installed version of make as output. we recommend you set up make in your system, since our examples come with all the necessary files to build and install the resulting xpi using this tool. it will save you some packaging time. or you can create an equivalent system using batch, ant or whatever you prefer. ultimately you can just compress the contents of the src directory using any zip or archive tool and get a similar result. build system let's start by downloading the project used to build the second version of hello world, from the exercise in the last section. hello world 2 project. unzip the file anywhere you want. inside the helloworld2 directory, you'll see two directories: bin and src. the bin directory should be empty. this is where all the ...
...from the exercise in the last section. hello world 2 project. unzip the file anywhere you want. inside the helloworld2 directory, you'll see two directories: bin and src. the bin directory should be empty. this is where all the resulting build files will be created, and where you'll find the extension xpi file once you get it to build. open the project file (helloworld2.komodoproject) from the src directory in komodo edit. in the projects tab you should be able to see the directory structure inside the src directory. this structure should be familiar, as it is almost identical to the unpacked xpi from the previous section. the only notable additions is a file named makefile under src. this is the file that make uses to build the xpi. you should take some time to read it and understand it,...
...s you'll only need to change the first lines in makefile. these define the extension name, the extension id (as specified in install.rdf) and the name of the profile directory where the extension will be installed during development and testing. more about this further ahead. let's try and build the xpi from the command line first. open the command line program in your system and navigate to the src directory in your project. run the following command: make that's it. if everything went well, you should see an output similar to this: creating xpi file. adding: install.rdf (deflated 50%) adding: chrome.manifest (deflated 50%) adding: content/browseroverlay.js (deflated 42%) adding: content/browseroverlay.xul (deflated 69%) adding: skin/browseroverlay.css (stored 0%) addin...
...he xulschoolhello2.xpi file. if you run make again, you'll only see the last line of the build process. that is because make can tell that the file in the bin directory is up to date, and nothing needs to be done. making changes on source files will make make run the necessary steps to build the xpi again. you can clean up the bin directory by just running the following command (again, from the src directory): make clean you can also run these commands from komodo. click on tools > run command.... in the "run" textbox you should type this: bash -c "make" or replace "make" with "make clean" for the clean command. the "bash -c" part forces komodo to use bash, which for some reason can't be set properly as the default command shell. it isn't necessary to add this, but it's better...

Drag and Drop Example - Archive of obsolete content
and simpler api. an example of implementing drag and drop will be implemented in this section. dragging elements around here, we'll create a simple board where items from a palette can be dragged onto the board. the user can click on one of several xul elements on the palette and drag it onto a stack element to create an element of a particular type. first, we'll add the wrapper scripts: <script src="chrome://global/content/nsdraganddrop.js"/> <script src="chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> an additional script file dragboard.js is included which will contain the code we will write ourselves. the board will be created using a stack element. we'll use some style properties to set the width and height of the stack. a maximum size is also specified so tha...
... using text is that if the text from an external drag just happens to be set to button, a button will be created on the board. a custom type means that the board will only accept drags from the palette. ...
...happens to be set to button, a button will be created on the board. a custom type means that the board will only accept drags from the palette. ...
... board. a custom type means that the board will only accept drags from the palette. ...

Introducing the Audio API extension - Archive of obsolete content
ls: number of channels mozsamplerate: sample rate per second mozframebufferlength: number of samples collected in all channels this information is needed later to decode the audio data stream. ...
...r. for example, for a two-channel signal: channel1-sample1 channel2-sample1 channel1-sample2 channel2-sample2 channel1-sample3 channel2-sample3. ...
...content scripts can specify the audio stream's characteristics, then write audio samples. users must create an audio object and then use the mozsetup() function to specify the number of channels and the frequency (in hz). for example: // create a new audio element var audiooutput = new audio(); // set up audio element with 2 channel, 44.1khz audio stream. audiooutput.mozsetup(2, 441...
...osition moved? autolatency = false; } processing an audio stream since the mozaudioavailable event and the mozwriteaudio() method both use float32array values, it is possible to take the output of one audio stream and pass it directly (or process first and then pass) to a second. the first audio stream needs to be muted so that only the second audio element is heard. <audio id="a1" src="song.ogg" controls> </audio> <script> var a1 = document.getelementbyid('a1'), a2 = new audio(), buffers = []; function loadedmetadata() { // mute a1 audio. a1.volume = 0; // setup a2 to be identical to a1, and play through there. a2.mozsetup(a1.mozchannels, a1.mozsamplerate); } function audioavailable(event) { // write the current framebuffer var framebuffer = event.

File.windowsShortcut - Archive of obsolete content
file.windowsshortcut in this example, the windowsshortcut method is used to add a shortcut in the program directory ("program" is a keyword for the directory in which the program itself is installed, for example, c:\program files\netscape\netscape 6\" on windows) to windows software (misc.exe) that is installed in the "windows" directory. ...
...r the directory in which the program itself is installed, for example, c:\program files\netscape\netscape 6\" on windows) to windows software (misc.exe) that is installed in the "windows" directory. ...
... in which the program itself is installed, for example, c:\program files\netscape\netscape 6\" on windows) to windows software (misc.exe) that is installed in the "windows" directory. ...
...ed, for example, c:\program files\netscape\netscape 6\" on windows) to windows software (misc.exe) that is installed in the "windows" directory. ...

refreshPlugins - Archive of obsolete content
this method in an installation script, as the example below demonstrates, you can install new plug-ins and use them to display the requested media in a web page without interrupting the experience of the user. note that refreshplugins must be called after the performinstall method that initiates the actual installation. ...
...ript, as the example below demonstrates, you can install new plug-ins and use them to display the requested media in a web page without interrupting the experience of the user. note that refreshplugins must be called after the performinstall method that initiates the actual installation. ...
...hat refreshplugins must be called after the performinstall method that initiates the actual installation. ...
...t be called after the performinstall method that initiates the actual installation. ...

Adding Event Handlers - Archive of obsolete content
ton, the cancel button and to handle each menu command. we write this using javascript functions much in the same way as html. you can use the script element to include scripts in xul files. you can embed the script code directly in the xul file in between the opening and closing script tags but it is much better to include code in a separate file as the xul window will load slightly faster. ...
...ghtly faster. the src attribute is used to link in an external script file. our find files example let's add a script to the find file dialog. although it does not matter what the script file is called, usually it would be the same as the xul file with a .js extension. in this case, findfile.js will be 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. you may use relative or absolute urls. ...
... by default the javascript console only shows errors from web content. ...
...e'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. you may use relative or absolute urls. for example, you may use urls of the following form: <script src="findfile.js"/> <script src="chrome://findfiles/content/help.js"/> <script src="http://www.example.com/js/items.js"/> this tutorial does not attempt to describe how to use javascript (except as related to event handling) as this is a fairly large topic and there are plenty of other resources that are available for this. by default the javascript console only shows errors from web content. to show errors in chrome javascr...

Using Remote XUL - Archive of obsolete content
display in our web browser, even though there's nothing to see yet. source | rendered step 2: an iframe for displaying the web site content now that we have a basic xul document, we need a way to display pages from the mozilla.org web site. for that we'll use a xul iframe element. <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <iframe src="https://www.mozilla.org/" flex="1" /> </window> the xul iframe element is just like its html counterpart: it defines an area within which web content can be displayed. its src attribute contains the url of the page being displayed in the iframe. we set this value to the mozilla.org home page by default so that page loads into the iframe when we first load the xul document. the iframe's flex a...
... function when pressed, so we'll use the button element for those. <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="the mozilla organization" /> <menu label="developer docs" /> <menu label="testing" /> <menu label="tools" /> <button label="faq" /> <button label="search" /> </menubar> <iframe src="https://www.mozilla.org/" flex="1" /> </window> the menubar element is a container for a series of menus. it can also contain other elements. it serves to group menus together into a single horizontal bar like the one you see at the top of many desktop applications. the menu element defines a pull-down menu, and the button element defines a pressable button. both menus and buttons take a label...
...it represents the rectangular box that appears when you click a menu title. the menuitem element represents a selectable item within the popup. its label attribute contains the text to display in the item. its value attribute, while defined in the xul specification, has no specific function in ...
...</window> the code to load the urls is simple. first we write an event handler function that receives an event, extracts a url from the value attribute of the element where the event occurred (a.k.a. the target element), and loads the url in the iframe. we add an id attribute to the iframe element so we can reference it from our function, and we add an oncommand...

image - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] summary an element that displays an image, much like the html img element. 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. ...
...an 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. attributes onerror, onload, src, validate properties accessibletype, src style classes alert-icon, error-icon, message-icon, question-icon examples <image src='firefoxlogo.png' width='135' height='130'/> attributes onerror type: script code this event is sent to an image element when an error occurs loading the image. image.onload type: script code this event handler will be called on the imag...
...-icon, question-icon examples <image src='firefoxlogo.png' width='135' height='130'/> attributes onerror type: script code this event is sent to an image element when an error occurs loading the image. image.onload type: script code this event handler will be called on the image element when the image has finished loading. this applies whether the image is applied via the src attribute or the list-style-image style property. if you change the image, the event will fire again when the new image loads. this event will not bubble up 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 ...
...mage frequently. the following values are accepted, or leave out the attribute entirely 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 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, , , , , sta...

Web fonts - Learn web development
u to specify font files to be downloaded along with your website as it is accessed, meaning that any browser that supports web fonts can have exactly the fonts you specify available to it. amazing! the syntax required looks something like this: first of all, you have a @font-face block at the start of the css, which specifies the font file(s) to download: @font-face { font-family: "myfont"; src: url("myfont.woff"); } below this you can then use the font family name specified inside @font-face to apply your custom font to anything you like, as normal: html { font-family: "myfont", "bitstream vera serif", serif; } the syntax does get a bit more complex than this; we'll go into more detail below. there are two important things to bear in mind about web fonts: browsers support diff...
...into your css as appropriate, to apply the custom fonts to your html. note: you can find a completed version at google-font.html and google-font.css, if you need to check your work against ours (see it live). @font-face in more detail let's explore that @font-face syntax generated for you by fontsquirrel. ...
...ustom fonts to your html. note: you can find a completed version at google-font.html and google-font.css, if you need to check your work against ours (see it live). @font-face in more detail let's explore that @font-face syntax generated for you by fontsquirrel. ...
...le: normal; } this is referred to as "bulletproof @font-face syntax", after a post by paul irish from early on when @font-face started to get popular (bulletproof @font-face syntax). let's go through it to see what it does: font-family: this line specifies the name you want to refer to the font as. you can put this as anything you like, as long as you use it consistently throughout your css. src: these lines specify the paths to the font files to be imported into your css (the url part), and the format of each font file (the format part). the latter part in each case is optional, but it is useful to declare it because it allows browsers to find a font they can use faster. multiple declarations can be listed, separated by commas — the browser will search through them and use the first o...

HTML basics - Learn web development
open and close correctly so that they are clearly inside or outside one another. if they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. so don't do it! empty elements some elements have no content and are called empty elements. take the <img> element that we already have in our html page: <img src="images/firefox-icon.png" alt="my test image"> this contains two attributes, but there is no closing </img> tag and no inner content. this is because an image element doesn't wrap content to affect it. its purpose is to embed an image in the html page in the place it appears. anatomy of an html document that wraps up the basics of individual html elements, but they aren't handy on their own. n...
...ps up the basics of individual html elements, but they aren't handy on their own. now we'll look at how individual elements are combined to form an entire html page. let's revisit the code we put into our index.html example (which we first met in the dealing with files article): <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <img src="images/firefox-icon.png" alt="my test image"> </body> </html> here, we have the following: <!doctype html> — the doctype. it is required preamble. in the mists of time, when html was young (around 1991/92), doctypes were meant to act as links to a set of rules that the html page had to follow to be considered good html, which could mean automatic error checking and other useful things. h...
...ears in the browser tab the page is loaded in. it is also used to describe the page when you bookmark/favourite it. <body></body> — the <body> element. this contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks or whatever else. images let's turn our attention to the <img> element again: <img src="images/firefox-icon.png" alt="my test image"> as we said before, it embeds an image into our page in the position it appears. it does this via the src (source) attribute, which contains the path to our image file. we have also included an alt (alternative) attribute. in this attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons: ...
...ribute. in this attribute, you specify descriptive text 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 ...

HTML Cheatsheet - Learn web development
ly as much width as they need in a page and fit together horizontally like words in a sentence or books shelved side-by-side in a row.all inline elements can be implemented within the <body></body> tags. ...
...he user, such as: published on 23-05-2020 text displayed in code format <p>this text is in normal format.</p> <code>this text is in code format.</code> <pre>this text is in predefined format.</pre> this text is in normal format. this text is in code format. this text is in predefined format. ...
...xt is in code format. this text is in predefined format. embedded audio <audio controls="controls" src="https://udn.realityripple.com/samples/b7/193cb038d0.mp3">your browser does not support the html5 audio element.</audio> your browser does not support the html5 audio element. embedded audio with alternative sources <audio controls="controls"><source src="https://udn.realityripple.com/samples/b7/193cb038d0.mp3" type="audio/mpeg"><source src="https://udn.realityripple.com/samples/f7/14a4179ee6.ogg" type="audio/ogg"> your browser does not support audio. </audio> your browser does not support audio. ...
... block elements "block elements," on the other hand, take up the entire width of a webpage. ...

Choosing the right approach - Learn web development
"callback hell"). failure callbacks need to be called once for each level of nesting, whereas with promises you can just use a single .catch() block to handle the errors for the entire chain. async callbacks just aren't very gr...
...if you nest a number of promises, you can end up with similar troubles to callback hell. for example: remotedb.alldocs({ include_docs: true, attachments: true }).then(function (resu...
...onsole.log(values); // store each value returned from the promises in separate variables; create object urls from the blobs let objecturl1 = url.createobjecturl(values[0]); let objecturl2 = url.createobjecturl(values[1]); let desctext = values[2]; // display the images in <img> elements let image1 = document.createelement('img'); let image2 = document.createelement('img'); image1.src = objecturl1; image2.src = objecturl2; document.body.appendchild(image1); document.body.appendchild(image2); // display the text in a paragraph let para = document.createelement('p'); para.textcontent = desctext; document.body.appendchild(para); }); pitfalls if a promise.all() rejects, then one or more of the promises you are feeding into it inside its array parameter must be r...
...this can sometimes result in an extra function wrapper needing to be created, which can be slightly frustrating in some circumstances. but it is worth it most of the time. browser support for async/await is not as good...

Client-side storage - Learn web development
eloads. 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 src="index.js" defer></script> of the source for our finished version, the defer attribute specifies that the contents of the <script> element will not execute until the page has finished loading. storing complex data — indexeddb the indexeddb api (sometimes abbreviated idb) is a complete database system available in the browser in which you can store complex related data, the types of which are...
...ert the video in the ui and then appends them to the page. the most interesting parts of this are those shown below — to actually display our video blobs in a <video> element, we need to create object urls (internal urls that point to the video blobs stored in memory) using the url.createobjecturl() method. ...
...} offline asset storage the above example already shows how to create an app that will store large assets in an indexeddb database, avoiding the need to download them more than once. ...
...bmblob, title) { // create object urls out of the blobs let mp4url = url.createobjecturl(mp4blob); let webmurl = url.createobjecturl(webmblob); ... const video = document.createelement('video'); video.controls = true; const source1 = document.createelement('source'); source1.src = mp4url; source1.type = 'video/mp4'; const source2 = document.createelement('source'); source2.src = webmurl; source2.type = 'video/webm'; ... } offline asset storage the above example already shows how to create an app that will store large assets in an indexeddb database, avoiding the need to download them more than once. this is already a great improvement to the user experience, but there is still one thing missing — the main html, css, and javascript files still need to be dow...

What is JavaScript? - Learn web development
live too). external javascript this works great, but what if we wanted to put our javascript in an external file? let's explore this now. first, create a new file in the same directory as your sample html file. call it script.js — make sure it has that .js filename extension, as that's how it is recognized as javascript. ...
...d parsed. the javascript inside this block will not run until after that event is fired, therefore the error is avoided (you'll learn about events later in the course). in the external example, we use a more modern javascript feature to solve the problem, the defer attribute, which tells the browser to continue downloading the html content once the <script> tag element has been reached. <script src="script.js" defer></script> in this case both the script and the html will load simultaneously and the code will work. note: in the external case, we did not need to use the domcontentloaded event because the defer attribute solved the problem for us. we didn't use the defer solution for the internal javascript example because defer only works for external scripts. an old-fashioned solution ...
... and will execute it as soon as the script finishes downloading. you get no guarantee that scripts will run in any specific order, only that 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.
... have some game data files to load, which will be needed when the game actually begins, but for now you just want to get on with showing the game intro, titles, and lobby, without them being blocked by script loading. scripts loaded using the defer attribute (see below) will run in the order they appear in the page and execute them as soon as the script and content are downloaded: <script defer src="js/vendor/jquery.js"></script> <script defer src="js/script2.js"></script> <script defer src="js/script3.js"></script> all the scripts with the defer attribute will load in the order they appear on the page. so in the second example, we can be sure that jquery.js will load before script2.js and script3.js and that script2.js will load before script3.js. they won't run until the page content h...

Handling common HTML and CSS problems - Learn web development
s> (and other features besides) have natural mechanisms for fallbacks to be added, which work on the same principle as described above. you can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content. ...
...ded, which work on the same principle as described above. you can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content. ...
...e and @supports blocks — if they are not supported, the browser just ignores them. ie conditional comments ie conditional comments are a modified proprietary html comment syntax, which can be used to selectively apply html code to different versions of ie. this has proven to be a very effective mechanism for fixing cross browser bugs. the syntax looks like this: <!--[if lte ie 8]> <script src="ie-fix.js"></script> <link href="ie-fix.css" rel="stylesheet" type="text/css"> <![endif]--> this block will apply the ie-specific css and javascript only if the browser viewing the page is ie 8 or older. lte means "less than or equal to", but you can also use lt, gt, gte, ! for not, and other logical syntax. note: sitepoint's internet explorer conditional comments provides a useful beginner...
... running live, you'll see that it contains two paragraphs, one of which is styled. we've selected the paragraph with p:first-child, which won't work in old versions of ie. now download mootools and selectivizr, and save them in the same directory as your sample html. put the following code into the head of your html document, just before the opening <style> tag: <script type="text/javascript" src="mootools-core-1.6.0.js"></script> <!--[if (gte ie 6)&(lte ie 8)]> <script type="text/javascript" src="selectivizr-min.js"></script> <![endif]--> if you try running this in an old version of ie, it should work fine. handling css prefixes another set of problems comes with css prefixes — these are a mechanism originally used to allow browser vendors to implement their own v...

Simple Sunbird build
change to a directory 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 # unreliable 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 ...
...ectory... # use this only if not on windows! parallel compilation on windows is # unreliable 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 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...
... 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 above (you can do the addition before running make for the first time). this will build the lightning extension into src/../objdir-sb/mozilla/dist/xpi-stage/. see this section for information on how to easily integrate lightning into a nightly version of thunderbird. how to build again later in your comm-central directory, run these commands: # get the latest source python client.py checkout then just re-run the "make -f client.mk" command above. make will only recompile files that changed, but it's still a long ...
... client.py checkout 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. ...

Eclipse CDT
header (eclipse bug 380511). this is responsible for most of the parse errors in the source files displayed in eclipse. one problem with the "parse once" strategy is that the compiler options for the original source file may ifdef out sections of the header, that would not be ifdef'ed out - and in fact are required by - source files in other parts of the tree. ...
...f out sections of the header, that would not be ifdef'ed out - and in fact are required by - source files in other parts of the tree. for example, in content/svg/content/src/nssvgellipseelement.cpp eclipse shows a parse error due to ns_dom_interface_map_entry_classinfo not being defined. ...
...fdef'ed out - and in fact are required by - source files in other parts of the tree. for example, in content/svg/content/src/nssvgellipseelement.cpp eclipse shows a parse error due to ns_dom_interface_map_entry_classinfo not being defined. this define is in nsdomclassinfoid.h, which is included via the following include chain: content/svg/content/src/nssvgellipseelement.cpp content/svg/content/src/nssvgpathgeometryelement.h content/svg/content/src/nssvggraphicelement.h content/svg/content/src/nssvgstylableelement.h content/svg/content/src/nssvgelement.h content/base/src/nsgenericelement.h obj-debug/dist/include/nsdomclassinfoid.h in nsdomclassinfoid.h the ns_dom_interface_map_entry_classinfo define is behind an |ifdef _impl_ns_layout|. the properties for nssvgellipsee...
...ne is behind an |ifdef _impl_ns_layout|. the properties for nssvgellipseelement.cpp show that this define was picked up by the build option discovery and set on nssvgellipseelement.cpp, but somehow it's not set for nsdomclassinfoid.h. however, if you right click on nsdomclassinfoid.h in the project explorer and select "index > create parser log file", the log shows "context" is set to "accessible/src/base/accevent.cpp", not "content/svg/content/src/nssvgellipseelement.cpp", and if you check the properties for accevent.cpp, indeed it is not built with the _impl_ns_layout define. one way to mitigate this problem is to explicitly define defines on problem directories. for example, to solve the _impl_ns_layout issue described above, you would use the context menu for the 'layout' directory in th...

Getting SpiderMonkey source code
nkey source code from mercurial the mercurial repository at https://hg.mozilla.org/mozilla-central/ hosts the latest spidermonkey sources. mercurial is also known as hg. the following command line downloads the entire mozilla repository, including the full change history and a lot of gecko and firefox source code that isn't part of spidermonkey. it also changes to the spidermonkey directory (js/src). hg clone https://hg.mozilla.org/mozilla-central/ cd js/src to avoid getting the full change history, click the zip or gz links at https://hg.mozilla.org/index.cgi/mozilla-central/file/tip. this fetches a snapshot of the current mozilla tree. if you have problems with the instructions above, you can read the full details of using mercurial to get mozilla code here. that page also contains li...
...e here. that page also contains links to several bundles, which can be useful if you have a poor network connection. getting the latest spidermonkey source code from git the following command line downloads the entire mozilla repository, including the full change history and a lot of gecko and firefox source code that isn't part of spidermonkey. it also changes to the spidermonkey directory (js/src). git clone https://github.com/mozilla/gecko-dev.git cd gecko-dev/js/src if you want a faster (about 5 times as of january 2015) download, try doing a shallow clone (no version control history). git clone --depth 1 https://github.com/mozilla/gecko-dev.git if you have any problems check the https://wiki.mozilla.org/github page. getting older spidermonkey sources from cvs note: you will nee...
...cd into the base directory you'd like to check out the code into, then enter the following command at your command line: cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot login when prompted, enter the password anonymous. once you've logged in, cd into the root of your cvs tree and enter the following command: cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -l mozilla/js/src mozilla/js/src/config mozilla/js/src/editline mozilla/js/src/fdlibm this checks out all the files needed in order to build the javascript shell. if you also want the regression tests, add this command: cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/js/tests getting older branch versions of spidermonkey if you want to experiment with a specific branch's version of spid...
...rc/editline mozilla/js/src/fdlibm this checks out all the files needed in order to build the javascript shell. if you also want the regression tests, add this command: cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/js/tests getting older branch versions of spidermonkey if you want to experiment with a specific branch's version of spidermonkey, you need to check out js/src from branch but check out editline and config from trunk: cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -l -r branch_name mozilla/js/src mozilla/js/src/fdlibm cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -l mozilla/js/src/config mozilla/js/src/editline change branch_name to the name of the branch you want to check out. you can use a javascript branch name (e.g. j...

JS::Compile
this article covers features introduced in spidermonkey 17 compile a script for execution. ...
...ons &options, file *file, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlescript script); // obsolete since jsapi 39 bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js::mutableha...
... name type description cx jscontext * pointer to 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. obj js::handleobject the global object, or null. obsolete since jsapi 39 options js::readonlycompileoptions &amp; compile options. srcbuf js::sourcebufferholder &amp; source buffer containing the script to compile. chars const char16_t * string containing the script to compile. bytes const char * string containing the script to compile. length size_t the length of chars or bytes, in characters. file file * file handle containing the function. filename ...
...the length of chars or bytes, in characters. file file * file handle containing the function. filename const char * name of file or url containing the function. used to report filename or url in error messages. script js::mutablehandlescript out parameter. on success, script receives the result script. description js::compile compiles a script, srcbuf, chars, bytes, or file, for execution. the script is associated with a js object. srcbuf, chars, bytes is the string containing the text of the script. length indicates the size of the text version of the script in characters. file is the filehandle containing the text of the script. filename is the name of the file (or url) containing the script. this information is included in error messa...

JS::Evaluate
this article covers features introduced in spidermonkey 17 compile and execute a script. ...
...e rval); bool js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const readonlycompileoptions &options, const char16_t *chars, size_t length, js::mutablehandlevalue rval); // added in spidermonkey 17 bool js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char16_t *chars, si...
... obj js::handleobject the scope in which to execute the script. this parameter is documented in detail at js_executescript. obsolete since jsapi 39 scopechain js::autoobjectvector &amp; the scope in which to execute the script. this parameter is documented in detail at js_executescript. options js::readonlycompileoptions &amp; compile options. srcbuf js::sourcebufferholder &amp; source buffer containing the script to compile and execute. chars const char16_t * string containing the script to compile and execute. bytes const char * string containing the script to compile and execute. length size_t the length of chars or bytes, in characters. filename const char * name of file...
...gth of chars or bytes, in characters. filename const char * name of file or url containing the script. used to report filename or url in error messages. rval js::mutablehandlevalue out parameter. on success, if rval is not null, *rval receives the result value. description js::evaluate compiles and executes a script in the specified scope, obj or scopechain. srcbuf, chars and bytes are the string containing the text of the script. length indicates the size of the text version of the script in characters. filename is the name of the file (or url) containing the script. this information is used in messages if an error occurs during compilation. rval is an optional out parameter. if it is non-null, then on success, the result value is stored in *rval. thi...

JS_EvaluateScriptForPrincipals
obsolete since jsapi 30this 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. compile and execute a security-enabled script. ...
...me. try to avoid using it. compile and execute a security-enabled script. ...
...xt * the context in which to run the script. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * the scope in which to execute the script. this parameter is documented in detail at js_executescript. principals jsprincipals * pointer to the structure holding the security information for this script. src / bytes / chars const char * or const jschar string containing the script to compile and execute. length unsigned int the length of src, in characters. filename const char * name of file or url containing the script. used to report filename or url in error messages. lineno unsigned int line number. used to report the offending line in the file or...
...tement in the script. version jsversion javascript version for the script. description js_evaluatescriptforprincipals compiles and executes a script in the specified scope, obj. js_evaluateucscriptforprincipals is the unicode version of the function. principals is a pointer to the jsprincipals structure that contains the security information to associate with this script. src is the string containing the text of the script. length is the length of the script, in characters. filename is the name of the file (or url) containing the script. this information is used in messages if an error occurs during compilation. similarly, lineno is used to report the line number of the script or file where an error occurred during compilation. if the script compiles and executes su...

nsIParserUtils
bird 14.0 / seamonkey 2.11) warning: do not use this from within gecko--use nscontentutils, nstreesanitizer, and so on directly instead. ...
...parserutils;1"] .getservice(components.interfaces.nsiparserutils); method overview astring converttoplaintext(in astring src, in unsigned long flags, in unsigned long wrapcol); nsidomdocumentfragment parsefragment(in astring fragment, in unsigned long flags, in boolean isxml, in nsiuri baseuri, in nsidomelement element); astring sanitize(in astring src, in unsigned long flags); constants constant value description sanitizerallowcomments (1 << 0) flag for sanitizer: allow comment nodes. sanitizerallowstyle (1 << 1) flag for sanitizer: allow <style> elements and style attributes (with contents sanitized in case of -moz-binding). note: if -moz-binding is absent, properties that might b...
...ding <fieldset> and <legend>. sanitizerdropmedia (1 << 5) flag for sanitizer: drops <img>, <video>, <audio>, and <source>, and flattens out svg. sanitizerlogremovals (1 << 6) flag for sanitizer: log messages to the console for everything that gets sanitized. methods converttoplaintext() converts html to plain text. astring converttoplaintext( in astring src, in unsigned long flags, in unsigned long wrapcol ); parameters src the html source to parse (c++ callers are allowed but not required to use the same string for the return value.) flags conversion option flags defined in nsidocumentencoder. wrapcol number of characters per line; 0 for no auto-wrapping. return value the plain text conversion of the html specified in src. parsefr...
...inding is removed from <style> elements and style attributes if present. in this case, properties that gecko doesn't recognize can get removed as a side effect. note: if -moz-binding is not present, <style> elements and style attributes, and if sanitizerallowstyle is specified, the sanitized content may still be xss dangerous if loaded into a non-gecko web engine! astring sanitize( in astring src, in unsigned long flags ); parameters src the html source to parse (c++ callers are allowed but not required to use the same string for the return value). flags sanitization option flags defined above. return value the resulting text. ...

Creating a Custom Column
unfortunately the new column doesn't have any data in it and it doesn't react to sort clicks on it... yet. the column handler now that our column physically exists it's time to give it a bit of personality. the nsimsgcustomcolumnhandler interface to handle a column we need t...
...tions from both. the following is a list of functions that must be implemented to ensure that your extension works well with thunderbird. rest assured that these functions will be called - so implement them, even with empty function. ...
... putting the pieces together we now have our column and our handler object...
...dler("colreplyto", columnhandler); } wrap up as you have seen it is quite easy to add your own custom column handler. most of the dirty tasks (displaying and sorting) are done for you in the background - so that all that's left to you, the extension developer is to populate the code with your feature. don't forget that columns aren't restricted to text - they can also load images (via getimagesrc()) so that your extension can display a new visual cue to the user. as you develop your custom extension, please revisit this article and add any helpful hints that you find along the way! caveats some weird behaviors have been witnessed, namely failing to be notified of the msgcreatedbview event when enigmail is installed [protz]. what happens is: usually, the event sequence is: jsm load -...

Basic animations - Web APIs
per second and may be reduced to a lower rate when running in background tabs. for more information about the animation loop, especially for games, see the article anatomy of a video game in our game development zone. an animated solar system this example animates a small model of our solar system. ...
...d tabs. for more information about the animation loop, especially for games, see the article anatomy of a video game in our game development zone. an animated solar system this example animates a small model of our solar system. ...
...es, see the article anatomy of a video game in our game development zone. an animated solar system this example animates a small model of our solar system. ...
...width="150" height="150"></canvas> screenshotlive sample a looping panorama in this example, a panorama is scrolled left-to-right. we're using an image of yosemite national park we took from wikipedia, but you could use any image that's larger than the canvas. var img = new image(); // user variables - customize these to change the image being scrolled, its // direction, and the speed. ...

HTMLIFrameElement - Web APIs
a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmliframeelement.align is a domstring that specifies the alignment of the frame with respect to the surrounding context. htmliframeelement.allow is a list of origins the the frame is allowed to display content from. this attribute also accepts the values self and src which represent the origin in the iframe's src attribute. the default value is src. htmliframeelement.allowfullscreen is a boolean indicating whether the inline frame is willing to be placed into full screen mode. see using full-screen mode for details. htmliframeelement.allowpaymentrequest is a boolean indicating whether the payment request api may be invoked inside a cross-origin iframe. ...
...rerpolicy html attribute indicating which referrer to use when fetching the linked resource. htmliframeelement.sandbox is a domsettabletokenlist that reflects the sandbox html attribute, indicating extra restrictions on the behavior of the nested content. htmliframeelement.scrolling is a domstring that indicates whether the browser should provide scrollbars for the frame. ...
...ich referrer to use when fetching the linked resource. htmliframeelement.sandbox is a domsettabletokenlist that reflects the sandbox html attribute, indicating extra restrictions on the behavior of the nested content. htmliframeelement.scrolling is a domstring that indicates whether the browser should provide scrollbars for the frame. htmliframeelement.src is a domstring that reflects the src html attribute, containing the address of the content to be embedded. note that programatically removing an <iframe>'s src attribute (e.g. via element.removeattribute()) causes about:blank to be loaded in the frame in firefox (from version 65), chromium-based browsers, and safari/ios. htmliframeelement.srcdoc is a domstring that represents the content to display in the frame. htmliframeelement...
...dardthe definition of 'htmliframeelement' in that specification. living standard the following property has been added: allowfullscreen. html5the definition of 'htmliframeelement' in that specification. recommendation the following properties are now obsolete: scrolling, marginwidth, marginheight, longdesc, frameborder, and align. the following properties have been added: srcdoc, sandbox, and contentwindow. document object model (dom) level 2 html specificationthe definition of 'htmliframeelement' in that specification. obsolete the contentdocument property has been added. document object model (dom) level 1 specificationthe definition of 'htmliframeelement' in that specification. obsolete initial definition. ...

HTMLMediaElement: abort event - Web APIs
the abort event is fired when the resource was not fully loaded, but not as the result of an error. ...
...event is fired when the resource was not fully loaded, but not as the result of an error. ...
...error. ...
... bubbles no cancelable no interface event event handler property onabort examples const video = document.queryselector('video'); const videosrc = 'https://path/to/video.webm'; video.addeventlistener('abort', () => { console.log(`abort loading: ${videosrc}`); }); const source = document.createelement('source'); source.setattribute('src', videosrc); source.setattribute('type', 'video/webm'); video.appendchild(source); specifications specification status html living standard living standard html5 recommendation ...

HTMLMediaElement: error event - Web APIs
the error event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem). ...
...urce could not be loaded due to an error (for example, a network connectivity problem). ...
...n error (for example, a network connectivity problem). ...
...r example, a network connectivity problem). ...

HTMLSourceElement - Web APIs
sourceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlsourceelement.media is a domstring reflecting the media html attribute, containing the intended type of the media resource. ...
...> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlsourceelement.media is a domstring reflecting the media html attribute, containing the intended type of the media resource. ...
...properties from its parent, htmlelement. htmlsourceelement.media is a domstring reflecting the media html attribute, containing the intended type of the media resource. htmlsourceelement.sizes is a domstring representing image sizes between breakpoints htmlsourceelement.src is a domstring reflecting the src html attribute, containing the url for the media resource. ...
...image sizes between breakpoints htmlsourceelement.src is a domstring reflecting the src html attribute, containing the url for the media resource. the htmlsourceelement.src property has a meaning only when the associated <source> element is nested in a media element that is a <video> or an <audio> element. it has no meaning and is ignored when it is nested in a <picture> element. note: if the src property is updated (along with any siblings), the parent htmlmediaelement's load method should be called when done, since <source> elements are not re-scanned automatically. htmlsourceelement.srcset is a domstring reflecting the srcset html attribute, containing a list of candidate images, separated by a comma (',', u+002c comma). a candidate image is a url followed by a 'w' with the width...

MediaDevices.getUserMedia() - Web APIs
phone for the current origin and the specific origin https://developer.mozilla.org: feature-policy: microphone 'self' https://developer.mozilla.org if you're using getusermedia() within an <iframe>, you can request permission just for that frame, which is clearly more secure than requesting a more general permission. here, indicate we need 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 securely, using https/tls, and has limited exposure to insecure con...
...dia() unless the <iframe> has its sandbox attribute set to allow-same-origin. a document loaded using a data:// or blob:// url which has no origin (such as when one of these urls is typed by the user into the address bar) cannot call getusermedia(). these kinds of urls loaded from javascript code inherit the script's permissions. any other situation in which there is no origin, such as when the srcdoc attribute is used to specify the contents of a frame. examples width and height this example gives a preference for camera resolution, and assigns the resulting mediastream object to a video element. // prefer camera resolution nearest to 1280x720. var constraints = { audio: true, video: { width: 1280, height: 720 } }; navigator.mediadevices.getusermedia(constraints) .then(function(media...
...les width and height this example gives a preference for camera resolution, and assigns the resulting mediastream object to a video element. // prefer camera resolution nearest to 1280x720. var constraints = { audio: true, video: { width: 1280, height: 720 } }; navigator.mediadevices.getusermedia(constraints) .then(function(mediastream) { var video = document.queryselector('video'); video.srcobject = mediastream; video.onloadedmetadata = function(e) { video.play(); }; }) .catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end. using the new api in older browsers here's an example of using navigator.mediadevices.getusermedia(), with a polyfill to cope with older browsers. note that this polyfill does not correct for legacy...
...wser')); } // otherwise, wrap the call to the old navigator.getusermedia with a promise return new promise(function(resolve, reject) { getusermedia.call(navigator, constraints, resolve, reject); }); } } navigator.mediadevices.getusermedia({ audio: true, video: true }) .then(function(stream) { var video = document.queryselector('video'); // older browsers may not have srcobject if ("srcobject" in video) { video.srcobject = stream; } else { // avoid using this in new browsers, as it is going away. video.src = window.url.createobjecturl(stream); } video.onloadedmetadata = function(e) { video.play(); }; }) .catch(function(err) { console.log(err.name + ": " + err.message); }); frame rate lower frame-rates may be desirable in some cases, ...

RTCPeerConnection.addTrack() - Web APIs
set of tracks being sent to the remote peer, with no stream associations. the handler for the track event on the remote peer will be responsible for determining what stream to add each track to, even if that means simply adding them all to the same stream. the ontrack handler might look like this: let inboundstream = null; pc.ontrack = ev => { if (ev.streams && ev.streams[0]) { videoelem.srcobject = ev.streams[0]; } else { if (!inboundstream) { inboundstream = new mediastream(); videoelem.srcobject = inboundstream; } inboundstream.addtrack(ev.track); } } here, the track event handler adds the track to the first stream specified by the event, if a stream is specified. otherwise, the first time ontrack is called, a new stream is created and attached to the ...
...t stream specified by the event, if a stream is specified. otherwise, the first time ontrack is called, a new stream is created and attached to the video element, and then the track is added to the new stream. from then on, new tracks are added to that stream. you could also just create a new stream for each track received: pc.ontrack = ev => { if (ev.streams && ev.streams[0]) { videoelem.srcobject = ev.streams[0]; } else { let inboundstream = new mediastream(ev.track); videoelem.srcobject = inboundstream; } } associating tracks with specific streams by specifying a stream and allowing rtcpeerconnection to create streams for you, the streams' track associations are automatically managed for you by the webrtc infrastructure. this includes things like changes to the transc...
... reused senders this method may return either a new rtcrtpsender or, under very specific circumstances, an existing compatible sender which has not yet been used to transmit data. compatible reusable rtcrtpsender instances meet these criteria: there is no track...
...d when an offer message is received from the remote peer. var mediaconstraints = { audio: true, // we want an audio track video: true // ...and we want a video track }; var desc = new rtcsessiondescription(sdp); pc.setremotedescription(desc).then(function () { return navigator.mediadevices.getusermedia(mediaconstraints); }) .then(function(stream) { previewelement.srcobject = stream; stream.gettracks().foreach(track => pc.addtrack(track, stream)); }) this code takes sdp which has been received from the remote peer and constructs a new rtcsessiondescription to pass into setremotedescription(). once that succeeds, it uses mediadevices.getusermedia() to obtain access to the local webcam and microphone. if that succeeds, the resulting stream is assigned as th...

WebGL constants - Web APIs
ants passed to webglrenderingcontext.blendfunc() or webglrenderingcontext.blendfuncseparate() to specify the blending mode (for both, rbg and alpha, or separately). constant name value description zero 0 passed to blendfunc or blendfuncseparate to turn off a component. one 1 passed to blendfunc or blendfuncseparate to turn on a component. src_color 0x0300 passed to blendfunc or blendfuncseparate to multiply a component by the source elements color. one_minus_src_color 0x0301 passed to blendfunc or blendfuncseparate to multiply a component by one minus the source elements color. src_alpha 0x0302 passed to blendfunc or blendfuncseparate to multiply a component by the source's alpha. one_minus...
... dst_alpha 0x0304 passed to blendfunc or blendfuncseparate to multiply a component by the destination's alpha. ...
...lpha 0x0305 passed to blendfunc or blendfuncseparate to multiply a component by one minus the destination's alpha. dst_color 0x0306 passed to blendfunc or blendfuncseparate to multiply a component by the destination's color. one_minus_dst_color 0x0307 passed to blendfunc or blendfuncseparate to multiply a component by one minus the destination's color. src_alpha_saturate 0x0308 passed to blendfunc or blendfuncseparate to multiply a component by the minimum of source's alpha or one minus the destination's alpha. constant_color 0x8001 passed to blendfunc or blendfuncseparate to specify a constant color blend function. one_minus_constant_color 0x8002 passed to blendfunc or blendfuncseparate to specify one minus a co...
...gb blend function. blend_equation_rgb 0x8009 passed to getparameter to get the current rgb blend function. same as blend_equation blend_equation_alpha 0x883d passed to getparameter to get the current alpha blend function. same as blend_equation blend_dst_rgb 0x80c8 passed to getparameter to get the current destination rgb blend function. blend_src_rgb 0x80c9 passed to getparameter to get the current destination rgb blend function. blend_dst_alpha 0x80ca passed to getparameter to get the current destination alpha blend function. blend_src_alpha 0x80cb passed to getparameter to get the current source alpha blend function. blend_color 0x8005 passed to getparameter to return a the current blen...

Text labels and names - Accessibility
ement an alt attribute containing a name that describes what resources the areas links to. failure to do so makes an image map hard to use for users of assistive technology — they need alternative text to be able to understand the purpose of an image. examples the following example show a simple image map (taken from h24: providing text alternatives for the area elements of image maps): <img src="welcome.gif" usemap="#map1" alt="areas in the library. select an area for more information on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="reference" /> <area shape="rect" coords="34,34,100,100" href="media.html" alt="audio visual lab" /> </map> see the <area> element reference page for a live interactive example. s...
... in the document, which may be different from a simple description of a visual item, as provided by the alternative text. example the following example shows code for a figure with a caption. the alt attribute of the <img> describes the appearance of the image; the <figcaption> describes it from a functional perspective (in this case, the latin name of the flower in the image). <figure> <img src="milkweed.jgp" alt="black and white close-up photo of milkweed flowers"> <figcaption>asclepias verticillata</figcaption> </figure> fieldset elements must be labeled fieldset elements must have a text description, similar to other form elements. use the <legend> element to describe the purpose of a fieldset. use a legend to label a fieldset when grouping a set of form elements together...
...es that the enclosed document is under your control; if not, try to match the frame's title attribute to the document's title.) some screen readers replace the contents of the title attribute with the contents of the enclosed document's <title>. it's safest and most accessible to provide the same title in both places. example <iframe title="mdn web docs" width="300" height="200" src="https://developer.mozilla.org"> </iframe> use alt attribute to label mglyph elements when writing equations with mathml, give each <mglyph> element an alt attribute containing a name that describes the 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 re...
...escriptive text for all contentful (that is, non-decorative) images and image-like elements. this includes svg images, <img>, <canvas>, <map>, and <area> elements, as well as <input> elements where type=image and <object> elements where the type starts with image/. the typical way to do this is with the alt attribute. be sure that the description conveys what is shown in the image. example <img src="milkweed.jgp" alt="black and white close-up photo of milkweed flowers"> interactive elements must be labeled if an element is intended for users to interact with it, it should have a label. interactive elements include links (<a>), form elements, buttons, and any element that has a handler for mouse or keyboard events. the way to label an element depends on its type: for form elements, u...

object-fit - CSS: Cascading Style Sheets
nt is sized as if none or contain were specified, whichever would result in a smaller concrete object size. ...
.... ...
...l syntax fill | contain | cover | none | scale-down examples setting object-fit for an image html <section> <h2>object-fit: fill</h2> <img class="fill" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="fill narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: contain</h2> <img class="contain" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="contain narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: cover</h2> <img class="cover" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="cover narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.p...
...ogo"> <img class="contain narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: cover</h2> <img class="cover" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="cover narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: none</h2> <img class="none" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="none narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: scale-down</h2> <img class="scale-down" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="scale-down narrow" src="https://udn.realityripple.com/samples/ae/...

Adding captions and subtitles to HTML5 video - Developer guides
arkup as mentioned above, we need to make use of the new html5 <track> element to add our subtitle files to the html5 video. ...
...html5 <track> element to add our subtitle files to the html5 video. ...
...titles in three different languages — english, german, and spanish — so we will reference all three of the relevant vtt files by adding <track> elements inside our html5 <video> element: <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <track label="english" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default> <track label="deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"> <track label="español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt"> </video> as you can see, each <track> element has the following attributes set: kind is given a value of subtitles, indicating the type of content the files contai...
... as you can see, each <track> element has the following attributes set: kind is given a value of subtitles, indicating the type of content the files contain label is given a value indicating which language that subtitle set is for — for example english or deutsch — these labels will appear in the user interface to allow the user to easily select which subtitle language they want to see. src is assigned a valid url pointing to the relevant webvtt subtitle file in each case. srclang indicates what language each subtitle files' contents are in. the default attribute is set on the english <track> element, indicating to the browser that this is the default subtitle file definition to use when subtitles have been turned on and the user has not made a specific selection. in addition to...

Web Audio playbackRate explained - Developer guides
the playbackrate property of the <audio> and <video> elements allows us to change the speed, or rate, at which a piece of web audio or video is playing. this article explains playbackrate in detail. ...
...ts allows us to change the speed, or rate, at which a piece of web audio or video is playing. this article explains playbackrate in detail. playbackrate basics let's starting by looking at a brief example of playbackrate usage: var myaudio = document.createelement('audio'); myaudio.setattribute('src','audiofile.mp3'); myaudio.playbackrate = 0.5; here we create an <audio> element, and set its src to a file of our choice. ...
...e.mp3'); myaudio.playbackrate = 0.5; here we create an <audio> element, and set its src to a file of our choice. ...
...a file of our choice. ...

Creating a cross-browser video player - Developer guides
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. ...
...lement 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. ...
...ner. to anyone familiar with html5 markup and the <video> element, there should be nothing here that surprises you. ...
...value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="1024" height="428" title="no video playback possible, please download the video from the link below" /> </object> <!-- offer download --> <a href="video/tears-of-steel-battle-clip-medium.mp4">download mp4</a> </video> <figcaption>&copy; blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figure> even though ...

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
ile. 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 but whose value is submitted to the server. there is an example in the next column, but it's hidden! image a graphical submit button. displays an image defined by the src attribute. the alt attribute displays if the image src is missing. <input type="image" name="image" src="" alt="image input"/> month a control for entering a month and year, with no time zone. <input type="month" name="month"/> html5 number a control for entering a number. displays a spinner and adds default validation when supported. display...
... match to be valid placeholder password, search, tel, text, url text that appears in the form control when it has no value set readonly almost all boolean. the value is not editable required almost all boolean. a value is required or must be check for the form to be submittable size email, password, tel, text size of the control src image same as src attribute for <img>; address of image resource step numeric types incremental values that are valid. type all type of form control value all current value of the form control. submitted with the form as part of a name/value pair. width image same as width attribute for <img> a few additional non-standard at...
... listed following the descriptions of the standard attributes. individual attributes accept valid for the file input type only, the accept attribute defines which file types are selectable in a file upload control. see the file input type. alt valid for the image button only, the alt attribute provides alternative text for the image, displaying the value of the attribute if the image src is missing or otherwise fails to load. see the image input type. autocomplete (not a boolean attribute!) the autocomplete attribute takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. a typical implementation of autocomplete simply recalls previous values entered in the same input field, but more complex forms...
..., password, tel, and text input types only. specifies how much of the input is shown. basically creates same result as setting css width property with a few specialities. the actual unit of the value depends on the input type. for password and text, it is a number of characters (or em units) with a default value of 20, and for others, it is pixels. css width takes precedence over size attribute. src valid for the image input button only, the src is string specifying the url of the image file to display to represent the graphical submit button. see the image input type. step valid for the numeric input types, including number, date/time input types, and range, the step attribute is a number that specifies the granularity that the value must adhere to. if not explicitly included, ...

Content-Security-Policy-Report-Only - HTTP
this header will be an expensive no-op machine. examples this header reports violations that would have occurred. you can use this to iteratively work on your content security policy. you observe how your site behaves, watching for violation reports, or malware redirects, then choose the desired policy enforced by the content-security-policy header. ...
...iolation reports, or malware redirects, then choose the desired policy enforced by the content-security-policy header. content-security-policy-report-only: default-src https:; report-uri /csp-violation-report-endpoint/ if you still want to receive reporting, but also want to enforce a policy, use the content-security-policy header with the report-uri directive. content-security-policy: default-src https:; report-uri /csp-violation-report-endpoint/ violation report syntax the report json object contains the following data: blocked-uri the uri of the resource that was blocked from loading by the content security policy. if the blocked uri is from a different origin than the document-uri, then the blocked uri is truncated to contain just the scheme, host, and port. disposition either ...
...n. status-code the http status code of the resource on which the global object was instantiated. violated-directive the name of the policy section that was violated. 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-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 fr...
...s 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 the document is visited: { "csp-report": { "document-uri": "http://example.com/signup.html", "referrer": "", "blocked-uri": "http://example.com/css/style.css", "violated-directive": "style-src cdn.example.com", "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports", "disposition": "report" } } as you can see, the report includes the full path to the violating resource in blocked-uri. this is not always the case. for example, when the signup.html would attempt to load css from http://anothercdn.example.com/stylesheet.css, the browser wou...

icons - Web app manifests
ype array mandatory yes the icons member specifies an array of objects representing image files that can serve as application icons for different contexts. for example, they can be used to represent the web application amongst a list of other applications, or to integrate the web application with an os's task switcher and/or system preferences. ...
...jects representing image files that can serve as application icons for different contexts. for example, they can be used to represent the web application amongst a list of other applications, or to integrate the web application with an os's task switcher and/or system preferences. ...
...tion icons for different contexts. for example, they can be used to represent the web application amongst a list of other applications, or to integrate the web application with an os's task switcher and/or system preferences. ...
... web application amongst a list of other applications, or to integrate the web application with an os's task switcher and/or system preferences. examples "icons": [ { "src": "icon/lowres.webp", "sizes": "48x48", "type": "image/webp" }, { "src": "icon/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 ...

Web video codec guide - Web media technologies
te, small business web site where videos are used to demonstrate products (but not where the videos themselves are a product), and so forth. a webm container using the vp8 codec for video and the opus codec for audio. these are all open, royalty-free formats which are generally well-supported, although only in quite recent browsers, which is why a fallback is a good idea. <video controls src="filename.webm"></video> an mp4 container and the avc (h.264) video codec, ideally with aac as your audio codec. this is because the mp4 container with avc and aac codecs within is a broadly-supported combination—by every major browser, in fact—and the quality is typically good for most use cases. make sure you verify your compliance with the license requirements, however. <video co...
...ner and the avc (h.264) video codec, ideally with aac as your audio codec. this is because the mp4 container with avc and aac codecs within is a broadly-supported combination—by every major browser, in fact—and the quality is typically good for most use cases. make sure you verify your compliance with the license requirements, however. <video controls> <source type="video/webm" src="filename.webm"> <source type="video/mp4" src="filename.mp4"> </video> keep in mind that the <video> element requires a closing </video> tag, whether or not you have any <source> elements inside it. recommendations for high-quality video presentation if your mission is to present video at the highest possible quality, you will probably benefit from offering as many formats as...
...u're able to use the high or professional profile when encoding av1, at a high level like 6.3, you can get very high bit rates at 4k or 8k resolution, while maintaining excellent video quality. encoding your audio using opus's fullband profile at a 48 khz sample rate maximizes the audio bandwidth captured, capturing nearly the entire frequency range that's within human hearing. <video controls src="filename.webm"></video> an mp4 container using the hevc codec using one of the advanced main profiles, such as main 4:2:2 with 10 or 12 bits of color depth, or even the main 4:4:4 profile at up to 16 bits per component. at a high bit rate, this provides excellent graphics quality with remarkable color reproduction. in addition, you can optionally include hdr metadata to provide high dyna...
...nent. at a high bit rate, this provides excellent graphics quality with remarkable color reproduction. in addition, you can optionally include hdr metadata to provide high dynamic range video. for audio, use the aac codec at a high sample rate (at least 48 khz but ideally 96khz) and encoded with complex encoding rather than fast encoding. <video controls> <source type="video/webm" src="filename.webm"> <source type="video/mp4" src="filename.mp4"> </video> recommendations for archival, editing, or remixing there are not currently any lossless—or even near-lossless—video codecs generally available in web browsers. the reason for this is simple: video is huge. lossless compression is by definition less effective than lossy compression. for example, uncompress...

SVG fonts - SVG: Scalable Vector Graphics
font in svg. let's show an example declaration (the one from the specification), and explain the details. <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="300"><!-- outline of exclam. pt. glyph --></glyph> <glyph unicode="@"><!-- outline of @ glyph --></glyph> <!-- more glyphs --> </font> we start with the <font> element. this bears an id attribute, to enable it t...
...t important to be defined is font-family, the value of which can then be referenced in css and svg font-family properties. the font-weight and font-style attributes have the same purpose as the equivalent descriptors in css. all following attributes are rendering instructions for the font layout engine, for example, how much of the glyphs' overall heights are ascenders. its child, the <font-face-src> element, corresponds to css' src descriptor in @font-face declarations. you can point to external sources for font declarations by means of its children <font-face-name> and <font-face-uri>. the above example states that if the renderer has a local font available named "super sans bold", it should use this instead. following <font-face-src> is a <missing-glyph> element. this defines what should...
...> </font> <text font-family="super sans">my text uses super sans</text> however, you are free to combine several methods for great freedom of how and where to define the font. ...
...o on --> </font> <style type="text/css"> @font-face { font-family: "super sans"; src: url(#super_sans); } </style> <text font-family="super sans">my text uses super sans</text> option: reference a remote font the above mentioned font-face-uri element allows you to reference an external font, hence allowing greater re-usability: <font> <font-face font-family="super sans"> <font-face-src> <font-face-uri xlink:href="fonts.svg#super_sans" /> </font-face-src> </font-face> </font> « previousnext » ...

Compiling from Rust to WebAssembly - WebAssembly
u'd like; this tutorial isn't version-specific. building our webassembly npm package enough setup; let's create a new package in rust. ...
...new library in a subdirectory named hello-wasm with everything you need to get going: +-- cargo.toml +-- src +-- lib.rs first, we have cargo.toml; this is the file that we use to configure our build. if you've used gemfile from bundler or package.json from 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. ...
...gemfile from bundler or package.json from 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::prelude::*; #[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 ...
... this imports the new module from the node_modules folder. this isn't considered a best practice, but this...

ui/sidebar - Archive of obsolete content
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 can't directly access your sidebar's content from your main add-on code, but you can send messages between your main add-on code and scripts loaded into your sidebar. on the sidebar...
...ht 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 my sidebar <script type="text/javascript" src="sidebar.js"></script> </body> </html> the "sidebar.js" file sends a ping message to main.js using port.emit() as soon as it loads, and adds a listener to the pong message. addon.port.emit("ping"); addon.port.on("pong", function() { console.log("sidebar script got the reply"); }); the "main.js" file creates a sidebar object and adds a listener to its attach event. on attach, "main.js" st...
... lost. listen to this event if your add-on initiates the conversation. 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 main.js script initiates communication: the html file includes just a script, "sidebar.js": <!doctype html> <html> <body> content for my sidebar <script type="text/javascript" src="sidebar.js"></script> </body> </html> the "sidebar.js" file listens to the ping message from main.js, and responds with a pong message. addon.port.on("ping", function() { console.log("sidebar script got the message"); addon.port.emit("pong"); }); the "main.js" file creates a sidebar object and adds a listener to its attach event. on attach, "main.js" sends the ping message, and starts ...

Boxes - Archive of obsolete content
zz"/> </hbox> </window> images if you put image in the contents, you should probably add align="start" attribute to the box. ...
... add align="start" attribute to the box. ...
... version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> </box> </window> ...

Displaying web content in an extension without security issues - Archive of obsolete content
s at all. here the "data:" protocol is useful. this protocol is special because it inherits the privileges from its parent document. however, if a "data:" document is the topmost content document, there is no parent document (remember, content documents have no access to the chrome documents above them) and consequently no privileges. ...
...restricting what documents that contain untrusted data can do there are several restrictions that can be applied per frame. ...
...target.href) openlinkinbrowser(event.target.href); } safe html manipulation functions when it comes to displaying the data, it is tempting to generate some html code and to insert it into the document via innerhtml. and scripts won’t run anyway when inserted via innerhtml, right? well, not quite. it is right that <script>alert('xss')</script> won’t run if inserted via innerhtml. but <img src="does_not_exist" onerror="alert('xss')"> for example will still run javascript code, and there are many more possibilities. so properly sanitizing input is still required when using innerhtml and it is far from trivial. it is much easier to use dom manipulation methods that won’t have unexpected side-effects. for example, your template document might have this code: <style type="text/css"> #e...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
lement to insert a separator bar that groups items together. both menu and menuitem elements take the label attribute to set their labels. insert menu elements into a menubar element to create multiple menus. you can easily create hierarchical menus by inserting menupopup and menu elements. you can even display icons in menus by adding class="menuitem-iconic" to a menuitem element, along with a src attribute that gives an image uri. figure 7 shows an example of how this is displayed. figure 7: menu items with icons executing commands when selecting menu items much like dynamic html, event handlers are used to execute a command when a menu item is selected. to respond to mouse and keyboard inputs in html, the onclick event handler is typically used to respond to mouse clicks, and the on...
..."><![cdata[ var nodes = gbrowser.mtabcontainer.childnodes; for (var i = 0; i < nodes.length; i++) alert(nodes[i].label); ]]></script> listing 18: embedding a script in xul note: although embedding javascript is permitted, it's generally encouraged that you instead place your javascript code in an external file. browser and tabbrowser xul allows you to use inline frames. you can set the src attribute of an iframe element to the uri of another xul document or web page, and it will be displayed there. but iframes are rarely used in xul—in practice, the browser element is used more often. the browser element is essentially a more powerful version of an inline frame, equipped with all the basic functions of a web browser. unlike an iframe, a browser element has the ability to navigat...
...uilding applications linked to external web pages, this is a more secure and more convenient approach. the tabbrowser element is even more capable than the browser element because it includes the basic tab-handling features from firefox. to use this requires xpconnect privileges, the same as autocomplete does; this will be covered in chapter 4. opening a page if you specify a uri value for the src attribute in the browser element, that uri will be opened by default. if the src attribute's value changes, you can dynamically open a different web page or xul document. functions like back, forward, reload can all be called using the goback(), goforward(), and reload() methods. using the stop() method stops loading the page currently in the process of being opened. access restrictions with f...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
lement and textbox element, wrapped in a hbox element so that they are arranged horizontally. ...
... entity references. listing 8: revisions to clock.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"?> <!doctype dialog system "chrome://helloworld/locale/clock.dtd"> <dialog id="clockdialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="&helloworld.clock;" buttons="accept" onload="initclock();"> <script type="application/javascript" src="chrome://helloworld/content/clock.js" /> <hbox align="center"> <label value="&helloworld.currenttime;:" /> <textbox id="currenttime" /> </hbox> </dialog> create the dtd that defines the entity references now create the dtd file that gets referred to by clock.xul (listing 9). the clock.dtd file inside the fr-fr folder must be encoded as utf-8. listing 9: content for clock.dtd loc...
... element to add on to as you did for the hello world extension. browser window overlay create a file that will overlay the browser window, overlay.xul, with the contents from listing 14. ...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
it's important to add special markup that fulfills the requirements of the application. this example uses an iframe element as the mechanism to establish the communication with the server side application. ...
...me" src=""></iframe> </div> the javascript code located in the data loader component will be interacting with this iframe element, requesting data from the server. note that when the data is available (a web page is loaded into the iframe) this will not affect the web page context because the iframe is not visible. data loader component this component is a simple javascript function that sets the src attribute of the hidden iframe, causing it to load an url (i.e., by establishing a request on the server side): /* triggers the iframe to retrieve new data */ function retrievedata() { bridgeframe.src = dataurl; } once a web page is loaded into the iframe, the data binder will be able to get the data from the iframe's page and set the data into the main page's context. data binder component the d...
...ring the data from the dom... articletitle=article.getelementsbytagname("article").item(0).firstchild.nodevalue; // inserting the content into the container.. document.getelementbyid("container").innerhtml+=articletitle+"<br />"; } source code for the sample <html> <head> <title>inner-browsing example, with xmlhttprequest and dom</title> <script type="text/javascript" language="javascript" src="xmlrequest.js"></script> <script> /* ***** begin license block ***** * version: mpl 1.1 * * the contents of this file are subject to the mozilla public license version * 1.1 (the "license"); you may not use this file except in compliance with * the license. you may obtain a copy of the license at * http://www.mozilla.org/mpl/ * * software distributed under the license is distributed on ...

Images, Tables, and Mysterious Gaps - Archive of obsolete content
ement to a block-level element. do that, and it no longer generates a line box, and so the problem goes away-- assuming that the image is the only thing that occupies that table cell. in the simplest case, we might add a style like this: td img {display: block;} consider this rule when applied to the following markup: <table cellspacing="0" cellpadding="0" border="0" width="500"> <tr><td><img src="nav1.gif"><img src="nav2.gif"><img src="nav3.gif"><img src="nav4.gif"><img src="nav5.gif"></td></tr> <tr><td style="background: red;"> <img src="smallred.gif" height="1" width="1"></td></tr> <tr><td> <p style="margin: 0.5em;">this is text in another cell of the table. within the textthere is an icon <img src="icon2.gif"> that indicates a link to another site. it's very worldly. lorem ipsum,...
...pixel spacer gif is now only making the cell one pixel tall, as the designer intended. unfortunately, the buttons in the top cell are all now block-level and so end up stacked on top of one another instead of being shown side-by-side. one potential solution is to add a class to any image that needs to be block-level and then write the rule to match. td img.decoration {display: block;} <td><img src="reddot.gif" class="decoration"></td> depending on the design, though, that could lead to a lot of classes added for this one simple effect. this would be especially true if there are many single-pixel cells intended to create cool stacked lines, or something like that. if you have markup that lends itself well to this approach, you could class the table rows instead of the images. thus you migh...
...e especially true if there are many single-pixel cells intended to create cool stacked lines, or something like that. if you have markup that lends itself well to this approach, you could class the table rows instead of the images. thus you might have: tr.decoration img {display: block;} ...along with the following change in the markup: <tr class="decoration"><td style="background: red;"> <img src="smallred.gif" height="1" width="1"> </td></tr> the result is that of only making the spacer gif block-level, thus leaving the other images alone. this leads to the result seen in figure 9. alternatively, you could class table cells instead of rows, if that's a better choice for you. in any of these cases, though, making images block-level could have unintended side effects if your table cell...

ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
, build and use the pluginhostctrl.dll . get the source you need cvs to get the source code. assuming you have cvs somewhere in your path, type this from a command prompt: c:\> set cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot c:\> set home=\temp c:\> cvs login (logging in to anonymous@cvs-mirror.mozilla.org) cvs password: anonymous c:\> cvs -z3 co mozilla/embedding/browser/activex/src/pluginhostctrl this fetches the source for the control into mozilla\embedding\browser\activex\src\pluginhostctrl. you can also see the code online. build it it is quite simple to build the control locate the pluginhostctrl directory: open pluginhostctrl.dsp build "win32 debug" or another target open some of the test files under pluginhostctrl\tests in internet explorer to verify the contro...
... an install script or manually: regsvr32 pluginhostctrl.dll you must have administrator privileges to install a new control on operating systems such as windows nt, 2000 & xp. usage insert some html like this into your content: <object classid="clsid:dbb2de32-61f1-4f7f-beb8-a37f5bc24ee2" width="500" height="300"> <param name="type" value="video/quicktime"/> <param name="src" value="http://www.foobar.com/some_movie.mov"/> <!-- custom arguments --> <param name="loop" value="true"/> </object> the classid attribute tells ie to create an instance of the plug-in hosting control, the width and height specify the dimensions in pixels. you may optionally specify a codebase attribute if you have packaged the control into a cab file and wish for it to be insta...
... may optionally specify a codebase attribute if you have packaged the control into a cab file and wish for it to be installed automatically. the following <embed> attributes have <param> tag equivalents: <param name="type" ...> is equivalent to typespecifies the mime type of the plug-in. the control uses this value to determine which plug-in it should create to handle the content. <param name="src" ...> is equivalent to srcspecifies an url for the initial stream of data to feed the plug-in. if you havent't specified a "type" param, the control will attempt to use the mime type of this stream to create the correct plug-in. <param name="pluginspage" ...> is equivalent to pluginspagespecifies a url where the plug-in may be installed from. the default plug-in will redirect you to this page wh...

Making it into a static overlay - Archive of obsolete content
its next line ...
...statusoverlay.xul"?> <?xul-overlay href="chrome://communicator/content/conten...extoverlay.xul"?> <?xul-overlay href="chrome://communicator/content/sideba...baroverlay.xul"?> <?xul-overlay href="chrome://communicator/content/communicatoroverlay.xul"?> <?xul-overlay href="chrome://communicator/content/bookma...rksoverlay.xul"?> ... ...
...ul"?> <?xul-overlay href="chrome://communicator/content/sideba...baroverlay.xul"?> <?xul-overlay href="chrome://communicator/content/communicatoroverlay.xul"?> <?xul-overlay href="chrome://communicator/content/bookma...rksoverlay.xul"?> ... <!-- navigator --> <script type="application/javascript" src="chrome://navigator/content/browser.js"/> <script type="application/javascript" src="chrome://navigator/content/navigator.js"/> <script type="application/javascript" src="chrome://navigator/content/navigatordd.js"/> <script type="application/javascript" src="chrome://navigator/content/sessionhistoryui.js"/> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js"/> <!-- hook for stringbundle overlays --> ... <statusbar id...

Documentation for BiDi Mozilla - Archive of obsolete content
ll controls with dir=rtl and added support where necessary. some support added for alignment in tables and lists, and fixes for problems with different combinations of dir and align. ...
... with different combinations of dir and align. ...
... ...

The new nsString class implementation (1999) - Archive of obsolete content
fset,print32 acount); static void assign(nsstrimpl& adest,const nsstrimpl& asource,pruint32 anoffset,print32 acount); static void assigncstring(nsstrimpl& adest,const char* asource,pruint32 anoffset,print32 acount); // assign a char or a substring into the existing string... ...
...rimpl& adest,const char* asource,pruint32 anoffset,print32 acount); // assign a char or a substring into the existing string... ...
...ghtweight since it gets its functionality from the nsstrimpl static library. in addition to the nsstrimpl api shown above, nsstring, nsautostring and nscstring all offer additional api's (that all degrade to those found in nsstrimpl) for construction, searching and comparison. also note that the new nsstring interface mimics fully the interface in the existing nsstring class found in mozilla/base/src/nsstring.h. nsautostring we still offer an nsautostring that provides its own stack based buffer. this very useful class allows programmers to take advantage of the nsstring/nsstrimpl implementation, while eliminating heap based allocations. an additional improvement has been made to nsautostring that allows it to use an arbitrarily sized stack based buffer rather than its own internal buffer. th...

Using gdb on wimpy computers - Archive of obsolete content
o be able to work in a threaded environment. the best way to do this is to set a breakpoint in main, let the program run until main and then turn off automatic library loading. from there you can allow the program to continue running. ...
...o this is to set a breakpoint in main, let the program run until main and then turn off automatic library loading. from there you can allow the program to continue running. here's an example: [blizzard@gunhead mozilla]$ cd dist/bin/ [blizzard@gunhead bin]$ ./mozilla -g .//run-mozilla.sh -g ./mozilla-bin mozilla_five_home=/home/blizzard/src/mozilla/mozilla/dist/bin ld_library_path=/home/blizzard/src/mozilla/mozilla/dist/bin shlib_path=/home/blizzard/src/mozilla/mozilla/dist/bin libpath=/home/blizzard/src/mozilla/mozilla/dist/bin moz_program=./mozilla-bin moz_toolkit= moz_debug=1 moz_debugger= /usr/bin/gdb ./mozilla-bin -x /tmp/mozargs22288 gnu gdb 19991004 copyright 1998 free software foundation, inc. gdb is free software, covered by the gnu general ...
... gnu general public license, and you are welcome to change it and/or distribute copies of it under certain conditions. type "show copying" to see the conditions. there is absolutely no warranty for gdb. type "show warranty" for details. this gdb was configured as "i386-redhat-linux"... (gdb) b main breakpoint 1 at 0x804ec45: file nsapprunner.cpp, line 811. (gdb) r starting program: /home/blizzard/src/mozilla/mozilla/dist/bin/./mozilla-bin breakpoint 1, main (argc=1, argv=0xbffff894) at nsapprunner.cpp:811 811 installunixsignalhandlers(argv[0]); (gdb) set auto-solib-add 0 (gdb) c continuing. nsnativecomponentloader: autoregistering begins. [...] it's easy to define a function for gdb to do this for you automatically. you can add this function to the .gdbinit file in your home directory...

Elements - Archive of obsolete content
id id #implied > used for inclusion of image elements, to cache them for later use, and for inclusion of stylesheet elements. the resources tag must be used directly inside the binding tag. id - the id attribute is a document-unique identifier. ...
...the image is loaded as soon as the binding is used. ...
...e binding. the style rules in the style sheet will only be applied to the binding, not to other elements in the document. the stylesheet tag must be inside the resources tag. 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 preload 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. ...

Unix stub installer - Archive of obsolete content
where does the unix stub installer code reside? the unix stub installer project resides at: <http://lxr.mozilla.org/seamonkey/sou...ard/unix/src2/> how do we get setup to debug the unix stub installer? build the unix installer (debug or non-debug target) by typing "make" in the src2 directory grab a nightly build, say from <http://ftp.mozilla.org/pub/mozilla/n...staller.tar.gz> gunzip and untar the build to some temporary location like /tmp. copy the installer.ini and config.ini files over into the src2 directory. if you don't want the installer to download then grab a nightly "full" installer, say from <ftp://ftp.mozilla.org/pub/mozilla/ni...gnu-sea.tar.gz>. then untar and gunzip this to /tmp. copy the xpi directory into the src2 directory you are debugging from. run the...
...ld to some temporary location like /tmp. copy the installer.ini and config.ini files over into the src2 directory. if you don't want the installer to download then grab a nightly "full" installer, say from <ftp://ftp.mozilla.org/pub/mozilla/ni...gnu-sea.tar.gz>. then untar and gunzip this to /tmp. copy the xpi directory into the src2 directory you are debugging from. run the installer from the src2 directory by either using the mozilla-installer shell script or the mozilla-installer-bin binary with the appropriate flags. if you need to use gdb to debug the installer run it by typing "gdb mozilla-installer-bin" on the shell prompt. ...
... go to mozilla/xpinstall/packager/unix. on the shell prompt type "perl deliver.pl". now you will find an installer *and* the xpcom.xpi and other debug xpis delivered to mozilla/installer/raw. debug using "gdb mozilla-installer-bin" and set a breakpoint at xpi_init(). you can step into the xpinstall engine through the xpistub once the xpistub dll is loaded. ...

Introduction to XUL - Archive of obsolete content
d("remember"); if (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. ...
...caster> elements in the xul description, and are involved with the communication of changes of state between widgets. a widget or several widgets can arrange to have the value of one of their attributes be tied to a broadcaster node. this tie is defined within the xul: <xul:window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <broadcaster id="cangoback"/> <titledbutton src="resource:/res/toolbar/tb_back.gif" align="bottom" value="back" onclick="browserback()"> <observes element="cangoback" attribute="disabled"/> </titledbutton> </window> but it is up to the application code to locate the broadcasters within a window so it can punch them when necessary. broadcasters can broadcast any change of state, which can be tied to the value of any attribu...
... notice that the example window tag has an id attached to it. strictly speaking, that is unnecessary for this example. however in practice, most nodes in xul have these identifiers, which enable the nodes to be retrieved easily using the aom's getelementbyid method. ...

Building Trees - Archive of obsolete content
treecell label="?subject"/> <treecell label="?sender"/> <treecell label="?date"/> </treerow> </treeitem> </treechildren> </action> </template> </tree> features of the tree builder besides the label of a cell, there are several other cell properties you can set when using the tree builder. the supported properties are: label, mode, properties, src and value. the label attribute is used to set the label for a cell. the mode is used for progress meter columns. it may be set to either “normal” for a normal progress meter or “undetermined” for an undetermined progress meter. the value attribute is used to set the current progress value for normal progress meters. the value attribute may also be used for checkbox columns by setting it t...
...his will retrieve the value after any variables have been substituted. besides the attributes mentioned above, any other attributes specified on the tree rows and cells are ignored. since no elements are generated, you won’t be able to retrieve the values for them either. thus, the value attribute may be useful to associate an additional value with a row since it will be easier to retrieve. the src attribute may be used to set an image to appear in a cell. for example: <tree id="photoslist" flex="1" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" flags="dont-build-content"> <treecols> <treecol id="photo" label="photo" flex="1"/> </treecols> <template> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell sr...
... « previousnext » ...

Simple Query Syntax - Archive of obsolete content
<query> element. if a <query> element is present, the full syntax is used instead. in the simple syntax, the builder will use the default query shown above, although the variable names are randomly generated. since the photos list iterates over the children of a container, we can use the simple syntax. here is what it might look like: <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </template> there is no <query> or <action> element used. instead, the builder uses a default query, and the action is placed directly inside the <template> element. you can see that this code is much simpler than the full syntax. to understand how this works, let's examine how the builder processes a simple query...
...t in the rdf graph. if one photo doesn't have a title, it will be replaced with an empty string. the special value 'rdf:*' means the uri of the result resource, rather than referring to a predicate. it would be equivalent to ?photo variable in this example if the full syntax was used. you can see in the example that the value 'rdf:*' is used in two places, the uri attribute on the hbox and as the src attribute for the image. here is the photos example using the simple syntax. the filtering isn't shown in this example. it is still possible to do filtering using simple query and we'll look at this below. simple query conditions simple queries also use a simpler way of handling triple elements to filter out unwanted results. it allows you to filter for results that have certain predicates wit...
...st match for the result to be accepted. for example, to filter for photos with a specific country: <hbox id="photoslist" datasources="template-guide-photos4.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:r="http://www.xulplanet.com/rdf/"> <template> <rule r:country="http://www.daml.org/2001/09/countries/iso#it"> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </rule> </template> </hbox> this example shows how a single attribute may be used to filter for only those results that have a country set to 'http://www.daml.org/2001/09/countries/iso#it'. photos that do not have this country will not have any content generated for them. the attribute has a namespac...

Splitters - Archive of obsolete content
ment inside the splitter which the user can use to collapse the element. the width and height attributes of the elements next the splitter are adjusted when the splitter is dragged. the exact element depends on the resizebefore and resizeafter attributes. ...
...justed when the splitter is dragged. the exact element depends on the resizebefore and resizeafter attributes. splitter example an example would be helpful here: example 1 : source view <hbox flex="1"> <iframe id="content-1" width="60" height="20" src="w1.html"/> <splitter collapse="before" resizeafter="farthest"> <grippy/> </splitter> <iframe id="content-2" width="60" height="20" src="w2.html"/> <iframe id="content-3" width="60" height="20" src="w3.html"/> <iframe id="content-4" width="60" height="20" src="w4.html"/> </hbox> here, four iframes have been created and a splitter has been placed in-between the first and second one. the collapse has been set to a value of before, meaning that if the splitter grippy is clicked on, the first frame would disappear and the spl...
...e to collapse just iframes. any element can be collapsed. our find files example let's see what the find file dialog looks like with a splitter in it. one possibility would be to add the results of the search in the dialog. we'll add an area in-between the search criteria and the buttons along the bottom. a splitter will allow you to collapse, or hide, the search results. </tabbox> <iframe src="results.html"/> <splitter collapse="before" resizeafter="grow"> <grippy/> </splitter> <hbox> here, a splitter and an iframe have been added to the dialog. we don't need the spacer after the tabbox any more so we can remove it. the content of the frame is contained in a file called 'results.html'. create this file and put whatever you want in it for now. the iframe will be replaced later...

browser - Archive of obsolete content
ion of firefox? get firefox most of the properties and methods of the browser will rarely 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. ...
... autocompletepopup type: id the id of a popup element used to hold autocomplete results for the element. autoscroll type: boolean set to false to disable autoscroll for this browser. if this attribute is set to tr...
...type: url this attribute allows you to set a homepage for the browser element. it does not have any correlation 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. showcaret type: boolean whether or not to cause a typing caret to be visible in the content area. default is false. src type: uri the uri of the content to appear in the element. type type: one of the values below. the type of browser, which can be used to set access of the document loaded inside the browser. if this is not set, the loaded document has the same access as the window containing the browser. more precisely: the document loaded into a chrome window is always of chrome type. sub...

checkbox - Archive of obsolete content
urned on and off. 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. attributes accesskey, checked, command, crop, disabled, src, label, preference, tabindex properties accesskey, accessibletype, checked, command, crop, disabled, src, label, tabindex examples <checkbox label="enable javascript" checked="true"/> <checkbox label="enable java" checked="false"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters tha...
...s 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 entirely. 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 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 selectio...
...ity object for the element. checked type: boolean gets and sets the value of the checked attribute. command type: element id gets and sets the value of the command attribute. crop type: string gets and sets the value of the crop attribute. disabled type: boolean gets and sets the value of the disabled attribute. src type: url gets and sets the value of the src attribute. label type: string gets and sets the value of the label attribute. tabindex type: integer gets and sets the value of the tabindex attribute. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focu...

treecol - Archive of obsolete content
u 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. attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below. <tree flex="1" editable="true"> <treecols> <treecol label="active" type="checkbox" editable="true"/> <treecol label="name" flex="1" /> </treecols> <treechildren> <treeitem> <treerow> <treecell val...
... sortdirection type: one of the values below set this attribute to set the direction that template-generated content is sorted. use the sortresource attribute to specify the sort key. ascending the data is sorted in ascending order. descending the data is sorted in descending order. natural the data is sorted in natural order, which means the order that it is stored in. src type: uri set this attribute to have the treecol element use an image for the header instead of a label. you cannot have both an image and a label displayed in the header. set this to the url of an image to appear on the tree column header. if this attribute is left out, no image appears and the label is used instead. the class treecol-image must be used on the treecol element for the image to ...
...e(), setattributenodens(), 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 ...

Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
ments and getting the source, then come back here since the build process itself will be slightly different. got source? now you need to set up a special .mozconfig file to tell mozilla to build both xulrunner and your application. here's a sample .mozconfig for building xulrunner and mccoy: # options for client.mk. ...
...disk. and what's more, you can skip the following section, partially compensating you for all that extra work you put in just now. see, it all balances out in the end! building with a prebuilt sdk once you've downloaded the xulrunner sdk, you'll need a .mozconfig of your own. here's an example for mccoy: # options for client.mk. mk_add_options moz_co_projects=browser mk_add_options moz_objdir=@topsrcdir@/../mccoybase # options for 'configure' (same as command-line options). ac_add_options --with-libxul-sdk=/path/to/xulrunner-sdk ac_add_options --enable-application=mccoy you still need to get the mozilla source code and put your project in a subdirectory underneath the mozilla root. of course, you only really need the mozilla build system since all the other mozilla files are in the xulrunne...
...g/ subdirectory. follow the example in mccoy carefully since xulrunner is sensitive about having exactly the right files in exactly the right packages. 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 th...

2006-11-10 - Archive of obsolete content
announcements there are no announcements this week. meetings t...
... announcements there are no announcements this week. meetings there were no meetings this week. summarized by: vanessa miranda & mohammad tirtashi ...
... announcements there are no announcements this week. meetings there were no meetings this week. summarized by: vanessa miranda & mohammad tirtashi ...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
duce 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. ...
...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. ...
...e concepts. ...

Building Mozilla XForms - Archive of obsolete content
onfiguration. 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 moz_make_flags=-jn # (optional) replace n with the number of parallel build processes (e.g. 2 on a dual core processor) ac_add_options --enable-extensions="default,xforms" ac_add_options --disable-debu...
...#mk_add_options autoconf=autoconf2.13 # possibly needed #mk_add_options moz_make_flags=-jn # (optional) replace n with the number of parallel build processes (e.g. 2 on a dual core processor) ac_add_options --enable-extensions="default,xforms" ac_add_options --disable-debug ac_add_options --enable-optimize ac_add_options --disable-tests for a debug build, you could use this configuration: . ...
...l) replace n with the number of parallel build processes (e.g. 2 on a dual core processor) ac_add_options --enable-extensions="default,xforms" ac_add_options --disable-debug ac_add_options --enable-optimize ac_add_options --disable-tests for a debug build, you could use this configuration: . $topsrcdir/browser/config/mozconfig mk_add_options moz_co_project=browser mk_add_options moz_objdir=@topsrcdir@/obj-@config_guess@ ac_add_options --enable-extensions="default,xforms" ac_add_options --enable-debug ac_add_options --disable-optimize ac_add_options --disable-tests building now that you have everything ready, you can rebuild mozilla with the same command you used before to build firefox without xforms. switch to the root of your source directory and start the build with make -f client.mk ...

JavaScript basics - Learn web development
ogramming examples.) important: if you haven't been following along with the rest of our course, download this example code and use it as a starting point. go to your test site and create a new folder named scripts. within the scripts folder, create a new file called main.js, and save it. in your index.html file, enter this code on a new line, just before the closing </body> tag: <script src="scripts/main.js"></script> this is doing the same job as the <link> element for css. it applies the javascript to the page, so it can have an effect on the html (along with the css, and anything else on the page). add this code to the main.js file: const myheading = document.queryselector('h1'); myheading.textcontent = 'hello world!'; make sure the html and javascript files are saved. t...
... your example site. ideally, the image will be the same size as the image you added previously, or as close as possible. save this image in your images folder. rename the image firefox2.png. add the javascript below to your main.js file. (also delete your hello world! javascript from the earlier exercise.) let myimage = document.queryselector('img'); myimage.onclick = function() { let mysrc = myimage.getattribute('src'); if(mysrc === 'images/firefox-icon.png') { myimage.setattribute('src','images/firefox2.png'); } else { myimage.setattribute('src','images/firefox-icon.png'); } } save all files and load index.html in the browser. now when you click the image, it should change to the other one. this is what happened. you stored a reference to your <img> el...
...load index.html in the browser. now when you click the image, it should change to the other one. this is what happened. you stored a reference to your <img> element in the myimage variable. next, you made this variable's onclick event handler property equal to a function with no name (an "anonymous" function). so every time this element is clicked: the code retrieves the value of the image's src attribute. the code uses a conditional to check if the src value is equal to the path of the original image: if it is, the code changes the src value to the path of the second image, forcing the other image to be loaded inside the <img> element. if it isn't (meaning it must already have changed), the src value swaps back to the original image path, to the original state. adding a...

What’s in the head? Metadata in HTML - Learn web development
this to progress through the course. the main purpose here is to let you know what such things are, in case you come across them while browsing other websites' source code. note: if your site uses a content security policy (csp) to enhance its security, the policy applies to the favicon. if you encounter problems with the favicon not loading, verify that the content-security-policy header's img-src directive is not preventing access to it. applying css and javascript to html just about all websites you'll use in the modern day will employ css to make them look cool, and javascript to power interactive functionality, such as video players, maps, games, and more. these are most commonly applied to a web page using the <link> element and the <script> element, respectively. the <link> ...
...nd the <script> element, respectively. the <link> element should always go inside the head of your document. this takes two attributes, rel="stylesheet", which indicates that it is the document's stylesheet, and href, which contains the path to the stylesheet file: <link rel="stylesheet" href="my-css-file.css"> the <script> element should also go into the head, and should include a src attribute containing the path to the javascript you want to load, and defer, which basically instructs the browser to load the javascript at the same time as the page's html. this is useful as it makes sure that the html is all loaded before the javascript runs, so that you don't get errors resulting from javascript trying to access an html element that doesn't exist on the page yet. there are ac...
...ful as it makes sure that the html is all loaded before the javascript runs, so that you don't get errors resulting from javascript trying to access an html element that doesn't exist on the page yet. there are actually a number of ways to handle loading javascript on your page, but this is the most foolproof one to use for modern browsers (for others, read script loading strategies). <script src="my-js-file.js" defer></script> note: the <script> element may look like an empty element, but it's not, and so needs a closing tag. instead of pointing to an external script file, you can also choose to put your script inside the <script> element. active learning: applying css and javascript to a page to start this active learning, grab a copy of our meta-example.html, script.js ...

Adding vector graphics to the Web - Learn web development
described above. note: in inkscape, save your files as plain svg to save space. also, please refer to this article describing how to prepare svgs for the web. adding svg to your pages in this section we'll go through the different ways in which you can add svg vector graphics to your web pages. the quick way: <img> to embed an svg via an <img> element, you just need to reference it in the src attribute as you'd expect. you will need a height or a width attribute (or both if your svg has no inherent aspect ratio). if you have not already done so, please read images in html. <img src="equilateral.svg" alt="triangle with all three sides equal" height="87" width="100" /> pros quick, familiar image syntax with built-in text equivalent available in the alt attribute. y...
...if you want to control the svg content with css, you must include inline css styles in your svg code. (external stylesheets invoked from the svg file take no effect.) you cannot restyle the image with css pseudoclasses (like :focus). troubleshooting and cross-browser support for browsers that don't support svg (ie 8 and below, android 2.3 and below), you could reference a png or jpg from your src attribute and use a srcset attribute (which only recent browsers recognize) to reference the svg. this being the case, only supporting browsers will load the svg — older browsers will load the png instead: <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"> you can also use svgs as css background images, as shown below. in the below code, older browsers will s...
...any fallback images. you need to weigh whether the extra overhead is really worthwhile, just to support obsolescent browsers. how to embed an svg with an <iframe> you can open svg images in your browser just like webpages. so embedding an svg document with an <iframe> is done just like we studied in from <object> to <iframe> — other embedding technologies. here's a quick review: <iframe src="triangle.svg" width="500" height="500" sandbox> <img src="triangle.png" alt="triangle with three unequal sides" /> </iframe> this is definitely not the best method to choose: cons iframes do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for iframes altogether. moreover, unless the svg and your current webpage have the same origin...

Mozilla splash page - Learn web development
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. ...
...g, 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. ...
...o 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 the correct links! note: to properly test the srcset/sizes examples, you'll need to upload your site to a server (using github pages is an easy and free solution), then from there you can test whether they are working properly using browser developer tools such as the firefox network monitor. an art directed red panda inside the <div> with the class of red-panda, we want to insert a <picture> element that serves the small portrait panda image...

Index - Learn web development
deo and audio in web pages. 247 test your skills: html images beginner, html, images, learn, test your skills this aim of this skill test is to assess whether you've understood our images in html article. ...
...nd audio in web pages. 247 test your skills: html images beginner, html, images, learn, test your skills this aim of this skill test is to assess whether you've understood our images in html article. ...
... src, srcset in this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about mozilla! 249 responsive images article, beginner, codingscripting, design, graphics, guide, html, image, intermediate, jpeg, png, pictures, captions, hyperlinks, img, picture, sizes, src, srcset that's a wrap for responsive images — we hope you enjoyed playing with these new techniques. as a recap, there are two distinct problems we've been discussing here: 250 video and audio content article, audio, beginner, guide, html, video, captions, subtitles, track and that's a wrap; we hope you had fun playing with video and audio in web pages! in the next ar...

Introducing asynchronous JavaScript - Learn web development
however, we then create a loadasset() function that takes a callback as a parameter, along with a url to fetch an...
...one difference is that we've included a number of console.log() statements to illustrate an order that you might think the code would execute in. console.log ('starting'); let image; fetch('coffee.jpg').then((response) => { console.log('it worked :)') return response.blob(); }).then((myblob) => { let objecturl = url.createobjecturl(myblob); image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }).catch((error) => { console.log('there has been a problem with 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 fetc...
...use 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: typeerror: image is undefined; can't access its "src" property this is because at the time the browser tries to run the third console.log() statement, the fetch() block has not finished running so the image variable has not been given a value. note: for security reasons, you can't fetch() files from yo...

Multimedia: video - Learn web development
(discussed in section below), that encode, decode, convert, and perform other optimization functions. optimize <source> order order video source from smallest to largest. for example, given video compressions in three different formats at 10mb, 12mb, and 13mb, declare the smallest first and the largest last: <video width="400" height="300" controls="controls"> <!-- webm: 10 mb --> <source src="video.webm" type="video/webm" /> <!-- mpeg-4/h.264: 12 mb --> <source src="video.mp4" type="video/mp4" /> <!-- ogg/theora: 13 mb --> <source src="video.ogv" type="video/ogv" /> </video> the browser downloads the first format it understands. the goal is to offer smaller versions ahead of larger versions. with the smallest version, make sure that the most compressed video still looks good...
...ter user experience than a 10 mb download, a grainy gif-like video may reflect poorly on the brand or project. see caniuse.com for current browser support of video and other media types. video autoplay to ensure that a looping background video autoplays, you must add several attributes to the video tag: autoplay, muted, and playsinline. <video autoplay="" loop="" muted="true" playsinline="" src="backgroundvideo.mp4"> while the loop and autoplay make sense for a looping and autoplaying video, the muted attribute is required for autoplay in mobile browsers. playsinline is required for mobile safari, allowing videos to play without forcing fullscreen mode. remove audio from muted hero videos for hero-video or other video without audio, removing audio is smart. <video autoplay="" loop=...
...sense for a looping and autoplaying video, the muted attribute is required for autoplay in mobile browsers. playsinline is required for mobile safari, allowing videos to play without forcing fullscreen mode. remove audio from muted hero videos for hero-video or other video without audio, removing audio is smart. <video autoplay="" loop="" muted="true" playsinline="" id="hero-video"> <source src="banner_video.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="web_banner.mp4" type="video/mp4"> </video> this hero-video code (above) is common to conference websites and corporate home pages. it includes a video that is auto-playing, looping, and muted. there are no controls, so there is no way to hear audio. the audio is often empty, but still present, and still using b...

Working with Svelte stores - Learn web development
ponent can send notifications to it; whenever a notification arrives the alert component will be in charge of displaying it on screen. creating a store let's start by creating a writable store. any component will be able to write to this store, and the alert component will subscribe to it and display a message whenever the store is modified. create a new file — stores.js — inside your src directory. give it the following content: import { writable } from 'svelte/store' export const alert = writable('welcome to the to-do list app!') note: stores can be defined and used outside of svelte components, so you can organize them in any way you please. in the above code we import the writable() function from svelte/store and use it to create a new store called alert with ...
...you can organize them in any way you please. in the above code we import the writable() function from svelte/store and use it to create a new store called alert with an initial value of "welcome to the to-do list app!". we then export the store. creating the actual component let's now create our alert component and see how we can read values from the store. create another new file named src/components/alert.svelte. give it the following content: <script> import { alert } from '../stores.js' import { ondestroy } from 'svelte' let alertcontent = '' const unsubscribe = alert.subscribe(value => alertcontent = value) ondestroy(unsubscribe) </script> {#if alertcontent} <div on:click={() => alertcontent = ''}> <p>{ alertcontent }</p> </div> {/if} <style> div { p...
...nd if it's not present initializes it with a default value. whenever the value is modified, updates the store itself and also the data in local storage. moreover, because web storage only supports saving string values, we will have to convert from string to object when saving, and vice versa when we are loading the value from local storage. create a new file called localstore.js, in your src directory. give it the following content: import { writable } from 'svelte/store'; export const localstore = (key, initial) => { // receives the key of the local storage and an initial value const tostring = (value) => json.stringify(value, null, 2) // helper function const toobj = json.parse // helper function if (localstorage...

Command line crash course - Learn web development
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. ...
...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 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...
...ng 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 why, watch this youtube clip featuring an explanation by one of microsoft’s principal engineers. listing directory contents another built-in unix command is ls (short for list), which lists the contents of the directory you’re currently in. note that this won’t work if you’re using the default windows command prompt (cmd) — t...

Makefile - variables
note: non-functional links can be fixed by inserting en/. variable name description add_to_def_file cpp_sources cpp_unit_tests a list of source files to compile as unit tests. csrcs a list of c source files to compile. defines additional preprocessor defines for c++ expand_mozlibname exports a list of exported header files and sources to install for external use. exports_namespaces exported package include directory: dist/include/${namespace} exports_${namespace} a list of exports/headers that should be copied into the exported namespace directory. ...
... simple_programs suppress_default_rules inhibit processing of makefile tier targets/directory processing will be unordered. tier build order dependencies - subdirectories for make to traverse prior to building current. xpidl_module module name to use when generating .xpt files, default to module. xpidlsrcs internal: a list of .idl files to generate exported headers from. xpidl_name name of extension to build see also configure.sh variables description build_project_arg command line/environment override configure_env_args command line/environment override directory var...
... note: values will be appended to the export variable when present. os_ variable description os_arch platform type os_target target binary type if building on an intermediate platform(building mobile binaries on 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...

Installing headers using EXPORTS
d from idl files by xpidl. for all <tt>makefile.in</tt>s which export public headers, you should set module to the module name where the files should be copied to in <tt>dist/include</tt>. for normal headers that are to be exported, you should set exports to the list of headers to be exported. they will be copied to <tt>dist/include/$(module)</tt>. for xpidl-generated headers, you should set xpidlsrcs to the list of idl files to export. these idl files will be copied to <tt>dist/idl</tt>, and the generated headers will be copied to <tt>dist/include/$(module)</tt>. for xpidl-generated headers, you may also set xpidl_module to determine which typelib file is produced from the idl files. the distinction between xpidl_module and module is that each directory with idl files must have a unique...
...idl files. ...
...l files must have a unique typelib file, but several directories may export headers to the same location. ...

Utilities for nss samples
ii(prfiledesc* out, const unsigned char *data, unsigned int len); /* * printashex */ extern void printashex(prfiledesc* out, const unsigned char *data, unsigned int len); /* * getdigit */ extern int getdigit(char c); /* * hextobuf */ extern int hextobuf(unsigned char *instring, secitem *outbuf, prbool ishexdata); /* * filetoitem */ extern secstatus filetoitem(secitem *dst, prfiledesc *src); /* * checkpassword */ extern prbool checkpassword(char *cp); /* * getpassword */ extern char * getpassword(file *input, file *output, char *prompt, prbool (*ok)(char *)); /* * filepasswd extracts the password from a text file * * storing passwords is often used with server environments * where prompting the user for a password or requiring it...
...2.0. if a c...
... } } else { while (*instring) { if (*instring == '\n') { instring++; continue; } outbuf->data[truelen++] = *instring++; } outbuf->data[truelen] = '\0'; truelen = truelen-1; } outbuf->len = truelen; return 0; } /* * filetoitem */ secstatus filetoitem(secitem *dst, prfiledesc *src) { prfileinfo info; print32 numbytes; prstatus prstatus; prstatus = pr_getopenfileinfo(src, &info); if (prstatus != pr_success) { return secfailure; } dst->data = 0; if (secitem_allocitem(null, dst, info.size)) { numbytes = pr_read(src, dst->data, info.size); if (numbytes == info.size) { return secsuccess; } } ...

JS::CompileFunction
unsigned nargs, const char *const *argnames, const char16_t *chars, size_t length, js::mutablehandlefunction fun); bool js::compilefunction(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, const char *name, unsigned nargs, const char *const *argnames, js::sourcebufferholder &srcbuf, js::mutablehandlefunction fun); bool js::compilefunction(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, const char *name, unsigned nargs, const char *const *argnames, const char *bytes, size_t length, js::mutablehandlefunction fun); name type description cx js...
...mber of arguments to pass to the function. argnames const char *const * names to assign to the arguments passed to the function. chars const char16_t * string containing the body of the function to compile. bytes const char * string containing the body of the function to compile. length size_t the length, in characters, of body. srcbuf js::sourcebufferholder &amp; source buffer containing the script function compile. fun js::mutablehandlefunction out parameter. on success, fun receives the result function. description js::compilefunction compiles a function from a text string chars, bytes, or srcbuf. name is the name to assign to the newly created function. nargs is the number of arguments the f...
...length is the length of the source code in characters. on success, js::compilefunction stores an function object representing the newly compiled function into fun and and returns true. otherwise, it returns false and the value left in fun is undefined. ...

JS_EvaluateScript
obsolete since jsapi 36this 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. compile and execute a script. syntax jsbool js_evaluatescript(jscontext *cx, jsobject *obj, const char *src, unsigned int length, const char *filename, unsigned int lineno, jsval *rval); jsbool js_evaluateucscript(jscontext *cx, jsobject *obj, const jschar *src, unsigned int length, const char *filename, unsigned int lineno, jsval *rval); name type description cx jscontext * the context in which to run the script. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * the scope in wh...
...char *filename, unsigned int lineno, jsval *rval); name type description cx jscontext * the context in which to run the script. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * the scope in which to execute the script. this parameter is documented in detail at js_executescript. src const char * or const jschar * string containing the script to compile and execute. length unsigned int the length of src, in characters. filename const char * name of file or url containing the script. used to report filename or url in error messages. lineno unsigned int line number. used to report the offending line in the file or url if an err...
... messages. lineno unsigned int line number. used to report the offending line in the file or url if an error occurs. rval jsval * out parameter. on success, if rval is not null, *rval receives the result value. description js_evaluatescript compiles and executes a script in the specified scope, obj. js_evaluateucscript is the unicode version of the function. src is the string containing the text of the script. length indicates the size of the text version of the script in characters. filename is the name of the file (or url) containing the script. this information is used in messages if an error occurs during compilation. similarly, lineno is used to report the line number of the script or file where an error occurred during compilation. rval is an opt...

Running Automated JavaScript Tests
affectionately called "jstests" and "jit-tests". sometimes jstests are called js reftests because of how they are run in the browser. both sets of tests can be used from a normal build of the js shell. (some js reftests will be skipped when run in the browser, as it lacks some shell-specific testing functionality.) running jstests running jstests on a js shell the jstests shell harness is js/src/tests/jstests.py. basic usage is: jstests.py path_to_js_shell or using mach: ./mach jstests note that mach will generally find the js shell itself; the --shell argument can be used to specify the location manually. all other flags will be passed along to the harness. developers will often want to use the -d option: jstests.py -d path_to_js_shell the -d option skips tests that are marked as...
...is 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-test suite uses a python harne...
... ...

nsIMsgCustomColumnHandler
in gecko 1.9 (firefox 3) inherits from: nsitreeview this interface is meant to be implemented by extensions, as shown in the tutorial. the interface inherits from nsitreeview, however when you're implementing a custom handler in javascript its not necessary to implement all of nsitreeview's methods. you must implement: nsitreeview.iseditable() nsitreeview.getcellproperties() nsitreeview.getimagesrc() nsitreeview.getcelltext() nsitreeview.cyclecell() nsimsgcustomcolumnhandler.getsortstringforrow() nsimsgcustomcolumnhandler.getsortlongforrow() nsimsgcustomcolumnhandler.isstring() and optionally: nsitreeview.getrowproperties() from c++ you must implement all of nsitreeview and nsimsgcustomcolumnhandler. example implementation an example javascript implementation that does nothing: var columnh...
...t does nothing: var columnhandler = { iseditable: function(arow, acol) {return false;}, cyclecell: function(arow, acol) { }, getcelltext: function(arow, acol) { }, getsortstringforrow: function(ahdr) { return ""; }, isstring: function() {return true;}, getcellproperties: function(arow, acol, aprops) { }, getrowproperties: function(arow, aprops) { }, getimagesrc: function(arow, acol) {return null;}, getsortlongforrow: function(ahdr) {return 0;} } to attach it use the nsimsgdbview.addcolumnhandler() method (recall gdbview is the global nsimsgdbview in thunderbird): gdbview.addcolumnhandler("newcolumn", columnhandler); after which it can be retrieved using the nsimsgdbview.getcolumnhandler() method: var handler = gdbview.getcolumnhandler("n...
...ahdr); parameters ahdr the message's nsimsgdbhdr. return value the long value that sorting will be done with. isstring() boolean isstring(); parameters none. return value true if the column displays a string value. false otherwise. this affects whether getsortstringforrow or getsortlongforrow is used to determine the sort key for the column. it does not affect whether getcelltext vs. getimagesrc is used to determine what to display. see also extensions:thunderbird:creating_a_custom_column ...

nsIScriptableUnicodeConverter
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by: @mozilla.org/intl/scriptableunicodeconverter. ...
...ed by: @mozilla.org/intl/scriptableunicodeconverter. ...
... type description charset string current character set. throws ns_error_uconv_noconv if the requested charset is not supported. methods convertfromunicode() converts the data from unicode to one charset. returns the converted string. after converting, finish should be called and its return value appended to this return value. acstring convertfromunicode( in astring asrc ); finish() returns the terminator string. should be called after convertfromunicode() and appended to that function's return value. acstring finish(); converttounicode() converts the data from one charset to unicode. astring converttounicode( in acstring asrc ); convertfrombytearray() converts an array of bytes to a unicode string. astring convertfrombytearray( [const,array,size_...

nsITreeView
inherits from: nsisupports last changed in gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19) implementing a nsitreeview in lieu of dom methods for tree creation can improve performance dramatically, and removes the need to make changes to the tree manually when changes to the database occur. further information about creating treeviews is given in the xul tutorial. ...
... astring getcellproperties(in long row, in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring getcelltext(in long row, in nsitreecolumn col); astring getcellvalue(in long row, in nsitreecolumn col); astring getcolumnproperties(in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring getimagesrc(in long row, in nsitreecolumn col); long getlevel(in long index); long getparentindex(in long rowindex); long getprogressmode(in long row, in nsitreecolumn col); astring getrowproperties(in long index, in nsisupportsarray properties obsolete since gecko 22); boolean hasnextsibling(in long rowindex, in long afterindex); boolean iscontainer(in l...
... cause the css ::moz-tree-column(x) to be matched on the treechildren element. see getrowproperties() for an example. void getcolumnproperties( in nsitreecolumn col, in nsisupportsarray properties ); parameters col the current column. properties an array of the column's current properties. obsolete since gecko 22 return value a string of space-separated property names. getimagesrc() the image path for a given cell. for defining an icon for a cell. if the empty string is returned, the ::moz-tree-image pseudoelement will be used. astring getimagesrc( in long row, in nsitreecolumn col ); parameters row the index of the row. col the index of the column. return value the image path of the cell. getlevel() the level is an integer value that represents the leve...

Performance
the command line tool that is at least as recent as what mozilla uses. as of april 10, 2006, mozilla uses sqlite 3.3.4, but the latest precompiled version of the command line tools is not available for all platforms. this will lead to errors that say "database is encrypted" because the tool is not able to recognize the file format. you may want to check the sqlite_version definition in db/sqlite3/src/sqlite3.h for the current version if you are having problems. caching sqlite has a cache of database pages in memory. it keeps pages associated with the current transaction so it can roll them back, and it also keeps recently used ones so it can run faster. in the past, it flushed the cache at the end of a transaction (by default). in order to keep the cache active between transactions, you neede...
... can control the size of the memory cache using the cache_size pragma. this value controls the number of pages of the file that can be kept in memory at once. the page size can be set using the page_size pragma before any operations have been done on the file. you can see an example of setting the maximum cache size to be a percentage of memory in nsnavhistory::initdb in toolkit/components/places/src/nsnavhistory.cpp. sharding the cache between connections by default, storage enables the sqlite shared-cache mode which makes multiple connections to the same database share the same cache. the cache is threadsafe. all you need to do is use services.storage.opendatabase(file). some features (virtual tables, full text indexes) are not compatible with shared cache - then you need to use services.st...
...es, vacuuming a 10mb database has been timed at over one minute. therefore, you should avoid vacuuming whenever possible. some items in databases are privacy sensitive, such as deleted history items. users have the expectation that deleting items in their history will remove the traces of that from the database. as a result, mozilla enables the sqlite_secure_delete preprocessor flag in db/sqlite3/src/makefile.in. this flag causes deleted items to be filled with 0s on disk. this eliminates the need to vacuum except to reclaim disk space, and makes many operations much faster. zero-filling can have significant performance overhead in some situations. for example, the history service used to delete many database items at shutdown when expiring old history items. this operation is not necessarily...

Xptcall Porting Guide
iew xptcall is a library that supports both invoking methods on arbitrary xpcom objects and implementing classes whose objects can impersonate any xpcom interface. it does this using platform specific assembly language code. this code needs to be ported to all platforms that want to support xptcall (and thus mozilla). the tree mozilla/xpcom/reflect/xptcall +--public // exported headers +--src // core source | \--md // platform specific parts | +--mac // mac ppc | +--unix // all unix | \--win32 // win32 | +--test // simple tests to get started \--tests // full tests via api porters are free to create subdirectories under the base md directory for their given platforms and to integrate into the build system as appropriate for their platform. theory ...
...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 level test for ns_invokebyindex, but no tests for the stubs functionality. such a test ought to be written, but this has not yet been done. a full 'test' at this point requires building the client and running the x...
...ctionality 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 level test for ns_invokebyindex, but no tests for the stubs functionality. such a test ought to be written, but this has not yet been done. a full 'test' at this point requires building the client and running the xpconnect test called testxpc in mozilla/js/src/xpconnect/tests. getting these ports done is very important. please let me know if you are interested in doing one. i'll answer any questions as i get them. porting status original author: john bandhauer, 31 may 1999. ...

Activity Manager examples
it is the subject of this activity (event), it goes into the // subject list. ...
...nto the // subject list. ...
...riant> initiator = do_createinstance(ns_variant_contractid); initiator->setasisupports(reinterpret_cast<nsisupports*>(copyservice)); // subject of the delete operation is the imap folder // wrap it in a nsvariant component nscomptr<nsiwritablevariant> srcfolder = do_createinstance(ns_variant_contractid); srcfolder->setasisupports(reinterpret_cast<nsisupports*>(imapfolder)); copyevent->addsubject(srcfolder); copyevent->init(ns_literal_string("message copy event"), initiator, ns_literal_string("completed successfully"), pr_now() / pr_usec_per_msec, // start time pr_now() / pr_usec_per_msec); // completion time // do not forget to increase the ref counter if needed copyevent->setundohandler(undohandler); ////////////////////...

Working with ArrayBuffers
ls of this operation. the second code example provides a specific illustration of the operation. an arraybuffer is a simply byte array. the js-ctypes equivalent is a ctypes.uint8_t.array(###) (ctypes.unsigned_char are also ctypes.uint8_t). bug 732936 includes a discussion of working with an arraybuffer. this feature is based on the following work: //github.com/realityripple/uxp/blob/master/js/src/ctypes/ctypes.cpp#3080 //github.com/realityripple/uxp/blob/master/js/src/vm/arraybufferobject.cpp#1301 example 1 - image data the following example illustrates how to transfer a byte array pointed by ctypes.uint8_t.ptr to imagedata of canvas. this example is based on the fact that the imagedata returned from canvasrenderingcontext2d.getimagedata is a uint8clampedarray view for an arraybuffer. ...
...428,800 (which is image size of 1280 x 1024 pixels). method 3: transfer byte array by calling memcpy this is the recommended method, as it only takes a couple of milliseconds, even for large arrays. notice that the following example does not cast the pixelbuffer. passing an arraybuffer object to pointer type will pass the pointer to buffer (based on //github.com/realityripple/uxp/blob/master/js/src/ctypes/ctypes.cpp#3080). further, it returns datapointer, and there is no extra allocation (based on //github.com/realityripple/uxp/blob/master/js/src/vm/arraybufferobject.cpp#1301). var lib; switch (os.constants.sys.name.tolowercase()) { case 'winnt': case 'winmo': case 'winnt': //windows lib = ctypes.open('msvcrt'); break; case 'darwin': // mac lib = cty...
... throw new error('i dont know where to memcpy is defined on your operating system, "' + os.constants.sys.name + '"'); lib.close(); } } try { var memcpy = lib.declare('memcpy', os.constants.sys.name.tolowercase().indexof('win') == 0 ? ...

Initialization and Destruction - Plugins
e (for example, align) and its value (for example, top). the argn array contains the attribute names; the argv array contains the attribute values. the browser ignores any nonstandard attributes in an embed element, so the web page author can use the arg parameters to specify private attributes defined for a particular plug-in. ...
...gn array contains the attribute names; the argv array contains the attribute values. the browser ignores any nonstandard attributes in an embed element, so the web page author can use the arg parameters to specify private attributes defined for a particular plug-in. ...
...can use the arg parameters to specify private attributes defined for a particular plug-in. for example, the following embed element has the standard attributes src, height, and width and the private attribute loop: <embed src="movie.avi" height="100" width="100" loop="true"> with the embed element in the example, the browser passes the values in argv to the plug-in instance: argc = 4 argn = { "src", "height", "width", "loop" } argv = { "movie.avi", "100", "100", "true" } the saved parameter allows an instance of a plug-in to save its data and, when the instance is destroyed, pass the data to the next instance of the plug-in at the same url. the data is saved in the history list. as long as the plug-in still appears in this list, that saved data is associated with the page; any new instan...

Debugger.Source - Firefox Developer Tools
’s code was loaded. for scripts created by eval or the function constructor, this may be a synthesized filename, starting with a valid url and followed by information tracking how the code was introduced into the system; the entire string is not a valid url. for function.prototype’s script, this is null. source may be loaded from a url in the following ways: the url may appear as the src attribute of a <script> element in markup text. the url may be passed to the worker web worker constructor, or the web worker importscripts function. the url may be the name of a xpcom javascript module or subscript. (note that code passed to eval, the function constructor, or a similar function isnot considered to be loaded from a url; the url accessor on debugger.source...
...ect instance referring to the dom element to which this source code belongs, if any, or undefined if it belongs to no dom element. source belongs to a dom element in the following cases: source belongs to a <script> element if it is the element’s text content (that is, it is written out as the body of the <script> element in the markup text), or is the source document referenced by its src attribute. source belongs to a dom element if it is an event handler content attribute (that is, if it is written out in the markup text as an attribute value). source belongs to a dom element if it was assigned to one of the element’s event handler idl attributes as a string. (note that one may assign both strings and functions to dom elements’ event handler idl attributes.
...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. ...

Pixel manipulation with canvas - Web APIs
with layerx and layery, then we look up the pixel data on that position in the pixel array that getimagedata() provides us. finally, we use the array data to set a background color and a text in the <div> to display the color. ...
...the average of red, green and blue. you can also use a weighted average, given by the formula x = 0.299r + 0.587g + 0.114b, for example. see grayscale on wikipedia for more information. ...
...ee the effect of the imagesmoothingenabled property (which needs prefixes for different browsers). ...

ContentIndex.add() - Web APIs
l: a string containing the url of the corresponding html document. needs to be under the scope of the current service worker. category: optional a string defining the category of content. can be: '' an empty string, this is the default. homepage article video audio icons: optional an array of image resources, defined as an object with the following data: src: a url string of the source image. sizes: optional a string representation of the image size. type: optional the mime type of the image. return value returns a promise that resolves with undefined exceptions typeerror if the service worker's registration is not present or the service worker does not contain a fetchevent. if the id, title, description or url are missing...
...t of image type. examples here we're declaring an item in the correct format and creating an asynchronous function which uses the add method to register it with the content index. ...
...ait registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } the add method can also be used within the service worker scope. // our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; self.registration.index.add(item); specifications specification status comment unknownthe definition of 'add' in that specification. unknown initial definition. ...

DOMImplementation.createHTMLDocument() - Web APIs
title) parameters title optional (except in ie) a domstring containing the title to give the new html document. example this example creates a new html document and inserts it into an <iframe> in the current document. ...
...line 4 uses createhtmldocument() to construct a new html document whose <title> is "new document". lines 5 and 6 create a new paragraph element ...
...line 4 uses createhtmldocument() to construct a new html document whose <title> is "new document". lines 5 and 6 create a new paragraph element with some simple content, and then lines 8–12 handle inserting the ne...

Using Fetch - Web APIs
se object). this is just an http response, not the actual json. to extract the json body content from the response, we use the json() method (defined on the body mixin, which is implemented by both the request and response objects.) note: the body mixin also has similar methods to extract other types of body content; see the body section for more. fetch requests are controlled by the connect-src directive of content security policy rather than the directive of the resources it's retrieving. supplying request options the fetch() method can optionally accept a second parameter, an init object that allows you to control a number of different settings: see fetch() for the full options available, and more details. // example post method implementation: async function postdata(url = '', da...
...xample. an accurate check for a successful fetch() would include checking that the promise resolved, then checking that the response.ok property has a value of true. ...
...you can even pass in an existing request object to create a copy of it: const anotherrequest = new request(myrequest, myinit); this is pretty useful, as request and response bodies are one use only. making a copy like this allows you to make use of the request/response again while varyin...

FileReader.readAsDataURL() - Web APIs
result cannot be directly decoded as base64 without first removing the data-url declaration preceding the base64-encoded data. to retrieve only the base64 encoded string, first remove data:*/*;base64, from the result. syntax instanceoffilereader.readasdataurl(blob); parameters blob the blob or file from which to read. ...
... html <input type="file" onchange="previewfile()"><br> <img src="" height="200" alt="image preview..."> javascript function previewfile() { const preview = document.queryselector('img'); const file = document.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.result; }, false); if (file) { reader.readasdataurl(file); } } live result example reading multiple files html <input id="browse" type="file" onchange="previewfiles()" multiple> <div id="preview"></div> javascript function previewfiles() { var preview = document.queryselector('#preview'); var files = document.queryselector('input[type=file]').files; function ...
...for a full compatibility code you can see our crossbrowser possible solution for image preview. see also this more p...

Capabilities, constraints, and settings - Web APIs
, for example. applying constraints the first and most common way to use constraints is to specify them when you call getusermedia(): navigator.mediadevices.getusermedia({ video: { width: { min: 640, ideal: 1920 }, height: { min: 400, ideal: 1080 }, aspectratio: { ideal: 1.7777777778 } }, audio: { samplesize: 16, channelcount: 2 } }).then(stream => { videoelement.srcobject = stream; }).catch(handleerror); in this example, constraints are applied at getusermedia() time, asking for an ideal set of options with fallbacks for the video. you can specify one or more media input device ids to establish restrictions on which input sources are allowed. to collect a list of the available devices, you can call navigator.mediadevices.enumeratedevices(), then for each...
...figuring and starting the stream the startvideo() method handles setting up and starting the video stream. ...
... json.stringify(audiotrack.getsettings(), null, 2); }).catch(handleerror); } } }, false); handling the stop button then we set up the handler for the stop button. document.getelementbyid("stopbutton").addeventlistener("click", function() { if (videotrack) { videotrack.stop(); } if (audiotrack) { audiotrack.stop(); } videotrack = audiotrack = null; videoelement.srcobject = null; }); this simply stops the active tracks, sets the videotrack and audiotrack variables to null so we know they're gone, and removes the stream from the <video> element by setting htmlmediaelement.srcobject to null. simple tab support in the editor this code adds simple support for tabs to the <textarea> elements by making the tab key insert two space characters when either constr...

WebGL2RenderingContext.clearBuffer[fiuv]() - Web APIs
possible values are: gl.color: color buffer. gl.depth: depth buffer. gl.stencil: stencil buffer. ...
...possible values are: gl.color: color buffer. gl.depth: depth buffer. gl.stencil: stencil buffer. ...
...possible values are: gl.color: color buffer. gl.depth: depth buffer. gl.stencil: stencil buffer. ...

WebGL2RenderingContext.copyBufferSubData() - Web APIs
l.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations. readoffset writeoffset a glintptr specifying the byte offset from which to start reading from or writing to the buffer. size a glsizei in bytes specifying the size of the data to be copied from readtarget to writetarget. return value none. ...
...r specifying the byte offset from which to start reading from or writing to the buffer. size a glsizei in bytes specifying the size of the data to be copied from readtarget to writetarget. return value none. ...
...zei in bytes specifying the size of the data to be copied from readtarget to writetarget. return value none. examples var srcbuffer = gl.createbuffer(); var dstbuffer = gl.createbuffer(); var data = new float32array(vertices); var length = vertices.length * 4; gl.bindbuffer(gl.array_buffer, srcbuffer); gl.bufferdata(gl.array_buffer, data, gl.static_draw); gl.bindbuffer(gl.copy_read_buffer, srcbuffer); gl.bindbuffer(gl.array_buffer, dstbuffer); gl.bufferdata(gl.array_buffer, new float32array(length), gl.static_draw); gl.copybuffersubdata(gl.copy_read_buffer, gl.array_buffer, 0, 0, length); specifications specification status comment webgl 2.0the definition of 'copybuffersubdata' in that specification. editor's draft initial definition for webgl. ...

WebGLRenderingContext.bufferData() - Web APIs
the webglrenderingcontext.bufferdata() method of the webgl api initializes and creates the buffer object's data store. syntax // webgl1: void gl.bufferdata(target, size, usage); void gl.bufferdata(target, arraybuffer? srcdata, usage); void gl.bufferdata(target, arraybufferview srcdata, usage); // webgl2: void gl.bufferdata(target, arraybufferview srcdata, usage, srcoffset, length); parameters target a glenum specifying the binding point (target). possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. when using a webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from ...
...om one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations. size a glsizeiptr setting the size in bytes of the buffer object's data store. srcdata optional an arraybuffer, sharedarraybuffer or one of the arraybufferview typed array types that will be copied into the data store. if null, a data store is still created, but the content is uninitialized and undefined. usage a glenum specifying the intended usage pattern of the data store for optimization purposes. possible values: gl.static_draw: the contents are intended to be speci...
... commands. gl.dynamic_copy: the contents are intended to be respecified repeatedly by reading data from webgl, and used many times as the source for webgl drawing and image specification commands. gl.stream_copy: the contents are intended to be specified once by reading data from webgl, and used at most a few times as the source for webgl drawing and image specification commands. srcoffset a gluint specifying the element index offset where to start reading the buffer. length optional a gluint defaulting to 0. return value none. exceptions a gl.out_of_memory error is thrown if the context is unable to create a data store with the given size. a gl.invalid_value error is thrown if size is negative. a gl.invalid_enum error is thrown if target or usage are not one of t...

Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
te peer the start() function shown here can be called by either of the two end-points that want to talk to one another. it doesn't matter who does it first; the negotiation will just work. async function start() { try { const stream = await navigator.mediadevices.getusermedia(constraints); for (const track of stream.gettracks()) { pc.addtrack(track, stream); } selfvideo.srcobject = stream; } catch(err) { console.error(err); } } this isn't appreciably different from older webrtc connection establishment code. the user's camera and microphone are obtained by calling getusermedia(). the resulting media tracks are then added to the rtcpeerconnection by passing them into addtrack(). then, finally, the media source for the self-view <video> element indicated by ...
...owing the local user to see what the other peer sees. handling incoming tracks we next need to set up a handler for track events to handle inbound video and audio tracks that have been negotiatied to be received by this peer connection. to do this, we implement the the rtcpeerconnection's ontrack event handler. pc.ontrack = ({track, streams}) => { track.onunmute = () => { if (remotevideo.srcobject) { return; } remotevideo.srcobject = streams[0]; }; }; when the track event occurs, this handler executes. using destructuring, the rtctrackevent's track and streams properties are extracted. the former is either the video track or the audio track being received. the latter is an array of mediastream objects, each representing a stream containing this track (a track may in...
...n our case, this will always contain one stream, at index 0, because we passed one stream into addtrack() earlier. we add an unmute event handler to the track, because the track will become unmuted once it starts receiving packets. we 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 entirely independently from the rest of the application. handling the negotiationneeded event first, we implement the rtcpeerconnection event handler onnegotiationneeded ...

Taking still photos with WebRTC - Web APIs
it returns a promise which we attach success and failure callbacks to. the success callback receives a stream object as input. it is the <video> element's source to our ne...
...o box involves creating an image, then converting it into a format usable by the <img> element that displays the most recently captured frame. that code looks like this: function clearphoto() { var context = canvas.getcontext('2d'); context.fillstyle = "#aaa"; context.fillrect(0, 0, canvas.width, canvas.height); var data = canvas.todataurl('image/png'); photo.setattribute('src', data); } we start by getting a reference to the hidden <canvas> element that we use for offscreen rendering. next we set the fillstyle to #aaa (a fairly light grey), and fill the entire canvas with that color by calling fillrect(). last in this function, we convert the canvas into a png image and call photo.setattribute() to make our captured still box display the image. capturing a frame...
...played video frame, convert it into a png file, and display it in the captured frame box. the code looks like this: function takepicture() { var context = canvas.getcontext('2d'); if (width && height) { canvas.width = width; canvas.height = height; context.drawimage(video, 0, 0, width, height); var data = canvas.todataurl('image/png'); photo.setattribute('src', data); } else { clearphoto(); } } as is the case any time we need to work with the contents of a canvas, we start by getting the 2d drawing context for the hidden canvas. then, if the width and height are both non-zero (meaning that there's at least potentially valid image data), we set the width and height of the canvas to match that of the captured frame, then call drawimage...

Using DTMF with WebRTC - Web APIs
t.tone); } else { log("all tones have played. disconnecting."); callerpc.getlocalstreams().foreach(function(stream) { stream.gettracks().foreach(function(track) { track.stop(); }); }); receiverpc.getlocalstreams().foreach(function(stream) { stream.gettracks().foreach(function(track) { track.stop(); }); }); audio.pause(); audio.srcobject = null; receiverpc.close(); callerpc.close(); } } the tonechange event is used both to indicate when an individual tone has played and when all tones have finished playing. the event's tone property is a string indicating which tone just finished playing. if all tones have finished playing, tone is an empty string; when that's the case, rtcdtmfsender.tonebuffer is empty. in thi...
..., if the tone buffer is empty, our example is designed to disconnect the call. this is done by stopping each stream on both the caller and the receiver by iterating over each rtcpeerconnection's track list (as returned by its gettracks() method) and calling each track's stop() method. once both the caller's and the receiver's media tracks are all stopped, we pause the <audio> element and set its srcobject to null. this detaches the audio stream from the <audio> element. then, finally, each rtcpeerconnection is closed by calling its close() method. adding candidates to the caller when the caller's rtcpeerconnection ice layer comes up with a new candidate to propose, it issues an icecandidate event to callerpc. the icecandidate event handler's job is to transmit the candidate to the receive...
...erconnection, receiverpc. as explained in starting the connection process, the current webrtc specification uses the track event for this, but some browsers haven't been updated to support this yet, so we also need to handle the addstream event. the handlereceivertrackevent() and handlereceiveraddstreamevent() methods, shown below, handle these. function handlereceivertrackevent(event) { audio.srcobject = event.streams[0]; } function handlereceiveraddstreamevent(event) { audio.srcobject = event.stream; } the track event includes a streams property containing an array of the streams the track is a member of (one track can be part of many streams). we take the first stream and attach it to the <audio> element. the addstream event includes a stream property specifying a single stream ad...

HTML in XMLHttpRequest - Web APIs
arsing. html parsing support is a recent addition. ...
...tion. ...
... ropen = new regexp("<(?!\!)\\s*([^\\s>]+)[^>]*\\s+id\\=[\"\']" + stargetid + "[\"\'][^>]*>" ,"i"), ssrc = oxhr.responsetext, aexec = ropen.exec(ssrc); return aexec ? (new regexp("(?:(?:.(?!<\\s*" + aexec[1] + "[^>]*[>]))*.?<\\s*" + aexec[1] + "[^>]*[>](?:.(?!<\\s*\/\\s*" + aexec[1] + "\\s*>))*.?<\\s*\/\\s*" + aexec[1] + "\\s*>)*(?:.(?!<\\s*\/\\s*" + aexec[1] + "\\s*>))*.?", "i")).exec(ssrc.slice(ssrc.indexof(aexec[0]) + aexec[0].length)) || "" : ""; } var oreq = new xmlhttprequest(); oreq.open("get", "yourpage.html", true); oreq.onload = function () { console.log(gethtml(this, "intro")); }; oreq.send(null); note: this solution is very expensive for the interpreter. use it only when it is really necessary. specifications specification status comment ...

Using the radio role - Accessibility
ology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: example from the basic form hints mdn page. ...
...ample 1: example from the basic form hints mdn page. ...
...adiogroup" aria-labelledby="rg1_label"> <li id="r1" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> thai </li> <li id="r2" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> subway </li> <li id="r3" tabindex="0" role="radio" aria-checked="true"> <img role="presentation" src="radio-checked.gif" /> radio maria </li> </ul> working examples: notes aria attributes used related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...

ARIA: banner role - Accessibility
a banner role represents general and informative content frequently placed at the beginning of the page. this usually includes a logo, company name, search icon, photo related to the page, or slogan. <div role="banner"> <img src="companylogo.svg" alt="my company name" /> <h1>title</h1> <h2>subtitle</h2> </div> by default, the html5 <header> element has an identical meaning to the banner landmark, unless it is a descendant of <aside>, <article>, <main>, <nav>, or <section>. description a banner landmark role converts the container element upon which it is applied into a header. it should be reserved for the site header content that is common across the site generally at the top of every page. the banner is typically includes things a logo or corporate identity, possibly a site-s...
...erties none keyboard interactions none required javascript features none examples here's a fake simple banner with a skip to navigation link, a logo, a title and a subtitle. as this is the main header for the site, we've added the banner landmark role to the container element. ...
...if this is the case, you can add the role of banner to the main header of the page with jav...

ARIA: figure role - Accessibility
the aria figure role can be used to identify a figure inside page content where appropriate semantics do not already exist. a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text. <div role="figure" aria-labelledby="caption"> <img src="image.png" alt="full alternative image description"> <p id="caption">figure 1: the caption</p> </div> in the above example, we have a figure that consists of two separate content items — an image and a caption. this is wrapped by a <div> element that identifies the content as a figure using role="figure". instead of using aria to create a figure, consider using the native, semantic html <figure> element. along with the <figcaption> elem...
...ript requirements. if you don't have control over the html semantics, you can improve the accessibility of html by adding these roles and properties with javascript. ...
... only use role="figure" if you have to — for example if you don't have control over 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>. ...

Variable fonts guide - CSS: Cascading Style Sheets
ia upgrades to the traditional @font-face syntax now available in modern browsers. the basic syntax is the same, but the font technology can be specified, and allowable ranges for descriptors like font-weight and font-stretch can be supplied, rather than named according to the font file being loaded. ...
...amed according to the font file being loaded. ...
... 75% 125%; font-style: oblique 0deg 20deg; } note: there is no set specific value for the upper-end degree measurement in this case; they simply indicate that there is an axis so the browser can know to render upright or italic (remember that italics are only on or off) example for a font that contains only italics and no upright characters: @font-face { font-family: 'myvariablefontname'; src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; font-style: italic; } example for a font that contains an oblique (slant) axis: @font-face { font-family: 'myvariablefontname'; src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; font-style: oblique 0deg ...

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
: repeat(auto-fill, minmax(120px, 1fr)); grid-gap: 10px; grid-auto-flow: dense; list-style: none; margin: 1em auto; padding: 0; max-width: 800px; } .wrapper li { border: 1px solid #ccc; } .wrapper li.landscape { grid-column-end: span 2; } .wrapper li img { display: block; object-fit: cover; width: 100%; height: 100%; } <ul class="wrapper"> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590db...
...ab41das78e.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <l...
...://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> </ul> auto-placement can also help you lay out interface items which do have logical order. an example is the definition list in this next example. definition lists are an interesting challenge to style as they are...

contain - CSS: Cascading Style Sheets
ementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | strict | content | [ size | layout | style | paint ] examples simple layout the markup below consists of a number of articles, each with content: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> each <article> and <img> is given a border, and the images are floated: img { float: left; border: 3px solid black; } article { border: 1px solid black; } float interference if we were to insert another image at the bottom of the first article, a large portion of the dom tree may be re-laid out or repainted, and this w...
...: left; border: 3px solid black; } article { border: 1px solid black; } float interference if we were to insert another image at the bottom of the first article, a large portion of the dom tree may be re-laid out or repainted, and this would also interfere with the layout of the second article: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; } as you can see, because of the way floats work, the first image ends up inside the area of the second article: fixing wit...
...the first image ends up inside the area of the second article: fixing with contain if we give each article the contain property with a value of content, when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anything outside it: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; contain: content; } this also means that the first image no longer floats down to the second article, and instead stays insid...

image-rendering - CSS: Cascading Style Sheets
crisp-edges | pixelated examples setting image scaling algorithms in practical use, the pixelated and crisp-edges rules can be combined to provide some fallback for each other. (just prepend the actual rules with the fallback.) the canvas api can provide a fallback solution for pixelated through manual image data manipulation or with imagesmoothingenabled. ...
...isp-edges rules can be combined to provide some fallback for each other. (just prepend the actual rules with the fallback.) the canvas api can provide a fallback solution for pixelated through manual image data manipulation or with imagesmoothingenabled. ...
...he fallback.) the canvas api can provide a fallback solution for pixelated through manual image data manipulation or with imagesmoothingenabled. ...

image() - CSS: Cascading Style Sheets
lity including specifying the image's directionality, specifying fallback images for when the preferred image is not supported, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered. disambiguation: image(), the htmlimageelement constructor. ...
...ifying fallback images for when the preferred image is not supported, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered. disambiguation: image(), the htmlimageelement constructor. ...
...-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> where: image-tagsoptional the directionality of the image, either ltr for left-to-right or rtl for right-to-left. image-src optional zero or more <url>s or <string>s specifying the image sources, with optional image fragment identifiers. coloroptional a color, specifying a solid background color to use as a fallback if no image-src is found, supported, or declared. bi-directional awareness the first, optional parameter of the image() notation is the directionality of the image. if included, and the image is used...

Setting up adaptive streaming media sources - Developer guides
cifying the name and location of these stream folders. mpeg-dash encoding mpeg-dash is an adaptive bitrate streaming technique that enables streaming of media content over the internet delivered from conventional http web servers. a media presentation description (mpd) file is used to hold the information on the various streams and the bandwidths they are associated with. in your video source (src) attribute you point to the mpd instead of to the media file as you would with non-adaptive media. the mpd file tells the browser where the various pieces of media are located, it also includes meta data such as mimetype and codecs and there are other details such as byte-ranges in there too - it is an xml document and in many cases will be generated for you. there are a few profiles we can use...
...ght="360"> <baseurl>elephantsdream_h264bpl30_0250.264.dash</baseurl> </representation> <representation id="5" bandwidth="500000" width="480" height="360"> <baseurl>elephantsdream_h264bpl30_0500.264.dash</baseurl> </representation> </adaptationset> </period> </mpd> once you have generated your mpd file you can reference it from within the video tag. <video src="my.mpd" type="application/dash+xml"></video> it might be wise to provide a fallback for browsers that don't yet support mpeg-dash: <video> <source src="my.mpd" type="application/dash+xml"> <!-- fallback --> <source src="my.mp4" type="video/mp4"> <source src="my.webm" type="video/webm"> </video> live profile a useful piece of software when dealing with mpeg-dash is dash encoder. this ...
...metype and codecs and there are other details such as byte-ranges in there too. generally these files will be generated for you. note: you can also split out your audio and video streams into separate files, which can then be prioritised and served separately depending on bandwidth. once you have generated your mpd file you can reference as expected it from within the <video> element: <video src="my.mpd" type="application/dash+xml"></video> it might be wise to provide a fallback: <video> <source src="my.mpd" type="application/dash+xml"> <!-- fallback --> <source src="my.mp4" type="video/mp4"> <source src="my.webm" type="video/webm"> </video> note: mpeg-dash playback relies on dash.js and browser support for media source extensions, see the latest dash.js reference player. h...

Media buffering, seeking, and time ranges - Developer guides
the buffered attribute will tell us which parts of the media has been downloaded. it returns a timeranges object, which will tell us which chunks of media have been downloaded. this is usually contiguous but if the user jumps about while media is buffering, it may contain holes. this will work with <audio> or <video>; for now let's consider a simple audio example: <audio id="my-audio" controls src="music.mp3"> </audio> we can access these attributes like so: var myaudio = document.getelementbyid('my-audio'); var bufferedtimeranges = myaudio.buffered; timeranges object timeranges are a series of non-overlapping ranges of time, with start and stop times. (learn more about timeranges). a timeranges object consists of the following properties: length: the number of time ranges in the ...
...timeranges object would have the following available properties: myaudio.buffered.length; // returns 2 myaudio.buffered.start(0); // returns 0 myaudio.buffered.end(0); // returns 5 myaudio.buffered.start(1); // returns 15 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a little bit of html: <p> <audio id="my-audio" controls> <source src="music.mp3" type="audio/mpeg"> </audio> </p> <p> <canvas id="my-canvas" width="300" height="20"> </canvas> </p> and a little bit of javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(...
...dication 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. ...

Using HTML sections and outlines - Developer guides
</section> <footer> <p>author info</p> <p>publication date</p> </footer> </article> </section> section element the section element is used for a thematic grouping of content. based on the w3c spec, a section should typically contain a heading. the heading does not require the use of the <header> element <section> <h1>amazing mdn contributors</h1> <ul> <li><img src="link" alt="descriptive text"></li> <li><img src="link" alt="descriptive text"></li> <li><img src="link" alt="descriptive text"></li> </ul> </section> aside element the <aside> element defines related content that has a different placement than the main content. it is often used for call-outs, blockquotes, and definitions. the <aside> element is often used for sidebars containin...
...you do not nest an <aside> inside an <aside>. ...
...tion> aside element the <aside> element defines related content that has a different placement than the main content. it is often used for call-outs, blockquotes, and definitions. the <aside> element is often used for sidebars containing extra, but relevant, information. <section> <h1>amazing mdn contributors</h1> <ul> <li><img src="link" alt="descriptive text"></li> <li><img src="link" alt="descriptive text"></li> <li><img src="link" alt="descriptive text"></li> </ul> <aside> <p>to get involved contact</p> </aside> </section> nesting aside elements the <aside> element can be nested inside of other sectional html elements. you do not nest an <aside> inside an <aside>. meaning a call out box would not have a call-out box inside. using html5 elemen...

<frame> - HTML: Hypertext Markup Language
h another html document can be displayed. a frame should be used within a <frameset>. using the <frame> element is not encouraged because of certain disadvantages such as performance problems and lack of accessibility for users with screen readers. instead of the <frame> element, <iframe> may be preferred. attributes like all other html elements, this element supports the global attributes. src this attribute specifies the document that will be displayed by the frame. name this attribute is used for labeling frames. without labeling, every link will open in the frame that it’s in – the closest parent frame. see the target attribute for more information. noresize this attribute prevents resizing of frames by users. scrolling this attribute defines the existence of a scrollbar.
...ices: "yes" for forcing a scrollbar even when it is not necessary and "no" for forcing no scrollbar even when it is necessary. ...
...r forcing no scrollbar even when it is necessary. marginheight this attribute defines the height of the margin between frames. ...

Preloading content with rel="preload" - HTML: Hypertext Markup Language
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 preload example</title> <link rel="preload" href="style.css" as="style"> <link rel="preload" 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 preload 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 is trivial, as the browser probably discovers the <link rel="stylesheet"> and <script> elements in the same chunk of html as the preloads, but the benefits can be seen much more clearly the later resources are d...
... ignoring it if not. you can see an example of this in our video example (see the full source code, and also the live version): <head> <meta charset="utf-8"> <title>video preload example</title> <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> <link rel="preload" href="sintel-short.webm" as="video" type="video/webm"> </head> <body> <video controls> <source src="sintel-short.mp4" type="video/mp4"> <source src="sintel-short.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> </video> </body> so in this case, browsers that support mp4s will preload and use the mp4, making the video player hopefully smoother/more responsive for users. browsers that don't su...
...attach it to the dom: var preloadlink = document.createelement("link"); preloadlink.href = "myscript.js"; preloadlink.rel = "preload"; preloadlink.as = "script"; document.head.appendchild(preloadlink); this means that the browser will preload the myscript.js file, but not actually use it yet. to use it, you could do this: var preloadedscript = document.createelement("script"); preloadedscript.src = "myscript.js"; document.body.appendchild(preloadedscript); this is useful when you want to preload a script, but then defer execution until exactly when you need it. other resource preloading mechanisms other preloading features exist, but none are quite as fit for purpose as <link rel="preload">: <link rel="prefetch"> has been supported in browsers for a long time, but it is intended fo...

Microformats - HTML: Hypertext Markup Language
ed of posts you can find many more vocabularies on the microformats2 wiki. "p-*" for plain (text) properties, e.g. "p-name", "p-summary" generic plain text parsing, element text in general. on certain html elements, use special attributes first, e.g. img/alt, abbr/title. "u-*" for url properties, e.g. "u-url", "u-photo", "u-logo" special parsing: element attributes a/href, img/src, object/data etc. attributes over element contents. "dt-*" for datetime properties, e.g. "dt-start", "dt-end", "dt-bday" special parsing: time element datetime attribute, value-class-pattern and separate date time value parsing for readability. "e-*" for element tree properties where the entire contained element hierarchy is the value, e.g. "e-content". the "e-" prefix can also be m...
... the value, e.g. "e-content". the "e-" prefix can also be mnemonically remembered as "element tree", "embedded markup", or "encapsulated markup". some microformats examples h-card the h-card microformat represents a a person or organization. ...
... p-author who wrote the entry, optionally embedded h-card dt-published when the entry was published p-summary short entry summary e-content full content of the entry parsed reply h-entry example <div class="h-entry"> <p><span class="p-author h-card"> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a> <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a></span> replied to <a class="u-in-reply-to" href="/docs/web/html/microformats">a post on <strong>developer.mozilla.org</strong> </a>: </p> <p class="p-name e-content">hey thanks...

CSP: base-uri - HTTP
not setting this allows any url. ...
...dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. when generating the hash, don't include the <script> or <style> tags and note that capitalization 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. ...
... 'report-sample' requires a sample of the violating code to be included in the violation report. ...

CSP: form-action - HTTP
restricts the urls which can be used as the target of a form submissions from a given context. whether form-action should block redirects after a form submission is debated and browser implementations of this aspect are inconsistent (e.g. firefox 57 doesn't block the redirects whereas chrome 63 does). csp version 2 directive type navigation directive default-src fallback no. not setting this allows anything. syntax one or more sources can be set for the form-action policy: content-security-policy: form-action <source>; content-security-policy: form-action <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's ...
...dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. when generating the hash, don't include the <script> or <style> tags and note that capitalization 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. ...
... 'report-sample' requires a sample of the violating code to be included in the violation report. ...

CSP: navigate-to - HTTP
not specified), <a>, window.location, window.open, etc. this is an enforcement on what navigations this document initiates not on what this document is allowed to navigate to. note: if the form-action directive is present, the navigate-to directive will not act on navigations that are form submissions. csp version 3 directive type navigation directive default-src fallback no. not setting this allows anything. syntax one or more sources can be set for the navigate-to policy: content-security-policy: navigate-to <source>; content-security-policy: navigate-to <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's ...
...dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. when generating the hash, don't include the <script> or <style> tags and note that capitalization 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. ...
... 'report-sample' requires a sample of the violating code to be included in the violation report. examples meta tag configuration <meta http-equiv="content-security-policy" content="navigate-to 'none'"> violation case using a <form> element with an action set to inline javascript will result in a csp violation. ...

CSP: plugin-types - HTTP
f resources which can be loaded. instantiation of an <embed>, <object> or <applet> element will fail if: the element to load does not declare a valid mime type, the declared type does not match one of specified types in the plugin-types directive, the fetched resource does not match the declared type. ...
... directive default-src fallback no. not setting this allows anything. syntax one or more mime types can be set for the plugin-types policy: content-security-policy: plugin-types <type>/<subtype>; content-security-policy: plugin-types <type>/<subtype> <type>/<subtype>; <type>/<subtype> a valid mime type. examples disallowing plugins to disallow all plugins, the object-src directive should be set to 'none' which will disallow plugins. the plugin-types directive is only used if you are allowing plugins with object-src at all. ...
...ntent-security-policy: plugin-types <type>/<subtype> <type>/<subtype>; <type>/<subtype> a valid mime type. examples disallowing plugins to disallow all plugins, the object-src directive should be set to 'none' which will disallow plugins. the plugin-types directive is only used if you are allowing plugins with object-src at all. ...

Feature-Policy: fullscreen - HTTP
re-policy: fullscreen <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...
... feature policy: feature-policy: fullscreen 'self' https://example.com with an <iframe> element fastcorp inc. wants to disable fullscreen for all cross-origin child frames, except for a specific <iframe>. it can do so by delivering the following http response header to define a feature policy: feature-policy: fullscreen 'self' then include an allow attribute on the <iframe> element: <iframe src="https://other.com/videoplayer" allow="fullscreen"></iframe> iframe attributes can selectively enable features in certain frames, and not in others, even if those frames contain documents from the same origin. specifications specification status comment feature policy editor's draft initial definition. fullscreen apithe definition of 'fullscreen' in t...

Feature-Policy: geolocation - HTTP
e-policy: geolocation <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...
...ature policy: feature-policy: geolocation 'self' https://example.com with an <iframe> element fastcorp inc. wants to disable geolocation for all cross-origin child frames, except for a specific <iframe>. it can do so by delivering the following http response header to define a feature policy: feature-policy: geolocation 'self' then include an allow attribute on the <iframe> element: <iframe src="https://other.com/map" allow="geolocation"></iframe> iframe attributes can selectively enable features in certain frames, and not in others, even if those frames contain documents from the same origin. specifications specification status comment feature policy editor's draft initial definition. ...

serviceworker - Web app manifests
this is the only required member of the serviceworker member. ...
...this is the only required member of the serviceworker member. ...
...this is the only required member of the serviceworker member. ...

How to make PWAs installable - Progressive web apps (PWAs)
however, the .webmanifest file format is explicitly mentioned in the w3c manifest specification, so that's what we'll use here. ...
...what we'll use here. the content of the file looks like this: { "name": "js13kgames progressive web app", "short_name": "js13kpwa", "description": "progressive web app that lists games submitted to the a-frame category in the js13kgames 2017 competition.", "icons": [ { "src": "icons/icon-32.png", "sizes": "32x32", "type": "image/png" }, // ... { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#b12a34", "background_color": "#b12a34" } most of the fields are self-explanatory, but to be certain we're on the same page: name: the full name of your web app. short_name: short name to be shown on the hom...
...lay: how the app is displayed; can be fullscreen, standalone, minimal-ui, or browser. theme_color: a primary color for the ui, used by operating system. background_color: a color used as the app's default background, used during install and on the splash screen. a minimal web manifest must have at least a name and an icons field with at least one icon defined; that icon must have at least the src, sizes, and type sub-fields as well. beyond that, everything is optional, though the description, short_name, and start_url fields are recommended. there are even more fields you can use than listed above — be sure to check the web app manifest reference for details. add to home screen "add to home screen" (or a2hs for short) is a feature implemented by mobile browsers that takes the informat...

Communicating With Other Scripts - Archive of obsolete content
dom objects. the web content has no access to objects created by the content script, unless the content script explicitly makes them available. for more discussion and an example please see content scripts: communicating with the add-on: content script to content script. page scripts if a page includes its own scripts using <script> tags, either embedded in the page or linked to it using the src attribute, there are a couple of ways a content script can communicate with it: using the dom postmessage() api using custom dom events using the dom postmessage api note that before firefox 31 code in content scripts can't use window to access postmessage() and addeventlistener() and instead must use document.defaultview. see the section below on using postmessage() before firefox 31. ...
...e.html") var pagemod = mod.pagemod({ include: pageurl, contentscriptfile: self.data.url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(pageurl); the target web page "page.html" includes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script type="text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var event = document.createevent('c...

widget - Archive of obsolete content
y of buttons to control play/pause/stop functions. we can then use a content script to listen for clicks on those buttons. but because content scripts can't use the sdk's apis, we'll want the content script to send messages to the main add-on code, which can then implement the media player functions using the sdk. the widget's content is specified using html like this: <html> <body> <img src="play.png" id="play-button"> <img src="pause.png" id="pause-button"> <img src="stop.png" id="stop-button"> </body> </html> we just include three icons, and assign an id to each one. this html file, and the icon files it references, are saved in the add-on's data directory. next, we write a content script that listens for click events on each icon and sends the corresponding message to...
..."); } var pause_button = document.getelementbyid("pause-button"); pause_button.onclick = function() { addon.port.emit("pause"); } var stop_button = document.getelementbyid("stop-button"); stop_button.onclick = function() { addon.port.emit("stop"); } } next, add a script tag to reference "button-script.js", and call its init() function on load: <html> <head> <script src="button-script.js"></script> </head> <body onload="init()"> <img src="play.png" id="play-button"> <img src="pause.png" id="pause-button"> <img src="stop.png" id="stop-button"> </body> </html> finally, remove the line attaching the content script from "main.js": const widgets = require("sdk/widget"); const data = require("sdk/self").data; var player = widgets.widget({ id: "...

ui/frame - Archive of obsolete content
lements, and includes a css file to style the content and a javascript script to implement behavior: <!doctype html> <html> <head> <link href="city-info.css" rel="stylesheet"></link> </head> <body> <select name="city" id="city-selector"></select> <span id="time" class="info-element"></span> <span id="weather" class="info-element"></span> <script type="text/javascript" src="city-info.js"></script> </body> </html> if we save this document as "city-info.html" under the add-on's "data" directory, we can create a frame hosting it and add the frame to a toolbar like this: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html" }); var toolbar = toolbar({ name: "city-info", title: ...
...n the address bar and the content window. it occupies the whole 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...

Canvas code snippets - Archive of obsolete content
add a listener to the // frame's onload event iframe.addeventlistener('load', this.remotepageloaded, true); //append to the end of the page window.document.body.appendchild(iframe); return; }; remotecanvas.prototype.remotepageloaded = function() { // look back up the iframe by id var ldrframe = document.getelementb...
... 'rgb(255, 255, 255)'); ctx.restore(); }; usage: var remotecanvas = new remotecanvas(); remotecanvas.load(); convert image files to base64 strings the following code gets a remote image and converts its content to data uri scheme. ...

Dialogs and Prompts - Archive of obsolete content
simple dialog with two buttons, ok and cancel (buttons="accept,cancel" attribute on dialog). <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." title="..." buttons="accept,cancel" ondialogaccept="return onaccept();" ondialogcancel="return oncancel();"> <script src="chrome://..."/> <!-- content --> </dialog> you need to implement onaccept and oncancel functions in your script. if they return anything but false, the dialog will be closed. buttons in <dialog> predefined there are six button types you can use in the buttons attribute of dialog. they are: accept — ok button. cancel — cancel button. disclosure — more info button. help — help ...
...sk or whatever } else { // user clicked cancel. typically, nothing is done here. ...

HTML in XUL for rich tooltips - Archive of obsolete content
rt the appropriate code from below into your xul overlay. ...
...would have to have a separate xul tooltip element assigned to each element that you wish to have a rich tooltip with. you should write the html straight into the xul. ...

The Essentials of an Extension - Archive of obsolete content
c ids like container or input, they will likely conflict with ids used within firefox, or with ids from other extension overlays. using namespaces minimizes compatibility problems with other extensions. we use camel casing for file names, and all lower case with dashes for element ids and css style class names, but you're free to use your own system. <script type="application/x-javascript" src="chrome://xulschoolhello/content/browseroverlay.js" /> just like in html, this includes a javascript script file. you can have as many script elements in a xul document as you need. we'll look into its code later. you also probably noticed how we format our code, and wonder about the rules we follow. our general rule on line length is not having lines longer than 80 characters. this feels v...
...there should only be one per document, which is the reason why we overlay the stringbundleset that is in browser.xul, hence the very generic id. we don't include the insertbefore or insertafter attributes because the ordering of string bund...

Creating a Firefox sidebar extension - Archive of obsolete content
appear. deployment now that we have a sidebar it is time to make it available to the world. installation requires the creation of an xpi file which is identified as extension in firefox. the xpi is a zip file containing the content, locale and manifest files. the content, locale and skin folders are packed into emptysidebar.jar, which should be created in the chrome folder. on unix systems: ~/src/emptysidebar$ cd chrome ~/src/emptysidebar/chrome$ zip -r emptysidebar.jar content/ locale/ on windows systems, use a zip tool to create emptysidebar.zip and then rename to emptysidebar.jar. since we are packaging the extension with a jar file, we need to update the chrome.manifest file to take to jar file into consideration: example 7. chrome.manifest content emptysidebar jar:chrome/emptys...
...hrome/emptysidebar.jar!/content/ locale emptysidebar en-us jar:chrome/emptysidebar.jar!/locale/ skin emptysidebar classic/1.0 jar:chrome/emptysidebar.jar!/skin/ overlay chrome://browser/content/browser.xul chrome://emptysidebar/content/firefoxoverlay.xul finally, create the xpi file. this is a zip file containing the jar file in the chrome folder and the manifest files. on unix systems: ~/src/emptysidebar/chrome$ cd .. ~/src/emptysidebar$ zip emptysidebar.xpi install.rdf chrome.manifest chrome/emptysidebar.jar open firefox and browse to the folder containing emptysidebar.xpi. click on the file and the extension installation window pops up. after a restart of firefox, the sidebar is installed. you can download the empty sidebar project to use as a basis for your own sidebars. th...

Enabling the behavior - updating the status periodically - Archive of obsolete content
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 javascript code into a file called tinderstatus.js in the same directory as navigator.xul and reference it in navigator.xul where other javascript scripts are referenced: ... ...
...ur css code into that file back in specifying the appearance. put the javascript code into a file called tinderstatus.js in the same directory as navigator.xul and reference it in navigator.xul where other javascript scripts are referenced: ... <!-- navigator --> <script type="application/javascript" src="chrome://navigator/content/browser.js"/> <script type="application/javascript" src="chrome://navigator/content/navigator.js"/> <script type="application/javascript" src="chrome://navigator/content/navigatordd.js"/> <script type="application/javascript" src="chrome://navigator/content/sessionhistoryui.js"/> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js"/> <!-- hook for stringbundle overlays --> ... with this code in ...

Build - Archive of obsolete content
code, and you should have a directory called mozilla/. change directory into mozilla/ and checkout the latest prism code : cd mozilla/ svn co http://svn.mozilla.org/projects/webrunner/trunk prism create a file called .mozconfig make sure it is in the mozilla/ directory. ...
...psrcdir@/mozilla-obj ac_add_options --enable-application=xulrunner ac_add_options --disable-debug ac_add_options --enable-optimize ac_add_options --disable-tests ac_add_options --disable-javaxpcom build xulrunner : make -f client.mk build once the build is done, there will be a directory called mozilla-obj. go into the prism/ directory and create a .mozconfig file mk_add_options moz_objdir=@topsrcdir@/mozilla-obj/prism ac_add_options --with-libxul-sdk=../dist ac_add_options --enable-application=prism you need to define an environment variable to point the build to the new .mozconfig. this variable is called mozconfig export mozconfig=$pwd/.mozconfig #this should point to mozilla/prism/.mozconfig go back to the mozilla/ directory and do another build, this time, prism will get built cd ..

TraceVis - Archive of obsolete content
most of the documentation on tracevis is contained in the announcement blog post. prerequisites the visualization scripts require pil (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 ...
... 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 time tracemonkey spent in each major tracing activity. the second part lists the reasons tracemonkey transitioned to the interpreter, and the amount of interpreter time charged to each reason. visualization python vis.py /tmp/tracevis.log /tmp/tracevis.png this creates a png forma...

Example Sticky Notes - Archive of obsolete content
xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme,&nbsp;inc. ...
.... --> <binding id="default"> <!-- a separate binding. you add a binding file using -moz-binding style rule and you address a particular binding by its id: -moz-binding: url(notes.xml#default) this id is local within the binding file (not visible in the target document dom tree). --> <resources> <!-- obtaining the stylesheet we'll use to (re)style the bound element. --> <stylesheet src="notes.css"/> </resources> <content> <!-- this svg graphics will be added automatically around each bound element. the position of the original content is indicated by <children/> tag. --> <svg:svg width="60px" height="60px"> <svg:g fill-opacity="0.6" stroke="#ffffff" stroke-width="1px"> <svg:circle cx="25px" cy="12px" r="12" fill="#ff0000" transform="translate(0,0)"/> <svg:circle c...

Creating XPI Installer Modules - Archive of obsolete content
note that the stylesheet processing instruction at the top of the xul file does not refer to any new skin, but imports commu...
...note that the stylesheet processing instruction at the top of the xul file does not refer to any new skin, but imports communicator.css to make use of t...

Install.addDirectory - Archive of obsolete content
install.adddirectory the install object's adddirectory method queues an entire directory for installation once performinstall is called. ...
... install.adddirectory the install object's adddirectory method queues an entire directory for installation once performinstall is called. ...

Install.addFile - Archive of obsolete content
install.addfile the install object's addfile method is the standard way to queue files for installation. ...
... install.addfile the install object's addfile method is the standard way to queue files for installation. ...

addFile - Archive of obsolete content
s. note: if you are installing binary files on a macintosh, be aware that the binary format for those files must be applesingle if the resource information is to be installed properly. ...
...rce information is to be installed properly. some file transfer programs will convert apple binaries to this format on transfer if you transfer them from a macintosh to a unix/windows machine before zipping up those files on that target system. ...

registerChrome - Archive of obsolete content
registerchrome registers chrome with the chrome registry. method of install object syntax int registerchrome( switch, srcdir, xpipath); parameters the registerchrome method has the following parameters: 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. ...
...ed. 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 defining the chrome is located. for example, "locale/mylocale/aim," points to the locale/mylocale/aim ...

showcaret - Archive of obsolete content
« xul reference home showcaret type: boolean whether or not to cause a typing caret to be visible in the content area. ...
... « xul reference home showcaret type: boolean whether or not to cause a typing caret to be visible in the content area. ...

Sorting and filtering a custom tree view - Archive of obsolete content
the data loaded is hard coded. because of bug 340478, this code will only work from privileged script. ...
...1 : -1; //if the column is passed and it's already...

Multiple Queries - Archive of obsolete content
the second query doesn't contain such a triple and will match all three of the photos. it the first query was used by itself, only one result would match. if the second query was used by itself, three results woul...
... syntax. here is the previous example rewritten using the simple syntax: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://purl.org/dc/elements/1.1/"> <template> <rule dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </rule> <rule> <image uri="rdf:*" src="rdf:*"/> </rule> </template> </hbox> the result to the user in this example is the same as the previous example. you can also mix simple and extended queries in one template, although you may prefer to use the same style in all queries for consistency. however, if you are going to be using a number of queries, the template builder is more efficient when using multiple queries using the si...

Multiple Rule Example - Archive of obsolete content
o" predicate="http://purl.org/dc/elements/1.1/description" object="?description"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/date" object="?date"/> </conditions> <action> <hbox uri="?photo" class="box-padded"> <vbox> <label value="?title"/> <image src="?photo"/> </vbox> <groupbox> <caption label="photo details"/> <label value="?description"/> <label value="date: ?date"/> </groupbox> </hbox> </action> </rule> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" ...
...the second rule matches those photos with a title. if a photo did not have a title, it would not match any rule. in the example data, only the first photo has been given all the properties to match the first rule. the...

Custom Tree Views - Archive of obsolete content
this example can be used for a tree wit...
...unt : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.treebox = treebox; }, iscontainer: function(row){ return false; }, isseparator: function(row){ return false; }, issorted: function(){ return false; }, getlevel: function(row){ return 0; }, getimagesrc: function(row,col){ return null; }, getrowproperties: function(row,props){}, getcellproperties: function(row,col,props){}, getcolumnproperties: function(colid,col,props){} }; function setview(){ document.getelementbyid('my-tree').view = treeview; } </script> <tree id="my-tree" flex="1"> <treecols> <treecol id="namecol" label="name" flex="1"/> <treecol id="datecol" labe...

Property Files - Archive of obsolete content
provides the stringbundle element which does this for you. the element has a number of functions which can be used to get strings from the property file and get other locale information. this element reads in the contents of a property file and builds a list of properties for you. you can then look up a particular property by name. ...
...u can then look up a particular property by name. <stringbundleset id="stringbundleset"> <stringbundle id="strings" src="strings.properties"/> </stringbundleset> including this element will read the properties from the file 'strings.properties' in the same directory as the xul file. use a chrome url to read a file from the locale: <stringbundleset id="stringbundleset"> <stringbundle id="strings" src="chrome://myplugin/locale/strings.properties"/> </stringbundleset> like other non-displayed elements, you should declare all your stringbundles inside a stringbundleset element so that they are all kept together. getting a string from the bundle this stringbundle element has a number of properties. the first is getstring which can be used in a script to read a string from the bundle. var strbund...

Using the Editor from XUL - Archive of obsolete content
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 xul contains an <editor> tag, e.g.: <editor type="content-primary" id="content-frame" src="about:blank" flex="1"/> the attribute type="content-primary" identifies this as the window content element, i.e. that which you get from window._content. having an id attribute, id="content-frame", allows us to find this element with document.getelementbyid("content-frame"), and to style it from css. editoronload() is called. it does some getting of window.arguments (which is a way call...
...entwindow (another settable attribute on nsieditorshell) points to the xul element which is to become editable. note: since we already know this when we have an <editor></editor> tag, we should remove the need to call this. editorstartup() does some other minor bits of setup before finally kicking off the url load, which the most important part here. when the xul was parsed, the src attribute on the content frame was set to about:blank (our default 'blank page' url). we can't set that before xul parsing, so we have to force a load of the page we now want to edit. we get the url to load from the args element, then kick off the load: var url = document.getelementbyid("args").getattribute("value"); editorshell.loadurl(url); loading the document in the <iframe> of course h...

XUL controls - Archive of obsolete content
er 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. <label control="volume" value="volume:"/> more information about the label element. label reference <listbox> the listbox is used to select an item from a list of labelled items. <li...
...</radiogroup> more information about the radio element. radio reference related elements: radiogroup <richlistbox> the richlistbox displays a list of items where one or more may selected. unlike the listbox which is designed to display fixed size rows, the richlistbox may display any type of content. <richlistbox> <richlistitem> <image src="happy.png"/> </richlistitem> <richlistitem> <image src="sad.png"/> </richlistitem> <richlistitem> <image src="angry.png"/> </richlistitem> </richlistbox> richlistbox reference related elements: richlistitem <scale> a scale displays a bar with a thumb that may be slid across the bar to select between a range of values. <scale mi...

<statusbarpanel> - Archive of obsolete content
s(), 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. « xul reference home statusbarpanel-iconic use this class to have an image appear on the statusbarpanel. specify the image using the src attribute. the image will appear instead of the label. statusbarpanel-iconic-text use this class to have an image appear on the statusbarpanel as well as a text label. specify the image using the src attribute. specify the text using the label attribute. the image will appear before the label. statusbarpanel-menu-iconic use this class to have an image appear on the statusbarpanel, and also ...
... label. statusbarpanel-iconic-text use this class to have an image appear on the statusbarpanel as well as a text label. specify the image using the src attribute. specify the text using the label attribute. the image will appear before the label. statusbarpanel-menu-iconic use this class to have an image appear on the statusbarpanel, and also allow a popup menu. specify the image using the src attribute, and place a menupopup element inside the statusbarpanel. the image will appear instead of the label. related elements statusbar ...

stringbundle - Archive of obsolete content
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. the "src" attribute accepts only absolute chrome:// urls (see bugs 133698, 26291) attributes src properties applocale , src, stringbundle, strings methods getformattedstring, getstring examples (example needed) attributes src type: uri the uri of the property file that contains the localized strings. inherited from xul element align, allowevents, allownegativeassertions,...
...n, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties applocale obsolete since gecko 1.9.1 type: nsilocale returns the xpcom object which holds information about the user's locale. this is an object which implements nsilocale. src type: url gets and sets the value of the src attribute. stringbundle type: nsistringbundle returns the xpcom string bundle object which implements nsistringbundle. strings type: nsisimpleenumerator an enumeration of all of the strings in the string bundle. the enumeration contains nsipropertyelement objects. methods getformattedstring( key, strarray ) return type: string lo...

treecell - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single cell in a tree. 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. the tree and treecol must also be marked as editable in order for this to work. the tree must be a cont...
...perties of the element, which can be used to style the element. for more information, see styling a tree. ref type: uri for template-generated elements, this attribute is used to specify the root rdf node where content generation begins. this will correspond to the value of an about attribute on an rdf container. this attribute should be placed alongside the datasources attribute. src type: uri set this to the uri of an image to appear in the tree 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,...

Building XULRunner - Archive of obsolete content
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. a basic minimal mozconfig which will build a release configuration of xulrunner is: mk_add_options moz_co_project=xulrunner mk_add_options moz_objdir=@topsrcdir@/obj-xulrunner ac_add_options --enable-application=xulrunner #uncomment the following line if you don't want to build javaxpcom: #ac_add_options --disable-javaxpcom cvs tags and xulrunner versions older xulrunner releases where tagged in cvs with (for instance xulrunner_1_8_0_5_release ) up to version 1.8.0.5 the cvs repository does not have specific tags for xulrunner anymore. instead a ...
... will get : mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.8.1.9) gecko/20071025 firefox/2.0.0.9 therefore the xulrunner version for this firefox version is : 1.8.1.9 fetching sources from mercurial as with all other mozilla products, one would fetch recent sources from mercurial. for example, to build xulrunner with the top of the tree: hg clone http://hg.mozilla.org/mozilla-central/ src cd src echo ". \$topsrcdir/xulrunner/config/mozconfig" > .mozconfig make -f client.mk build interwiki language links ...

XULRunner tips - Archive of obsolete content
useful chrome urls most of these require branding. window url window type ...
... useful chrome urls most of these require branding. ...

Windows and menus in XULRunner - Archive of obsolete content
t seen it mentioned yet, i am assuming that you can only have one <window> element per xul file. here is an example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> ... </window> notice the references to css and dtd files. the css is used to apply formatting to elements, just as it would in html. the dtd is used to create entity references so strings for titles and labels are not stored directly in the xul file; this makes updating the text -- and localization of the application -- much easier. the window title is done this way in the above exa...
...support both menus and toolbars. ...

Browser Detection and Cross Browser Support - Archive of obsolete content
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 7, mozilla, opera will not be abl...
...while at the same time supporting older browsers. html provides several methods of detecting support for various features such as support for scripting and frames. use these natural abilities of html to extend the range of browsers your content supports. using noframes to support non-frames capable browsers <html> <head> <title>frames</title> </head> <frameset rows="30,*"> <frame src="foo.html"> <frame src="bar.html"> <noframes> <body> <p> this page requires frames. see <a href="noframes.html">sitemap</a>. </p> </body> </noframes> </frameset> </html> using noscript to support non-scriptable browsers some browsers may not support scripting while some users may have scripting support turned off in their browser. use the nos...

-ms-filter - Archive of obsolete content
ength=50), progid:dximagetransform.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline style sheet to set the filter on an image. code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm <img style="filter:progid:dximagetransform.microsoft.motionblur(strength=50) progid:dximagetransform.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image. code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm <body> <p>click the image to start the filter.</p> // call the function. <div id="filterfrom" style="position: ab...
...r_s.htm <body> <p>click the image to start the filter.</p> // call the function. ...

Troubleshooting XForms Forms - Archive of obsolete content
stead of the newer, unratified version, xhtml 2.0, located at http://www.w3.org/2002/06/xhtml2 ) inline instance, no controls get bound have you remembered to use the correct namespace for the instance nodes? for an inline instance you most probably need to have <xf:instance xmlns=""> .... any instance, no controls get bound if no controls show with either inline instance or an <xf:instance src="...">, check the following: as with inline instance, make sure the instance of the form control ref binding expression matches the namespace of the data. if form controls are within repeat, check that you are using attribute nodeset for the repeat instead of attribute ref. if the instance is not in the empty namespace (xmlns=""), then all binding expressions must use a prefix bound to the na...
... extension :( should be fixed by bug 306247 and bug 280368 respectively. submission not working if you are trying to replace="instance" make sure that the document being returned is xml. there will be an error on the javascript console if it is not. on most webservers you cannot use <submission method="post" action="file.xml"> to a static xml file. you need to use method="get", or <instance src="file.xml"> if the instance is always needed. if you are trying to submit to a different domain than the form is loaded from, make sure that you have allowed cross-domain submission for that specific "form domain". read here for more information. conflicts with other plug-ins if you are using the noscript plugin you may notice that your put and/or post requests are being converted to get req...

Displaying a graphic with audio samples - Archive of obsolete content
the following example shows how to take samples from an audio stream and display them behind an image (in this case, the mozilla logo), giving the impression that the image is built from the samples. ...
...he impression that the image is built from the samples. ...

2D collision detection - Game development
> rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y) { // collision detected! } // filling in the values => if (5 < 30 && 55 > 20 && 5 < 20 && 55 > 10) { // collision detected! } rect code <div id="cr-stage"></div> <p>move the rectangle with arrow keys. ...
...ion another simple shape for collision detection is between two circles. this algorithm works by taking the centre points of the two circles and ensuring the distance between the centre points are less than the two radii added together. playable code <div id="cr-stage"></div> <p>move the circle with arrow keys. ...

GLSL Shaders - Game development
ome. create a directory to store your experiments in. save a copy of the latest minimized three.js library inside your directory. html structure here's the html structure we will use. ...
...which this material is given. in our case the cube will have both vertex and texture shaders applied. that's it — you've just created the simplest possible shader, congratulations! here's what the cube should look like: it looks exactly the same as the three.js cube demo but the slightly different position and the same blue color are both achieved using the shader. ...

Async scripts for asm.js - Game development
the main thread when the game is loading and cache the generated machine code so that the game doesn't need to be compiled on subsequent loads (starting in firefox 28). to see the difference, toggle javascript.options.parallel_parsing in about:config. putting async into action getting async compilation is easy: when writing your javascript, just use the async attribute like so: <script async src="file.js"></script> or, to do the same thing via script: var script = document.createelement('script'); script.src = "file.js"; document.body.appendchild(script); (scripts created from script default to async.) the default html shell emscripten generates produces the latter. when is async not async? two common situations in which a script is *not* async (as defined by the html spec) are: <s...
...compiled and then run immediately. what if your code is in a js string? instead of using eval or innerhtml, both of which trigger synchronous compilation, you should use a blob with an object url: var blob = new blob([codestring]); var script = document.createelement('script'); var url = url.createobjecturl(blob); script.onload = script.onerror = function() { url.revokeobjecturl(url); }; script.src = url; document.body.appendchild(script); the setting of src rather than innerhtml is what makes this script async. ...

Audio for Web games - Game development
eed. to play a specific sound from the file, we just use the known start and stop times for each audio sprite. the advantage is that we can prime one piece of audio and have our sprites ready to go. to do this we can just play and instantly pause the larger piece of audio. you'll also reduce the number of server requests and save bandwidth. var myaudio = document.createelement("audio"); myaudio.src = "mysprite.mp3"; myaudio.play(); myaudio.pause(); you'll need to sample the current time to know when to stop. if you space your individual sounds by at least 500ms then using the timeupdate event (which fires every 250ms) should be sufficient. your files may be slightly longer than they strictly need to be, but silence compresses well. here's an example of an audio sprite player — first let...
... need to sample the current time to know when to stop. if you space your individual sounds by at least 500ms then using the timeupdate event (which fires every 250ms) should be sufficient. your files may be slightly longer than they strictly need to be, but silence compresses well. ...

Initialize the framework - Game development
ely on the <canvas> element generated by the framework. ...
... still available on the phaser download page, below the links for the v3 download. go to the phaser download page. choose an option that suits you best — i would recommend the min.js option as it keeps the source code smaller, and you are unlikely need to go through the source code anyway. save the phaser code inside a /js directory in the same location as your index.html file. update the src value of the first <script> element as shown above. walking through what we have so far at this point we have a charset defined, <title> and some basic css in the header to reset the default margin and padding. we also have a <script> element to apply the phaser source code to the page. the body contains a second <script> element, where we will write the javascript code to render the game and ...

What are browser developer tools? - Learn web development
the developer tools and then click the console tab. this will give you a window like the following: to see what happens, try entering the following snippets of code into the console one by one (and then pressing enter): alert('hello!'); document.queryselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mywordmark.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); now try entering the following incorrect versions of the code and see what you get. alert('hello!); document.cheeseselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mybanana.setattri...
...ps://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); now try entering the following incorrect versions of the code and see what you get. alert('hello!); document.cheeseselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mybanana.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); you'll start to see the kind of errors that the browser returns. often these errors are fairly cryptic, but it should be pretty simple to figure these problems out! find out more find more out about the javascript console in different browsers: f...

Styling web forms - Learn web development
rules, and all the basic styles set on the <body> and <form> elements. ...
...t, in the stylesheet.css file (you'll need to replace the below @font-face blocks with them, and update the paths to the font files): @font-face { font-family: 'handwriting'; src: url('fonts/journal-webfont.woff2') format('woff2'), url('fonts/journal-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'typewriter'; src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'), url('fonts/veteran_typewriter-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } body { font : 1.3rem sans-serif; padding : 0.5em; margin : 0; background : #222; } form { position : relative; width : 740px; height : 498px; margin : 0 auto; padding: 1em; box-sizing: bord...

Dealing with files - Learn web development
look like?" copy the image you chose earlier into your images folder. open up your index.html file, and insert the following code into the file exactly as shown. don't worry about what it all means for now — we'll look at the structures in more detail later in the series. <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <img src="" alt="my test image"> </body> </html> the line <img src="" alt="my test image"> is the html code that inserts an image into the page. we need to tell the html where the image is. the image is inside the images directory, which is in the same directory as index.html. to walk down the file structure from index.html to our image, the file path we'd need is images/your-image-filename. for exa...
...here the image is. the image is inside the images directory, which is in the same directory as index.html. to walk down the file structure from index.html to our image, the file path we'd need is images/your-image-filename. for example, our image is called firefox-icon.png, so the file path is images/firefox-icon.png. insert the file path into your html code between the double quote marks of the src="" code. save your html file, then load it in your web browser (double-click the file). you should see your new webpage displaying your image! some general rules for file paths: to link to a target file in the same directory as the invoking html file, just use the filename, e.g. my-image.jpg. to reference a file in a subdirectory, write the directory name in front of the path, plus a fo...

Document and website structure - Learn web development
> <head> <meta charset="utf-8"> <title>my page title</title> <link href="https://fonts.googleapis.com/css?family=open+sans+condensed:300|sonsie+one" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css"> <!-- the below three lines are a fix to get html5 semantic elements working in old versions of internet explorer--> <!--[if lt ie 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]--> </head> <body> <!-- here is our main header that is used across all the pages of our website --> <header> <h1>header</h1> </header> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">our team</a></li> <li><a href="#">projects</a></li> ...
...ould only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. for example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site: <div class="shopping-cart"> <h2>shopping cart</h2> <ul> <li> <p><a href=""><strong>silver earrings</strong></a>: $99.95.</p> <img src="../products/3333-0985/thumb.png" alt="silver earrings"> </li> <li> ... </li> </ul> <p>total cost: $237.89</p> </div> this isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). it doesn't even particularly warrant using a <section>, as it isn't part of the main content of the page. so a <div> is fine...

Getting started with HTML - Learn web development
ind useful reference pages that include lists of block and inline elements. see block-level elements and inline elements. empty elements not all elements follow the pattern of an opening tag, content, and a closing tag. some elements consist of a single tag, which is typically used to insert/embed something in the document. for example, the <img> element embeds an image file onto a page: <img src="https://udn.realityripple.com/samples/d5/2be21e0477.png"> this would output the following: note: empty elements are sometimes called void elements. attributes elements can also have attributes. attributes look like this: attributes contain extra information about the element that won't appear in the content. in this example, the class attribute is an identifying name used to target th...
...on'; } updatecode(); }); var htmlsolution = '<h1>some music</h1><p>i really enjoy <strong>playing the drums</strong>. ...

Functions — reusable blocks of code - Learn web development
with your code and cause problems because they happen to be using the same variable names as other parts of the code, causing conflicts. this might be done maliciously, or just by accident. ...
...s because they happen to be using the same variable names as other parts of the code, causing conflicts. this might be done maliciously, or just by accident. ...

Drawing graphics - Learn web development
in the same directory. images are drawn onto canvas using the drawimage() method. the simplest version takes three parameters — a reference to the image you want to render, and the x and y coordinates of the image's top left corner. let's start by getting an image source to embed in our canvas. add the following lines to the bottom of your javascript: let image = new image(); image.src = 'firefox.png'; here we create a new htmlimageelement object using the image() constructor. the returned object is the same type as that which is returned when you grab a reference to an existing <img> element). we then set its src attribute to equal our firefox logo image. at this point, the browser starts loading the image. we could now try to embed the image using drawimage(), but we...
... make another fresh copy of our canvas template (1_canvas_template.html) and open it in your code editor. make a copy of walk-right.png in the same directory. at the bottom of the javascript, add the following line to once again make the coordinate origin sit in the middle of the canvas: ctx.translate(width/2, height/2); now let's create a new htmlimageelement object, set its src to the image we want to load, and add an onload event handler that will cause the draw() function to fire when the image is loaded: let image = new image(); image.src = 'walk-right.png'; image.onload = draw; now we'll add some variables to keep track of the position the sprite is to be drawn on the screen, and the sprite number we want to display. let sprite = 0; let posx = 0; let'...

Third-party APIs - Learn web development
udioctx.createmediaelementsource(audioelement); // etc. third party apis, on the other hand, are 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...
...; link.textcontent = current.headline.main; para1.textcontent = current.snippet; para2.textcontent = 'keywords: '; for(let j = 0; j < current.keywords.length; j++) { const span = document.createelement('span'); span.textcontent += current.keywords[j].value + ' '; para2.appendchild(span); } if(current.multimedia.length > 0) { img.src = 'http://www.nytimes.com/' + current.multimedia[0].url; img.alt = current.headline.main; } clearfix.setattribute('class','clearfix'); article.appendchild(heading); heading.appendchild(link); article.appendchild(img); article.appendchild(para1); article.appendchild(para2); article.appendchild(clearfix); section.appendchild(article); ...

HTML performance features - Learn web development
uality of your webpage. prerequisites: 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. ...
..."why" of web performance what is web performance? how do users perceive performance? ...

Beginning our React todo list - Learn web development
t be using at all for our project. we're not going to write per-component stylesheets, so first delete the app.css import from the top of app.js. we are also not going to be using the logo.svg file, so remove that import too. then, copy and paste the following commands into your terminal to delete some unneeded files. make sure you’re starting in the app's root directory! # move into the src directory of your project cd src # delete a few files rm -- app.test.js app.css logo.svg serviceworker.js setuptests.js # move back up to the root of the project cd .. notes: two of the files we’re deleting are for testing the application. we will not cover testing here. if you stopped your server to do the terminal tasks mentioned above, you’ll have to start it again using npm start. ...
...nclose them in curly braces. if you write defaultchecked="true", the value of defaultchecked will be "true" — a string literal. remember — this is actually javascript, not html! the aria-pressed attribute used in our earlier code snippet has a value of true because aria-pressed is not a true boolean attribute in the way checked is. ...

Deployment and next steps - Learn web development
blic" }, in the dev script we are passing the -w argument, which tells rollup to watch files and rebuild on changes. ...
...s to the javascript and css files in our public/index.html file relative. to do this, we just remove the leading slashes (/) from the /global.css, /build/bundle.css, and /build/bundle.js urls, like this: <title>svelte to-do list</title> <link rel='icon' type='image/png' href='favicon.png'> <link rel='stylesheet' href='global.css'> <link rel='stylesheet' href='build/bundle.css'> <script defer src='build/bundle.js'></script> do this now. now we just have to commit and push our changes to gitlab. do this by running the following commands: > git add public/index.html > git add .gitlab-ci.yml > git commit -m "added .gitlab-ci.yml file and fixed index.html absolute paths" > git push counting objects: 5, done. delta compression using up to 8 threads. compressing objects: 100% (5/5),...

Creating our first Vue component - Learn web development
ender functions), you'll need a terminal with node + npm installed. objective: to learn how to create a vue component, render it inside another component, pass data into it using props, and save its state. creating a todoitem component let's create our first component, which will display a single todo item. we'll use this to build our list of todos. in your moz-todo-vue/src/components directory, create a new file named todoitem.vue. open the file in your code editor. create the component's template section by adding <template></template> to the top of the file. create a <script></script> section below your template section. inside the <script> tags, add a default exported object export default {}, which is your component object. your file should now look like th...
...iv> <input type="checkbox" id="todo-item" checked="false" /> <label for="todo-item">{{label}}</label> </div> </template> go back to your browser and you'll see the todo item rendered as before, but without a label (oh no!). go to your browser's devtools and you’ll see a warning along these lines in the console: [vue warn]: missing required prop: "label" found in ---> <todoitem> at src/components/todoitem.vue <app> at src/app.vue <root> this is because we marked the label as a required prop, but we never gave the component that prop — we've defined where inside the template we want it used, but we haven't passed it into the component when calling it. let’s fix that. inside your app.vue file, add a label prop to the <to-do-item></to-do-item> component, jus...

Styling Vue components with CSS - Learn web development
n single file components (.vue files). component-scoped styles in single file components. to help familiarize you with each one, we'll use a combination of all three to give our app a nicer look and feel. styling with external css files you can include external css files and apply them globally to your app. let's look at how this is done. to start with, create a file called reset.css in the src/assets directory. files in this folder get processed by webpack. this means we can use css pre-processors (like scss) or post-processors (like postcss). while this tutorial will not be using such tools, it's good to know that when including such code in the assets folder it will be processed automatically. add the following contents to the reset.css file: /*reset.css*/ /* resets */ *, *::befor...
... the reset styles should be applied to the app now. the images below show the look of the app before and after the reset is applied. before: after: noticeable changes include the removal of the list bullets, backg...

Implementing feature detection - Learn web development
w directory. we will add the html5 shiv to our example too so that the html5 semantic elements will style properly in older versions of ie. download the latest version (see manual installation), unzip the zip file, copy the html5shiv-printshiv.min.js and html5shiv.min.js files into your example directory, and link to one of the files by putting the following under your <title> element: <script src="html5shiv.min.js"></script> have a look at your example css files — you'll see that basic-styling.css handles all the styling that we want to give to every browser, whereas the other two css files contain the css we want to selectively apply to browser depending on their support levels. you can look at the different effects these two files have by manually changing the css file referred to ...
...ement 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, and you'll get an idea of how modernizr works for css features. if you look at the dom inspector of your browser's developer tools, you'll see that modernizr has updated your <html> class value like so: <html class="js no-htmlimports si...

Package management basics - Learn web development
ucture your project. other tools can be very different, but at least parcel makes it easy for our initial experiment. so now we need to add an index.html file to our working directory. create index.html in your test directory, and give it the following contents: <!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <script src="./index.js"></script> </body> </html> next, we need to add an index.js file in the same directory as index.html. for now index.js can be empty; it just needs to exist. create this now. having fun with parcel now we’ll run our newly installed parcel tool. in your terminal, run the following command: parcel index.html you should see something like this printed to your terminal: server r...
...e there's some calculation, but we definitely don’t need 195k worth of javascript to do this!. when you use development tooling it's worth questioning whether they're doing the right thing for you. in this case, the bundle is nearly 200k because it has in fact included the entire date-fns library, not just the function we're using. if we had avoided any development tools and pointed a <script src=””> element to a hosted version of date-fns, roughly the same thing would have happened — all of the library would be downloaded when our example page is loaded in a browser. however, this is where development tooling has a chance to shine. whilst the tooling is on our machine, we can ask the software to inspect our use of the code and only include the functions that we're actually using i...

Old Thunderbird build
g the mapi headers needed to compile thunderbird. windows build prerequisites gnu/linux build prerequisites mac os x build prerequisites get the source note: on windows, you won't be able to build the thunderbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings"). you can pick any other location, such as a new directory c:/thunderbird-src (where "c:/", with a forward slash, is intentional to clarify you are in the mozillabuild command prompt per windows build prerequisite). note: parts of the build process also have problems when the source code is in a directory where the path is long (nested many levels deep). on linux, this can manifest as problems setting up the virtualenv for running tests (failure to install pip or virtuale...
...heck 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 changes. if on windows you get link errors like "lnk1102: out of memory" or "lnk1318: unexpected pdb error; ok (0)", try deleting the largest .pdb files before rushing out the door to buy more ram. clobbering (see below) will also remove those files. try wi...

Simple Thunderbird build
mapiwin.h 02/06/2009 17:02 1,906 mapiwz.h 02/06/2009 17:02 18,277 mapix.h 02/06/2009 17:02 5,012 mspst.h get the source note: on windows, you won't be able to build the thunderbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings"). you can pick any other location, such as a new directory c:/thunderbird-src (where "c:/", with a forward slash, is intentional to clarify you are in the mozillabuild command prompt per windows build prerequisite). note: parts of the build process also have problems when the source code is in a directory where the path is long (nested many levels deep). on linux, this can manifest as problems setting up the virtualenv for running tests (failure to install pip or virtuale...
...heck 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 changes. if on windows you get link errors like "lnk1102: out of memory" or "lnk1318: unexpected pdb error; ok (0)", try deleting the largest .pdb files before rushing out the door to buy more ram. clobbering (see below) will also remove those files. try wi...

Creating Custom Events That Can Pass Data
t of macros of the form domci_class(foo). you'll want to add an entry to it which looks like this: domci_class({truncated name}) here's the fun part: above i mentioned that you must name your events as nsdom. however, here you want to put the other part of the name (e.g. if you have an event named nsdommyfirstevent your nsdomclassinfoclasses entry would be domci_class(myfirstevent)). mozilla/dom/src/base/nsdomclassinfo.cpp mozilla contains many convenience macros to make changes like the one you're making easier. your modification of this file is basically just two macro calls. try to make sure of two things: keep your stuff at the back. you know never know what depends on that enum you modified keep your stuff organized. same reason as above. you need to make the following two modificatio...
...lowing two modifications: around line 1000: ns_define_classinfo_data({truncated name}, nsdomgenericsh, dom_default_scriptable_flags) around line 2900: dom_classinfo_map_begin({truncated name}, nsidom{truncatedname}) dom_classinfo_map_entry(nsidom{truncated name}) dom_classinfo_event_map_entries dom_classinfo_map_end remember, {truncated name} is the same as above. mozilla/content/events/src/nseventdispatcher.cpp note: in the mozilla 1.8.x branch this code is actually in mozilla/content/events/src/nseventlistenermanager.cpp this is quite an important file since this holds the createevent method which acts as a factory method dom events. the change you want to make is in nseventdispatcher::createevent(). you will find that there is a bunch of code like: if (aeventtype.lowercaseequalsl...

Using the Browser API
thub repo locally (or just download it directly if you don't do github), open webide, open the repo as a packaged app, then run it either on a simulator or a real device if you have one. in any case, you should at least download the repo and refer to the code as you read the sections below. the html an <iframe> is turned into a browser iframe by setting the mozbrowser attribute on it: <iframe src="http://mozilla.org" mozbrowser> in addition, the <iframe> can be loaded in its own child process — separate to the page embedding this frame — by including the remote attribute. <iframe src="http://hostname.tld" mozbrowser remote> warning: this last attribute is necessary for security reasons if you plan to load content from an untrusted/unknown origin. if you don't use it, you run the r...
...le text <input>. when you tap the url bar, you can enter a url using the built-in firefox os keyboard (although 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, all...

JavaScript-DOM Prototypes in Mozilla
eally have any properties (except for the standard jsobject properties such as constructor, and the non-standard __parent__, __proto__, etc.), all the dom functionality of obj comes from obj's prototype (obj.__proto__) that xpconnect sets up when exposing the first image in document to javascript. here are a few of the properties of obj's prototype: obj.__proto__ parentnode (getter function) src (getter and setter functions) getelementsbytagname (function) text_node (number property, constant) ... all those properties come from the interfaces that the c++ image object (nshtmlimageelement) implements and chooses to expose to xpconnect through the object's class info. one of these interfaces is nsidomhtmlimageelement, others are nsidomnshtmlimageelement (netscape extensions to the ...
...ans you can add a property to every node in a dom tree by doing something like this: node.prototype.foo = bar; again, modifying host objects is an unsafe practice. it is not guaranteed to work or be error-free in any implementation. it is not standard and cannot be expected to have any result. here is an attempt to modify a host object: (function(){ try { image.prototype.src = 1; } catch(ex){ alert(ex); } })(); this demonstrates that the image constructor, a host object supported in nearly all browsers for mac and windows, has a prototype property, and that an attempt to modify the prototype's src - property results in an error. another example would be modifying the pagex property of a mouseevent instance. the pagex property actually needs a patc...

Investigating leaks using DMD heap scan mode
his also seems to trigger when shutdown is extremely slow. you need the cycle collector analysis script find_roots.py, which can be downloaded as part of this repo on github. generating logs the next step is to generate a number of log files. you need to get a shutdown cc log and a dmd log, for a single run. definitions i'll write $objdir for the object directory for your firefox dmd build, $srcdir for the top level of the firefox source directory, and $heapgraph for the location of the heapgraph repo, and $logdir for the location you want logs to go to. $logdir should end in a path separator. for instance, ~/logs/leak/. the command you need to run firefox will look something like this: xpcom_mem_bloat_log=1 moz_cc_log_shutdown=1 moz_disable_content_sandbox=t moz_cc_log_directory=$logd...
...f the block. both kinds of preprocessing are done by the dmd.py script, which can be invoked like this: $objdir/dist/bin/dmd.py --clamp-contents dmd-$pid.log.gz this can take a few minutes due to symbolification, but you only need to run it once on a log file. after that is done, we can finally find out which objects (possibly) point to other objects, using the block_analyzer script: python $srcdir/memory/replace/dmd/block_analyzer.py dmd-$pid.log.gz $leakaddr this will look through every block of memory in the log, and give some basic information about any block of memory that (possibly) contains a pointer to that object. you can pass some additional options to affect how the results are displayed. “-sfl 10000 -a” is useful. the -sfl 10000 tells it to not truncate stack frames, and...

L20n HTML Bindings
the l20n html bindings you can take advantage of html bindings to localize your html documents with l20n. 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 ...
...ight in your html. <script type="application/l20n"> <brandname "firefox"> <about "about {{ brandname }}"> </script> an alternative is to include localization resources in script elements. note that this still only works for a single language. we plan to add support for a language pack service in the future that can tap into this scenario on the client side. <script type="application/l20n" src="../locales/strings.l20n"></script> note that you currently cannot use the manifest file and manually add resources via script tags at the same time (bug 923670). ...

Index
etscape signing tool 1.0 and later versions. the -j option cannot be used at the same time as the -z option. if the -c# option is not used with the -j option, the default compression value is 6. note that versions 1.1 and later of netscape signing tool correctly recognizes the codebase attribute, allows paths to be expressed for the class and src attributes instead of filenames only, processes link tags and parses html correctly, and offers clearer error messages. -l lists the certificates in your database. an asterisk appears to the left of the nickname for any certificate that can be used to sign objects with signtool. --leavearc retains the temporary .arc (arch...
...s revocation flags for the test type it 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 #dogt...

Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
err, "%-30s - generate a self-signed cert [optional]\n\n", "-x"); fprintf(stderr, "%-30s - to enable ascii [optional]\n\n", "-a"); fprintf(stderr, "%-30s - to save certificate to header file as sig verification [optional]\n\n", "-v"); exit(-1); } /* * validate the options used for generate csr command */ static void validategeneratecsrcommand(const char *progname, const char *dbdir, certname *subject, const char *subjectstr, const char *certreqfilename) { prbool validationfailed = pr_false; if (!subject) { pr_fprintf(pr_stderr, "%s -g -d %s -s: improperly formatted name: \"%s\"\n", ...
... slot = pk11_getinternalkeyslot(); if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, &pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_gettokenname(slot)); goto cleanup; } } switch (cmd) { case generate_csr: validategeneratecsrcommand(progname, dbdir, subject, subjectstr, certreqfilename); /* generate a csr */ rv = createcertrequest(slot, &pwdata, subject, certreqfilename, ascii); if (rv != secsuccess) { pr_fprintf(pr_stderr, "create certificate request: failed\n"); goto cleanup; } br...

sample2
30s - certificate signing request \n\n", "-r <csr>"); fprintf(stderr, "%-30s - generate a self-signed cert [optional]\n\n", "-x"); fprintf(stderr, "%-30s - to enable ascii [optional]\n\n", "-a"); fprintf(stderr, "%-30s - to save certificate to header file as sig verification [optional]\n\n", "-v"); exit(-1); } /* * validate the options used for generate csr command */ static void validategeneratecsrcommand(const char *progname, const char *dbdir, certname *subject, const char *subjectstr, const char *certreqfilename) { prbool validationfailed = pr_false; if (!subject) { pr_fprintf(pr_stderr, "%s -g -d %s -s: improperly formatted name: \"%s\"\n", progname, dbdir, subjectstr); validationfailed = pr_true; } if (!certreqfilename) { pr_fprintf(pr_stderr, "%s -g -d %s -s %s -r: certificate request ...
..._fprintf(pr_stderr, "nss_initreadwrite failed\n"); goto cleanup; } pk11_setpasswordfunc(getmodulepassword); slot = pk11_getinternalkeyslot(); if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, &pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_gettokenname(slot)); goto cleanup; } } switch (cmd) { case generate_csr: validategeneratecsrcommand(progname, dbdir, subject, subjectstr, certreqfilename); /* generate a csr */ rv = createcertrequest(slot, &pwdata, subject, certreqfilename, ascii); if (rv != secsuccess) { pr_fprintf(pr_stderr, "create certificate request: failed\n"); goto cleanup; } break; case add_cert_to_db: validateaddcerttodbcommand(progname, dbdir, nicknamestr, truststr, certfilename, certreqfilename, issuernamestr, ...

Creating JavaScript tests
there are two large spidermonkey test suites: jstests (in js/src/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/,...
...ctical 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. jstests run in both the shell and the browser (although you can specify that the test should be run in only one of the two locations). jstests automatically load js/src/tests/shell.js before they run, which creates a ton of functions. read more advice on jstests here. jit-test new jit-test files should be put in js/src/jit-test/tests/basic or one of the other appropriate subdirectories of jit-test/tests. jit-tests run only in the shell. jit-tests do not load extra test functionality automatically. writing a new test file have a look at the existing f...

Bytecode Descriptions
rue` on success, else throw a typeerror. format: jof_elem, jof_checkstrict hasown stack: id, obj ⇒ (obj.hasownproperty(id)) push true if obj has an own property id. note that obj is the top value, like jsop::in. this opcode is not used for normal js. self-hosted code uses it by calling the intrinsic hasown(id, obj). for example, object.prototype.hasownproperty is implemented this way (see js/src/builtin/object.js). format: jof_ic super superbase stack: callee ⇒ superbase push the superbase of the method callee. the superbase is callee.[[homeobject]].[[getprototypeof]](), the object where super property lookups should begin. callee must be a function that has a homeobject that's an object, typically produced by jsop::callee or jsop::envcallee. implements: getsuperbase, except that ...
...f the body of the loop throws an exception, we catch it, close the iterator, then use jsop::throw to rethrow. throwmsg operands: (throwmsgkind msgnumber) create and throw an error object. sometimes we know at emit time that an operation always throws. for example, delete super.prop; is allowed in methods, but always throws a referenceerror. msgnumber must be one of the error codes listed in js/src/js.msg; it determines the .message and [[prototype]] of the new error object. the number of arguments in the error message must be 0. throwsetconst operands: (uint32_t nameindex) throws a runtime typeerror for invalid assignment to a const binding. format: jof_atom, jof_name try operands: (int32_t jumpatendoffset) no-op instruction that marks the top of the bytecode for a trystatement. the ...

JS::DeflateStringToUTF8Buffer
this article covers features introduced in spidermonkey 38 encode the given string as utf8 into given buffer. syntax // new in jsapi 52 void deflatestringtoutf8buffer(jsflatstring* src, mozilla::rangedptr<char> dst, size_t* dstlenp = nullptr, size_t* numcharsp = nullptr); // obsolete in spidermonkey 49 void deflatestringtoutf8buffer(jsflatstring* src, mozilla::rangedptr<char> dst); name type description src jsflatstring * the pointer to the string to deflate. dst mozilla::rangedptr<char> the ranged pointer to the buffer. dstlenp size_t* the pointer to receive the number of bytes written to the buffer. numcharsp size_t* the pointer to receive the number of unicode charac...
...sflatstring * the pointer to the string to deflate. dst mozilla::rangedptr<char> the ranged pointer to the buffer. dstlenp size_t* the pointer to receive the number of bytes written to the buffer. numcharsp size_t* the pointer to receive the number of unicode characters written to the buffer. description js::deflatestringtoutf8buffer encodes src as utf8. the caller must either ensure dst has enough space to encode the entire string, or pass the length of the buffer as dstlenp. in which case, the function will encode characters from the string until the buffer is exhausted. does not write the null terminator. if dstlenp is provided, it will be updated to hold the number of bytes written to the buffer. if numcharsp is provided, it will be...

JS::SourceBufferHolder
sourcebufferholder, then the memory must be kept alive until the js compilation is complete. any code calling sourcebufferholder::take() must guarantee to keep the memory alive until js compilation completes. ...
.... any code calling sourcebufferholder::take() must guarantee to keep the memory alive until js compilation completes. normally only the js engine should be calling take(). ...

JS_EncodeCharacters
obsolete since jsapi 19this 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. convert a 16-bit string to an 8-bit string. syntax jsbool js_encodecharacters(jscontext *cx, const jschar *src, size_t srclen, char *dst, size_t *dstlen); name type description cx jscontext * a context. src const jschar * the pointer to 16-bit values of jsstring. this can be obtained with js_getstringchars. srclen size_t the length of the source string, in 16-bit values. dst const char * the pointer to an array of bytes to be filled with encoded characters; or null. the caller is responsible for allocating a...
...are_utf8 defined or js_setcstringsareutf8 was called, the string is converted to utf-8. otherwise each character is simply truncated to 8 bits. if utf-8 is turned on, the length of the encoded string may vary. to calculate the number of bytes needed, call js_encodecharacters twice, like this: /* determine how many bytes to allocate. */ size_t dstlen = 0; if (!js_encodecharacters(cx, src, srclen, null, &dstlen)) return js_false; /* allocate. */ char *dst = (char *) js_malloc(cx, dstlen); if (dst == null) return js_false; /* convert characters to bytes. */ js_encodecharacters(cx, src, srclen, dst, &dstlen); /* use the converted bytes for something. */ ... /* remember to free the bytes afterwards. */ js_free(cx, dst); retu...

JS_GetLocaleCallbacks
slocalecallbacks * pointer to a jslocalecallbacks struct. ...
...backs { jslocaletouppercase localetouppercase; jslocaletolowercase localetolowercase; jslocalecompare localecompare; // not used #if expose_intl_api jslocaletounicode localetounicode; }; typedef bool (* jslocaletouppercase)(jscontext *cx, js::handlestring src, js::mutablehandlevalue rval); typedef bool (* jslocaletolowercase)(jscontext *cx, js::handlestring src, js::mutablehandlevalue rval); typedef bool (* jslocalecompare)(jscontext *cx, js::handlestring src1, js::handlestring src2, js::mutablehandlevalue rval); typedef bool (* jslocaletounicode)(jscontext *cx, const char *src, js::mutablehandlevalue rval); type description jslocaletouppercase implementation of string.prototype.tolocaleuppercase() function...

Parser API
rce://gre/modules/reflect.jsm") or into a specified object via: components.utils.import("resource://gre/modules/reflect.jsm", obj) built-in objects whether in spidermonkey shell or firefox (after importing), the global singleton object reflect currently contains just the parse method. properties of the reflect object the reflect object currently consists of a single method. reflect.parse(src[, options]) coerces src to a string and parses the result as a javascript program. by default, the parsing returns a program object (see below) representing the parsed abstract syntax tree (ast). additional options may be provided via the options object, which can include any of the following properties: loc boolean default: true when loc is true, the parser includes so...
...ed callback methods are described under builder objects. target string default: script a type of the parsing target, can be either script or module. if parsing fails due to a syntax error, an instance of syntaxerror is thrown. the syntax error object thrown by reflect.parse() has the same message property as the syntax error that would be thrown by eval(src). the linenumber and filename properties of the syntax error object indicate the source location of the syntax error. node objects by default, reflect.parse() produces node objects, which are plain javascript objects (i.e., their prototype derives from the standard object prototype). all node types implement the following interface: interface node { type: string; loc: sourcelocation | ...

Profiling SpiderMonkey
instructions 1.) get yourself an optimized libxul build of firefox, with debugger info. for the mac, you'll want to read up on profiling javascript with shark. here's a sample mozconfig: mk_add_options moz_objdir=@topsrcdir@/ff-opt-libxul mk_add_options moz_make_flags=-j3 ac_add_options --enable-optimize ac_add_options --enable-libxul ac_add_options --enable-shark ac_add_options --enable-debugger-info-modules ac_add_options --enable-application=browser 2.) you'll want to run shark on both the browser and [xpcshell], since the host environments differ. ...
...add_options --enable-libxul ac_add_options --enable-shark ac_add_options --enable-debugger-info-modules ac_add_options --enable-application=browser 2.) you'll want to run shark on both the browser and [xpcshell], since the host environments differ. here are some instrumented tests to work from: media:profiling-ammo.zip 3.) once you have some changes you'd like to try, you can just rebuild the js/src directory, since it produces its own shared library, even in libxul and static builds. make -c my-obj-dir/js/src other ways to profile for linux, there are global jprof functions available. see the documentation on the --enable-jprof mozconfig option. we're working to add support for other profilers, such as oprofile, intel vtune, and callgrind. when we have js scriptable profiling options avail...

Running Parsemark
tility for measuring parse/emit performance of the spidermonkey front-end. the intent is to run a dozen or so large-payload js sites globbed up from across the web. yes, it includes gmail. here's how you get your mitts on it. the test files are not checked into the source tree because they're non-mozilla js code. download the suite of parse tests from bug 548621 and decompress them. ...
...e not checked into the source tree because they're non-mozilla js code. download the suite of parse tests from bug 548621 and decompress them. within js/src/tests, run python parsemark.py -h to see help documentation. generally you'll want to capture json results for your baseline and compare them to the results for the "current" version of your shell. ...

Shell global objects
this page lists variables and functions available on spidermonkey 53. there may be some difference between each versions. you can get the list of functions by help() function in js shell. ...
...tions available only in debug build disassemble([fun/code]) return the disassembly for the given function or code. all disassembly functions take these options as leading string arguments: -r disassemble recursively -l show line numbers -s omit source notes dis([fun/code]) disassemble functions into bytecodes. disfile('foo.js') disassemble script file into bytecodes. dissrc([fun/code]) disassemble functions with source lines. notes([fun]) show source notes for functions. stackdump(showargs, showlocals, showthisprops) tries to print a lot of information about the current stack. similar to the dumpjsstack() function in the browser. arrayinfo(a1, a2, ...) report statistics about arrays. functions available only if enable_intl_api is defined addintlextras(ob...

Thread Sanitizer
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_add_options moz_make_flags=-j12 # enable llvm specific code and build workarounds ac_add_options --enable-thread-sanitizer # if clang is already in your $path, then these can simply be: # export cc=clang # export cxx=clang++ export cc="/path/to/clang" export cxx="/path/to/clang++" # llvm-symbolizer displays much more complete backtraces when data races are detected. # ...
... has completed, you can start firefox from the objdir as usual. building only the javascript shell if you want to build only the javascript shell instead of doing a full firefox build, the build script below will probably help you to do so. before using it, you must of course adjust the path name for llvm_root to match your setup. once you have adjusted everything, execute this script in the js/src/ subdirectory and pass a directory name as the first parameter. the build will then be created in a new subdirectory with that name. #! /bin/sh if [ -z $1 ] ; then echo "usage: $0 <dirname>" elif [ -d $1 ] ; then echo "directory $1 already exists" else autoconf2.13 mkdir $1 cd $1 llvm_root="/path/to/llvm" cc="$llvm_root/build/bin/clang" \ cxx="$llvm_root/build/bi...

Building the WebLock UI
efined in the weblock.js file in client code overview above. ...
...e css to control the behavior and appearance of the element, respectively. ...

nsIAbCard
cept for a handful of them. complex properties are expected to be accessed through a call to getproperty. see //github.com/realityripple/uxp/blob/master//mailnews/addrbook/public/nsiabcard.idl for more details. ...
...n string name) parameters name the attribute you want the value for. return value the value of the attribute asked for. setcardvalue() void setcardvalue(in string attrname, in astring value) parameters attrname the attribute you want to set. value the value to set the attribute to. copy() this function will copy all values from one card to another. void copy(in nsiabcard srccard) parameters srccard the source card to copy values from. equals() boolean equals(in nsiabcard card) parameters card the card you are comparing with. return value true if the cards are the same. converttobase64encodedxml() string converttobase64encodedxml() return value converttoxmlprintdata() astring converttoxmlprintdata() return value converttoescapedvcar...

nsIDOMHTMLSourceElement
nd video media elements in html. dom/interfaces/html/nsidomhtmlsourceelement.idlscriptable please add a summary to this article. last changed in gecko 1.9.1.2 inherits from: nsidomhtmlelement the source element allows authors to specify multiple media resources for media elements. it does not specify anything on its own. attributes attribute type description src domstring the src attribute gives the address of the media resource. the value must be a valid url. this attribute must be present. note that dynamically manipulating this value after the page has loaded has no effect on the containing element; instead, change the src attribute of that element (audio or video) instead. type domstring the type attribute gives the type of the m...
...ecs parameter may be specified and might be necessary to specify exactly how the resource is encoded. media unimplemented domstring the media attribute gives the intended media type of the media resource, to help the user agent determine if this media resource is useful to the user before fetching it. its value must be a valid media query. example <video controls> <source src="foo.webm" type="video/webm; codecs=&quot;vp9, opus&quot;"> your browser does not support the <code>video</code> element. </video> this example specifies that a video object with playback controls should be drawn, playing the file "foo.ogg". the type is specified as "video/ogg", and the source element also specifies that the video file uses the dirac and speex codecs. ...

nsIDOMUserDataHandler
dom/interfaces/core/nsidomuserdatahandler.idlscriptable the callback function for the setuserdata method. 1.0 66 introduced gecko 1.5 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void handle(in unsigned short operation, in domstring key, in nsivariant data, in nsidomnode src, in nsidomnode dst); constants constant value description node_cloned 1 the node was cloned. node_imported 2 the node was cloned into a new document. node_deleted 3 unimplemented node_renamed 4 unimplemented node_adopted 5 the node was adopted into a new document. methods handle() this method is a callback which will be called if a node with user data is being cloned, imported or adopted. void handle( in unsigned short ope...
...ed 2 the node was cloned into a new document. node_deleted 3 unimplemented node_renamed 4 unimplemented node_adopted 5 the node was adopted into a new document. methods handle() this method is a callback which will be called if a node with user data is being cloned, imported or adopted. void handle( in unsigned short operation, in domstring key, in nsivariant data, in nsidomnode src, in nsidomnode dst ); parameters operation one of the node_* operation type constants from the above table. key the key that was used to set the user data. data the data that was set on the original node. src the original node. dst the new node, for clone and import operations. ...

nsIHTMLEditor
nsisupportsarray getlinkedobjects(); parameters none. return value anodelist the linked nodes found. getlistitemstate() getlistitemstate returns what list item type is in the selection. void getlistitemstate( out boolean amixed, out boolean ali, out boolean adt, out boolean add ); parameters amix...
... nsisupportsarray getlinkedobjects(); parameters none. return value anodelist the linked nodes found. getlistitemstate() getlistitemstate returns what list item type is in the selection. void getlistitemstate( out boolean amixed, out boolean ali, out boolean adt, out boolean add ); parameters amixed true if ...

nsIMsgFolder
folderswithflag(in unsigned long aflag); void getexpansionarray(in nsisupportsarray expansionarray); acstring geturiformsg(in nsimsgdbhdr msghdr); void deletemessages(in nsisupportsarray messages,in nsimsgwindow msgwindow, in boolean deletestorage, in boolean ismove, in nsimsgcopyservicelistener listener, in boolean allowundo); void copymessages(in nsimsgfolder srcfolder, in nsisupportsarray messages,in boolean ismove, in nsimsgwindow msgwindow,in nsimsgcopyservicelistener listener, in boolean isfolder, in boolean allowundo); void copyfolder(in nsimsgfolder srcfolder, in boolean ismovefolder,in nsimsgwindow msgwindow, in nsimsgcopyservicelistener listener ); void copyfilemessage(in nsifile file, in nsimsgdbhdr msgtoreplace,in boolean isdra...
...turiformsg()(in nsimsgdbhdr msghdr); deletemessages() void deletemessages(in nsisupportsarray messages, in nsimsgwindow msgwindow, in boolean deletestorage, in boolean ismove, in nsimsgcopyservicelistener listener, in boolean allowundo); copymessages() void copymessages(in nsimsgfolder srcfolder, in nsisupportsarray messages, in boolean ismove, in nsimsgwindow msgwindow, in nsimsgcopyservicelistener listener, in boolean isfolder, in boolean allowundo); copyfolder() void copyfolder(in nsimsgfolder srcfolder, in boolean ismovefolder, ...

nsIScriptableUnescapeHTML
this is equivalent to calling nsiparserutils::parsefragment(fragment, 0, isxml, baseuri, element). you should call nsiparserutils::parsefragment() instead of calling this method. nsidomdocumentfragment parsefragment( in astring fragment, in prbool isxml, in nsiuri baseuri, in nsid...
...se. element the nsidomelement to be used as the context node for the purposes of the fragment parsing algorithm. return value an nsidomdocumentfragment of the element with the new text appended. exceptions thrown ns_error_failure unable to append the text to the element. unescape() convents html source into plain text. this is equivalent to calling nsiparserutils::converttoplaintext(src, nsidocumentencoder::outputselectiononly | nsidocumentencoder::outputabsolutelinks, 0). you should call nsiparserutils::converttoplaintext() instead of calling this method. astring unescape( in astring src ); parameters src the html string to convert into plain text. return value the result of the plain text conversion. exceptions thrown ns_error_failure unable to convert the str...

NS ENSURE SUCCESS
summary macro returns return-value if ns_failed(nsresult) evaluates to true, and shows a warning on stderr in that case. ...
... summary macro returns return-value if ns_failed(nsresult) evaluates to true, and shows a warning on stderr in that case. ...

NS_CStringCopy
return values the ns_cstringcopy function returns ns_ok if successful. otherwise, it returns an error code. ...
... return values the ns_cstringcopy function returns ns_ok if successful. otherwise, it returns an error code. ...

NS_StringCopy
return values the ns_stringcopy function returns ns_ok if successful. ...
... return values the ns_stringcopy function returns ns_ok if successful. ...

nsIAbCard/Thunderbird3
firstname astring shorthand for getproperty a...
...t. the following types are supported: base64xml xml vcard autf8string translateto(in autf8string atype); parameters atype the type of item to translate the card into. return value a string containing the translated card. exceptions thrown ns_error_illegal_value type not recognized. copy() this function will copy all values from one card to another. void copy(in nsiabcard srccard) parameters srccard the source card to copy values from. equals() returns true if this card is equal to the other card. the default implementation defines equal as this card pointing to the same object as acard. another implementation defines it as equality of properties and values. the exact nature of equality is still undefined, and actual results may not match theoretical results...

customDBHeaders Preference
t code! ...
...tkeyat(row); var hdr = gdbview.db.getmsghdrforkey(key); var retval = hdr.getstringproperty("x-superfluous"); dump("x-superfluous: " + retval + "\n"); return retval; }, getsortstringforrow: function(hdr) { return hdr.getstringproperty("x-superfluous"); }, isstring: function() {return true;}, getcellproperties: function(row, col, props){}, getimagesrc: function(row, col) {return null;}, getsortlongforrow: function(hdr) {return 0;} } function addcustomcolumnhandler() { gdbview.addcolumnhandler("colsuperfluous",columnhandler); dump("column handler being added: " + columnhandler + "\n"); } var createdbobserver = { // components.interfaces.nsiobserver observe: function(amsgfolder, atopic, adata) { dump("here here!")...

Using the Multiple Accounts API
john smith preference: mail.identity.identity.useremail - the user's e-mail address, i.e. jsmith@isp.com preference: mail.identity.identity.reply_to - reply to address during message composition, should only be used if different t...
...john smith preference: mail.identity.identity.useremail - the user's e-mail address, i.e. jsmith@isp.com preference: mail.identity.identity.reply_to - reply to address during message composition, should only be used if different than useremail. (replyto: header in mail messa...

Using the Mozilla source server
tch to mercurial, you'll need cvs.exe, added to your path (the cvs.exe from mozillabuild has problems, use this one instead) note: do not use the cvs from mozillabuild, it will not work! set up symbols follow the instructions for using the mozilla symbol server. once the symbol path is set you must now enable source server. using the source server in windbg in the windbg command line, type .srcfix and hit enter. this enables source server support. now, when you click on a frame in the "calls" window, windbg will prompt you about running cvs to download the associated source code. if you click "yes", windbg will display *busy* in the status bar while it downloads the source, and then it will automatically open the file and highlight the current line. using the source server in v...
...bout running cvs to download the associated source code. if you click "yes", windbg will display *busy* in the status bar while it downloads the source, and then it will automatically open the file and highlight the current line. using the source server in visual studio note: source server support does not work correctly out of the box in visual studio 2005. if you install windbg, and copy srcsrv.dll from the windbg install dir to the visual studio install dir (replacing the existing copy) it will work. enable source server support under tools -> options. also, disable (uncheck) the box that says "require source files to exactly match the original version". start debugging your program. symbols will load and then, if you're using a cvs build, when you try to step into or step over ...

Body.bodyUsed - Web APIs
lob out of the response using blob(), put it into an object url using url.createobjecturl, and then set that url as the source of an <img> element to display the image. notice that we log response.bodyused to the console once before the response.blob() call and once after. this returns false before and true afterwards, as at that point the body has been read. ...
... living standard ...

Body - Web APIs
on. it returns a promise that resolves with a usvstring (text). the response is always decoded using utf-8. examples the example below uses a simple fetch call to grab an image and display it in an <img> tag. you'll notice that since we are requesting an image, we need to run body.blob() (response implements body) to give the response its correct mime type. ...
...lements body) to give the response its correct mime type. html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content const myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg') .then(res => res.blob()) .then(res => { const objecturl = url.createobjecturl(res); myimage.src = objecturl; }); specifications specification status comment fetchthe definition of 'body' in that specification. living standard ...

CanvasPattern.setTransform() - Web APIs
ern gets applied if you set it as the current fillstyle and gets drawn onto the canvas when using the fillrect() method, for example. ...
...nges update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('c...

CanvasRenderingContext2D.drawImage() - Web APIs
data. type_mismatch_err the specified source element isn't supported. ns_error_not_available the image is not loaded yet. use .complete === true and .onload to determine when it is ready. examples drawing an image to the canvas this example draws an image to the canvas using the drawimage() method. html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/db/f374e9c6fc.jpg" width="300" height="227"> </div> javascript the source image is taken from the coordinates (33, 71), with a width of 104 and a height of 124. it is drawn to the canvas at (21, 20), where it is given a width of 87 and a height of 104. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const ima...
...h and videoheight if the element is a <video> element, and so on. ...

Applying styles and colors - Web APIs
horizontally but not vertically. repeat-y tiles the image vertically but not horizontally. no-repeat doesn't tile the image. it's used only once. we use this method to create a canvaspattern object which is very similar to the gradient methods we've seen above. once we've created a pattern, we can assign it to the fillstyle or strokestyle properties. for example: var img = new image(); img.src = 'someimage.png'; var ptrn = ctx.createpattern(img, 'repeat'); note: like with the drawimage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly. a createpattern example in this last example, we'll create a pattern to assign to the fillstyle property. the only thing worth noting is the use of the image's onload handler...
...ample in this last example, we'll create a pattern to assign to the fillstyle property. the only thing worth noting is the use of the image's onload handler. this is to make sure the image is loaded before it is assigned to the pattern. ...

Basic usage of canvas - Web APIs
let's start this tutorial by looking at the <canvas> html element itself. at the end of this page, you will know how to set up a canvas 2d context and have drawn a first example in your browser. the <canvas> element <canvas id="tutorial" width="150" height="150"></canvas> at first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes. indeed, the <canvas> element has only two attributes, width and height. these are both optional and can also be set using dom properties. when no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. the element can be sized arbitrarily by css, but during rendering the image is scaled to fit its layout size: if the css siz...
...l ignore the content inside the container, and just render the canvas normally. for example, we could provide a text description of the canvas content or provide a static image of the dynamically rendered content. this can look something like this: <canvas id="stockgraph" width="150" height="150"> current stock price: $3.15 + 0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas> telling the user to use a different browser that supports canvas does not help users who can't read the canvas at all, for example. providing a useful fallback text or sub dom helps to make the canvas more accessible. required </canvas> tag as a consequence of the way fallback is provided, unlike the <img> element, the <canvas> el...

Document.querySelectorAll() - Web APIs
list of <p> elements whose immediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test. ...
...iv> with the class highlighted and which are located inside a container whose id is test. ...

Examples of web and XML development using the DOM - Web APIs
": height=" + arrimages[i].height + ", width=" + arrimages[i].width + ", style.height=" + arrimages[i].style.height + ", style.width=" + arrimages[i].style.width + "<\/li>"; } strhtml += "<\/ul>"; objoutput.innerhtml = strhtml; } </script> </head> <body onload="init();"> <p>image 1: no height, width, or style <img id="image1" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif"> </p> <p>image 2: height="50", width="500", but no style <img id="image2" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" height="50" width="500"> </p> <p>image 3: no height, width, but style="height: 50px; width: 500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif"...
...om/samples/d2/8ba7141ed1.gif" style="height: 50px; width: 500px;"> </p> <div id="output"> </div> </body> </html> example 2: image attributes <!doctype html> <html lang="en"> <head> <title>modifying an image border</title> <script> function setborderwidth(width) { document.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border 5px-wide" onclick="setborderwidth(5);" /> </form> </body> </html> example 3: manipulating styles in this simple example, some basic s...

Element.querySelectorAll() - Web APIs
ment's <p> elements whose immediate parent element is a div with the class "highlighted" and which are located inside a container whose id is "test". ...
...with the class "highlighted" and which are located inside a container whose id is "test". ...

EventTarget.addEventListener() - Web APIs
this.returnvalue=false; }; } if (!event.prototype.stoppropagation) { event.prototype.stoppropagation=function() { this.cancelbubble=true; }; } if (!element.prototype.addeventlistener) { var eventlisteners=[]; var addeventlistener=function(type,listener /*, usecapture (will be ignored) */) { var self=this; var wrapper=function(e) { e.target=e.srcelement; e.currenttarget=self; if (typeof listener.handleevent != 'undefined') { listener.handleevent(e); } else { listener.call(self,e); } }; if (type=="domcontentloaded") { var wrapper2=function(e) { if (document.readystate=="complete") { wrapper(e); } }; document.attachevent("...
... (type=="domcontentloaded") { var wrapper2=function(e) { if (document.readystate=="complete") { wrapper(e); } }; document.attachevent("onreadystatechange",wrapper2); eventlisteners.push({object:this,type:type,listener:listener,wrapper:wrapper2}); if (document.readystate=="complete") { var e=new event(); e.srcelement=window; wrapper2(e); } } else { this.attachevent("on"+type,wrapper); eventlisteners.push({object:this,type:type,listener:listener,wrapper:wrapper}); } }; var removeeventlistener=function(type,listener /*, usecapture (will be ignored) */) { var counter=0; while (counter<eventlisteners.length) { var eventlistener=event...

File.getAsDataURL() - Web APIs
...
... ...

FileReader: abort event - Web APIs
cancelable no interface progressevent event handler property filereader.onabort examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; gr...
...onst fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(...

FileReader: load event - Web APIs
cancelable no interface progressevent event handler property filereader.onload examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; gr...
...onst fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(...

FileReader: loadend event - Web APIs
cancelable no interface progressevent event handler property filereader.onloadend examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; gr...
...onst fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(...

FileReader: loadstart event - Web APIs
cancelable no interface progressevent event handler property filereader.onloadstart examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; gr...
...onst fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(...

FileReader: progress event - Web APIs
cancelable no interface progressevent event handler property filereader.onprogress examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; gr...
...onst fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(...

FileSystemEntry.toURL() - Web APIs
syntax filesystementry.tourl([mimetype]); parameters mimetype optional an optional string specifying the mime type to use when interpreting the file. this can be used to help deal with files whose types aren't recognized automatically by the user agent. ...
...s located at http://my-awesome-website.woot, and you have a temporary file system that contains an image file named awesomesauce.jpg, the url returned by tourl() might be (depending on the browser's implementation) something like "filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg". code that makes use of this might look like this: let img = document.createelement("img"); img.src = imagefileentry.tourl(); document.body.appendchild(img); assuming the scenario mentioned before the code, the result would be html that looks like this being appended to the end of the document: <img src="filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg"> browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contrib...

msAudioCategory - Web APIs
et explorer and microsoft edge. msaudiocategory specifies the purpose of the audio or video media, such as background audio or alerts. syntax <audio controls="controls" msaudiocategory="backgroundcapablemedia"> </audio> the msaudiocategory property offers a variety of values that can enhance the behavior of your audio-aware app. note that you must set the msaudiocategory before setting the src property in code. value include a description of the property's value, including data type and what it represents. value description background capable? alert looping or longer running alert sounds: alarms ring tones ringing notification sounds that need to attenuate existing audio no backgroundcapablemedia for a...
...ype is not explicitly set, msaudiodevicetype will be set to communications. for hardware audio offload to be automatically applied, the audio category must be set to foregroundonlymedia or backgroundcapablemedia. hardware audio offload optimizes audio rendering which can improve functionality and battery life. example <audio msaudiocategory="backgroundcapablemedia" controls="controls"> <source src="song.mp3"/> </audio> ...

HTMLCanvasElement.toDataURL() - Web APIs
1.0); // data:image/jpeg;base64,/9j/4aaqskzjrgabaq...9oadambaairaxeapwd/ad/6ap/z" var mediumquality = canvas.todataurl('image/jpeg', 0.5); var lowquality = canvas.todataurl('image/jpeg', 0.1); example: dynamically change images you can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs. ...
...octx.drawimage(ocolorimg, 0, 0); oimgdata = octx.getimagedata(0, 0, nwidth, nheight); apix = oimgdata.data; npixlen = apix.length; for (npixel = 0; npixel < npixlen; npixel += 4) { apix[npixel + 2] = apix[npixel + 1] = apix[npixel] = (apix[npixel] + apix[npixel + 1] + apix[npixel + 2]) / 3; } octx.putimagedata(oimgdata, 0, 0); ograyimg = new image(); ograyimg.src = ocanvas.todataurl(); ograyimg.onmouseover = showcolorimg; ocolorimg.onmouseout = showgrayimg; octx.clearrect(0, 0, nwidth, nheight); ocolorimg.style.display = "none"; ocolorimg.parentnode.insertbefore(ograyimg, ocolorimg); } } specifications specification status comment html living standardthe definition of 'htmlcanvaselement.todataurl' in that sp...

HTMLImageElement.border - Web APIs
ifying the thickness of the border that should surround the image, in css pixels. a value of 0, or an empty string, indicates that there should be no border drawn. the default value of border is 0 usage notes do not use border. it is obsolete. instead, use the css border property and its longhand properties to establish borders around images. ...
...hat there should be no border drawn. the default value of border is 0 usage notes do not use border. it is obsolete. instead, use the css border property and its longhand properties to establish borders around images. for example, if you have the following html: <img src="image.png" border="2"> the following will provide the same appearance using css instead of this obsolete property: <img src="image.png" style="border: 2px;"> you can further provide additional information to change the color and other features of the border: <img src="image.png" style="border: dashed 2px #333388;"> specifications specification status comment html living standardthe definition of 'htmlimageelement.border' in that specification. living standard html 4.01 s...

HTMLImageElement.complete - Web APIs
the read-only htmlimageelement interface's complete attribute is a boolean value which indicates whether or not the image has completely loaded. syntax let doneloading = htmlimageelement.complete; value a boolean value which is true if the image has completely loaded; otherwise, the value is false. the image is considered completely loaded if any of the following are true: neither the src nor the srcset attribute is specified. the srcset attribute is absent and the src attribute, while specified, is the empty string (""). the image resource has been fully fetched and has been queued for rendering/compositing. the image element has previously determined that the image is fully available and ready for use. the image is "broken;" that is, the image failed to load due to an error or ...
...ting to do its work. this is demonstrated in the code below. let lightboxelem = document.queryselector("#lightbox"); let lightboximgelem = lightboxelem.queryselector("img"); let lightboxcontrolselem = lightboxelem.queryselector(".toolbar"); async function loadimage(url, elem) { return new promise((resolve, reject) => { elem.onload = () => resolve(elem); elem.onerror = reject; elem.src = url; }); } async function lightbox(url) { lightboxelem.style.display = "block"; await loadimage("https://somesite.net/huge-image.jpg", lightboximgelem); lightboxcontrolselem.disabled = false; } /* ... */ function fixredeyecommand() { if (lightboxelem.style.display === "block" && lightboximgelem.complete) { fixredeye(lightboximgelem); } else { /* can't start doing this unt...

HTMLImageElement.height - Web APIs
rendered to a visual medium or not. if the image is being rendered to a visual medium such as a screen or printer, the height is expressed in css pixels. otherwise, the image's height is represented using its natural (intrinsic) height, adjusted for the display density as indicated by naturalheight. ...
...sing the srcset attribute. one is 200px wide and the other is 400px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 300px. <p>image height: <span class="size">?</span>px (resize to update)</p> <img src="/files/17373/clock-demo-200px.png" alt="clock" srcset="/files/17373/clock-demo-200px.png 200w, /files/17374/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 300px"> javascript the javascript code looks at the height to determine the height of the image given the width at which it's currently drawn. var clockimage = document.queryselector("img"); let outp...

HTMLImageElement.longDesc - Web APIs
resented by the chart, using only text. this can be used by readers both as an explanation, but also as a substitute for visually-impaired users. usage notes this property is obsolete and should no longer be used. instead of using longdesc to provide a link to a detailed description of an image, encapsulate the image within a link using the <a> element. ...
... specifications specification status comment html 4.01 specificationthe definition of 'htmlimageelement.longdesc' in that specification. ...

HTMLImageElement.sizes - Web APIs
bottom of the example let you actually modify the sizes property slightly, switching the largest of the three widths for the image between 40em and 50em. html <article> <h1>an amazing headline</h1> <div class="test"></div> <p>this is even more amazing content text. it's really spectacular. and fascinating. oh, it's also clever and witty. ...
...zes property slightly, switching the largest of the three widths for the image between 40em and 50em. html <article> <h1>an amazing headline</h1> <div class="test"></div> <p>this is even more amazing content text. it's really spectacular. and fascinating. oh, it's also clever and witty. award-winning stuff, i'm sure.</p> <img src="/files/16870/new-york-skyline-wide.jpg" srcset="/files/16870/new-york-skyline-wide.jpg 3724w, /files/16869/new-york-skyline-4by3.jpg 1961w, /files/16871/new-york-skyline-tall.jpg 1060w" sizes="((min-width: 50em) and (max-width: 60em)) 50em, ((min-width: 30em) and (max-width: 50em)) 30em, (max-width: 30em) 20em"> <p>then there's even more amazing stuff to say down here. can ...

HTMLImageElement.width - Web APIs
ing rendered to a visual medium or not. if the image is being rendered to a visual medium such as a screen or printer, the width is expressed in css pixels. otherwise, the image's width is represented using its natural (intrinsic) width, adjusted for the display density as indicated by naturalwidth. ...
...using the srcset attribute. one is 200px wide and the other is 400px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 400px. <p>image width: <span class="size">?</span>px (resize to update)</p> <img src="/files/16864/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 400px"> javascript the javascript code looks at the width to determine the width of the image at the moment. this is done in the window's load and resize event handlers, in order to always provide thi...

HTMLMediaElement.load() - Web APIs
state and begins the process of selecting a media source and loading the media in preparation for playback to begin at the beginning. the amount of media data that is prefetched is determined by the value of the element's preload attribute. this method is generally only useful when you've made dynamic changes to the set of sources available for the media element, either by changing the element's src attribute or by adding or removing <source> elements nested within the media element itself. load() will reset the element and rescan the available sources, thereby causing the changes to take effect. syntax mediaelement.load(); parameters none. return value undefined. usage notes calling load() aborts all ongoing operations involving this media element, then begins the process of selecti...
... element and rescan the available sources, thereby causing the changes to take effect. syntax mediaelement.load(); parameters none. return value undefined. usage notes calling load() aborts all ongoing operations involving this media element, then begins the process of selecting and loading an appropriate media resource given the options specified in the <audio> or <video> element and its src attribute or child <source> element(s). this is described in more detail in supporting multiple formats in video and audio content. the process of aborting any ongoing activities will cause any outstanding promises returned by play() being resolved or rejected as appropriate based on their status before the loading of new media can begin. pending play promises are aborted with an "aborterror" do...

Ajax navigation example - Web APIs
ntent.php: <p> [ <a class="ajax-nav" href="first_page.php">first example</a> | <a class="ajax-nav" href="second_page.php">second example</a> | <a class="ajax-nav" href="third_page.php">third example</a> | <a class="ajax-nav" href="unexisting.php">unexisting page</a> ] </p> include/header.php: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/ajax_nav.js"></script> <link rel="stylesheet" href="css/style.css" /> js/ajax_nav.js: "use strict"; const ajaxrequest = new (function () { function closereq () { oloadingbox.parentnode && document.body.removechild(oloadingbox); bisloading = false; } function abortreq () { if (!bisloading) { return; } oreq.abort(); closereq(); } ...
... 506: "variant also negotiates (experimental)", 507: "insufficient storage", 508: "loop detected", 509: "unassigned", 510: "not extended", 511: "network authentication required" }; var oreq, bisloading = false, bupdateurl = false; oloadingbox.id = "ajax-loader"; ocover.onclick = abortreq; oloadingimg.src = "data:image/gif;base64,r0lgodlheaaqapiaap///waaamlcwkjcqgaaagjiyokcgpkskih/c05fvfndqvbfmi4waweaaaah/hpdcmvhdgvkihdpdgggywphegxvywquaw5mbwah+qqjcgaaacwaaaaaeaaqaaadmwi63p4wyklre2mioggznadomgyjrbexwroumcg2lmdewnhqlvsyod2mbzkydadka+diaaah+qqjcgaaacwaaaaaeaaqaaadnai63p5ojcegg4qmu7dmikrxqlfuydezigbmrvsaqhwctxxf7weyb4ag1xjihkmzsiukkhiaifkecqoaaaasaaaaabaaeaaaazyiujijk8pbyjdmlfyvbovjha70gu7xsujhmktwhp...

Using IndexedDB - Web APIs
any, or null if none is specified) and isautolocale (returns true if the index was created with an auto locale, meaning that the platform's default locale is used, false otherwise.) note: this feature is currently hidden behind a flag — to enable it and experiment, go to about:config and enable dom.indexeddb.experimental. ...
... }); }); reader.readastext(blob); } else if (blob.type.indexof('image/') == 0) { iframe.load(function() { var img_id = 'image-' + key; var img = $('<img id="' + img_id + '"/>'); $(this).contents().find('body').html(img); var obj_url = window.url.createobjecturl(blob); $(this).contents().find('#' + img_id).attr('src', obj_url); window.url.revokeobjecturl(obj_url); }); } else if (blob.type == 'application/pdf') { $('*').css('cursor', 'wait'); var obj_url = window.url.createobjecturl(blob); iframe.load(function() { $('*').css('cursor', 'auto'); }); iframe.attr('src', obj_url); window.url.revokeobjecturl(obj_url); } else { ...

MediaError.code - Web APIs
was aborted by the user's request. media_err_network 2 some kind of network error occurred which prevented the media from being successfully fetched, despite having previously been available. media_err_decode 3 despite having previously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error. media_err_src_not_supported 4 the associated resource or media provider object (such as a mediastream) has been found to be unsuitable. example this example creates a <video> element, establishes an error handler for it, and then sets the element's src attribute to the video resource to present in the element. the error handler simply outputs a message var obj = document.createelement('video'); ...
...mediastream) has been found to be unsuitable. example this example creates a <video> element, establishes an error handler for it, and then sets the element's src attribute to the video resource to present in the element. the error handler simply outputs a message var obj = document.createelement('video'); obj.onerror = function() {console.log("error with media: " + obj.error.code);} obj.src="https://example.com/blahblah.mp4"; specifications specification status comment html living standardthe definition of 'mediaerror.code' in that specification. living standard initial definition ...

MediaError.message - Web APIs
ption of the mediaerror.code property's value, but instead goes deeper into the specifics of this particular error and its circumstances. if no specific 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 ...
...error; switch(err.code) { case mediaerror.media_err_aborted: s += "the user canceled the audio."; break; case mediaerror.media_err_network: s+= "a network error occurred while fetching the audio."; break; case mediaerror.media_err_decode: s+= "an error occurred while decoding the audio."; break; case mediaerror.media_err_src_not_supported: s+= "the audio is missing or is in a format not supported by your browser."; break; default: s += "an unknown error occurred."; break; } let message = err.message; if (message && message.length) { s += " " + message; } displayerrormessage("<strong>error " + err.code + ":</strong> " + s + "<br>"); }; this gets the...

MediaRecorder: dataavailable event - Web APIs
addeventlistener to listen for dataavailable events: ... var chunks = []; mediarecorder.addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ... the same, but using the ondataavailable event handler property: ... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.
...... the same, but using the ondataavailable event handler property: ... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ... specifications specification status mediastream recording working draft ...

MediaSession - Web APIs
setpositionstate() sets the current playback position and speed of the media currently being presented. ...
...sion.setactionhandler('seekbackward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {}); navigator.mediasession.setactionhandler('previoustrack', function() {}); navigator.mediasession.setactionhandler('nexttrack', function() {}); } the following example sets up event handlers for pausing and playing: var audio = document.queryselector("#player"); audio.src = "song.mp3"; navigator.mediasession.setactionhandler('play', play); navigator.mediasession.setactionhandler('pause', pause); function play() { audio.play(); navigator.mediasession.playbackstate = "playing"; } function pause() { audio.pause(); navigator.mediasession.playbackstate = "paused"; } specifications specification status comment media session stand...

MediaStreamConstraints.audio - Web APIs
result using a mediatrackconstraints object now let's look at a similar example that uses a...
...as long as an audio i...

MediaStreamConstraints.video - Web APIs
result using a mediatrackconstraints object now let's look at a similar example that uses a s...
...as long as a video input de...

MediaStreamTrack: ended event - Web APIs
data has been removed or ejected. a remote peer has permanently stopped sending data; pausing media does not generate an ended event. examples this example sets up an event handler for the ended event, which changes an on-screen icon to indicate that the track is no longer active. ...
...on-screen icon to indicate that the track is no longer active. track.addeventlistener('ended', () => { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; }) you can also set up the event handler using the mediastreamtrack.onended property: track.onended = function() { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'ended' in that specification. candidate recommendation initial specification. ...

MediaStreamTrack.stop() - Web APIs
is stopped. once no media tracks are using the source, the source may actually be completely stopped. immediately after calling stop(), the readystate property is set to ended. examples stopping a video stream in this example, we see a function which stops a streamed video by calling stop() on every track on a given <video>. function stopstreamedvideo(videoelem) { const stream = videoelem.srcobject; const tracks = stream.gettracks(); tracks.foreach(function(track) { track.stop(); }); videoelem.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 tra...
...m.gettracks(); tracks.foreach(function(track) { track.stop(); }); videoelem.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. ...

Using the MediaStream Recording API - Web APIs
first, we display a prompt asking the user to name their clip. next, we create an html structure like the following, inserting it into our clip container, which is an <article> element...
...ke the following, inserting it into our clip container, which is an <article> element. <article class="clip"> <audio controls></audio> <p>your clip name</p> <button>delete</button> </article> after that, we create a combined blob out of the recorded audio chunks, and create an object url pointing to it, using window.url.createobjecturl(blob). we then set the value of the <audio> element's src attribute to the object url, so that when the play button is pressed on the audio player, it will play the blob. finally, we set an onclick handler on the delete button to be a function that deletes the whole clip html structure. specifications specification status comment mediastream recording working draft initial definition ...

Media Session API - Web APIs
llowing example shows feature detection for the media session api. ...
...s a metadata object for the session, and adds event handlers for the user control actions: if ('mediasession' in navigator) { navigator.mediasession.metadata = new mediametadata({ title: 'unforgettable', artist: 'nat king cole', album: 'the ultimate collection (remastered)', artwork: [ { src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' }, { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' }, { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' }, { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' }, { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' }, { src: 'https://dummyimage.com/512x512', sizes: '512x512', ty...

Media Source API - Web APIs
ures offered have really only been useful for playing single whole tracks. we can't, for example, combine/split arraybuffers. streaming media has up until recently been the domain of flash, with technologies like flash media server serving video streams using the rtmp protocol. the mse standard with media source extensions (mse), this is changing. mse allows us to replace the usual single track src value fed to media elements with a reference to a mediasource object, which is a container for information like the ready state of the media for being played, and references to multiple sourcebuffer objects that represent the different chunks of media that make up the entire stream. mse gives us finer grained control over how much and how often content is fetched, and some control over memory usa...
...kdefault provides a sourcebuffer with kind, label, and language information for tracks that do not contain this information in the initialization segments of a media chunk. trackdefaultlist a simple container list for multiple trackdefault objects. extensions to other interfaces url.createobjecturl() creates an object url pointing to a mediasource object that can then be specified as the src value of an html media element to play a media stream. htmlmediaelement.seekable when a mediasource object is played by an html media element, this property will return a timeranges object that contains the time ranges that the user is able to seek to. htmlvideoelement.getvideoplaybackquality() returns a videoplaybackquality object for the currently played video. audiotrack.sourcebuffer, vid...

msPlayToPreferredSourceUri - Web APIs
urce identifier (uri). this uri can point to a cloud based media server allowing streaming directly from the cloud, which can be drm protected, instead of streaming content from the windows machine which must be unprotected content. a forward slash ("/") is appended to the uri string when it is sent over the network to a playto device. this is done to conform to uri standards. ...
...tected content. a forward slash ("/") is appended to the uri string when it is sent over the network to a playto device. this is done to conform to uri standards. example <video src="http://www.contoso.com/videos/video.mp4" msplaytopreferredsourceuri="http://www.contoso.com/catalogid=1234" /> var video = document.createelement('video'); document.body.appendchild(video); video.src = "http://www.contoso.com/videos/video.mp4"; video.msplaytopreferredsourceuri = "http://www.contoso.com/catalogid=1234"; see also microsoft playready content access and protection technology is a set of technologies that can be used to distribute audio/video content more securely over a network, and help prevent the unauthorized use of this content. ...

Navigator.getUserMedia() - Web APIs
scallback a function which is invoked when the request for media access is approved. the function is called with one parameter: the mediastream object that contains the media stream. your callback can then assign the stream to the desired object (such as an <audio> or <video> element), as shown in the following example: function(stream) { var video = document.queryselector('video'); video.srcobject = stream; video.onloadedmetadata = function(e) { // do something with the video here. }; } errorcallback when the call fails, the function specified in the errorcallback is invokedwith a mediastreamerror object as its sole argument; this object is is modeled on domexception. see {anch("errors")}} below for a list of the errors which can occur. return value undefined. err...
...tusermedia() for modern examples. ...

ParentNode.querySelectorAll() - Web APIs
list of <p> elements whose immediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test. ...
...iv> with the class highlighted and which are located inside a container whose id is test. ...

RTCOutboundRtpStreamStats - Web APIs
iver. this is an indicator of how often the stream has lagged, requiring frames to be skipped in order to catch up. valid only for video streams. framesencoded the number of frames that have been successfully encoded so far for sending on this rtp stream. only valid for video streams. lastpacketsenttimestamp a domhighrestimestamp indicating the time at which the last packet was sent for this ssrc. the timestamp property, on the other hand, indicates the time at which the rtcoutboundrtpstreamstats object was generated. nackcount an integer value indicating the total number of negative acknolwedgement (nack) packets this rtcrtpsender has received from the remote rtcrtpreceiver. perdscppacketssent a record of key-value pairs with strings as the keys mapped to 32-bit integer values, each ...
...stream has spent with its quality limited for that reason. qualitylimitationreason a value from the rtcqualitylimitationreason enumerated type explaining why the resolution and/or frame rate is being limited for this rtp stream. valid only for video streams. remoteid a string which identifies the rtcremoteinboundrtpstreamstats object that provides statistics for the remote peer for this same ssrc. this id is stable across multiple calls to getstats(). retransmittedbytessent the total number of bytes that have been retransmitted for this source as of the time the statistics were sampled. these retransmitted bytes comprise the packets included in the value returned by retransmittedpacketssent. retransmittedpacketssent the total number of packets that have needed to be retransmitted for ...

RTCPeerConnection: track event - Web APIs
er connection. see track event types in rtctrackevent for details. examples this example shows code that creates a new rtcpeerconnection, then adds a new track event handler. ...
... pc.addeventlistener("track", e => { videoelement.srcobject = e.streams[0]; hangupbutton.disabled = false; }, false); the event handler assigns the new track's first stream to an existing <video> element, identified using the variable videoelement. you can also assign the event handler function to the ontrack property, rather than use addeventlistener(). pc.ontrack = e => { videoelement.srcobject = e.streams[0]; hangupbutton.disabled = false; return false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'track' in that specification. candidate recommendation initial specification. ...

RTCRemoteOutboundRtpStreamStats - Web APIs
erties measuring metrics specific to outgoing rtp streams. properties in addition to the properties defined by rtcsentrtpstreamstats and its underlying rtcrtpstreamstats and rtcstats dictionaries, rtcremoteoutboundrtpstreamstats defines the following properties. localid a domstring which is used to find the local rtcinboundrtpstreamstats object which shares the same synchronization source (ssrc). remotetimestamp a domhighrestimestamp specifying the timestamp (on the remote device) at which the statistics in the rtcremoteoutboundrtpstreamstats object were sent by the remote endpoint. this is different from the timestamp found in the base rtcstats dictionary; it represents the time at which the object's statistics were received or generated by the local endpoint. reportssent an intege...
...e device) at which the statistics in the rtcremoteoutboundrtpstreamstats object were sent by the remote endpoint. this is different from the timestamp found in the base rtcstats dictionary; it represents the time at which the object's statistics were received or generated by the local endpoint. reportssent an integer value indicating the total number of rtcp sender report (sr) blocks that this ssrc has sent. usage notes the rtcremoteoutboundrtpstreamstats object's remotetimestamp proeprty provides statistics based on the received data's ntp timestamp taken from an rtcp sender report (sr) block. be aware that the remote clock may not be synchronized with the local clock (either in current time or speed at which time elapses). specifications specification status comment ...

RTCRtpContributingSource - Web APIs
the rtcrtpcontributingsource dictionary of the the webrtc api is used by getcontributingsources() to provide information about a given contributing source (csrc), including the most recent time a packet that the source contributed was played out. the information provided is based on the last ten seconds of media received. properties audiolevel optional a double-precision floating-point value between 0 and 1 specifying the audio level contained in the last rtp packet played from this source. rtptimestamp optional the rtp timestamp of the media played out at the time indicated by timestamp. ...
...on floating-point value between 0 and 1 specifying the audio level contained in the last rtp packet played from this source. rtptimestamp optional the rtp timestamp of the media played out at the time indicated by timestamp. this value is a source-generated time value which can be used to help with sequencing and synchronization. source optional a 32-bit unsigned integer value specifying the csrc identifier of the contributing source. timestamp optional a domhighrestimestamp indicating the most recent time at which a frame originating from this source was delivered to the receiver's mediastreamtrack specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpcontributingsource' in that specification.

RTCRtpReceiver - Web APIs
ns the rtcdtlstransport instance over which the media for the receiver's track is received. obsolete properties rtcptransport this property has been removed; the rtp and rtcp transports have been combined into a single transport. use the transport property instead. methods rtcrtpreceiver.getcontributingsources() returns an array of rtcrtpcontributingsource instances for each unique csrc (contributing source) identifier received by the current rtcrtpreceiver in the last ten seconds. rtcrtpreceiver.getparameters() returns an rtcrtpparameters object which contains information about how the rtc data is to be decoded. rtcrtpreceiver.getstats() returns a promise whose fulfillment handler receives a rtcstatsreport which contains statistics about the incoming streams and their depe...
...n rtcrtpparameters object which contains information about how the rtc data is to be decoded. rtcrtpreceiver.getstats() returns a promise whose fulfillment handler receives a rtcstatsreport which contains statistics about the incoming streams and their dependencies. rtcrtpreceiver.getsynchronizationsources() returns an array including one rtcrtpsynchronizationsource instance for each unique ssrc (synchronization source) identifier received by the current rtcrtpreceiver in the last ten seconds. static methods rtcrtpreceiver.getcapabilities() returns the most optimistic view of the capabilities of the system for receiving media of the given kind. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition o...

RTCTrackEvent - Web APIs
tener() or the ontrack event handler property. note: it may be helpful to keep in mind that you receive the track event when a new inbound track has been added to your connection, and you call addtrack() to add a track to the far end of the connection, thereby triggering a track event on the remote peer. ...
...nnection, thereby triggering a track event on the remote peer. example this simple example creates an event listener for the track event which sets the srcobject of the <video> element with the id videobox to the first stream in the list passed in the event's streams array. peerconnection.addeventlistener("track", e => { let videoelement = document.getelementbyid("videobox"); videoelement.srcobject = e.streams[0]; }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent' in that specification. candidate recommendation initial specification. ...

Using the Resource Timing API - Web APIs
he browser's resource performance entry buffer is full. the following code example sets a onresourcetimingbufferfull event callback in the init() function. ...
...bufferfull event callback in the init() function. function buffer_full(event) { console.log("warning: resource timing buffer is full!"); set_resource_timing_buffer_size(200); } function init() { // load some image to trigger "resource" fetch events var image1 = new image(); image1.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; var image2 = new image(); image2.src = "http://mozorg.cdn.mozilla.net/media/img/firefox/firefox-256.e2c1fc556816.jpg" // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } coping with cors when cors is in effect, many of the timing properties' values are returned as zero unless the server's access policy permits these values to be shared. this requires the server prov...

Response.redirected - Web APIs
redirects below. ...
... living standard initial definition ...

SpeechGrammar - Web APIs
the speechgrammar interface of the web speech api represents a set of words or patterns of words that we want the recognition service to recognize. grammar is defined using jspeech grammar format (jsgf.) other formats may also be supported in the future. constructor speechgrammar.speechgrammar() creates a new speechgrammar object. properties speechgrammar.src sets and returns a string containing the grammar from within in the speechgrammar object instance. speechgrammar.weight optional sets and returns the weight of the speechgrammar object. examples var grammar = '#jsgf v1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | ...
... specifications specification status comment web speech apithe definition of 'speechgrammar' in that specification. draft ...

Using readable streams - Web APIs
in the pump() function seen above we first invoke read(), which returns a promise containing a results object — this has the results of our read in it, in the form { done, value }: return reader.read().then(({ done, value }) => { the results can be one of three different types: if a chunk is available...
...e enqueued, and the stream is closed when reading has finished. reading from custom streams in our simple stream pump example, we consume the custom readable stream by passing it into a response constructor call, after which we consume it as a blob(). .then(stream => new response(stream)) .then(response => response.blob()) .then(blob => url.createobjecturl(blob)) .then(url => console.log(image.src = url)) .catch(err => console.error(err)); but a custom stream is still a readablestream instance, meaning you can attach a reader to it. as an example, have a look at our simple random stream demo (see it live also), which creates a custom stream, enqueues some random strings into it, and then reads the data out of the stream again once the stop string generation button is pressed. note: in o...

WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
i specifies a three-dimensional sub-rectangle for a texture image in a compressed format. syntax // read from the buffer bound to gl.pixel_unpack_buffer void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, imagesize, offset); void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (target) of the active texture. possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level.
...ba8_etc2_eac gl.compressed_srgb8_etc2 gl.compressed_srgb8_alpha8_etc2_eac gl.compressed_rgb8_punchthrough_alpha1_etc2 gl.compressed_srgb8_punchthrough_alpha1_etc2 imagesize a glint specifying the number of bytes to read from the buffer bound to gl.pixel_unpack_buffer. offset a glint specifying the offset in bytes from which to read from the buffer bound to gl.pixel_unpack_buffer. srcdata an arraybufferview that be used as a data store for the compressed image data in memory. return value none. examples gl.compressedtexsubimage3d(gl.texture_3d, 0, 0, 0, 512, 512, 512, gl.compressed_r11_eac, texturedata); specifications specification status comment webgl 2.0the definition of 'compressedtexsubimage3d' in that specification. editor's draft i...

WebGL2RenderingContext.getBufferSubData() - Web APIs
possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. ...
...or copying from one buffer object to another. gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations. srcbyteoffset a glintptr specifying the byte offset from which to start reading from the buffer. dstdata an arraybuffer or sharedarraybuffer to which to write the buffer data. srcoffset optional a gluint specifying the element index offset where to start reading the buffer. length optional a gluint defaulting to 0. return value none. exceptions an invalid_value error is generated if: o...

WebGL2RenderingContext.readBuffer() - Web APIs
possible values: gl.back: reads from the back color buffer. gl.none: reads from no color buffer. gl.color_attachment{0-15}: reads from one of the 16 color attachment buffers. return value none. ...
...possible values: gl.back: reads from the back color buffer. gl.none: reads from no color buffer. gl.color_attachment{0-15}: reads from one of the 16 color attachment buffers. return value none. ...

WebGL2RenderingContext.texImage3D() - Web APIs
possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of det...
...ight, depth, border, format, type, imagebitmap source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, imagedata source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, arraybufferview? srcdata); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, arraybufferview srcdata, srcoffset); parameters target a glenum specifying the binding point (target) of the active texture. possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. internalformat a glint specifying ...

WebGL2RenderingContext.texSubImage3D() - Web APIs
the webgl2renderingcontext.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture. ...
... the webgl2renderingcontext.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture. ...

WebGLRenderingContext.getParameter() - Web APIs
when using the webgl_compressed_texture_s3tc extension: ...
... when using the webgl_compressed_texture_s3tc extension: ext.compressed_rgb_s3tc_dxt1_ext ...

WebGLRenderingContext.texImage2D() - Web APIs
possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped tex...
...possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. g...

WebGLRenderingContext.texSubImage2D() - Web APIs
possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped tex...
...possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. g...

Using IIR filters - Web APIs
nation); soundsource.start(); return soundsource; } this function is called when the play button is pressed. the play button html looks like this: <button class="button-play" role="switch" data-playing="false" aria-pressed="false">play</button> and the click event listener starts like so: playbutton.addeventlistener('click', function() { if (this.dataset.playing === 'false') { srcnode = playsourcenode(audioctx, sample); ... }, false); the toggle that turns the iir filter on and off is set up in the similar way. first, the html: <button class="button-filter" role="switch" data-filteron="false" aria-pressed="false" aria-describedby="label" disabled></button> the filter button's click handler then connects the iirfilter up to the graph, between the source and the d...
...et up in the similar way. first, the html: <button class="button-filter" role="switch" data-filteron="false" aria-pressed="false" aria-describedby="label" disabled></button> the filter button's click handler then connects the iirfilter up to the graph, between the source and the detination: filterbutton.addeventlistener('click', function() { if (this.dataset.filteron === 'false') { srcnode.disconnect(audioctx.destination); srcnode.connect(iirfilter).connect(audioctx.destination); ... }, false); frequency response we only have one method available on iirfilternode instances, getfrequencyresponse(), this allows us to see what is happening to the frequencies of the audio being passed into the filter. let's draw a frequency plot of the filter we've created with t...

Using Web Workers - Web APIs
use problems in your code. content security policy workers are considered to have their own execution context, distinct from the document that created them. for this reason they are, in general, not governed by the content security policy of the document (or parent worker) that created them. so for example, suppose a document is served with the following header: content-security-policy: script-src 'self' among other things, this will prevent any scripts it includes from using eval(). however, if the script constructs a worker, code running in the worker's context will be allowed to use eval(). to specify a content security policy for the worker, set a content-security-policy response header for the request which delivered the worker script itself. the exception to this is if the worker ...
...ge(uint8array.buffer, [uint8array.buffer]); note: for more information on transferable objects, performance, and feature-detection for this method, read transferable objects: lightning fast! on html5 rocks. embedded workers there is not an "official" way to embed the code of a worker within a web page, like <script> elements do for normal scripts. but a <script> element that does not have a src attribute and has a type attribute that does not identify an executable mime type can be considered a data block element that javascript could use. "data blocks" is a more general feature of html5 that can carry almost any textual data. so, a worker could be embedded in this way: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>mdn example - embedded worker</title> <script type="tex...

WindowOrWorkerGlobalScope.fetch() - Web APIs
retty much any context in which you might want to fetch resources. a fetch() promise only rejects when a network error is encountered (which is usually when there’s a permissions issue or similar). a fetch() promise does not reject on http errors (404, etc.). instead, a then() handler must check the response.ok and/or response.status properties. the fetch() method is controlled by the connect-src directive of content security policy rather than the directive of the resources it's retrieving. note: the fetch() method's parameters are identical to those of the request() constructor. syntax const fetchresponsepromise = fetch(resource [, init]) parameters resource this defines the resource that you wish to fetch. this can either be: a usvstring containing the direct url of the ...
...e an object url of it and display it in an <img> element. ...

Using the group role - Accessibility
one of those opinions and therefore not normative. examples example 1: using the group role with a html tree view the snippet below shows how the group role is added directly into the html source code. ...
...e="presentation" tabindex="-1" src="images/treeexpanded.gif" /> <span role="treeitem" tabindex="0">animals</span> </div> <div id="animalgroup" role="group"> <div id="birds" role="treeitem"> <span tabindex="-1">birds</span> </div> <div id="cats" class="groupheader" role="presentation" aria-owns="catgroup" aria-expanded="false"> <img role="presentation" tabindex="-1" src="images/treecontracted.gif" /> <span role="treeitem" tabindex="0">cats</span> </div> <div id="catgroup" role="group"> <div id="siamese" role="treeitem"> <span tabindex="-1">siamese</span> </div> <div id="tabby" role="treeitem"> <span tabindex="-1">tabby</span> </div> </div> </div> </div> example 2: using the group role with a html drop-...

ARIA: img role - Accessibility
the aria img role can be used to identify multiple elements inside page content that should be considered as a single image. these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner. <div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div> description any set of content that should be consumed as a single image (which could include images, video, audio, code snippets, emojis, or other content) can be identified using role="img". you shouldn't count on the alt text of individual elements images for conveying context to assistive technologies; most screenreaders will consider the element with role="img" set on it to be to be like a b...
...be like a black box, and not access the individual elements inside it. therefore, provide a comprehensive overall descriptive alt text for image, either in the surrounding text, or by using an aria-label attribute, with optional alt attributes for search engines or sighted users to be written to the page should an image fail: <div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div> if you wish to add a caption or label to your image that is visible on the page, you can do using: aria-labelledby when the text is a concise label. aria-describedby when the text is a longer description. for example: <div role="img" aria-labelledby="image-1"> ... <p id="image-1">text that describes the group of images.</p> </di...

Basic form hints - Accessibility
ng an unordered list. note that on line 3, the <ul> element sets the aria-labelledby attribute to rg1_label, the id of the <h3> element on line 1, which is the label for the radio group. ...
...on line 1, which is the label for the radio group. <h3 id="rg1_label">lunch options</h3> <ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"> <li id="r1" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> thai </li> <li id="r2" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> subway </li> <li id="r3" tabindex="0" role="radio" aria-checked="true"> <img role="presentation" src="radio-checked.gif" /> radio maria </li> </ul> describing with aria form controls sometimes have a description associated with them, in addition to the label. aria provides the aria-describedby attribute to directly associate the description with the control...

-moz-context-properties - CSS: Cascading Style Sheets
cify on the embedding element the properties whose values you wish to expose to the embedded svg, using the -moz-context-properties property. ...
... now that you've done this, the svg image can use the values of the fill and stroke properties, for example: <img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <rect width='100%' height='100%' stroke-width='30px' fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>"> here we've set the image src to a data uri containing a simple svg image; the <rect> inside has been made to take its fill and stroke values from the fill and stroke set on the <img> element by giving them the context-fill/context-stroke keywords in their values, along with a fallback color for the fill (red) which will be used in the case that the svg is loaded standalone in a top-level window (where it will have no context...

-webkit-box-reflect - CSS: Cascading Style Sheets
mage> describes the mask to be applied to the reflection. ...
...rc>? , <color>? ]! ...

additive-symbols - CSS: Cascading Style Sheets
xed, use the symbols descriptor instead of additive-symbols. ...
...rc>? , <color>? ]! ...

negative - CSS: Cascading Style Sheets
egative counter values, then the descriptor is ignored. ...
...rc>? , <color>? ]! ...

pad - CSS: Cascading Style Sheets
m 01 and go through 02, 03 and so on, instead of just 1, 2, 3... ...
...rc>? , <color>? ]! ...

prefix - CSS: Cascading Style Sheets
ntation. it may be a <string>, <image>, or <custom-ident>. ...
...rc>? , <color>? ]! ...

suffix - CSS: Cascading Style Sheets
y be a <string>, <image>, or <custom-ident>. formal definition related at-rule@counter-styleinitial value". ...
...rc>? , <color>? ]! ...

symbols - CSS: Cascading Style Sheets
is used, use the additive-symbols descriptor instead to specify the symbols. ...
...rc>? , <color>? ]! ...

font-style - CSS: Cascading Style Sheets
lique; for font-style: normal or italic, no second value is allowed. formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax normal | italic | oblique <angle>{0,2} examples specifying an italic font style as an example, consider the garamond font family, in its normal form, we get the following result: @font-face { font-family: garamond; src: url('garamond.ttf'); } the italicized version of this text uses the same glyphs present in the unstyled version, but they are artificially sloped by a few degrees. on the other hand, if a true italicized version of the font family exists, we can include it in the src descriptor and specify the font style as italic, so that it is clear that the font is italicized. true italics use different...
...c descriptor and specify the font style as italic, so that it is clear that the font is italicized. true italics use different glyphs and are a bit different from their upright counterparts, having some unique features and generally have a rounded and calligraphic quality. these fonts are specially created by font designers and are not artificially sloped. @font-face { font-family: garamond; src: url('garamond-italic.ttf'); font-style: italic; } specifications specification status comment css fonts module level 4the definition of 'font-style' in that specification. working draft adds oblique keyword with angle value css fonts module level 3the definition of 'font-style' in that specification. candidate recommendation initial definiti...

Using CSS transforms - CSS: Cascading Style Sheets
st of transforms, which are applied one after the other, as requested by the composition operation. composite transforms are effectively applied in order from right to left. examples here is an unaltered image of the mdn logo: rotating here is the mdn logo rotated 90 degrees from its bottom-left corner. ...
...rom its bottom-left corner. <img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> skewing and translating here is the mdn logo, skewed by 10 degrees and translated by 150 pixels on the x-axis. <img style="transform: skewx(10deg) translatex(150px); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> 3d specific css properties performing css transformations in 3d space is a bit more complex. you have to start by configuring the 3d space by giving it a perspective, then you have to configure how your 2d elements will behave in that space. perspective the first element to set is the perspective. the perspective is what gives us t...

background-image - CSS: Cascading Style Sheets
itial valuenoneapplies toall elements. ...
...rc>? , <color>? ]! ...

background - CSS: Cascading Style Sheets
)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-sr...
...rc>? , <color>? ]! ...

border-image-source - CSS: Cascading Style Sheets
neapplies toall elements, except internal table elements when border-collapse is collapse. ...
...rc>? , <color>? ]! ...

content - CSS: Cascading Style Sheets
)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><target-counter()> = target-counter( [ ...
...gradient()><target-counter()> = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )<target-counters()> = target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )<target-text()> = target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )<leader-type> = dotted | solid | space | <string>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> ...

cross-fade() - CSS: Cascading Style Sheets
)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><rgb()> = rgb( <percentage>{3} [ / <alp...
.../ <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <image-tags> = ltr | rtl<image-src> = <url> | <string><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]?

mask-border-source - CSS: Cascading Style Sheets
)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-sr...
...rc>? , <color>? ]! ...

mask-image - CSS: Cascading Style Sheets
)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-sr...
...rc>? , <color>? ]! ...

mask - CSS: Cascading Style Sheets
)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><box> = border-box | padding-box | cont...
... <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><box> = border-box | padding-box | content-boxwhere <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> ...

shape-outside - CSS: Cascading Style Sheets
)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <length-percentage> = <length> | ...
... | <percentage><shape-radius> = <length-percentage> | closest-side | farthest-side<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<fill-rule> = nonzero | evenodd<image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> ...

url() - CSS: Cascading Style Sheets
type. ...
...") { ... } @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 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 relativ...

Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
to begin downloading the image, we create a new htmlimageelement object by using the image() constructor. the image is then configured to allow cross-origin downloading by setting its crossorigin attribute to "anonymous" (that is, allow non-authenticated downloading of the image cross-origin). a...
... new htmlimageelement object by using the image() constructor. the image is then configured to allow cross-origin downloading by setting its crossorigin attribute to "anonymous" (that is, allow non-authenticated downloading of the image cross-origin). an event listener is added for the load event being fired on the image element, which means the image data has been received. finally, the image's src attribute is set to the url of the image to download; this triggers the download to begin. receiving and saving the image the code that handles the newly-downloaded image is found in the imagereceived() method: function imagereceived() { let canvas = document.createelement("canvas"); let context = canvas.getcontext("2d"); canvas.width = downloadedimg.width; canvas.height = downloadedi...

<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
se 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> elements passed to the java applet. datasrc like datafld, this attribute is used for data binding under internet explorer 4. it indicates the id of the data source object that supplies the data that is bound to the <param> elements associated with the applet. height this attribute specifies the height, in pixels, that the applet needs. hspace this attribute specifies additional horizontal space, in pixels, to be reserved on either sid...
...be reserved on either side of the applet. mayscript in the netscape implementation, this attribute allows access to an applet by programs in a scripting language embedded in the document. name this attribute assigns a name to the applet so that it can be identified by other resources; particularly scripts. object this attribute specifies the url of a serialized representation of an applet. src as defined for internet explorer 4 and higher, this attribute specifies a url for an associated file for the applet. the meaning and use is unclear and not part of the html standard. vspace this attribute specifies additional vertical space, in pixels, to be reserved above and below the applet. width this attribute specifies in pixels the width that the applet needs. example html <applet...

<bgsound>: The Background Sound element (obsolete) - HTML: Hypertext Markup Language
dio> instead. do not use this! in order to embed audio in a web page, you should be using the <audio> element. attributes balance this attribute defines a number between -10,000 and +10,000 that determines how the volume will be divided between the speakers. loop this attribute indicates the number of times a sound is to be played and either has a numeric value or the keyword infinite. ...
...this attribute indicates the number of times a sound is to be played and either has a numeric value or the keyword infinite. src this attribute specifies the url of the sound file to be played, which must be one of the following types: .wav, .au, or .mid. volume this attribute defines a number between -10,000 and 0 that determines the loudness of a page's background sound. example <bgsound src="sound1.mid"> <bgsound src="sound2.au" loop="infinite"> usage notes historically, the <embed> element could be used with audio player plug-ins to play audio in the background in most browsers. however, even this is no longer appropriate, and you should use <audio> instead, since it's more capable, more compatible, and doesn't require plug-ins. you can write <bgsound> as a self-closing tag (<...

<embed>: The Embed External Content element - HTML: Hypertext Markup Language
pts embedded content. implicit aria role no corresponding role permitted aria roles application, document, img, none, presentation dom interface htmlembedelement attributes this element's attributes include the global attributes. height the displayed height of the resource, in css pixels. this must be an absolute value; percentages are not allowed. src the url of the resource being embedded. type the mime type to use to select the plug-in to instantiate. width the displayed width of the resource, in css pixels. this must be an absolute value; percentages are not allowed. usage notes you can use the object-position property to adjust the positioning of the embedded object within the element's frame, and the object-fit property to control...
...tiate. width the displayed width of the resource, in css pixels. this must be an absolute value; percentages are not allowed. usage notes you can use the object-position property to adjust the positioning of the embedded object within the element's frame, and the object-fit property to control how the object's size is adjusted to fit within the frame. examples <embed type="video/quicktime" src="movie.mov" width="640" height="480" title="title of my video"> accessibility concerns use the title attribute on an embed element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains. the title's value should concisely describe the embedded content. without a title, they may not be able to determine what its embedded ...

<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
g a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document. a caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child). the first <figcaption> element found in the figure is presented as the figure's caption. ...
...th the <figure> element by inserting a <figcaption> inside it (as the first or the last child). the first <figcaption> element found in the figure is presented as the figure's caption. ...

<frameset> - HTML: Hypertext Markup Language
raged in favor of using <iframe>, this element is not typically used by modern web sites. ...
...web sites. attributes like all other html elements, this element supports the global attributes. ...

<input type="file"> - HTML: Hypertext Markup Language
ide the previous <div> (obtained from file.name and file.size). the custom returnfilesize() function returns a nicely-formatted version of the size in bytes/kb/mb (by default the browser reports the size in absolute bytes). generate a thumbnail preview of the image by calling url.createobjecturl(curfiles[i]). then, insert the image into the list item too by creating a new <img> and setting its src to the thumbnail. if the file type is invalid, we display a message inside a list item telling the user that they need to select a different file type. function updateimagedisplay() { while(preview.firstchild) { preview.removechild(preview.firstchild); } const curfiles = input.files; if(curfiles.length === 0) { const para = document.createelement('p'); para.textconten...
...update your selection.`; listitem.appendchild(para); } list.appendchild(listitem); } } } the custom validfiletype() function takes a file object as a parameter, then uses array.p...

<link>: The External Resource Link element - HTML: Hypertext Markup Language
practice to follow; it makes more sense to separate your <link> elements from your body content, putting them in the <head>. when using <link> to establish a favicon for a site, and your site uses a content security policy (csp) to enhance its security, the policy applies to the favicon. if you encounter problems with the favicon not loading, verify that the content-security-policy header's img-src directive is not preventing access to it. the html and xhtml specifications define event handlers for the <link> element, but it is unclear how they would be used. under xhtml 1.0, empty elements such as <link> require a trailing slash: <link />. webtv supports the use of the value next for rel to preload the next page in a document series. attributes this element includes the global attrib...
... value applies to audio <audio> elements document <iframe> and <frame> elements embed <embed> elements fetch fetch, xhr this value also requires <link> to contain the crossorigin attribute. ...

contextmenu - HTML: Hypertext Markup Language
i am learn...
... recommendation snapshot of html living standard, initial definition. ...

CSP: frame-ancestors - HTTP
the http content-security-policy (csp) frame-ancestors directive specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>. setting this directive to 'none' is similar to x-frame-options: deny (which is also supported in older browsers). csp version 2 directive type navigation directive default-src fallback no. not setting this allows anything. this directive is not supported in the <meta> element. syntax one or more sources can be set for the frame-ancestors policy: content-security-policy: frame-ancestors <source>; content-security-policy: frame-ancestors <source> <source>; sources <source> can be one of the following: the frame-ancestors directive’s syntax is similar to a source list...
... this directive is not supported in the <meta> element. syntax one or more sources can be set for the frame-ancestors policy: content-security-policy: frame-ancestors <source>; content-security-policy: frame-ancestors <source> <source>; sources <source> can be one of the following: the frame-ancestors directive’s syntax is similar to a source list of other directives (e.g. default-src), but doesn't allow 'unsafe-eval' or 'unsafe-inline' for example. it will also not fall back to a default-src setting. only the sources listed below are allowed: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number, separated by spaces. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may us...

CSP: require-sri-for - HTTP
t style; script requires sri for scripts. style requires sri for style sheets. script style requires sri for both, scripts and style sheets. ...
... directive: content-security-policy: require-sri-for script style <script> elements like the following will be loaded as they use a valid integrity attribute. ...

Feature-Policy: accelerometer - HTTP
policy: accelerometer <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: ambient-light-sensor - HTTP
ambient-light-sensor <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: autoplay - HTTP
ture-policy: autoplay <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: battery - HTTP
ature-policy: battery <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: camera - HTTP
eature-policy: camera <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: display-capture - HTTP
licy: display-capture <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: document-domain - HTTP
licy: document-domain <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: encrypted-media - HTTP
licy: encrypted-media <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: gyroscope - HTTP
ure-policy: gyroscope <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: layout-animations - HTTP
cy: layout-animations <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: legacy-image-formats - HTTP
legacy-image-formats <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: magnetometer - HTTP
-policy: magnetometer <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: microphone - HTTP
re-policy: microphone <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: midi - HTTP
feature-policy: midi <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: oversized-images - HTTP
icy: oversized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: payment - HTTP
ature-policy: payment <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: picture-in-picture - HTTP
y: picture-in-picture <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: publickey-credentials-get - HTTP
ickey-credentials-get <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: screen-wake-lock - HTTP
icy: screen-wake-lock <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: sync-xhr - HTTP
ture-policy: sync-xhr <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: unoptimized-images - HTTP
y: unoptimized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: unsized-media - HTTP
policy: unsized-media <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: usb - HTTP
feature-policy: usb <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: vibrate - HTTP
feature-policy: vibrate <allowlist>; <vibrate> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: wake-lock - HTTP
ure-policy: wake-lock <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

web-share - HTTP
ure-policy: web-share <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy: xr-spatial-tracking - HTTP
: xr-spatial-tracking <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Feature-Policy - HTTP
st of the permitted directive names. <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled in top-level and nested browsing contexts. <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes). ...

Web app manifests
sdescriptiondirdisplayiarc_rating_idiconslangnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, { "src": "images/touch/homescreen72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/touch/homescreen96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/touch/homescreen144.png", "sizes": "144x144", "type": "image/png" }, { "src": "image...
... "src": "images/touch/homescreen72.png", "sizes": "72x72", "type": "image/png" }, { "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.webmanife...

<semantics> - MathML
wing attributes can be set on <annotation> and <annotation-xml>: definitionurl the location of the annotation key symbol. encoding the encoding of the semantic information in the annotation (e.g. "mathml-content", "mathml-presentation", "application/openmath+xml", "image/png") cd the content dictionary that contains the annotation key symbol. name the name of the annotation key symbol. src the location of an external source for semantic information. example <math> <semantics> <!-- presentation mathml --> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mi>y</mi> </mrow> <!-- content mathml --> <annotation-xml encoding="mathml-content"> <apply> <plus/> <apply> <power/> ...
... recommendation current specification mathml 2.0...

Populating the page: how browsers work - Web Performance
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. <!doctype html> <html> <head> <meta charset="utf-8"/> <title>my simple page</title> <link rel="stylesheet" src="styles.css"/> <script src="myscript.js"></script> </head> <body> <h1 class="heading">my page</h1> <p>a paragraph with a <a href="https://example.com/about">link</a></p> <div> <img src="myimage.jpg" alt="image description"/> </div> <script src="anotherscript.js"></script> </body> </html> this response for this initial request contains the first byte of data received. time to firs...
...fonts. thanks to the preload scanner, we don't have to wait until the parser finds a reference to an external resource to request it. it will retrieve resources in the background so that by the time the main html parser reaches requested assets, they may possibly already be in flight, or have been downloaded. the optimizations the preload scanner provides reduce blockages. <link rel="stylesheet" src="styles.css"/> <script src="myscript.js" async></script> <img src="myimage.jpg" alt="image description"/> <script src="anotherscript.js" async></script> in this example, while the main thread is parsing the html and css, the preload scanner will find the scripts and image, and start downloading them as well. to ensure the script doesn't block the process, add the async attribute, or the defer a...

Progressive web app structure - Progressive web apps (PWAs)
n articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a href="http://js13kgames.com/aframe">a-frame category</a> in the <a href="http://2017.js1...
...ont, and it applies some simple styling of the html elements. the overall approach is to have the design look good on both mobile (with a responsive web design approach) and desktop devices. the main app javascript the app.js file does a few things we will look into closely in the next articles. first of all it generates the content based on this template: var template = "<article>\n\ <img src='data/img/slug.jpg' alt='name'>\n\ <h3>#pos. name</h3>\n\ <ul>\n\ <li><span>author:</span> <strong>author</strong></li>\n\ <li><span>twitter:</span> <a href='https://twitter.com/twitter'>@twitter</a></li>\n\ <li><span>website:</span> <a href='http://website/'>website</a></li>\n\ <li><span>github:</span> <a href='https://github'>github</a></li>\n\ <li><span>more:</span>...

Structural overview of progressive web apps - Progressive web apps (PWAs)
n articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a href="http://js13kgames.com/aframe"> a-frame category</a> in the <a href="http://...
...devices. app.js: the main app javascript the file app.js is run when the app is first loaded; its job is primarily to initialize the app, though it c can do other things as well. we'll look at how the app functions more closely in later articles in this guide. the first thing it does is to generate the app's displayed content using the following template: var template = "<article>\n\ <img src='data/img/slug.jpg' alt='name'>\n\ <h3>#pos. name</h3>\n\ <ul>\n\ <li><span>author:</span> <strong>author</strong></li>\n\ <li><span>twitter:</span> <a href='https://twitter.com/twitter'> @twitter</a></li>\n\ <li><span>website:</span> <a href='http://website/'>website</a></li>\n\ <li><span>github:</span> <a href='https://github'>github</a></li>\n\ <li><span>mor...

SVG element reference - SVG: Scalable Vector Graphics
ecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>,<fefunca>, <fefuncb>, <fefuncg>, <fefuncr>,<fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence> font elements <font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern> gradient elements <lineargradient>, <meshgradient>, <radialgradient>, <stop> graphics elements <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> graphics referencing elements <mesh>, <use> light source elements <fedistantlight>, <fepointlight>, <fespotlight> never-rendered elements <clippath>, <defs>, <...
... elements warning: these are old svg elements which are deprecated and should not be used. ...

Mixed content - Web security
d also infer information about the user's activities by watching which images are served to the user; often images are only served on a specific page within a website. if the attacker observes http requests to certain images, they could determine which webpage the user is visiting. passive content list this section lists all types of http requests which are considered passive content: <img> (src attribute) <audio> (src attribute) <video> (src attribute) <object> subresources (when an <object> performs http requests) mixed active content mixed active content is content that has access to all or parts of the document object model of the https page. this type of mixed content can alter the behavior of the https page and potentially steal sensitive data from the user. hence, in additio...
...ld or private data visible only when authenticated. if the webpage is public and has no sensitive data about the user, using mixed active content still provides the attacker with the opportunity to redirect the user to other http pages and steal http cookies from those sites. active content examples this section lists some types of http requests which are considered active content: <script> (src attribute) <link> (href attribute) (this includes css stylesheets) <iframe> (src attribute) xmlhttprequest requests fetch() requests all cases in css where a <url> value is used (@font-face, cursor, background-image, and so forth). <object> (data attribute) navigator.sendbeacon (url attribute) other resource types like web fonts and workers may be considered active mixed content, as they...

Using shadow DOM - Web Components
t model) — a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an html document in the case of web documents). ...
...index', 0); let info = document.createelement('span'); info.setattribute('class', 'info'); // take attribute content and put it inside the info span let text = this.getattribute('data-text'); info.textcontent = text; // insert icon let imgurl; if(this.hasattribute('img')) { imgurl = this.getattribute('img'); } else { imgurl = 'img/default.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:...

Cross-domain Content Scripts - Archive of obsolete content
ge-worker").page({ contenturl: data.url("page.html"), contentscriptfile: data.url("page-script.js") }); pageworker.on("message", function(message) { console.log(message); }); the "page.html" file embeds an iframe whose content is served from "http://en.m.wikipedia.org/": <!doctype html> <!-- page.html --> <html> <head></head> <body> <iframe id="wikipedia" src="http://en.m.wikipedia.org/"></iframe> </body> </html> the "page-script.js" file locates "today's featured article" and sends its content to "main.js": // page-script.js var iframe = window.document.getelementbyid("wikipedia"); var todaysfeaturedarticle = iframe.contentwindow.document.getelementbyid("mp-tfa"); self.postmessage(todaysfeaturedarticle.textcontent); for this to work, w...

Interacting with page scripts - Archive of obsolete content
e.html") var pagemod = mod.pagemod({ include: pageurl, contentscriptfile: self.data.url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(pageurl); the target web page "page.html" includes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script type="text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var event = new customevent("addon-...

page-worker - Archive of obsolete content
re typically three changes you have to make, if you want to use normal page scripts instead: in the content script: change occurrences of self to addon. for example, self.port.emit("my-event") becomes addon.port.emit("my-event"). in the html page itself: add a <script> tag to load the script. so if your content script is saved under data as "my-script.js", you need a line like <script src="my-script.js"></script> in the page header. in the "main.js" file: remove the contentscriptfile option in the page() constructor. globals constructors page(options) creates an uninitialized page worker instance. parameters options : object optional options: name type contenturl string the url of the content to load in the panel. ...

panel - Archive of obsolete content
if the panel's content is packaged along with your add-on and specified using an ...

/loader - Archive of obsolete content
create commonjs module loaders. usage the code is intentionally authored so that it can be loaded in several ways. it can be loaded as a regular script tag in documents that have system principals (note: this does not appear to work as of 02.2016 due to "use strict" being added to the file): <script type='application/javascript' src='resource://gre/modules/commonjs/toolkit/loader.js'></script> this will expose a single loader object containing all of the api functions described in this document. it can be loaded as a javascript code module: let { loader, require, unload } = components.utils.import('resource://gre/modules/commonjs/toolkit/loader.js'); it can be required as a commonjs module from a module loaded in the loader itself: let { loade...

content/loader - Archive of obsolete content
content scripts specified by this property are loaded before those specified by the contentscript property. contentscript the texts of content scripts to load. content scripts specified by this property are loaded after those specified by the contentscriptfile property. contents...

Customizing the download progress bar - Archive of obsolete content
hough you might have to experiment with this a bit. changing the progress bar for specific downloads this is all you need to change the progress bar appearance for all downloads. if you want to change it for certain specific downloads only, things get a bit trickier. ...

Forms related code snippets - Archive of obsolete content
otd.classname = sprefs + "-empty-cell"; } otr.appendchild(otd); } this.display.innerhtml = smonthsnames[this.current.getmonth()] + " " + this.current.getfullyear(); this.container.appendchild(this.otbody); }; function ondocclick (opssevt) { const oevt = opssevt || /* ie */ window.event; var boutside = true; for (var onode = oevt.target || /* ie */ oevt.srcelement; onode; onode = onode.parentnode) { if (onode.classname === sprefs + "-calendar" || onode.classname === sdpclass) { boutside = false; break; } } if (boutside) { return; } ainstances[onode.id.replace(rbgnnan, "")].container.style.zindex = nzindex++; } function onheadclick () { const bismonth = rmonth.test(this.id), ndelta = rdecrease.test(thi...

HTML to DOM - Archive of obsolete content
can't fulfill its requirements. while working on donkeyfire, i discovered the iframe xul element, and it is very easy to implement it. as an example, i will show a browser overlay .xul file, and some javascript code to access it. here is some xul code you can add to your browser overlay .xul file. ...

Scrollbar - Archive of obsolete content
lobal/skin/scrollbars.css change some color values inside the app/chrome/skin/global/scrollbars.css to test that the css is used. example xul window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="samplewindow" width="320" height="240" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <hbox flex="1"> <browser type="content" src="http://mozilla.org" flex="1"/> <scrollbar orient="vertical"/> </hbox> </window> ...

View Source for XUL Applications - Archive of obsolete content
method overview gviewsourceutils exposes several methods, but the only one you should be using directly is the viewsource method. ...

Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
= firststring;+ combostring += secondstring; // or: combostring.append(secondstring); - nsresult rv = somefunc(promiseflatstring(combostring)); + nsresult rv = somefunc(combostring); removing the nsreadableutils.h from the headers list also means that we would not have access to appendutf16toutf8 kind of functions. all these functions are now available via the new string api - appendutf16toutf8(srcstring, deststring); + deststring.append(ns_convertutf16toutf8(srcstring)); the signatures of the find methods differ between the two apis. if you are only finding a single character, prefer the findchar method. the (lossy)copy(ascii|utf8|16)to(ascii|utf8|16) do not accept character pointer parameters. you must explicitly wrap them in an appropriate dependent string. you cannot make a dependent ...

Offering a context menu for form controls - Archive of obsolete content
sion about this topic; please see bug 433168 for the latest information. overlay the content the first thing to do is to establish an overlay over the chrome for the window in which you want to allow context menus on form controls. <overlay id="formcontrolcontextmenu-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://formcontrolcontextmenu/content/overlay.js"/> </overlay> change the right-click behavior the overlaid code is responsible for adjusting the behavior of right-clicking on form controls. window.addeventlistener("load", function() { let settargetoriginal = nscontextmenu.prototype.settarget; components.utils.reporterror(settargetoriginal); nscontextmenu.prototype.settarget = ...

Adding sidebars - Archive of obsolete content
imple. a stack is like a deck, except that all of its children are always on display, one of top of the other. it allows you to decompose complex ui into individual layers, broadening the layout possibilities. one common use for a stack is to have an image background that stretches horizontally and vertically depending on the size of the foreground object: <stack> <hbox flex="1"> <image src="chrome://xulschoolhello/skin/stack-bg.png" flex="1" /> </hbox> <hbox> <!-- some content here. --> </hbox> </stack> this workaround is necessary because you can't have an background image stretch using css. a less common use for the stack element is to use the left and top attributes on its children in order to have absolute positioning for the content on the layers. this kind of po...

Appendix D: Loading Scripts - Archive of obsolete content
ript will be read with the utf-8 encoding, based on the encoding of the overlay, and will execute as javascript version 1.8, based on the version specified in the script tag. <?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="script-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript;version=1.8" src="overlay.js"/> </overlay> evalinsandbox the components.utils.evalinsandbox method may be used to load arbitrary code into components.utils.sandbox objects. javascript files or urls may be loaded in this manner by first retrieving their contents into memory using an xmlhttprequest. this is the method used by jetpack's securable module system to load nearly all executable code. advantages na...

Custom XUL Elements with XBL - Archive of obsolete content
r 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. ...

Security best practices in extensions - Archive of obsolete content
read using native json to find out the correct way to handle it. apis can't be used with self-signed certificates. remote javascript and content there are a number of ways of remote scripts being used in extensions. they can be included in content, or downloaded at intervals. non-chrome urls in chrome xul or html such as the following example are not allowed: <script type="text/javascript" src="http://mysite.greatsite.com/js/wow-content.js" /> in general, scripts that are from remote sources that run in the chrome context are not acceptable, as many times the source of the script can never be 100% guaranteed, and they are vulnerable to man-in-the-middle attacks. the only legitimate environment for remote scripts is to run in a sandbox. for more information, refer to the evalinsandbox(...

Creating reusable content with CSS and XBL - Archive of obsolete content
re"); } make a new text file, square.xbl. this file contains the xbl binding. ...

XUL user interfaces - Archive of obsolete content
s a plain text file, doc7.xul. ...

Creating a dynamic status bar extension - Archive of obsolete content
p, visit the chrome manifest section. ...

Localizing an extension - Archive of obsolete content
perties file shown above maps five keys (changestring, openstring, lowstring, highstring, and volumestring) to the corresponding text in english. create the string bundle the next step is to modify the stockwatcher2.xul file to reference this property file. we do this by creating a string bundle, using the following code: <stringbundleset id="stringbundleset"> <stringbundle id="string-bundle" src="chrome://stockwatcher2/locale/stockwatcher2.properties"/> </stringbundleset> this establishes a new string bundle, referenced by the id "string-bundle", whose keys and values are to be loaded from the stockwatcher2.properties file we've already created. note: you should use a unique id for each string bundle element for each file you use to avoid conflicts. (e.g. id="myextensionname-filename...

Makefile - .mk files - Archive of obsolete content
top level makefile which controls the overall build config/android-common.m config/autoconf.mk config/rules.mk targets (export, deps, libs, tools) and generic build rules config/static-checking-config.mk config/version.mk makefile description config/myconfig.mk user defined build configuration values config/myrules.mk user defined makefile rules for building $(topsrcdir)/$(moz_build_app)/app-config.mk application specific build configuration ...

Source code directories overview - Archive of obsolete content
s little effort as possible. xpidl files have their own mini-language and processing tools. public contains source code that will be exported to the dist/include directory. they are not all necessarily public in the general sense; some are only meant for internal use in a certain module. as more code is written with or converted to xpidl interfaces, the value of the public directory diminishes. src contains the bulk of the source code. tests contains c harnesses, html or xul that exercise this module. tools contains scripts for automatically generating certain source code and other special tools for building this module. there are also platform dependent subdirectories which contain source code for specific platforms. windows contains source code for windows 95, windows 98 and window...

Using XML Data Islands in Mozilla - Archive of obsolete content
s using the <xml> tag. this feature is not based on multi-vendor web standards and is not supported in firefox (or other non-ie browsers). xml data islands are no longer supported from internet explorer 10 onwards. html5 has a more general feature called "data blocks" that can carry almost any textual data, including xml. javascript can use the content of a <script> element as a data block if the src attribute is omitted and the type attribute does not specify an executable script type. when putting xml in a data block, you need to make sure that the xml content you are embedding does not have an end tag that case-insensitively matches "</script>". for example, a simple xml purchase order can be embedded like this: <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http...

Visualizing an audio spectrum - Archive of obsolete content
l variables; the function for the mozaudioavailable event does an fft of the samples and displays them in a canvas. note: you can use the audionode called analysernode to perform real-time fft analysis on an audio stream, rather than the code shown below. ...

Automatically Handle Failed Asserts in Debug Builds - Archive of obsolete content
word's value. the valid values are: 0x5 automatically ignore 0x4 automatically retry 0x3 automatically abort note that you can also force windbgdlg to prompt, by setting a value of 0xfffffffe. to "comment out" a value, set its value to 0xffffffff. as an example, consider the following failed assertion: assertion: no document: 'mdocument != nsnull', file d:/cvs-1.11.4/mozilla/content/xul/content/src/nsxulelement.cpp, line 3173 (note that i have my source tree in d:/cvs-1.11.4/mozilla) if you have a dword in hkcu\software\mozilla.org\windbgdlg\ named "d:/cvs-1.11.5/mozilla/content/xul/content/src/nsxulelement.cpp," (with the comma - matches are whole-word only) and value 0x5, the assert would automatically be ignored. if you also had a dword named "3173", it would have no effect here because ...

Structure of an installable bundle - Archive of obsolete content
32px × 32px (>=1.9.2) /icon64.png extension icon, for display in the add-ons manager, 64px × 64px (>=2.0) /options.xul extension options, for display in the add-ons manager (>=7.0) ... additional resources (such as chrome:// or resource:// providers can be registered in the chrome.manifest) application-specific /searchplugins/*.src sherlock search plugins firefox 1.5 and greater. /searchplugins/*.xml mozsearch and opensearch plugins firefox 2 and greater /dictionaries/*.{aff|dic} myspell dictionaries firefox 2 and greater of course, an extension need not (and normally won't) have all of these directories. themes are limited for security reasons, and can normally only provide a chro...

Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
of tinderstatusoverlay.xul to point to the new locations the files will be in when they get installed via the xpi: <?xml version="1.0"?> <?xml-stylesheet href="chrome://tinderstatus/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> we also need to change the urls in the copy of tinderstatus.css: statusbarpanel#tinderbox-status { list-style-image: url("chrome://tinderstatus...

Installing Dehydra - Archive of obsolete content
hydra. gcc 4.5, with the package gcc-4.5-plugin-dev installed. (alternately, build from source) a modern linux distribution. dehydra is not supported on mac os x. building spidermonkey it is recommended that you use spidermonkey revision aurora_base_20110705 when building dehydra. cd $home hg clone http://hg.mozilla.org/mozilla-central/ cd mozilla-central hg update aurora_base_20110705 cd js/src autoconf-2.13 mkdir $home/obj-js cd $home/obj-js $home/mozilla-central/js/src/configure --enable-optimize --disable-debug make it has to be checked whether later/newer branches (like aurora_base_20120131) are working, too. please also note that autoconf v2.13 is really needed: it does not work with e.g. v2.68. there is no need for some installation after make. you can skip the next section "buil...

Drag and Drop JavaScript Wrapper - Archive of obsolete content
ile in your xul file with the script tag in the same way you would include your own scripts. the library also depends on another script library, which you should also include, usually at the top of your xul file. you can look at the contents of these files to see how drag and drop is done at a lower level. note that you can only use these libraries from within xul loaded via a chrome url. <script src="chrome://global/content/nsdraganddrop.js" /> <script src="chrome://global/content/nstransferable.js" /> this drag and drop library creates an object stored in the variable nsdraganddrop. the object contains a series of functions, one for each event handler (except for dragenter where it has nothing special to do). each of the functions takes two parameters, the first is the event object and the...

Building Firefox with Rust code - Archive of obsolete content
ared/lib.rs, and add those libraries (crates) as dependencies in toolkit/library/rust/cargo.toml. if you want to call code in the "e10s" crate, you would add: extern crate e10s; to toolkit/library/rust/shared/lib.rs; you would also need to specify the path to that crate in the dependencies section of toolkit/library/rust/shared/cargo.toml: [dependencies] e10s = { path = "../../../../path/from/srcdir/e10s" } the e10s crate must also be checked into the tree at the appropriate path. if the e10s crate depends on any other crates, their sources must also be checked into the tree, and e10s's cargo.toml must have path attributes for each of its dependencies, and so on. this is automated by the mach vendor command, which installs the dependencies in third_party/rust. be sure the licenses of al...

Creating a Help Content Pack - Archive of obsolete content
ore exactly like creating an index file), so follow the instructions there to create additional data sources as you need them. viewing your content pack in the help viewer to launch the help viewer with your content pack, you need to have chrome://help/content/contexthelp.js loaded into the xul file that provides the ui to open the help viewer: <script type="application/javascript" src="chrome://help/content/contexthelp.js"/> this will allow you to access all of the viewer functions. to open the help viewer, run the openhelp() function. it's exactly the same as any javascript command, you you can insert it in command elements, oncommand attributes, and other such places. the parameters are described below: openhelp(atopic, acontentpackspec); atopic: the rdf:id of the top...

Jetpack Snippets - Archive of obsolete content
ite in a slidebar jetpack.future.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, ...

slideBar - Archive of obsolete content
e sizeint persistdefault slide behavior when being selectedbool autoreloadautomatically reload content on selectbool onclickcallback when the icon is clickedfunction onselectcallback when the feature is selectedfunction onreadycallback when featured is loadedfunction an example: jetpack.slidebar.append({ url: "http://mozilla.com", width: 150, onclick: function(slide){ slide.icon.src = "chrome://branding/content/icon48.png"; }}); ...

jspage - Archive of obsolete content
y":var c={};f.each(function(h,g){c[g]=h; });d=hash.toquerystring(c,e);break;default:d=e+"="+encodeuricomponent(f);}if(f!=undefined){b.push(d);}});return b.join("&");}});hash.alias({keyof:"indexof",hasvalue:"contains"}); var event=new native({name:"event",initialize:function(a,f){f=f||window;var k=f.document;a=a||f.event;if(a.$extended){return a;}this.$extended=true;var j=a.type; var g=a.target||a.srcelement;while(g&&g.nodetype==3){g=g.parentnode;}if(j.test(/key/)){var b=a.which||a.keycode;var m=event.keys.keyof(b);if(j=="keydown"){var d=b-111; if(d>0&&d<13){m="f"+d;}}m=m||string.fromcharcode(b).tolowercase();}else{if(j.match(/(click|mouse|menu)/i)){k=(!k.compatmode||k.compatmode=="css1compat")?k.html:k.body; var i={x:a.pagex||a.clientx+k.scrollleft,y:a.pagey||a.clienty+k.scrolltop};var c={x:(...

Makefile.mozextension.2 - Archive of obsolete content
d> <minversion>2.0</minversion> <maxversion>9.0</maxversion> </description> </targetapplication> </description> </rdf> endef export install_rdf install.rdf: @echo generating $(project)/install.rdf @echo "$$install_rdf" > $(project)/install.rdf ###### define overlay_xul <overlay id="$(project)-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><script src="overlay.js"/></overlay> ...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
returnvalue preventdefault() used to prevent the event's default action from occurring. screenx screenx the x coordinate of the event, in relation to the screen. screeny screeny the y coordinate of the event, in relation to the screen. shiftkey shiftkey boolean property that returns whether the shift key was pressed during the event. srcelement target the element to which the event was originally dispatched. toelement currenttarget for mouse events, this is the element to which the mouse moved. type type returns the name of the event. attach event handlers mozilla supports two ways to attach events through javascript. the first, supported by all browsers, sets event properties directly ...

How to Write and Land Nanojit Patches - Archive of obsolete content
, and those landings are followed up with semi-automated landings on tracemonkey and tamarin-redux. these follow-up landings on tracemonkey and tamarin-redux will overwrite any changes made to nanojit in tracemonkey and tamarin-redux! so, do not land nanojit changes directly to the tracemonkey and tamarin-redux repositories! the following files in tracemonkey are from nanojit: everything in js/src/nanojit/ everything in js/src/vprof/ scenario 0: a common prefix for all scenarios make private clones of all three repositories: nanojit-central, tracemonkey and tamarin-redux. here's how to clone and build nanojit-central: $ hg clone ssh://hg.mozilla.org/projects/nanojit-central $ cd nanojit-central $ autoconf $ mkdir build $ cd build $ ../configure $ make $ make check learn and setup auto...

Plug-n-Hack Phase1 - Archive of obsolete content
mplementation 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. ...

Safely loading URIs - Archive of obsolete content
.8: if you plan pass a uri string to nsiwebnavigation.loaduri (which can happen indirectly, e.g. by passing the string to something that loads it in a <browser> or <iframe>), you must call checkloaduristr to be secure. there's no way to do this completely securely in gecko versions prior to 1.8.0.4. if you're doing anything else (passing a uri string to some other api like window.open or <img src="">, passing a uri object to an api that loads uri objects, etc.) use whichever method best fits the data you can get your hands on. if you have a choice as to what data you have, prefer checkloaduriwithprincipal to checkloaduri and prefer checkloaduri to checkloaduristr. note that checkloaduriwithprincipal is not scriptable in gecko 1.8, so extensions are not able to use it. changes in gecko 1...

File object - Archive of obsolete content
, and not well tested. getting started in order to use the file object from your javascript programs, you must enable it by setting the make variable js_has_file_object during the compilation of your spidermonkey engine. if you are building a standalone version of spidermonkey (see: spidermonkey build documentation), this variable can be added on the make command line, like so: cd mozilla/js/src make -f makefile.ref js_has_file_object=1 alternatively, if you are building a larger product (such as a browser) and want to include the file object, you may need to perform minor makefile surgery. summary non-standard server-side object this object lets you work files and directories on the local filesystem, and create os pipelines. creating a pipeline involves spawning arbitrary processes...

Static Analysis for Windows Code under Linux - Archive of obsolete content
ac_add_options --enable-debug ac_add_options --disable-optimize ac_add_options --disable-tests ac_add_options --disable-embedding-tests ac_add_options --disable-installer ac_add_options --disable-accessibility ac_add_options --disable-vista...

Table Layout Strategy - Archive of obsolete content
specs the table layout algorithm is based on two w3c recommendations: html 4.01 (chapter 11) and css2.1 (chapter 17).in css2 a distinction between fixed and auto layout of tables has been introduced. the auto-layout mechanism is implemented in basictablelayoutstrategy.cpp the fixed-layout in fixedtablelayoutstrategy.cpp. all these files are in the layout/html/table/src subdirectory. the code the layout strategies are invoked from nstableframe::reflow. the overload of the initialize and balancecolumnwidths routines depends on the table style and is decided at runtime. on the first reflow nstableframe::balancecolumnwidths is called. inside this routine the corresponding table layout strategy is created and initialized (basictablelayoutstrategy::initialize). later the column widths ...

Venkman Internals - Archive of obsolete content
tory of "locale" and injects variables. things like msg.alert define variables msg_alert. venkman-utils.js defines the dd debug dump and friends windowrecord representation of the open windows. filecontainerrecord - list of script 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 ...

Binding Implementations - Archive of obsolete content
ethods and properties on a bound element using the implementation tag. a binding implementation provides a new set of methods and properties that can be invoked directly from the bound element. the methods and properties of an implementation can be defined declaratively using method and property tags in xml, or an external implementation (e.g., a binary implementation) can be specified using the src attribute. when the src attribute is specified, any children of the implementation element are ignored. methods methods are defined using the method element. the name given on the tag using the name attribute is the name that can be used to invoke the method on the element. a method with parameters specifies those parameters and their names with parameter elements declared underneath the method...

Mac stub installer - Archive of obsolete content
run the installer from the opt "mozilla installer" folder. alternative to steps 3 and 4 copy the "installer modules" folder from the "mozilla installer" folder into the "macbuild" folder that contains ...

Install Wizards (aka: Stub Installers) - Archive of obsolete content
and the xpinstall api reference. what do we mean by engine code? the xpinstall engine processes installer packages by reading instructions from their install scripts to extract files and take other install actions. the same xpinstall engine is used by the browser and the stub installers on all platforms. the xpinstall engine source resides at: <http://lxr.mozilla.org/seamonkey/sou...xpinstall/src/> what do we mean by stub installer? the install wizards used to install mozilla are lightweight stubs targeted to be around 200 kb disk footprint. users download the stub installers, choose which packages to install, choose the destination directory for the installation, and select from various other options. subsequently, when users click the "install" button the install wizard downloads and...

Using XPInstall to Install Plugins - Archive of obsolete content
e which contained the software components to be installed as well as a javascript install.js file (called the install script) as the installer logic. downloads and installs would be initiated with a security dialog box naming the certificate authority and the signer. often, the smartupdate download was triggered via the pluginurl attribute of the embed tag: <embed type="application/x-randomtype" src="myfile.typ" width="50" height="50" pluginurl="http://mytypecompany.xyz/jarpacks/mytypeplugin.jar"></embed> in the example above, the pluginurl attribute points to the signed jar file, which netscape communicator 4.x would then download (subject to the security dialog boxes) if the plugin was not located on the user's machine. smartupdate differs from xpinstall in that: xpinstall uses zip file...

Learn XPI Installer Scripting by Example - Archive of obsolete content
ith the "program" keyword to specify the browser's program directory as the target for installation. since i am using ns6 right now on a windows machine, that target directory is "c:\program files\netscape\netscape 6\". add files to the initialized installation using addfile. call performinstall to execute the installation. here is an example of small but complete installation script. var xpisrc = "cd_ripper.exe"; var xpidoc = "readme_cdrip"; initinstall("my cd ripper", "cdrip", "1.0.1.7"); f = getfolder("program"); setpackagefolder(f); addfile(xpisrc); addfile(xpidoc); if (0 == getlasterror()) performinstall(); else cancelinstall(); the example above shows this minimal installation. this install script does not include any version or disk space checking, very little error checki...

image.onload - Archive of obsolete content
« xul reference home image.onload type: script code this event handler will be called on the image element when the image has finished loading. this applies whether the image is applied via the src attribute or the list-style-image style property. if you change the image, the event will fire again when the new image loads. this event will not bubble up the element tree. ...

mousethrough - Archive of obsolete content
lower elements. ...

onclick - Archive of obsolete content
« xul reference home onclick type: script code this event handler is called when the object is clicked. example <image src="hello.png" onclick="alert('hi')"/> see also click dom element ...

Attribute (XUL) - Archive of obsolete content
ence preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top type uri useraction validate value var visuallyselected wait-cursor width windowtype wrap wraparound ...

Building accessible custom components in XUL - Archive of obsolete content
en the spreadsheet is loaded. ...

findbar - Archive of obsolete content
element is bound, or by setting the findbar's browser property to the browser element itself. attributes browserid, findnextaccesskey, findpreviousaccesskey, highlightaccesskey, matchcaseaccesskey properties browser, findmode methods close, onfindagaincommand, open, startfind, togglehighlight example <browser type="content-primary" flex="1" id="content" src="about:blank"/> <findbar id="findtoolbar" browserid="content"/> attributes browserid type: string the id of the browser element to which the findbar is attached. this attribute is only used when the findbar is constructed. you should use the browser property to get and set this value from a script. findnextaccesskey type: string the access key for the "find next" toolbar b...

ContextMenus - Archive of obsolete content
the triggernode is retrieved and examined to see if it is an image. the nsiimageloadingcontent interface is implemented by all types of images. this is useful instead of comparing the tag, as several different tags support images. the test also checks to ensure...

Menus - Archive of obsolete content
hese elements is avialable elsewhere. or, you could write code that handles multiple platforms in different ways. if you do place other elements on a menubar, you may wish to align them on the far side rather than next to the other menus. you can do this by adding a flexible spacer. <menubar id="sample-menubar"> <menu id="file-menu" label="file"> ... </menu> <spacer flex="1"/> <image src="logo.png"/> </menubar> in this example, a logo image is placed on the end of a menubar. the menupopup element the menupopup element is the popup that displays the menu items. when used for menus on a menubar, the menupopup should be a child of the menu element. the following shows a simple help menu. <menu label="help"> <menupopup> <menuitem label="contents"/> <menuitem label="sea...

Tooltips - Archive of obsolete content
t the text inside it. this default tooltip is created automatically, so you don't normally need to use a tooltip element. however, it is possible to use another tooltip element that looks differently, or which supports other elements besides a single text label. the tooltip can be created using the tooltip element, the contents of which appear inside the tooltip. <tooltip id="iconic"> <image src="help.png"/> <label value="save a file to a remote site"/> </tooltip> <button label="save" tooltip="iconic"/> in this example, a tooltip with the id 'iconic' contains an image and a label. a button is associated with the tooltip using the tooltip attribute. the value of the tooltip attribute should be set to the id of a tooltip element, in this case, 'iconic'. this will cause the tooltip to ...

Property - Archive of obsolete content
width searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag textlength textvalue timeout title toolbarname toolbarset tooltip tooltiptext top treeboxobject type uri useraction value valuenumber view webbrowserefind webnavigation webprogress width wizardpag...

statusbarpanel-iconic-text - Archive of obsolete content
specify the text using the label attribute. the image will appear before the label. ...

statusbarpanel-iconic - Archive of obsolete content
the image will appear instead of the label. ...

statusbarpanel-menu-iconic - Archive of obsolete content
the image will appear instead of the label. ...

treecol-image - Archive of obsolete content
...

Additional Navigation - Archive of obsolete content
g) (?start = http://www.daml.org/2001/09/countries/iso#it, ?countrytitle = italy, ?photo = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg) the third triple just grabs the title from the photo as previous examples did, adding a value for the ?title variable for each photo. we can then display these results using the following action body. <vbox uri="?photo" class="box-padded"> <image src="?photo"/> <label value="?title"/> <label value="country: ?countrytitle"/> </vbox> a label for the country will be displayed as well. naturally, it will have the same value for every photo. some padding has been added around each photo using the 'box-padded' class. here is the example. by carefully defining the rdf graph and using the right triples we can usually navigate to any part of t...

Additional Template Attributes - Archive of obsolete content
ere you don't specify variables; instead you use the special 'rdf:*' syntax for the member variable and the container is implied. by using the container and member attributes, you can use specific variables instead. <hbox datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template container="?start" member="?photo"> <rule> <image uri="?photo" src="?photo"/> </rule> </template> </hbox> in this example, the ?photo variable can be used instead of 'rdf:*' (although you can use either even if you specify the member variable). this may make the code clearer as to its function. we could use the container variable ?start in the action body also. if you are using the simple syntax and want to use the container variable in the content, you m...

Multiple Rules - Archive of obsolete content
the query generates a list of the photos and assigns the title of each photo to the variable '?title'. note that the full query syntax must be used to use conditions within rules. the first rule contains a new element, where which is used to define a condition. the second rule does not co...

Simple Example - Archive of obsolete content
ndeakin/images/t/canal.jpg, ?title = 'canal') (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?title = 'obelisk') since the triple is the last statement, three matches total have been found. the action body might look like the following, which displays the image using its url and title in a label. you might note that the image's src attribute uses the member variable ?photo <action> <vbox uri="?photo" align="start"> <image src="?photo"/> <label value="?title"/> </vbox> </action> it shouldn't be too difficult to tell what would appear in the window in this example. you can see if you guessed correctly by viewing the example. « previousnext » ...

Sorting Results - Archive of obsolete content
vailable, the new content is inserted at the right location. for rdf datasources, you can also use an rdf predicate for sorting instead of a variable: <hbox datasources="template-guide-photos5.rdf" sort="http://purl.org/dc/elements/1.1/title" sortdirection="ascending" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </template> </hbox> in this example, the generated items 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...

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
y the following content, making sure that you scroll to get all of it. ...

Custom toolbar button - Archive of obsolete content
. copy the following content, making sure that you scroll to get all of it. ...

Tree Widget Changes - Archive of obsolete content
id, a new column object is used. this object implements the nsitreecolumn interface and holds information about a single column in the tree. a tree will have one of these objects for each column (each treecol element) in the tree. the columns are grouped into a list which implements the nsitreecolumns interface. both the nsitreecolumn and nsitreecolumns interfaces can be found at layout/xul/base/src/tree/public/nsitreecolumns.idl. the column objects are created automatically, so you don't have to write any extra code. you can get the columns object which implements the nsitreecolumns interface for a tree using the tree's columns property. from there you can get specific columns, the current sort column, and position and size info about the columns. for the most part these objects are readon...

Adding HTML Elements - Archive of obsolete content
namespace as above. the tags must be entered in lowercase. "quotes" must be placed around all attribute values. xml requires a trailing slash at the end of tags that have no content. this may be clearer from the examples below. using html elements you can use any html tag although some such as head and body are not really useful. some examples of using html elements are shown below. <html:img src="banner.jpg"/> <html:input type="checkbox" value="true"/> <html:table> <html:tr> <html:td> a simple table </html:td> </html:tr> </html:table> these examples will create an image from the file banner.jpg, a checkbox and a single-cell table. you should always use xul features if they are available and you probably should not use tables for layout in xul. (there are xul elements...

Adding Labels and Images - Archive of obsolete content
labels of controls, such as text fields. the control attribute is only supported for labels. the description element is intended for other descriptive text such as informative text at the top of a dialog box. images xul has an element to display images within a window. this element is appropriately named image. note that the tag name is different than html (image instead of img). you can use the src attribute to specify the url of the image file. the example below shows this: <image src="images/banner.jpg"/> although you can use this syntax, it would be better in order to support different themes to use a style sheet to set the image url. a later section will describe how to use style sheets, but an example will be shown here for completeness. you can use the list-style-image css property t...

Document Object Model - Archive of obsolete content
set the value to true. this causes the element to be hidden when it first appears. next, let's add a function that is called when the find button is pressed. we'll put scripts in a separate file findfile.js. in the last section, we added the script element in the xul file. if you haven't done this, do that now, as shown below. an oncommand handler will also be added to the find button. <script src="findfile.js"/> . . . <button id="find-button" label="find" oncommand="dofind();"/> now, create another file called findfile.js in the same directory as findfile.xul. we'll add the dofind() function is this file. the script tag does allow code to be contained directly inside of it. however, for various reasons, including better performance, you should always put scripts in separate fil...