CSP: worker-src - HTTP
the http content-security-policy (csp) worker-src directive specifies valid sources for worker, sharedworker, or serviceworker scripts.
... the http content-security-policy (csp) worker-src directive specifies valid sources for worker, sharedworker, or serviceworker scripts.
... the http content-security-policy (csp) worker-src directive specifies valid sources for worker, sharedworker, or serviceworker scripts.
...And 9 more matches

HTMLImageElement.currentSrc - Web APIs
the read-only htmlimageelement property currentsrc indicates the url of the image which is currently presented in the <img> element it represents.
... the read-only htmlimageelement property currentsrc indicates the url of the image which is currently presented in the <img> element it represents.
...operty currentsrc indicates the url of the image which is currently presented in the <img> element it represents.
...And 8 more matches

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>.
... 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>.
...rective defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>.
...And 8 more matches

CSP: connect-src - HTTP
the http content-security-policy (csp) connect-src directive restricts the urls which can be loaded using script interfaces.
... the http content-security-policy (csp) connect-src directive restricts the urls which can be loaded using script interfaces.
...which can be loaded using script interfaces.
...And 8 more matches

CSP: font-src - HTTP
the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face.
... the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face.
... the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face.
...And 8 more matches

src - Archive of obsolete content
« xul reference home src type: uri the uri of the content to appear in the element.
... « xul reference home src type: uri the uri of the content to appear in the element.
... « xul reference home src type: uri the uri of the content to appear in the element.
...And 7 more matches

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.
... 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.
... 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.
...And 6 more matches

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.
... 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.
... 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.
...And 6 more matches

src - CSS: Cascading Style Sheets
the src css descriptor of the @font-face rule specifies the resource containing font data.
... the src css descriptor of the @font-face rule specifies the resource containing font data.
... the src css descriptor of the @font-face rule specifies the resource containing font data.
...And 6 more matches

CSP: manifest-src - HTTP
the http content-security-policy: manifest-src directive specifies which manifest can be applied to the resource.
... the http content-security-policy: manifest-src directive specifies which manifest can be applied to the resource.
... the http content-security-policy: manifest-src directive specifies which manifest can be applied to the resource.
...And 6 more matches

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.
... 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.
... of a media resource to use in the element.
...And 4 more matches

HTMLIFrameElement.src - Web APIs
the htmliframeelement.src property reflects the html referrerpolicy attribute of the <iframe> element defining which referrer is sent when fetching the resource.
... the htmliframeelement.src property reflects the html referrerpolicy attribute of the <iframe> element defining which referrer is sent when fetching the resource.
... the htmliframeelement.src property reflects the html referrerpolicy attribute of the <iframe> element defining which referrer is sent when fetching the resource.
...And 3 more matches

HTMLMediaElement.currentSrc - Web APIs
the htmlmediaelement.currentsrc property contains the absolute url of the chosen media resource.
... the htmlmediaelement.currentsrc property contains the absolute url of the chosen media resource.
...the user's display.
...And 3 more matches

SVGFontFaceSrcElement - Web APIs
the svgfontfacesrcelement interface corresponds to the <font-face-src> elements.
... the svgfontfacesrcelement interface corresponds to the <font-face-src> elements.
...-face-src> element via the svg dom is not possible.
...And 2 more matches

TaskAttributionTiming.containerSrc - Web APIs
the containersrc readonly property of the taskattributiontiming interface returns the container's src attribute.
... the containersrc readonly property of the taskattributiontiming interface returns the container's src attribute.
... the containersrc readonly property of the taskattributiontiming interface returns the container's src attribute.
...And 2 more matches

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.
... the htmltrackelement.src property reflects the value of the <track> element's src attribute, which indicates the url of the text track's data.
...ement.src property reflects the value of the <track> element's src attribute, which indicates the url of the text track's data.
... data.

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.
... the src property of the speechgrammar interface sets and returns a string containing the grammar from within in the speechgrammar object.
... | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; console.log(speechrecognitionlist[0].src); // should return the same as the contents of the grammar variable console.log(speechrecognitionlist[0].weight); // should return 1 - the same as the weight set in line 4.
...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.

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.
... « xul reference home src type: uri set this to the uri of an image to appear in the tree cell.
... « xul reference home src type: uri set this to the uri of an image to appear in the tree cell.

srcdoc - Web APIs
the srcdoc property of the htmliframeelement specifies the content of the page.
... the srcdoc property of the htmliframeelement specifies the content of the page.
... the srcdoc property of the htmliframeelement specifies the content of the page.

<font-face-src> - SVG: Scalable Vector Graphics
the <font-face-src> svg element corresponds to the src descriptor in css @font-face rules.
...r <font-face-name>, pointing to locally installed copies of this font, and <font-face-uri>, utilizing remotely defined fonts.
...tentone 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.

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.
... « xul reference home src type: uri set this to an uri pointing to an image to appear in the checkbox.

prefpane.src - Archive of obsolete content
« xul reference home src type: uri the uri of the overlay contents of preference pane.
... « xul reference home src type: uri the uri of the overlay contents of preference pane.

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

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

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.

Index - Web APIs
have to redraw it and everything that was drawn before it.
...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().
...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.
...And 53 more matches

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.
...econdly, it instructs the build system to create a new extension, rather than copying the components directly into firefox's binary directory.
...structs the build system to create a new extension, rather than copying the components directly into firefox's binary directory.
...And 51 more matches

HTTP Index - HTTP
absent, the user agent will use the value in the <base> element.
...k-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.
..., 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.
...And 49 more matches

Content-Security-Policy - HTTP
t security policy (csp).
...directive>; <policy-directive> where <policy-directive> consists of: <directive> <value> with no internal punctuation.
...ith no internal punctuation.
...And 43 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.
...specification, the noteon() and notegrainon() methods were consolidated into a single start() method, and the noteoff() method was renamed to the stop() method.
...) and notegrainon() methods were consolidated into a single start() method, and the noteoff() method was renamed to the stop() method.
...And 39 more matches

How Mozilla's build system works
mplete documentation for make is beyond the scope of this document but is available here.
... for make is beyond the scope of this document but is available here.
...e is beyond the scope of this document but is available here.
...And 33 more matches

Responsive images - Learn web development
features — and look at what tools html provides to help implement them.
...lement solutions.
...css module.
...And 28 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
the html <img> element embeds an image into the document.
...on: for example, network errors, content blocking, or linkrot.
...s, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later.
...And 27 more matches

Audio and Video Delivery - Developer guides
, as stated above).
...er present a still image or use a fallback technology to present the video.
....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.
...And 26 more matches

Hacking Tips
pp, a function named js::disassembleatpc can print the bytecode of a script.
...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.
...And 24 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

Content Security Policy (CSP) - HTTP
policy.
...le csp, you need to configure your web server to return the content-security-policy http header.
...onfigure your web server to return the content-security-policy http header.
...And 22 more matches

Index - HTTP
ent, then any uri is allowed.
...nt.
... https.
...And 22 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.
... the webglrenderingcontext.blendfuncseparate() method of the webgl api defines which function is used for blending pixel arithmetic for rgb and alpha components separately.
... the webglrenderingcontext.blendfuncseparate() method of the webgl api defines which function is used for blending pixel arithmetic for rgb and alpha components separately.
...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

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
fig.
...erbird (1.0.x).
...rease the load of the binary for a feature not used by lots of individuals.
...And 14 more matches

HTMLImageElement - Web APIs
om its parent, htmlelement.
...a boolean that is true if the browser has finished fetching the image, whether successful or not.
...read this article for details on the possible values of this string.
...And 14 more matches

Cross-browser audio basics - Developer guides
this article provides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api basic audio example the code below is an example of a basic audio implementation using html5: <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <p>your browser does not support html5 audio, but you can still <a href="audiofile.mp3">download the music</a>.</p> </audio> note: you can also use an mp4 file instead of mp3.
..., browsers that support mp3 also support mp4 audio).
...ort mp3 also support mp4 audio).
...And 14 more matches

Table Layout Regression Tests - Archive of obsolete content
.
...ons --enable-debug in your .mozconfig file).
...world would be a much better place if we could first fix those assertions.
...And 12 more matches

Video and audio content - Learn web development
dwidth consumption.
...ticle.
...it more in the next article.
...And 12 more matches

Rosetta - Archive of obsolete content
extensible collection of compilers to native ecmascript.
...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 ?
...ttr].value); } ocompiled.type = "text\/ecmascript"; if (oxhr200) { ocompiled.src = "data:text\/javascript," + encodeuricomponent(odicts[smimetype](oxhr200.responsetext)); } ocompiled.text = oxhr200 ?
...And 11 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.
...─ 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.
...like to learn more about it, you can read what is the file `package.json`?
...And 11 more matches

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
the html <audio> element is used to embed sound content in documents.
...iastream.
...e auto value.
...And 11 more matches

Progressive loading - Progressive web apps (PWAs)
ces when needed.
... can be optimized.
...ng using javascript.
...And 11 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.
...es in html, annotate them with captions, and how html images relate to css background images.
...to embed in the page, which can be a relative or absolute url, in the same way as href attribute values in <a> elements.
...And 10 more matches

Python binding for NSS
ated cvs documentation can be found here: getting mozilla source code using cvs.
...ist .` the following constants were added: ssl.tls_aes_128_gcm_sha256 ssl.tls_aes_256_gcm_sha384 ssl.tls_chacha20_poly1305_sha256 release 1.0.0 release date 2016-09-01 scm tag pynss_release_1_0_0 source download https://ftp.mozilla.org/pub/mozilla.org/security/python-nss/releases/pynss_release_1_0_0/src/ change log official 1.0.0 release, only minor tweaks from the 1.0.0beta1 release.
...s_dhe_rsa_with_chacha20_poly1305_sha256 ssl.tls_ecdhe_psk_with_chacha20_poly1305_sha256 ssl.tls_dhe_psk_with_chacha20_poly1305_sha256 release 1.0.0beta1 release date 2016-02-16 scm tag pynss_release_1_0_0beta1 source download https://ftp.mozilla.org/pub/mozilla.org/security/python-nss/releases/pynss_release_1_0_0beta1/src/ change log the primary enhancement in this version is support for python3.
...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

<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.
...tribute is selected.
...a conditions (for example, loading a simpler version of an image which has too many details, on smaller displays).
...And 10 more matches

Accessible multimedia - Learn web development
ailable for making multimedia more accessible.
... accessible audio and video controls implementing controls for web-based audio/video shouldn't be a problem, right?
...enting controls for web-based audio/video shouldn't be a problem, right?
...And 9 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.
...all --save-dev gulp-htmltidy note: --save-dev adds the package as a dependency to your project.
...-save-dev gulp-htmltidy note: --save-dev adds the package as a dependency to your project.
...And 9 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".
....
... navigating to a place that you'll be able to find and get to easily.
...And 9 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.
...is that this method returns either null or the image node the user right-clicked on.
...the image node the user right-clicked on.
...And 9 more matches

Plug-in Basics - Plugins
document and is loaded at the time the document is displayed.
...html page.
...is the url of the specific object implementation.
...And 9 more matches

Using images - Web APIs
urce canvas before using it in your target canvas.
... loading.
...something more clever.
...And 9 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.
...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.
...hen it fails to start.
...And 9 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.
...tonlabelhelp xul attributes, xul reference no summary!
... 1022 preference-editable xul attributes, xul reference no summary!
...And 8 more matches

Obsolete Build Caveats and Tips
:wchar_t-" in the command line when building on windows.
... wchar_t as built-in type and set it to "yes".
...s built-in type and set it to "yes".
...And 8 more matches

Touch.radiusX - Web APIs
most closely circumscribes the touching area (e.g.
...d by radiusx and radiusy is rotated clockwise about its center.
...y is rotated clockwise about its center.
...And 8 more matches

WebGLRenderingContext.blendFunc() - Web APIs
wing constants can be used for sfactor and dfactor.
...scribed like this: color(rgba) = (sourcecolor * sfactor) + (destinationcolor * dfactor).
... rs, gs, bs, as multiplies all colors by the source colors.
...And 8 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.
... of source sizes that describes the final rendered width of the image represented by the source.
...s information is used by the browser to determine, before laying the page out, which image defined in srcset to use.
...And 8 more matches

Index - Archive of obsolete content
buttonlabelhelp xul attributes, xul reference no summary!
... 291 preference-editable xul attributes, xul reference no summary!
...xul reference no summary!
...And 7 more matches

2D maze game with device orientation - Game development
can see cyber orb source code on github.
...on canvas, but we won't do it manually — this will be taken care of by the framework.
...nvas, but we won't do it manually — this will be taken care of by the framework.
...And 7 more matches

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.
... your example site.
... the image will be the same size as the image you added previously, or as close as possible.
...And 7 more matches

Starting our Svelte Todo list app - Learn web development
browse their tasks.
...m.
...ed.
...And 7 more matches

TypeScript support in Svelte - Learn web development
interfere with other terminal usage.
... for the three-dotted hints: alert.svelte let's start with our alert.svelte component.
...rnings in the output of the validate script: $ npm run validate -- --watch > svelte-check "--watch" ./svelte-todo-typescript getting svelte diagnostics...
...And 7 more matches

Getting SpiderMonkey source code
nkey source code from mercurial the mercurial repository at https://hg.mozilla.org/mozilla-central/ hosts the latest spidermonkey sources.
...ttps://hg.mozilla.org/mozilla-central/ hosts the latest spidermonkey sources.
...e here.
...And 7 more matches

HTMLMedia​Element​.textTracks - Web APIs
ist object representing the list of text tracks included in the media element.
...ks included in the media element.
...accessed using array notation, or using the object's gettrackbyid() method.
...And 7 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.
...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().
...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 7 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
ent browsers support different resolution media query types and even units.
...and even units.
...ideos/720/crystal720.mp4" type="video/mp4"> <source src="videos/720/crystal720.webm" type="video/webm"> </video> but you can go one step further.
...And 7 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.
...he global self object, passing it some json-able data.
... it some json-able data.
...And 6 more matches

Images, Tables, and Mysterious Gaps - Archive of obsolete content
ement to a block-level element.
...el element.
... 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.
...And 6 more matches

Porting NSPR to Unix Platforms - Archive of obsolete content
tructions you can use different threading packages to implement nspr threads.
...ackages to implement nspr threads.
...pr source files are in <tt>mozilla/nsprpub/pr/src/threads</tt> and <tt>mozilla/nsprpub/pr/src/io</tt>.
...And 6 more matches

prefpane - Archive of obsolete content
ference panel in a prefwindow.
...directly as children of the prefpane element, or the src attribute may be used to put a pane in a separate file.
...a pane in a separate file.
...And 6 more matches

Eclipse CDT
header (eclipse bug 380511).
...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.
...fdef'ed out - and in fact are required by - source files in other parts of the tree.
...And 6 more matches

SpiderMonkey Build Documentation
ditionally need nspr.
...files to /usr/local/include, and the js executable to/usr/local/bin.
... you don't need to do so again until you re-run configure.
...And 6 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.
... the js/src/tests directories test files are run by the jstest harness in the shell and the reftest harness in the browser.
... the js/src/tests directories test files are run by the jstest harness in the shell and the reftest harness in the browser.
...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.
... the webgl2renderingcontext.uniformmatrix[234]x[234]fv() methods of the webgl 2 api specify matrix values for uniform variables.
...t.uniformmatrix[234]x[234]fv() methods of the webgl 2 api specify matrix values for uniform variables.
...And 6 more matches

Setting up adaptive streaming media sources - Developer guides
cifying the name and location of these stream folders.
...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.
...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.
...And 6 more matches

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
origin <iframe> should be allowed to invoke the payment request api.
...ndbox attribute — making it no more secure than not using the sandbox attribute at all.
... such as if the viewer opens the frame in a new tab.
...And 6 more matches

<input type="image"> - HTML: Hypertext Markup Language
of an image rather than text.
...one — the value attribute should not be specified.
...form data formmethod the http method to use when submitting the form formnovalidate a boolean which, if present, indicates that the form shouldn't be validated before submission formtarget a string indicating a browsing context from where to load the results of submitting the form height the height, in css pixels, at which to draw the image src the url from which to load the image width the width, in css pixels, at which to draw the image alt the alt attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a user agent that cannot or is configured not to show images, or if the user is using a screen reading device).
...And 6 more matches

editor - Archive of obsolete content
tors, the html editor and the plaintext editor.
...oes not provide any editing user interface; you would supply that yourself.
...do not set the editortype attribute on an editor, you must enable editing using the makeeditable method.
...And 5 more matches

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.
...an be used to specify the url of the image.
...ore information is available in the xul tutorial.
...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.
...nt cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people.
...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.
...nt cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people.
...media, but for this article we'll look at accessibility for the humble <img> element.
...And 5 more matches

Adding vector graphics to the Web - Learn web development
described above.
...section we'll go through the different ways in which you can add svg vector graphics to your web pages.
...if you want to control the svg content with css, you must include inline css styles in your svg code.
...And 5 more matches

What is JavaScript? - Learn web development
live too).
...d parsed.
... and will execute it as soon as the script finishes downloading.
...And 5 more matches

Handling common JavaScript problems - Learn web development
ry.
... the flowers image and display it in the page.
...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!
...And 5 more matches

Mozilla accessibility architecture
h enough to provide everything the assistive technologies on their platform will need.
...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 5 more matches

Index
spidermonkey: the mozilla javascript runtime spidermonkey standalone source code releases can be found on the releases page.
... if scopechain is supplied, it uses scopechain as its enclosing scope.
...f it were enclosed by a newly-created global object.
...And 5 more matches

JS_EncodeCharacters
obsolete since jsapi 19this feature is obsolete.
... obsolete since jsapi 19this feature is obsolete.
...ete.
...And 5 more matches

HTMLIFrameElement - Web APIs
a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
...ts: all;} properties inherits properties from its parent, htmlelement.
... properties from its parent, htmlelement.
...And 5 more matches

WebGL2RenderingContext.blitFramebuffer() - Web APIs
the webgl2renderingcontext.blitframebuffer() method of the webgl 2 api transfers a block of pixels from the read framebuffer to the draw framebuffer.
... the webgl2renderingcontext.blitframebuffer() method of the webgl 2 api transfers a block of pixels from the read framebuffer to the draw framebuffer.
... the webgl2renderingcontext.blitframebuffer() method of the webgl 2 api transfers a block of pixels from the read framebuffer to the draw framebuffer.
...And 5 more matches

WebGL2RenderingContext.uniform[1234][uif][v]() - Web APIs
integer, i for integer, f for float, and v for vector.
...er, f for float, and v for vector.
... are valid: u cannot be combined with f.
...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.
...range that is supported by a font-face, for example font-weight: 100 400; font-variant a font-variant value.
...mes of the features to vary, along with their variation values.
...And 5 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
ile.
...les that the control can select.
...e" accept="image/*, text/*" name="file"/> hidden a control that is not displayed but whose value is submitted to the server.
...And 5 more matches

<script>: The Script element - HTML: Hypertext Markup Language
ive explanation of its valid arguments.
...ered free of unexpected manipulation.
...n empty string value ("") is both the default value, and a fallback value if referrerpolicy is not supported.
...And 5 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
rience.
...nym of the auto value.
...d by the currenttime attribute has been updated.
...And 5 more matches

Using Feature Policy - HTTP
a policy are separated by semicolons.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.
...And 5 more matches

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.
...onnection 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.
...the request, it will reply with relevant response headers and the contents of the html.
...And 5 more matches

Setting Up a Development Environment - Archive of obsolete content
window, run "make -ver", and get the installed version of make as output.
...efer.
...from the exercise in the last section.
...And 4 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

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).
...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.
...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.
...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.
...And 4 more matches

Examples - Archive of obsolete content
pt</code> element and surrounded by a comment.
...html 1.0 strict served as <code>text/html</code>.
... document contains inline css rules contained in a <code>style</code> element and surrounded by a sgml comment.
...And 4 more matches

Visual typescript game engine - Game development
staff like login, register etc.
...// symbolic for now const gameslist: any[] = [ plarformergameinfo, ]; const master = new ioc(gameslist); const appicon: appicon = new appicon(master.get.browser); master.singlton(platformer, master.get.starter); console.log("platformer: ", master.get.platformer); master.get.platformer.attachappevents(); project structure builds/ is autogenerated.
...st master = new ioc(gameslist); const appicon: appicon = new appicon(master.get.browser); master.singlton(platformer, master.get.starter); console.log("platformer: ", master.get.platformer); master.get.platformer.attachappevents(); project structure builds/ is autogenerated.
...And 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.
...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.
...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.
...lt, we'll need to wrap the function body in curly braces this time (otherwise it'll throw an error).
...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.
...And 4 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.
...e most reused, most important piece of the ui: a todo list item.
... currently empty!
...And 4 more matches

Getting started with Svelte - Learn web development
ponent state management.
...── readme.md ├── package.json ├── package-lock.json ├── rollup.config.js ├── .gitignore ├── node_modules ├── public │ ├── favicon.ico │ ├── index.html │ ├── global.css │ └── build │ ├── bundle.css │ ├── bundle.css.map │ ├── bundle.js │ └── bundle.js.map └── src ├── app.svelte └── main.js the contents are as follows: package.json and package-lock.json: contains information about the project that node.js/npm uses to keep it organized.
...le bundler.
...And 4 more matches

Deploying our app - Learn web development
tomatically trigger the entire build routine.
... is well, we get a live change deployed automatically.
... rely on npm run build to always do the complete build step, without needing to remember the specific build command arguments for each project.
...And 4 more matches

Configuring Build Options
t directory).
... firefox and thunderbird) from the same source tree.
...fig_guess@ it is a good idea to have your objdir name start with obj so that mercurial ignores it.
...And 4 more matches

JS_CompileScriptForPrincipals
obsolete since jsapi 28this feature is obsolete.
...ved at any time.
...*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 4 more matches

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.
...ding <fieldset> and <legend>.
...And 4 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.
...nously loading the image and attaching it to the img element.
...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 4 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.
... returns a mediakeys object or null.
... the media is in the process of seeking to a new position.
...And 4 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.
...-baseline="middle">htmlscriptelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
...nt handlers on elements in an html document.
...And 4 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.
...ed by displaymediaoptions.
...the log box for educational purposes.
...And 4 more matches

WebGL constants - Web APIs
ants passed to webglrenderingcontext.blendfunc() or webglrenderingcontext.blendfuncseparate() to specify the blending mode (for both, rbg and alpha, or separately).
... and alpha, or separately).
...arate to turn off a component.
...And 4 more matches

Animating textures in WebGL - Web APIs
ing = false; var timeupdate = false; video.autoplay = true; video.muted = true; video.loop = true; // waiting for these 2 events ensures // there is data in the video video.addeventlistener('playing', function() { playing = true; checkready(); }, true); video.addeventlistener('timeupdate', function() { timeupdate = true; checkready(); }, true); video.src = url; video.play(); function checkready() { if (playing && timeupdate) { copyvideo = true; } } return video; } first we create a video element.
...you upload a video to webgl that has no data available yet.
... 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.
...And 4 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.
...he internet // they might take a moment until they are ready.
...g // we'll update the texture with the contents of the image.
...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.
...ples and send us a pull request.
...y align an inline element's box inside its containing line box.
...And 4 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.
... for the <video> element, to keep the source video from being drawn to the screen while showing only the canvas showing the altered frames.
... the rate of playback, for example 0.5 represents half speed while 2 represents double speed.
...And 4 more matches

Content-Security-Policy-Report-Only - HTTP
this header will be an expensive no-op machine.
...iolation reports, or malware redirects, then choose the desired policy enforced by the content-security-policy header.
...n.
...And 4 more matches

SVG fonts - SVG: Scalable Vector Graphics
font in svg.
...cification), and explain the details.
...t important to be defined is font-family, the value of which can then be referenced in css and svg font-family properties.
...And 4 more matches

Making it into a static overlay - Archive of obsolete content
, we need to move all the code we added to navigator.xul into a new file tinderstatusoverlay.xul in the same directory: <?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> tinderstatusoverlay.xul starts with an xml processing instruction that identifies the file as xml (all xul files need to include this).
...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"?> ...
...And 3 more matches

Drag and Drop Example - Archive of obsolete content
and simpler api.
...p will be implemented in this section.
...round here, we'll create a simple board where items from a palette can be dragged onto the board.
...And 3 more matches

Unix stub installer - Archive of obsolete content
where does the unix stub installer code reside?
... where does the unix stub installer code reside?
....org/seamonkey/sou...ard/unix/src2/> how do we get setup to debug the unix stub installer?
...And 3 more matches

Anonymous Content - Archive of obsolete content
simplified version of an editable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it.
... element.
...s that don't match) will be used instead of the bound content.
...And 3 more matches

Content Panels - Archive of obsolete content
ement which may be used to create wizard interfaces.
...a where the web page is displayed is created by using an iframe.
...ated containing two elements: a toolbox and an iframe.
...And 3 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.
...are ignored.
...eged documents (either html or xul) such as firefox addons, the contents of the frame may have the same permissions as firefox itself.
...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.
...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.
...g prefpanes in prefwindow when you wish to put non-<prefpane> elements to prefwindow, you should place them after all of <prefpane>s.
...And 3 more matches

stringbundle - Archive of obsolete content
element.
...e key and value is separated with an equals sign.
... an equals sign.
...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!
...lf of the function out into a new block to make it more flexible: async function myfetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { throw new error(`http error!
...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.
...again, the darken effect is removed again.
... new <img> element inside thumbbar.
...And 3 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.
...s), the basics of client-side apis objective: to learn how to use browser apis to control video and audio playback.
...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.
...And 3 more matches

Multimedia: video - Learn web development
(discussed in section below), that encode, decode, convert, and perform other optimization functions.
...ptimization functions.
...allest to largest.
...And 3 more matches

Creating localizable web applications
a> : <a href=\"%s\">" .
...n"><?= _("<strong>description:</strong>");?></p> snippet 8.
...omments, in php they start with # ...
...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.
... in the mozilla-central repository, you can create a makefile listing the idl files and the build system will automatically generate the typelib.
...mozilla-central repository, you can create a makefile listing the idl files and the build system will automatically generate the typelib.
...And 3 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.
...And 3 more matches

XUL Overlays
g-in, for example, may add new icons and menu items to the interface: in the navigatoroverlay.xul file or in a separate navigatorsspoverlay.xul file (where navigator.xul defines the basic ui for the navigator package), these new plug-in elements would be defined as a collection of elements or subtrees: <menuitem name="super stream player"/> <menupopup name="ss favorites"> <menuitem name="wave" src="mavericks.ssp"/> <menuitem name="soccer" src="brazil_soccer.ssp"/> </menupopup> <titledbutton id="ssp" crop="right" flex="1" value="&ssbutton.label;" onclick="firessp()"/> overlays and id attributes bases and overlays are merged when they share the same id attribute.
...ributes in addition to new elements and subtrees, you can also overlay attributes into existing elements.
...ay destructively overwrites the image source in the base file with a replacement.
...And 3 more matches

HTMLImageElement.alt - Web APIs
tive—or of limited informational value, should have their alt attributes set to the empty string ("").
...d be the same text you would use in a textual button to serve the same purpose.
...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 3 more matches

HTMLSourceElement - Web APIs
sourceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
...> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
...properties from its parent, htmlelement.
...And 3 more matches

RTCPeerConnection.addTrack() - Web APIs
set of tracks being sent to the remote peer, with no stream associations.
...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.
...t stream specified by the event, if a stream is specified.
...And 3 more matches

WebGLRenderingContext.bufferData() - Web APIs
the webglrenderingcontext.bufferdata() method of the webgl api initializes and creates the buffer object's data store.
... the webglrenderingcontext.bufferdata() method of the webgl api initializes and creates the buffer object's data store.
... the webglrenderingcontext.bufferdata() method of the webgl api initializes and creates the buffer object's data store.
...And 3 more matches

WebGLRenderingContext.bufferSubData() - Web APIs
the webglrenderingcontext.buffersubdata() method of the webgl api updates a subset of a buffer object's data store.
... the webglrenderingcontext.buffersubdata() method of the webgl api updates a subset of a buffer object's data store.
... the webglrenderingcontext.buffersubdata() method of the webgl api updates a subset of a buffer object's data store.
...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

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.
...<p>publication date</p> </footer> </article> </section> section element the section element is used for a thematic grouping of content.
...ction> section element the section element is used for a thematic grouping of content.
...And 3 more matches

<track>: The Embed Text Track element - HTML: Hypertext Markup Language
video content.
... visible to the user.
...le text tracks.
...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.
...ents that link to or embed external resources.
...-friendly, so the product's name is used the human-visible text instead of the id.
...And 3 more matches

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.
...jects representing image files that can serve as application icons for different contexts.
...tion icons for different contexts.
...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.
... 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).
...And 3 more matches

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.
...ner and the avc (h.264) video codec, ideally with aac as your audio codec.
...our audio codec.
...And 3 more matches

Compiling an Existing C Module to WebAssembly - WebAssembly
, let's compile an encoder for webp to wasm.
...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.
...ux,utils}/*.c note: this strategy will not work with every c project.
...And 3 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.
... the number of milliseconds since january 1, 1970, 00:00:00 utc.
...test(string.fromcharcode(event.charcode));" onkeyup="if(isfinite(this.value)&&number(this.value)>0){orecompose.setrate(this.value);}" /></p> </body> </html> example #2: a practical instantiation – daemon.buildaround() <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>daemon.buildaround(&hellip;)</title> <script type="text/javascript" src="daemon.js"></script> <script type="text/javascript" src="daemon-methods.js"></script> <script type="text/javascript"> /*\ |*| |*| :: daemon.buildaround(@context[, @rate, @length]) :: |*| |*| returns a new daemon built around a @context object.
...And 2 more matches

ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
, build and use the pluginhostctrl.dll .
...ing 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.
... 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.
...And 2 more matches

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.
...ur css code into that file back in specifying the appearance.
... file called tinderstatus.js in the same directory as navigator.xul and reference it in navigator.xul where other javascript scripts are referenced: ...
...And 2 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

Using gdb on wimpy computers - Archive of obsolete content
o be able to work in a threaded environment.
...o this is to set a breakpoint in main, let the program run until main and then turn off automatic library loading.
...il main and then turn off automatic library loading.
...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

Adding Event Handlers - Archive of obsolete content
ton, the cancel button and to handle each menu command.
...ghtly faster.
...ript src="findfile.js"/> we'll create the script file later when we know what we want to put in it.
...And 2 more matches

Splitters - Archive of obsolete content
ment inside the splitter which the user can use to collapse the element.
...justed when the splitter is dragged.
...n the resizebefore and resizeafter attributes.
...And 2 more matches

Using Remote XUL - Archive of obsolete content
display in our web browser, even though there's nothing to see yet.
...ent, we need a way to display pages from the mozilla.org web site.
... function when pressed, so we'll use the button element for those.
...And 2 more matches

checkbox - Archive of obsolete content
urned on and off.
...the element is on.
...s allowed only for form controls.
...And 2 more matches

script - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] much like the html script element, this is used to declare a script to be used by the xul window.
... [ examples | attributes | properties | methods | related ] much like the html script element, this is used to declare a script to be used by the xul window.
...properties | methods | related ] much like the html script element, this is used to declare a script to be used by the xul window.
...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

HTML basics - Learn web development
open and close correctly so that they are clearly inside or outside one another.
...ps up the basics of individual html elements, but they aren't handy on their own.
...ears in the browser tab the page is loaded in.
...And 2 more matches

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.
...xt is in code format.
...And 2 more matches

Framework main features - Learn web development
ate an authorcredit component to go with each article.
...orcredit component to go with each article.
...r and a short byline about them.
...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.
... component will accept a todos attribute, which when omitted will be initialized to an empty array.
...just like they did before, except that now we're passing them in from the app.svelte component.
...And 2 more matches

Getting started with Vue - Learn web development
g sites, which is why vue prides itself on being a progressive framework.
...elopment script (unoptimized, but includes console warnings.
...logo.
...And 2 more matches

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.
...ded, which work on the same principle as described above.
...e and @supports blocks — if they are not supported, the browser just ignores them.
...And 2 more matches

Installing Pork
http://hg.mozilla.org/rewriting-and-analysis/pork/ cd pork hg clone http://hg.mozilla.org/rewriting-and-analysis/elsa ./configure make building mozilla with mcpp to build mozilla with mcpp to generate annotated .ii files, use the following configure command: ac_cv_visibility_hidden=no cc="gcc34 -save-temps -wp,-w0,-k" cxx="g++ -save-temps -wp,-w0,-k" cppflags=-dns_disable_literal_template $srcdir/configure --enable-debug --disable-optimize --disable-accessibility --enable-application=browser --disable-crashreporter building will probably require disabling warnings_as_errors: make warnings_as_errors= "-wp,-w0,-k" are options that get passed to mcpp.
...an be preprocessed with gcc -e -wp,-w0,-k.
...his is dark magic, and i hope i've got it right.
...And 2 more matches

Introduction to the JavaScript shell
les that can be set to alter js shell behavior.
...ript engine, for testing evalinsandbox-like environments in the shell.
...then run the command dis(test);, you get this output: main: 00000: uint16 3 00003: setvar 0 00006: pop 00007: name "print" 00010: pushobj 00011: getvar 0 00014: uint16 2 00017: add 00018: call 1 00021: pop 00022: stop source notes: 0: 0 [ 0] newline 1: 3 [ 3] decl offset 0 2: 7 [ 4] newline 3: 18 [ 11] xdelta 4: 18 [ 0] pcbase offset 11 dissrc([function]) disassembles the javascript bytecode for the entire program, or for the specified function, showing the source lines.
...And 2 more matches

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.
...And 2 more matches

JS_EvaluateScript
obsolete since jsapi 36this feature is obsolete.
... it may still work in some browsers, its use is discouraged since it could be removed at any time.
...char *filename, unsigned int lineno, jsval *rval); name type description cx jscontext * the context in which to run the script.
...And 2 more matches

JS_EvaluateScriptForPrincipals
obsolete since jsapi 30this feature is obsolete.
...me.
...xt * the context in which to run the script.
...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

Working with ArrayBuffers
ls of this operation.
...tion of the operation.
...428,800 (which is image size of 1280 x 1024 pixels).
...And 2 more matches

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.
...-only htmlimageelement interface's complete attribute is a boolean value which indicates whether or not the image has completely loaded.
...omplete attribute is a boolean value which indicates whether or not the image has completely loaded.
...And 2 more matches

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.
...dia() unless the <iframe> has its sandbox attribute set to allow-same-origin.
...les width and height this example gives a preference for camera resolution, and assigns the resulting mediastream object to a video element.
...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.
...And 2 more matches

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.
...owing the local user to see what the other peer sees.
...ees.
...And 2 more matches

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...
...And 2 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).
...And 2 more matches

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.
...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.
...es by watching which images are served to the user; often images are only served on a specific page within a website.
...And 2 more matches

widget - Archive of obsolete content
y of buttons to control play/pause/stop functions.
...nctions.
...o listen for clicks on those buttons.
..."); } 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: "...

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.
..."><![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.
...uilding applications linked to external web pages, this is a more secure and more convenient approach.
... convenient approach.

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.
...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.
...(a web page is loaded into the iframe) this will not affect the web page context because the iframe is not visible.
...ring the data from the dom...

Creating a Firefox sidebar extension - Archive of obsolete content
appear.
...we have a sidebar it is time to make it available to the world.
...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.
...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.

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.
...cument.getelementbyid('raw'); var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> creating an audio stream it is also possible to create and setup an <audio> element for raw writing from script (i.e., without a src attribute).
...osition moved?

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.
...esheet id id #implied src uri #required > the stylesheet element declares a style sheet used by the binding.
...e binding.
...mage empty> <!attlist image id id #implied src uri #required > declares an image resource used by the binding.

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

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.
...his will retrieve the value after any variables have been substituted.
...rc attribute may be used to set an image to appear in a cell.
...="?photo"/> <triple subject="?photo" predicate="http://www.xulplanet.com/rdf/country" object="?country"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <treechildren> <treeitem uri="?photo"> <treerow properties="?countrytitle"> <treecell src="?photo"/> </treerow> </treeitem> </treechildren> </action> </rule> you might use the following css to change the border around rows listing a particular country: treechildren::-moz-tree-row(netherlands) { border: green 1px solid; } the result of this example is a tree where one row has a green border around it.

XUL controls - Archive of obsolete content
er user interface controls.
...</radiogroup> more information about the radio element.
...nt.
... <richlistbox> the richlistbox displays a list of items where one or more may selected.

Building XULRunner - Archive of obsolete content
details.
... 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.
...et : 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.
... (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.

Browser Detection and Cross Browser Support - Archive of obsolete content
this trap.
...specific browsers in your detection logic, your site will not be usable if a visitor uses a different browser.
...while at the same time supporting older browsers.
...orting older browsers.

Building Mozilla XForms - Archive of obsolete content
onfiguration.
...="default,xforms" # if you're using a mozilla source before 2010-11-06 (e.g.
...#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.
...l) replace n with the number of parallel build processes (e.g.

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).
...mpiled on subsequent loads (starting in firefox 28).
...compiled and then run immediately.
...js string?

Fetch directive - MDN Web Docs Glossary: Definitions of Web-related terms
csp fetch directives are used in a content-security-policy header and control locations from which certain resource types may be loaded.
... csp fetch directives are used in a content-security-policy header and control locations from which certain resource types may be loaded.
... csp fetch directives are used in a content-security-policy header and control locations from which certain resource types may be loaded.
...tent-security-policy header and control locations from which certain resource types may be loaded.

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.
...into your css as appropriate, to apply the custom fonts to your html.
...ustom fonts to your html.
...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).

Index - Learn web development
deo and audio in web pages.
...nd audio in web pages.
... 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!
... 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!

Choosing the right approach - Learn web development
via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); pitfalls nested callbacks can be cumbersome and hard to read (i.e.
...operations no no yes see promise.all(), below code example the following code fetches an image from the server and displays it inside an <img> element; see it live also, and see also the source code: fetch('coffee.jpg') .then(response => response.blob()) .then(myblob => { let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }) .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); pitfalls promise chains can be complex and hard to parse.
...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...
...mple the following example is a refactor of the simple promise example we saw earlier that fetches and displays an image, written using async/await (see it live, and see the source code): async function myfetch() { let response = await fetch('coffee.jpg'); let myblob = await response.blob(); let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } myfetch(); pitfalls you can't use the await operator inside a non-async function, or in the top level context of your code.

Introducing asynchronous JavaScript - Learn web development
via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); here we create a displayimage() function that simply represents a blob passed to it as an object url, then creates an image to display the url in, appending it to the document's <body>.
...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.
...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.
...uarantee that the async function will return before the browser has processed the sync block.

Client-side storage - Learn web development
eloads.
...ert the video in the ui and then appends them to the page.
...e values of our <source> element's src attributes, and it works fine.
...bmblob, title) { // create object urls out of the blobs let mp4url = url.createobjecturl(mp4blob); let webmurl = url.createobjecturl(webmblob); ...

Drawing graphics - Learn web development
in the same directory.
...r.
... make another fresh copy of our canvas template (1_canvas_template.html) and open it in your code editor.
... 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.

Command line crash course - Learn web development
to get to 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.
...ectory 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.
...ng the leading slash like we’ve done above makes the path relative to the your present working directory.

Makefile - variables
note: non-functional links can be fixed by inserting en/.
... simple_programs suppress_default_rules inhibit processing of makefile tier targets/directory processing will be unordered.
... note: values will be appended to the export variable when present.
...iable when present.

Simple Sunbird build
change to a directory without spaces (i.e.
...ectory...
... 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.
... client.py checkout then just re-run the "make -f client.mk" command above.

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.
...se, you should at least download the repo and refer to the code as you read the sections below.
...le text <input>.
...e http://, etc.).

PL_strcpy
copies a string, up to and including the trailing '\0', into a destination buffer.
... copies a string, up to and including the trailing '\0', into a destination buffer.
... copies a string, up to and including the trailing '\0', into a destination buffer.
... a destination buffer.

Creating JavaScript tests
there are two large spidermonkey test suites: jstests (in js/src/tests) and jit-tests (in js/src/jit-test).
... language-visible functionality.
...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.
... or, under some scenarios, contributed directly to the test262 repository.

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.
...of the function to compile.
...ption js::compilefunction compiles a function from a text string chars, bytes, or srcbuf.

JS::DeflateStringToUTF8Buffer
this article covers features introduced in spidermonkey 38 encode the given string as utf8 into given buffer.
... this article covers features introduced in spidermonkey 38 encode the given string as utf8 into given buffer.
...de the given string as utf8 into given buffer.
...sflatstring * the pointer to the string to deflate.

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.
...gth of chars or bytes, in characters.

nsIDOMHTMLSourceElement
nd video media elements in html.
...in html.
...for media elements.
...ecs parameter may be specified and might be necessary to specify exactly how the resource is encoded.

nsIScriptableUnescapeHTML
org/feed-unescapehtml;1 as a service: var scriptableunescapehtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml); method overview nsidomdocumentfragment parsefragment(in astring fragment, in prbool isxml, in nsiuri baseuri, in nsidomelement element); astring unescape(in astring src); methods parsefragment() parses a string of html or xml source into a sanitized documentfragment.
...se.
...ns thrown ns_error_failure unable to append the text to the element.
...ailure unable to append the text to the element.

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.
...verting, finish should be called and its return value appended to this return value.

nsITreeView
layout/xul/base/src/tree/public/nsitreeview.idlscriptable this interface is used by the tree widget to get information about what and how to display a tree widget.
... 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.
... in nsisupportsarray properties ); parameters col the current column.

NS_CStringToUTF16
« xpcom api reference summary the ns_cstringtoutf16 function converts the value of a nsacstring instance to utf-16 and stores the result in a nsastring instance.
... « xpcom api reference summary the ns_cstringtoutf16 function converts the value of a nsacstring instance to utf-16 and stores the result in a nsastring instance.
... « xpcom api reference summary the ns_cstringtoutf16 function converts the value of a nsacstring instance to utf-16 and stores the result in a nsastring instance.
...« xpcom api reference summary the ns_cstringtoutf16 function converts the value of a nsacstring instance to utf-16 and stores the result in a nsastring instance.

Creating a Custom Column
here.is.only.xul"> <tree id="threadtree"> <treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colreplyto" persist="hidden ordinal width" currentview="unthreaded" flex="2" label="reply-to" tooltiptext="click to sort by the reply-to header" /> </treecols> </tree> <!-- include our javascript file --> <script type="text/javascript" src="chrome://replyto_col/content/replyto_col.js"/> </overlay> that's it!
...tions from both.
...message's header so that we can extract the reply to field var hdr = gdbview.getmsghdrat(row); return hdr.getstringproperty("replyto"); }, getsortstringforrow: function(hdr) {return hdr.getstringproperty("replyto");}, isstring: function() {return true;}, getcellproperties: function(row, col, props){}, getrowproperties: function(row, props){}, getimagesrc: function(row, col) {return null;}, getsortlongforrow: function(hdr) {return 0;} } basically, all we are doing here is making sure that both the text that is displayed to the user (getcelltext()) and the string we sort according to (when the user decided to sort the view by our custom column) are identical.
...dler("colreplyto", columnhandler); } wrap up as you have seen it is quite easy to add your own custom column handler.

Basic animations - Web APIs
per second and may be reduced to a lower rate when running in background tabs.
...d tabs.
...es, see the article anatomy of a video game in our game development zone.
...width="150" height="150"></canvas> screenshotlive sample a looping panorama in this example, a panorama is scrolled left-to-right.

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

HTMLTrackElement - Web APIs
middle">htmltrackelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
...vg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
...nherits properties from its parent, htmlelement.
...ement.

MediaStreamTrack.stop() - Web APIs
is stopped.
... calling stop(), the readystate property is set to ended.
...ideo stream in this example, we see a function which stops a streamed video by calling stop() on every track on a given <video>.
...m.gettracks(); tracks.foreach(function(track) { track.stop(); }); videoelem.srcobject = null; } this works by obtaining the video element's stream from its srcobject property.

Capabilities, constraints, and settings - Web APIs
, for example.
...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.
...).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.

RTCRtpContributingSource.source - Web APIs
the read-only source property of the rtcrtpcontributingsource interface returns the source identifier of a particular stream of rtp packets.
... the read-only source property of the rtcrtpcontributingsource interface returns the source identifier of a particular stream of rtp packets.
...csrc) or synchronization source (ssrc) identifier, depending on whether the object is an rtcrtpcontributingsource or rtcrtpsynchronizationsource, which is based on the former.
...hether the object is an rtcrtpcontributingsource or rtcrtpsynchronizationsource, which is based on the former.

WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
i specifies a three-dimensional sub-rectangle for a texture image in a compressed format.
...e-dimensional sub-rectangle for a texture image in a compressed format.
...ctangle for a texture image in a compressed format.
...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.

WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
rnalformat, width, height, border, arraybufferview?
... height, border, arraybufferview?
...aybufferview?
... arraybufferview srcdata, optional srcoffset, optional srclengthoverride); // read from buffer bound to gl.pixel_unpack_buffer void gl.compressedteximage3d(target, level, internalformat, width, height, depth, border, glsizei imagesize, glintptr offset); void gl.compressedteximage3d(target, level, internalformat, width, height, depth, border, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (target) of the active texture.

Using DTMF with WebRTC - Web APIs
t.tone); } else { log("all tones have played.
..., if the tone buffer is empty, our example is designed to disconnect the call.
...erconnection, receiverpc.
...ebrtc 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.

HTML in XMLHttpRequest - Web APIs
arsing.
...tion.
... ropen = new regexp("<(?!\!)\\s*([^\\s>]+)[^>]*\\s+id\\=[\"\']" + stargetid + "[\"\'][^>]*>" ,"i"), ssrc = oxhr.responsetext, aexec = ropen.exec(ssrc); return aexec ?
...w regexp("<(?!\!)\\s*([^\\s>]+)[^>]*\\s+id\\=[\"\']" + stargetid + "[\"\'][^>]*>" ,"i"), ssrc = oxhr.responsetext, aexec = ropen.exec(ssrc); return aexec ?

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.
... the aria img role can be used to identify multiple elements inside page content that should be considered as a single image.
...be like a black box, and not access the individual elements inside it.
...s the individual elements inside it.

Text labels and names - Accessibility
ement an alt attribute containing a name that describes what resources the areas links to.
... in the document, which may be different from a simple description of a visual item, as provided by the alternative text.
...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>.
...escriptive text for all contentful (that is, non-decorative) images and image-like elements.

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.
...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.
...-value> ]?
...a-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.

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

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.
...ts allows us to change the speed, or rate, at which a piece of web audio or video is playing.
...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.
...lement is defined, contained within a <figure> element that acts as the video container.
...ner.
...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 ...

HTML attribute reference - HTML: Hypertext Markup Language
ement (in pixels).
...mg>, <source> slot global attribute assigns a slot in a shadow dom shadow tree to an element.
... global attribute assigns a slot in a shadow dom shadow tree to an element.
... slot in a shadow dom shadow tree to an element.

Preloading content with rel="preload" - HTML: Hypertext Markup Language
attribute.
... ignoring it if not.
...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.
...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.

CSP: plugin-types - HTTP
f resources which can be loaded.
... directive default-src fallback no.
...ypes policy: content-security-policy: plugin-types <type>/<subtype>; content-security-policy: plugin-types <type>/<subtype> <type>/<subtype>; <type>/<subtype> a valid mime type.
...ntent-security-policy: plugin-types <type>/<subtype> <type>/<subtype>; <type>/<subtype> a valid mime type.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.
... feature policy: feature-policy: fullscreen 'self' https://example.com with an <iframe> element fastcorp inc.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.
...ature policy: feature-policy: geolocation 'self' https://example.com with an <iframe> element fastcorp inc.

Compiling from Rust to WebAssembly - WebAssembly
u'd like; this tutorial isn't version-specific.
...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.
...gemfile from bundler or package.json from npm, this is likely to be familiar; cargo works in a similar manner to both of them.
...n it: const path = require('path'); module.exports = { entry: "./index.js", output: { path: path.resolve(__dirname, "dist"), filename: "index.js", }, mode: "development" }; now we need an html file; create index.html and give it the following contents: <!doctype html> <html> <head> <meta charset="utf-8"> <title>hello-wasm example</title> </head> <body> <script src="./index.js"></script> </body> </html> finally, create the index.js referenced in the html file and give it these contents: const js = import("./node_modules/hello-wasm/hello_wasm.js"); js.then(js => { js.greet("webassembly"); }); note that you need to fill in your npm username again.

dev/panel - Archive of obsolete content
panel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { 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.
...the remote debugging protocol.
...tocol.

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.
...ht away: however, you can start listening to messages from the script.
... lost.

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

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.
... element to add on to as you did for the hello world extension.

Documentation for BiDi Mozilla - Archive of obsolete content
ll controls with dir=rtl and added support where necessary.
... with different combinations of dir and align.
...o adjust mcontentoffset and mcontentlength during bidi processing nsdirectionalframe layout/generic/nsbidiframes.cpp subclass of nsframethis is a special frame which represents a bidi control.

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.

registerChrome - Archive of obsolete content
registerchrome registers chrome with the chrome registry.
...ed.
...ed to register skins, locale is used to register language packs.

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.
...caster> elements in the xul description, and are involved with the communication of changes of state between widgets.
...l.css" type="text/css"?> <!doctype window> <window id="main-window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="file"> <menupopup> <menuitem label="hello world!" onclick="alert('hello world!\n');"/> </menupopup> </menu> </menubar> <html:iframe id="content-frame" src="contentframe.html" flex="100%"/> </window> the beginning of this example, down through the window tag, is the standard preamble.

Simple Query Syntax - Archive of obsolete content
<query> element.
...t in the rdf graph.
...st match for the result to be accepted.

XUL accessibility guidelines - Archive of obsolete content
ded when an image serves a purely decorative function.
...ction.
...ibe html images and use the "tooltiptext" attribute on xul elements that use images (i.e.

browser - Archive of obsolete content
ion of firefox?
...preferences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods addprogresslistener, goback, goforward, gohome, gotoindex, loaduri, loaduriwithflags, reload, reloadwithflags, removeprogresslistener, stop, swapdocshells examples <!-- shows mozilla homepage inside a groupbox --> <groupbox flex="1"> <caption label="mozilla homepage"/> <browser type="content" src="http://www.mozilla.org" flex="1"/> </groupbox> attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
...type: url this attribute allows you to set a homepage for the browser element.

<statusbarpanel> - Archive of obsolete content
s(), setattributens(), setuserdata style classes the following classes may be used to style the element.
...y will fit more naturally with the user's selected theme.
... label.

treecol - Archive of obsolete content
u can also place splitter elements between the columns to allow column resizing.
... sortdirection type: one of the values below set this attribute to set the direction that template-generated content is sorted.
...e(), setattributenodens(), setattributens(), setuserdata style classes the following class may be used to style the element.

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.
...disk.
...g/ subdirectory.

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.
...of external assets such as a popular third party framework.
...e concepts.

Dealing with files - Learn web development
look like?" copy the image you chose earlier into your images folder.
... folder.
...here the image is.

Use JavaScript within a webpage - Learn web development
your html webpages.
...need the <script> element.
...your webpage.

What’s in the head? Metadata in HTML - Learn web development
this to progress through the course.
...nd the <script> element, respectively.
...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.

Mozilla splash page - Learn web development
ojcncvb1olg, using the appropriate youtube tools to generate the code.
...g, using the appropriate youtube tools to generate the code.
...o insert an <img> element inside each one containing appropriate src, alt, srcset and sizes attributes.

Multimedia: Images - Learn web development
-the-fly, according to the type of device or browser requesting the image.
...rowser requesting the image.
...e.

Beginning our React todo list - Learn web development
t be using at all for our project.
....
...nclose them in curly braces.

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.
...you can organize them in any way you please.
...nd if it's not present initializes it with a default value.

Creating our first Vue component - Learn web development
ender functions), you'll need a terminal with node + npm installed.
...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!).
..." 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!).

Installing headers using EXPORTS
d from idl files by xpidl.
...idl files.
...l files must have a unique typelib file, but several directories may export headers to the same location.

Creating Custom Events That Can Pass Data
t of macros of the form domci_class(foo).
...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.
..._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.

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.
...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.
...standard and cannot be expected to have any result.

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...
... slot, prbool retry, void *arg); /* * getmodulepassword */ extern char * getmodulepassword(pk11slotinfo *slot, int retry, void *pwdata); /* * generaterandom */ extern secstatus generaterandom(unsigned char *rbuf, int rsize); /* * filetoitem */ extern secstatus filetoitem(secitem *dst, prfiledesc *src); /* * seedfromnoisefile */ extern secstatus seedfromnoisefile(const char *noisefilename); /* * filesize */ extern long filesize(const char* filename); /* * readderfromfile */ extern secstatus readderfromfile(secitem *der, const char *infilename, prbool ascii); #endif /* _util_h */ util.c /* this source code form is subject to the terms of the mozilla public * license, v.
... } } 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; } } ...

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.
....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.
...ed callback methods are described under builder objects.

Profiling SpiderMonkey
instructions 1.) get yourself an optimized libxul build of firefox, with debugger info.
...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.
...tions --enable-application=browser 2.) you'll want to run shark on both the browser and [xpcshell], since the host environments differ.

Running Automated JavaScript Tests
affectionately called "jstests" and "jit-tests".
...is can be overridden by the --wpt=enabled flag.
... a new js file to the tests/basic directory (or any appropriate directory under 'tests').

Setting up the Gecko SDK
same properties that are configured in the visual c++ project (see building a microsoft visual cpp project).
...t (see building a microsoft visual cpp project).
..._path)/bin \ -l$(gecko_sdk_path)/lib \ -lxpcomglue_s \ -lnspr4 \ -lplds4 \ -lxul \ -shared \ $(null) %.h: %.idl $(xpidl) -m header $(gecko_includes) $< %.xpt: %.idl $(xpidl) -m typelib $(gecko_includes) $< %.o: %.cpp makefile $(cxx) -c $(cppflags) $(cxxflags) $(gecko_config_include) $(gecko_defines) $(gecko_includes) $< $(module).so: $(xpidlsrcs:%.idl=%.h) $(xpidlsrcs:%.idl=%.xpt) $(cppsrcs:%.cpp=%.o) $(cxx) -o $@ -wl,-soname=$(module).so $(cppsrcs:%.cpp=%.o) $(gecko_ldflags) chmod +x $@ build: $(module).so clean: rm $(module).so « previousnext » copyright (c) 2003 by doug turner and ian oeschger.

nsIAbCard
cept for a handful of them.
...n string name) parameters name the attribute you want the value for.
...rs name the attribute you want the value for.

nsIDOMFontFace
nerics, localized names, and so on).
...face these attributes only have meaningful values when the font is a user font defined using @font-face.
...aningful values when the font is a user font defined using @font-face.

nsIDOMUserDataHandler
dom/interfaces/core/nsidomuserdatahandler.idlscriptable the callback function for the setuserdata method.
...ed 2 the node was cloned into a new document.
... which will be called if a node with user data is being cloned, imported or adopted.

nsIMsgCustomColumnHandler
in gecko 1.9 (firefox 3) inherits from: nsitreeview this interface is meant to be implemented by extensions, as shown in the tutorial.
...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.

nsIAbCard/Thunderbird3
ring value); [noscript] void setpropertyasautf8string(in string name, in autf8string value); [noscript] void setpropertyasuint32(in string name, in pruint32 value); [noscript] void setpropertyasbool(in string name, in boolean value); void deleteproperty(in autf8string name); autf8string translateto(in autf8string atype); void copy(in nsiabcard srccard) boolean equals(in nsiabcard card) astring generatephoneticname(in boolean alastnamefirst) attributes attribute type description properties nsisimpleenumerator readonly: a list of all the properties that this card has as an enumerator, whose members are all nsiproperty objects.
...t.
...e supported: base64xml xml vcard autf8string translateto(in autf8string atype); parameters atype the type of item to translate the card into.

Performance
the command line tool that is at least as recent as what mozilla uses.
... can control the size of the memory cache using the cache_size pragma.
...es, vacuuming a 10mb database has been timed at over one minute.

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.
...non-assembly parts of these files can be copied and reused with minimal (but not zero) platform specific tweaks.
...ctionality as a port is coming together.

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

Initialization and Destruction - Plugins
e (for example, align) and its value (for example, top).
...gn array contains the attribute names; the argv array contains the attribute values.
...can use the arg parameters to specify private attributes defined for a particular plug-in.

Debugger.Source - Firefox Developer Tools
’s code was loaded.
...ect instance referring to the dom element to which this source code belongs, if any, or undefined if it belongs to no dom element.
...thus the creating call is never “in debuggee code”.

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.
...the average of red, green and blue.
...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.
...t of image type.
...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.

Using Fetch - Web APIs
se object).
...xample.
... want to request into the fetch() call, you can create a request object using the request() constructor, and pass that in as a fetch() method argument: const myheaders = new headers(); const myrequest = new request('flowers.jpg', { method: 'get', headers: myheaders, mode: 'cors', cache: 'default', }); fetch(myrequest) .then(response => response.blob()) .then(myblob => { myimage.src = url.createobjecturl(myblob); }); request() accepts exactly the same parameters as the fetch() method.

FileReader.readAsDataURL() - Web APIs
result cannot be directly decoded as base64 without first removing the data-url declaration preceding the base64-encoded data.
... 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 ...
... = document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var image = new image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendchild( image ); }, false); reader.readasdataurl(file); } } if (files) { [].foreach.call(files, readandpreview); } } note: the filereader() constructor was not supported by internet explorer for versions before 10.

FileSystemEntry.toURL() - Web APIs
the filesystementry interface's method tourl() creates and returns a string containing a url which can be used to identify the file system entry.
...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".
...tation) something like "filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg".

HTMLImageElement.border - Web APIs
ifying the thickness of the border that should surround the image, in css pixels.
...hat there should be no border drawn.
...r property and its longhand properties to establish borders around images.

HTMLImageElement.height - Web APIs
rendered to a visual medium or not.
...sing the srcset attribute.
...0px wide.

HTMLImageElement.width - Web APIs
ing rendered to a visual medium or not.
...using the srcset attribute.
...00px wide.

MediaError.code - Web APIs
was aborted by the user's request.
...ng previously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error.
...mediastream) has been found to be unsuitable.

Touch.clientX - Web APIs
r initiates a touch on an element with an id of source, moves within the element or out of the element and then releases contact with the surface.
...thin the element or out of the element and then releases contact with the surface.
...ch.clienty coordinates, from the starting touch point to the ending touch point, are calculated.

Touch.clientY - Web APIs
r initiates a touch on an element with an id of source, moves within the element or out of the element and then releases contact with the surface.
...thin the element or out of the element and then releases contact with the surface.
...ch.clienty coordinates, from the starting touch point to the ending touch point, are calculated.

WebGL2RenderingContext.clearBuffer[fiuv]() - Web APIs
the webgl2renderingcontext.clearbuffer[fiuv]() methods of the webgl 2 api clear buffers from the currently bound framebuffer.
... the webgl2renderingcontext.clearbuffer[fiuv]() methods of the webgl 2 api clear buffers from the currently bound framebuffer.
... the webgl2renderingcontext.clearbuffer[fiuv]() methods of the webgl 2 api clear buffers from the currently bound framebuffer.

WebGL2RenderingContext.copyBufferSubData() - Web APIs
l.pixel_pack_buffer: buffer used for pixel transfer operations.
...r specifying the byte offset from which to start reading from or writing to the buffer.
...zei in bytes specifying the size of the data to be copied from readtarget to writetarget.

WebGL2RenderingContext.getBufferSubData() - Web APIs
the webgl2renderingcontext.getbuffersubdata() method of the webgl 2 api reads data from a buffer binding point and writes them to an arraybuffer or sharedarraybuffer.
...or copying from one buffer object to another.
...dback operations.

WebGL2RenderingContext.texImage3D() - Web APIs
ight, depth, border, format, type, htmlvideoelement source); void gl.teximage3d(target, level, internalformat, width, height, 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?
...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?
...th, 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?

WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
must be used.
...tax // webgl 1: void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, arraybufferview?
...d gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, arraybufferview?

Taking still photos with WebRTC - Web APIs
function startup() { video = document.getelementbyid('video'); canvas = document.getelementbyid('canvas'); photo = document.getelementbyid('photo'); startbutton = document.getelementbyid('startbutton'); get the media stream the next task is to get the media stream: navigator.mediadevices.getusermedia({ video: true, audio: false }) .then(function(stream) { video.srcobject = stream; video.play(); }) .catch(function(err) { console.log("an error occurred: " + err); }); here, we're calling mediadevices.getusermedia() and requesting a video stream (without audio).
...o box involves creating an image, then converting it into a format usable by the <img> element that displays the most recently captured frame.
...played video frame, convert it into a png file, and display it in the captured frame box.

Using IIR filters - Web APIs
nation); soundsource.start(); return soundsource; } this function is called when the play button is pressed.
...et up in the similar way.
...n 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); ...

Using the radio role - Accessibility
ology should handle this technique.
...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.
...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.
...ner"> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to keyboard navigation</a> <img src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navigation</p> </div> we could also have written the above with the html header element: <header> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to keyboard navigation</a> <img src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navigation</p> </header> best practices while it is best to use the header element and ensure it is not a descendant of any subsection of the page, sometimes you don't have access to the underlying html.

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

Basic form hints - Accessibility
ng an unordered list.
...on line 1, which is the label for the radio group.
...roup" 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.

font-style - CSS: Cascading Style Sheets
lique; for font-style: normal or italic, no second value is allowed.
...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.
...c descriptor and specify the font style as italic, so that it is clear that the font is italicized.

Variable fonts guide - CSS: Cascading Style Sheets
ia upgrades to the traditional @font-face syntax now available in modern browsers.
...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.

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.
...isp-edges rules can be combined to provide some fallback for each other.
...he fallback.) the canvas api can provide a fallback solution for pixelated through manual image data manipulation or with imagesmoothingenabled.

Media buffering, seeking, and time ranges - Developer guides
the buffered attribute will tell us which parts of the media has been downloaded.
...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.

<bgsound>: The Background Sound element (obsolete) - HTML: Hypertext Markup Language
dio> instead.
...this attribute indicates the number of times a sound is to be played and either has a numeric value or the keyword infinite.
... number of times a sound is to be played and either has a numeric value or the keyword infinite.

<frame> - HTML: Hypertext Markup Language
h another html document can be displayed.
...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.

Microformats - HTML: Hypertext Markup Language
ed of posts you can find many more vocabularies on the microformats2 wiki.
... the value, e.g.
... 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
the http content-security-policy base-uri directive restricts the urls which can be used in a document's <base> element.
...dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style.
...se of script-src for external scripts.

CSP: form-action - HTTP
restricts the urls which can be used as the target of a form submissions from a given context.
...dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style.
...se of script-src for external scripts.

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>.
... this directive is not supported in the <meta> element.
...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.

CSP: navigate-to - HTTP
not specified), <a>, window.location, window.open, etc.
...dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style.
...se of script-src for external scripts.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

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.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

Feature-Policy - HTTP
st of the permitted directive names.
... allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it comes from the same origin as the url in the iframe's src attribute.

serviceworker - Web app manifests
type object mandatory no the serviceworker member describes a service worker that the developer intends to install to control the pwa.
... type object mandatory no the serviceworker member describes a service worker that the developer intends to install to control the pwa.
... object mandatory no the serviceworker member describes a service worker that the developer intends to install to control the pwa.

Image file type and format guide - Web media technologies
a version of the image in a different format or under different media conditions, as well as an <img> element which defines where to display the image and the fallback to the default or "most compatible" version.
...r different media conditions, as well as an <img> element which defines where to display the image and the fallback to the default or "most compatible" version.
...mg> element which defines where to display the image and the fallback to the default or "most compatible" version.

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.
...lay: how the app is displayed; can be fullscreen, standalone, minimal-ui, or browser.

SVG documentation index - SVG: Scalable Vector Graphics
deprecated, element, needsexample, reference, svg, svg font the <font-face-format> svg element describes the type of font referenced by its parent <font-face-uri>.
...vg element describes the type of font referenced by its parent <font-face-uri>.
...t referenced by its parent <font-face-uri>.

Communicating With Other Scripts - Archive of obsolete content
dom objects.
...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...

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.

Canvas code snippets - Archive of obsolete content
://developer.mozilla.org'; }; remotecanvas.canvas_width = 300; remotecanvas.canvas_height = 300; remotecanvas.prototype.load = function() { var windowwidth = window.innerwidth - 25; var iframe; iframe = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width = windowwidth + 'px'; iframe.style.visibility = 'hidden'; iframe.src = this.url; // here is where the magic happens...
... '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).
...sk or whatever } else { // user clicked cancel.

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.

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.
...pend(secondstring); - nsresult rv = somefunc(promiseflatstring(combostring)); + nsresult rv = somefunc(combostring); removing the nsreadableutils.h from the headers list also means that we would not have access to appendutf16toutf8 kind of functions.

The 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.
...lloitem.setattribute("label", "alternate message"); // right!

Automatically Handle Failed Asserts in Debug Builds - Archive of obsolete content
word's value.
...omment out" a value, set its value to 0xffffffff.

Installing Dehydra - Archive of obsolete content
hydra.
... build from source) a modern linux distribution.

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.
...ou would include your own scripts.

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.
...wed up with semi-automated landings on tracemonkey and tamarin-redux.

Build - Archive of obsolete content
code, and you should have a directory called mozilla/.
...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.

TraceVis - Archive of obsolete content
most of the documentation on tracevis is contained in the announcement blog post.
... 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.

Binding Implementations - Archive of obsolete content
ethods and properties on a bound element using the implementation tag.
... a bound element using the implementation tag.

Example Sticky Notes - Archive of obsolete content
xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme,&nbsp;inc.
....

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.
...rce information is to be installed properly.

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.
...arget directory is "c:\program files\netscape\netscape 6\".

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.
...e = function(row, col) { return table[row][col.id]; }; this.settree = function(treebox) { this.treebox = treebox; }; this.iseditable = function(row, col) { return col.editable; }; this.iscontainer = function(row){ return false; }; this.isseparator = function(row){ return false; }; this.issorted = function(){ return false; }; this.getlevel = function(row){ return 0; }; this.getimagesrc = function(row,col){ return null; }; this.getrowproperties = function(row,props){}; this.getcellproperties = function(row,col,props){}; this.getcolumnproperties = function(colid,col,props){}; this.cycleheader = function(col, elem) {}; } function sort(column) { var columnname; var order = tree.getattribute("sortdirection") == "ascending" ?

Multiple Queries - Archive of obsolete content
predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </queryset> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> </query> <action> <image uri="?photo" src="?photo"/> </action> </queryset> </template> </hbox> this template contains two queries, the first contains a <triple> which matches only the photo with a title of 'canal'.
... syntax.

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" ...
... </rule> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?phototitle"/> </conditions> <action> <vbox uri="?photo" class="box-padded"> <label value="?phototitle"/> <image src="?photo"/> </vbox> </action> </rule> </template> </vbox> in this example, the first rule matches only those photos with title, description, and date properties.

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.
... = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?title = 'obelisk') since the triple is the last statement, three matches total have been found.

Adding Labels and Images - Archive of obsolete content
labels of controls, such as text fields.
...els.

Custom Tree Views - Archive of obsolete content
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){} }; the functions in the example not described above do not need to perform any action, but they must be implemented as the tree calls them to gather additional information.
...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.
...u can then look up a particular property by name.

Using the Editor from XUL - Archive of obsolete content
the editor element in editor.xml.
...entwindow (another settable attribute on nsieditorshell) points to the xul element which is to become editable.

XML - Archive of obsolete content
hen an attribute is assigned a value (e.g., flex="1" or "onload='dointerestingstartupthing()'") that value must be double-quoted.
...., flex="1" or "onload='dointerestingstartupthing()'") that value must be double-quoted.

treecell - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single cell in a tree.
...perties of the element, which can be used to style the element.

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.
...support both menus and toolbars.

-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.
...r_s.htm <body> <p>click the image to start the filter.</p> // call the function.

Window.importDialog() - Archive of obsolete content
which is no longer supported; for that reason, this function is obsolete and should never be used.
...d.

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?
... extension :( should be fixed by bug 306247 and bug 280368 respectively.

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!
...ion another simple shape for collision detection is between two circles.

GLSL Shaders - Game development
ome.
...which this material is given.

Audio for Web games - Game development
eed.
... need to sample the current time to know when to stop.

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.

Index - MDN Web Docs Glossary: Definitions of Web-related terms
user agent a favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu.
...which is displayed in places like the browser's address bar, page tabs and bookmarks menu.

What are browser developer tools? - Learn web development
the developer tools and then click the console tab.
...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.

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

CSS basics - Learn web development
l page, each id value should be unique.
...should be unique.

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.

Getting started with HTML - Learn web development
ind useful reference pages that include lists of block and inline elements.
...on'; } updatecode(); }); var htmlsolution = '<h1>some music</h1><p>i really enjoy <strong>playing the drums</strong>.

Introduction to events - Learn web development
of the same event type are activated on one element.
...t.

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.
...s because they happen to be using the same variable names as other parts of the code, causing conflicts.

Third-party APIs - Learn web development
udioctx.createmediaelementsource(audioelement); // etc.
...; 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.
..."why" of web performance what is web performance?

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.

Styling Vue components with CSS - Learn web development
n single file components (.vue files).
...radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the build step and automatically added to our site.

Implementing feature detection - Learn web development
w directory.
...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.

Package management basics - Learn web development
ucture your project.
...e there's some calculation, but we definitely don’t need 195k worth of javascript to do this!.

Old Thunderbird build
g the mapi headers needed to compile thunderbird.
...heck to make sure that the path in which you placed the source code has no spaces, and is not too long.

Simple SeaMonkey build
running: c:\mozilla-build\start-msvc2013.bat.
... you're on 64-bit windows, do not use the files ending in -x64.bat.

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").
...heck to make sure that the path in which you placed the source code has no spaces, and is not too long.

Investigating leaks using DMD heap scan mode
his also seems to trigger when shutdown is extremely slow.
...f the block.

L20n HTML Bindings
the l20n html bindings you can take advantage of html bindings to localize your html documents with l20n.
...ight in your html.

Index
etscape signing tool 1.0 and later versions.
...s revocation flags for the test type it follows.

NSS 3.12.4 release notes
12.4 with nspr 4.8, but it should work with nspr 4.7.1 or later.
...ions.

NSS 3.19.2.1 release notes
ug fixes in nss 3.19.2.1 are described in the "security advisories" section below.
...visories" section below.

NSS 3.19.4 release notes
.19.
...urity advisories" section below.

NSS 3.20.1 release notes
.20.
...urity advisories" section below.

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

nss tech note1
escribe all the common functionality of the two decoders, before outlining their differences.
...re outlining their differences.

Bytecode Descriptions
rue` on success, else throw a typeerror.
...f the body of the loop throws an exception, we catch it, close the iterator, then use jsop::throw to rethrow.

JS::SourceBufferHolder
sourcebufferholder, then the memory must be kept alive until the js compilation is complete.
....

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

Running Parsemark
tility for measuring parse/emit performance of the spidermonkey front-end.
...e not checked into the source tree because they're non-mozilla js code.

Shell global objects
these are the global objects that are set up automatically by the spidermonkey js command-line interpreter when you start the program.
...tions available only in debug build disassemble([fun/code]) return the disassembly for the given function or code.

Thread Sanitizer
clang 3.3 on the llvm releases page.
... has completed, you can start firefox from the objdir as usual.

Gecko object attributes
the object displays a pop-up menu or window when invoked.
...bject displays a pop-up menu or window when invoked.

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.

nsIChannel
c parameters.
...lling open() or asyncopen().

Building an Account Manager Extension
javascript file should be located in chrome://example@mozilla.org/content/am-devmo-account.js.
....

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

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
« xpcom api reference summary the ns_cstringcopy function copies the value from one nsacstring instance to another.
... « xpcom api reference summary the ns_cstringcopy function copies the value from one nsacstring instance to another.

NS_StringCopy
removed by bug 1332639 « xpcom api reference summary the ns_stringcopy function copies the value from one nsastring instance to another.
... removed by bug 1332639 « xpcom api reference summary the ns_stringcopy function copies the value from one nsastring instance to another.

NS_UTF16ToCString
« xpcom api reference summary the ns_utf16tocstring function converts the value of a nsastring instance from utf-16 to the specified multi-byte encoding and stores the result in a nsacstring instance.
... « xpcom api reference summary the ns_utf16tocstring function converts the value of a nsastring instance from utf-16 to the specified multi-byte encoding and stores the result in a nsacstring instance.

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
lowing are specific to pop: the following are specific to news: preference: mail.server.server.leave_on_server - boolean, should we leave messages on the server after we have downloaded them?
...owing are specific to news: preference: mail.server.server.leave_on_server - boolean, should we leave messages on the server after we have downloaded them?

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!
...bout running cvs to download the associated source code.

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.
.../46/29059a2b39.png"> js content var myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg').then(function(response) { console.log(response.bodyused); var res = response.blob(); console.log(response.bodyused); return res; }).then(function(response) { var objecturl = url.createobjecturl(response); myimage.src = objecturl; }); specifications specification status comment fetchthe definition of 'bodyused' in that specification.

Body - Web APIs
on.
...lements body) to give the response its correct mime type.

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.
...h and videoheight if the element is a <video> element, and so on.

Applying styles and colors - Web APIs
horizontally but not vertically.
...ample in this last example, we'll create a pattern to assign to the fillstyle property.

Basic usage of canvas - Web APIs
let's start this tutorial by looking at the <canvas> html element itself.
...l ignore the content inside the container, and just render the canvas normally.

DOMImplementation.createHTMLDocument() - Web APIs
title) parameters title optional (except in ie) a domstring containing the title to give the new html document.
...tion makedocument() { let frame = document.getelementbyid("theframe"); let doc = document.implementation.createhtmldocument("new document"); let p = doc.createelement("p"); p.innerhtml = "this is a new paragraph."; try { doc.body.appendchild(p); } catch(e) { console.log(e); } // copy the new html document into the frame let destdocument = frame.contentdocument; let srcnode = doc.documentelement; let newnode = destdocument.importnode(srcnode, true); destdocument.replacechild(newnode, destdocument.documentelement); } the code in lines 4–12 handle creating the new html document and inserting some content into it.

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

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

Guide to the Fullscreen API - Web APIs
ment into full-screen mode, as well as how to detect when the browser enters or exits full-screen mode.
...w to detect when the browser enters or exits full-screen mode.

GlobalEventHandlers.onerror - Web APIs
}) event of type errorevent contains all the information about the event and the error.
...ion about the event and the error.

GlobalEventHandlers.onplay - Web APIs
obaleventhandlers mixin is the eventhandler for processing play events.
...r processing play events.

msAudioCategory - Web APIs
et explorer and microsoft edge.
...ype is not explicitly set, msaudiodevicetype will be set to communications.

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

HTMLEmbedElement - Web APIs
ted property indicating alignment of the element's contents with respect to the surrounding context.
...he element's contents with respect to the surrounding context.

Image() - Web APIs
h the properties htmlimageelement.width and htmlimageelement.height of the resulting instance.
...gh the properties htmlimageelement.naturalwidth and htmlimageelement.naturalheight.

HTMLImageElement.longDesc - Web APIs
resented by the chart, using only text.
...ider the following older html: <img src="taco-tuesday.jpg" longdesc="image-descriptions/taco-tuesday.html"> here, the longdesc is used to indicate that the user should be able to access a detailed description of the image taco-tuesday.jpg in the html file image-descriptions/taco-tuesday.html.

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.
...zes property slightly, switching the largest of the three widths for the image between 40em and 50em.

HTMLInputElement - Web APIs
checkbox will set the value to false.
... properties that apply only to elements of type image alt string: returns / sets the element's alt attribute, containing alternative text to use when type is image.

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.
... element and rescan the available sources, thereby causing the changes to take effect.

HTMLMediaElement.networkState - Web APIs
values are: constant value description network_empty 0 there is no data yet.
...diaelement is active and has selected a resource, but is not using the network.

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

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
lor: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain an audio-only stream with no specific constraints, then attaches the resulting stream to an <audio> element once the stream is returned.
...ipt content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, echocancellation: true } }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of audio constraints requesting that echo cancellation be enabled and that, if possible, the sample rate be 8 bits per sample instead of the more common 16 bits (possibly as a bandwidth saving measure).

MediaStreamConstraints.video - Web APIs
r: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain a video-only stream with no specific constraints, then attaches the resulting stream to a <video> element once the stream is returned.
...videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 15 } }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of video constraints that indicate a preference for a video track whose dimensions are as close as possible to 160x120 pixels, and whose frame rate is as close to 15 frames per second as possible.

MediaStreamTrack: ended event - Web APIs
data has been removed or ejected.
...on-screen icon to indicate that the track is no longer active.

Using the MediaStream Recording API - Web APIs
e('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); const blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; const audiourl = window.url.createobjecturl(blob); audio.src = audiourl; deletebutton.onclick = function(e) { let evttgt = e.target; evttgt.parentnode.parentnode.removechild(evttgt.parentnode); } } let's go through the above code and look at what's happening.
...ke the following, inserting it into our clip container, which is an <article> element.

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

msPlayToPreferredSourceUri - Web APIs
urce identifier (uri).
...tected content.

Navigator.getUserMedia() - Web APIs
scallback a function which is invoked when the request for media access is approved.
...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.

RTCInboundRtpStreamStats.bytesReceived - Web APIs
the rtcinboundrtpstreamstats dictionary's bytesreceived property is an integer value which indicates the total number of bytes received so far from this synchronization source (ssrc).
...received = rtcinboundrtpstreamstats.bytesreceived; value an unsigned integer value indicating the total number of bytes received so far on this rtp stream, not including header and padding bytes.

RTCOutboundRtpStreamStats - Web APIs
iver.
...stream has spent with its quality limited for that reason.

RTCPeerConnection.ontrack - Web APIs
tcrtpreceiver and rtcrtptransceiver, and a list of mediastream objects which indicates which stream or streams the track is part of..
...aling and video calling, connects the incoming track to the <video> element which will be used to display the incoming video.

RTCPeerConnection: track event - Web APIs
er connection.
... 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.

RTCRemoteOutboundRtpStreamStats - Web APIs
erties measuring metrics specific to outgoing rtp streams.
...e device) at which the statistics in the rtcremoteoutboundrtpstreamstats object were sent by the remote endpoint.

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.
...on floating-point value between 0 and 1 specifying the audio level contained in the last rtp packet played from this source.

RTCRtpReceiver - Web APIs
ns the rtcdtlstransport instance over which the media for the receiver's track is received.
...n rtcrtpparameters object which contains information about how the rtc data is to be decoded.

RTCStatsReport - Web APIs
date pair is deleted after the transport switches to another candidate pair; this change cannot be detected otherwise.
...cted otherwise.

RTCStatsType - Web APIs
date pair is deleted after the transport switches to another candidate pair; this change cannot be detected otherwise.
...cted otherwise.

RTCTrackEvent - Web APIs
tener() or the ontrack event handler property.
...nnection, thereby triggering a track event on the remote peer.

Using the Resource Timing API - Web APIs
he browser's resource performance entry buffer is full.
...bufferfull event callback in the init() function.

Response.clone() - Web APIs
bs using url.createobjecturl, and display them in two separate <img> elements.
...ar image2 = document.queryselector('.img2'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { var response2 = response.clone(); response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); image1.src = objecturl; }); response2.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); image2.src = objecturl; }); }); specifications specification status comment fetchthe definition of 'clone()' in that specification.

Response.redirected - Web APIs
redirects below.
...anually filter out redirects can allow forgery of redirects, you should instead set the redirect mode to "error" in the init parameter when calling fetch(), like this: fetch("awesome-picture.jpg", { redirect: "error" }).then(function(response) { return response.blob(); }).then(function(imageblob) { let imgobjecturl = url.createobjecturl(imageblob); document.getelementbyid("img-element-id").src = imgobjecturl; }); specifications specification status comment fetchthe definition of 'redirected' in that specification.

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.
... | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; console.log(speechrecognitionlist[0].src); // should return the same as the contents of the grammar variable console.log(speechrecognitionlist[0].weight); // should return 1 - the same as the weight set in line 4.

SpeechGrammarList.addFromURI() - Web APIs
the addfromuri() method of the speechgrammarlist interface takes a grammar present at a specific uri and adds it to the speechgrammarlist as a new speechgrammar object.
... the addfromuri() method of the speechgrammarlist interface takes a grammar present at a specific uri and adds it to the speechgrammarlist as a new speechgrammar object.

Using readable streams - Web APIs
ream if (done) { controller.close(); return; } // enqueue the next data chunk into our target stream controller.enqueue(value); return pump(); }); } } }) }) .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)); let’s look in detail at how read() is used.
...e enqueued, and the stream is closed when reading has finished.

TaskAttributionTiming - Web APIs
-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe, embed, or object.
...o,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe, embed, or object.

Touch.pageX - Web APIs
imple code snippet, we assume the user initiates one or more touch contacts on the source element, moves the touch points and then releases all contacts with the surface.
...tiates one or more touch contacts on the source element, moves the touch points and then releases all contacts with the surface.

Touch.pageY - Web APIs
imple code snippet, we assume the user initiates one or more touch contacts on the source element, moves the touch points and then releases all contacts with the surface.
...tiates one or more touch contacts on the source element, moves the touch points and then releases all contacts with the surface.

Touch.screenX - Web APIs
point relative to the screen in css pixels.
....

Touch.target - Web APIs
int is started when contact is first placed on the surface.
...d on the surface.

UserDataHandler - Web APIs
data() can also accept, in its third argument, a handler which will be called when the object is cloned, imported, deleted, renamed, or adopted.
...pied over, the handler will be called.

WEBGL_debug_shaders.getTranslatedShaderSource() - Web APIs
been defined or, webglrenderingcontext.compileshader() has not yet been called or, the translation for the shader failed.
...anslation for the shader failed.

WebGL2RenderingContext.readBuffer() - Web APIs
the webgl2renderingcontext.readbuffer() method of the webgl 2 api selects a color buffer as the source for pixels for subsequent calls to copyteximage2d, copytexsubimage2d, copytexsubimage3d or readpixels.
... the webgl2renderingcontext.readbuffer() method of the webgl 2 api selects a color buffer as the source for pixels for subsequent calls to copyteximage2d, copytexsubimage2d, copytexsubimage3d or readpixels.

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.

WebRTC Statistics API - Web APIs
rtcicecandidatepairstats rtcstats certificate statistics about a certificate being used by an rtcicetransport.
... certificate statistics about a certificate being used by an rtcicetransport.

Web Video Text Tracks Format (WebVTT) - Web APIs
ent(to bottom, dimgray, lightgray); color: papayawhip; } video::cue(b) { color: peachpuff; } here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of "papayawhip".
...; color: papayawhip; } video::cue(b) { color: peachpuff; } here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of "papayawhip".

Using Web Workers - Web APIs
use problems in your code.
...ge(uint8array.buffer, [uint8array.buffer]); note: for more information on transferable objects, performance, and feature-detection for this method, read transferable objects: lightning fast!

WindowOrWorkerGlobalScope.fetch() - Web APIs
retty much any context in which you might want to fetch resources.
...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.
...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-...

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

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

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

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

prefix - CSS: Cascading Style Sheets
ntation.
...rc>?

suffix - CSS: Cascading Style Sheets
y be a <string>, <image>, or <custom-ident>.
...rc>?

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

Using CSS transforms - CSS: Cascading Style Sheets
st of transforms, which are applied one after the other, as requested by the composition operation.
...rom its bottom-left corner.

attr() - CSS: Cascading Style Sheets
rimental, and support for the type-or-unit parameter is sparse.
...he value of an attribute of the selected element and use it in the stylesheet.

background-image - CSS: Cascading Style Sheets
itial valuenoneapplies toall elements.
...rc>?

background - CSS: Cascading Style Sheets
tage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<attachment> = scroll | fixed | local<box> = border-box | padding-box | content-boxwhere <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><length-percentage> = <length> | <percentage>where <image()> = image( <image-tags>?
...rc>?

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

content - CSS: Cascading Style Sheets
ist> = [ <string> | contents | <image> | <quote> | <target> | <leader()> ]+where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><quote> = open-quote | close-quote | no-open-quote | no-close-quote<target> = <target-counter()> | <target-counters()> | <target-text()><leader()> = leader( <leader-type> )where <image()> = image( <image-tags>?
...gradient()><target-counter()> = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>?

cross-fade() - CSS: Cascading Style Sheets
<cf-mixing-image> , <cf-final-image>?
.../ <alpha-value> ]?

mask-border-source - CSS: Cascading Style Sheets
oneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...rc>?

mask-image - CSS: Cascading Style Sheets
he defs element and all graphics elementsinheritednocomputed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax <mask-reference>#where <mask-reference> = none | <image> | <mask-source>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url>where <image()> = image( <image-tags>?
...rc>?

mask - CSS: Cascading Style Sheets
box> | fill-box | stroke-box | view-box<compositing-operator> = add | subtract | intersect | exclude<masking-mode> = alpha | luminance | match-sourcewhere <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url><length-percentage> = <length> | <percentage><shape-box> = <box> | margin-boxwhere <image()> = image( <image-tags>?
... <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>?

object-position - CSS: Cascading Style Sheets
ttom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
... [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples positioning image content html here we see html that includes two <img> elements, each displaying the mdn logo.

shape-outside - CSS: Cascading Style Sheets
| padding-box | content-box<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]?
... | <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> ]?

url() - CSS: Cascading Style Sheets
type.
...") { ...

HTML5 Parser - Developer guides
d from a script that is created by a <script> tag that does not have the async or defer attributes set.
...eated by a <script> tag that does not have the async or defer attributes set.

Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
he code that starts the download (say, when the user clicks a "download" button), looks like this: function startdownload() { let imageurl = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2fmdn_logo-only_color.svg?1535749917189"; downloadedimg = new image; downloadedimg.crossorigin = "anonymous"; downloadedimg.addeventlistener("load", imagereceived, false); downloadedimg.src = imageurl; } we're using a hard-coded url here (imageurl), but that could easily come from anywhere.
... new htmlimageelement object by using the image() constructor.

DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
d the associated video files on your web server or cdn.
...s on your web server or cdn.

<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.
...be reserved on either side of the applet.

<embed>: The Embed External Content element - HTML: Hypertext Markup Language
pts embedded content.
...tiate.

<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.
...th the <figure> element by inserting a <figcaption> inside it (as the first or the last child).

<frameset> - HTML: Hypertext Markup Language
raged in favor of using <iframe>, this element is not typically used by modern web sites.
...web sites.

<input type="file"> - HTML: Hypertext Markup Language
ide the previous <div> (obtained from file.name and file.size).
...st list = document.createelement('ol'); preview.appendchild(list); for(const file of curfiles) { const listitem = document.createelement('li'); const para = document.createelement('p'); if(validfiletype(file)) { para.textcontent = `file name ${file.name}, file size ${returnfilesize(file.size)}.`; const image = document.createelement('img'); image.src = url.createobjecturl(file); listitem.appendchild(image); listitem.appendchild(para); } else { para.textcontent = `file name ${file.name}: not a valid file type.

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

<noframes>: The Frame Fallback element - HTML: Hypertext Markup Language
eeded at all, they should be presented using the <iframe> element.
...ibutes like all other html elements, this element supports the global attributes.

contextmenu - HTML: Hypertext Markup Language
t" actions from your context menu </li> <menu type="context" id="changefont"> <menuitem label="increase font" onclick="incfont()"></menuitem> <menuitem label="decrease font" onclick="decfont()"></menuitem> </menu> <li contextmenu="changeimage" id="changeimage"> on the image below, you can fire the "change image" action in your context menu.<br /> <img src="https://udn.realityripple.com/samples/a2/b601bdfc0c.png" contextmenu="changeimage" id="promobutton" /> <menu type="context" id="changeimage"> <menuitem label="change image" onclick="changeimage()"></menuitem> </menu> </li> </ol> </body> javascript function shareviatwitter() { window.open("https://twitter.com/intent/tweet?text=" + "hurray!
.../facebook.com/sharer/sharer.php?u=" + "https://developer.mozilla.org/en/html/element/using_html_context_menus"); } function incfont() { document.getelementbyid("fontsizing").style.fontsize = "larger"; } function decfont() { document.getelementbyid("fontsizing").style.fontsize = "smaller"; } function changeimage() { var index = math.ceil(math.random() * 39 + 1); document.images[0].src = "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + index + ".png"; } result specifications specification status comment html 5.1the definition of 'contextmenu' in that specification.

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

screenshots - Web app manifests
type object mandatory no the screenshots member defines an array of screenshots intended to showcase the application.
... type object mandatory no the screenshots member defines an array of screenshots intended to showcase the application.

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

<mglyph> - MathML
users will see this displayed if the image url is wrong, the image is not in one of the supported formats, or until the image is downloaded.
...ded for use with stylesheets.

<semantics> - MathML
wing attributes can be set on <annotation> and <annotation-xml>: definitionurl the location of the annotation key symbol.
... </msup> <mo>+</mo> <mi>y</mi> </mrow> <!-- content mathml --> <annotation-xml encoding="mathml-content"> <apply> <plus/> <apply> <power/> <ci>x</ci> <cn type="integer">2</cn> </apply> <ci>y</ci> </apply> </annotation-xml> <!-- annotate an image --> <annotation encoding="image/png" src="some/path/formula.png"/> <!-- annotate tex --> <annotation encoding="application/x-tex"> x^{2} + y </annotation> </semantics> </math> specifications specification status comment mathml 3.0the definition of 'mixing markup languages for mathematical expressions' in that specification.

Lazy loading - Web Performance
-usage and how fast a page can load.
...mages are off-screen (non-critical), requiring user interaction (an example being scroll) in order to view them.

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.

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.

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.

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
font module font not implemented (bug 119490).
...ted.

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

XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
ncludes an embedded xpath expression which is used to specify the value of an attribute.
...attribute.

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.

panel - Archive of obsolete content
ddon.port.on("show", function onshow() { textarea.focus(); }); finally, the html file now references "get-text.js" inside a <script> tag: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> <script src="get-text.js"></script> </body> </html> styling panel content the panel's default style is different for each operating system: this helps to ensure that the panel's style is consistent with the dialogs displayed by firefox and other applications, but means you need to take care when applying your own styles.

/loader - Archive of obsolete content
create commonjs module loaders.

content/loader - Archive of obsolete content
ertychange', this._onchange = this._onchange.bind(this)); let self = this; hiddenframes.add(hiddenframes.hiddenframe({ onready: function onready() { let frame = self._frame = this.element; self._emit('propertychange', { contenturl: self.contenturl }); } })); }, _onchange: function _onchange(e) { if ('contenturl' in e) this._frame.setattribute('src', this._contenturl); } }); loader properties contentscriptfile the local file urls of content scripts to load.

Customizing the download progress bar - Archive of obsolete content
hough you might have to experiment with this a bit.

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.

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.

View Source for XUL Applications - Archive of obsolete content
importing gviewsourceutils xul applications wanting to show the source code for documents should import the viewsourceutils.js script instead of attempting to open the viewsource.xul window themselves: <script type="application/javascript" src="chrome://global/content/viewsourceutils.js"/> viewsourceutils.js exposes a gviewsourceutils global into the scope of the window that imports that script.

Offering a context menu for form controls - Archive of obsolete content
sion about this topic; please see bug 433168 for the latest information.

Adding sidebars - Archive of obsolete content
imple.

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.

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.

Security best practices in extensions - Archive of obsolete content
read using native json to find out the correct way to handle it.

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

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.

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.

Using XML Data Islands in Mozilla - Archive of obsolete content
s using the <xml> tag.

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.

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

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

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.

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.

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.

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.

Safely loading URIs - Archive of obsolete content
.8: if you plan pass a uri string to nsiwebnavigation.loaduri (which can happen indirectly, e.g.

File object - Archive of obsolete content
, and not well tested.

Static Analysis for Windows Code under Linux - Archive of obsolete content
mozilla 2 code by: hg clone http://hg.mozilla.org/mozilla-central/ and compose a .mozconfig file for cross-compiling mozilla with static analysis hooked: #specify the cross compile cross_compile=1 ac_add_options --enable-application=browser ac_add_options --host=i686-linux ac_add_options --target=i686-mingw32 ac_add_options --enable-default-toolkit=cairo-windows mk_add_options moz_objdir=@topsrcdir@/../mozilla-mingw # mozilla trunk uses many vista only features on windows, so we should disable some components to make it buildable with mingw32.

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.

Venkman Internals - Archive of obsolete content
tory of "locale" and injects variables.

Creating XPI Installer Modules - Archive of obsolete content
single xul window with an accompanying image: <?xml version="1.0"?> <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?> <window title="barley window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="375" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/> <image src="barley.gif" /> <box orient="horizontal" autostretch="never"> <button label="barley corn" /> <button label="show aphids" oncommand="bar();" /> </box> </window> the other files that the window imports are defined in dark blue.

Mac stub installer - Archive of obsolete content
where does the mac stub installer code reside?

Install Wizards (aka: Stub Installers) - Archive of obsolete content
and the xpinstall api reference.

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.

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.

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.

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.

ContextMenus - Archive of obsolete content
content && element.currenturi); document.getelementbyid("enlarge").hidden = !isimage; document.getelementbyid("details").hidden = !isimage; } </script> <menupopup id="contentareacontextmenu" onpopupshowing="showhideitems(event)"> <menuitem label="copy"/> <menuitem id="enlarge" label="enlarge image"/> <menuitem id="details" label="image details"/> </menupopup> <browser src="http://www.mozilla.org" context="contentareacontextmenu"/> when the popupshowing event is fired, the showhideitems function is called.

Menus - Archive of obsolete content
hese elements is avialable elsewhere.

Tooltips - Archive of obsolete content
t the text inside it.

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
« xul reference home statusbarpanel-iconic-text use this class to have an image appear on the statusbarpanel as well as a text label.

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

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

treecol-image - Archive of obsolete content
« xul reference home treecol-image use this class to have an image appear on the tree column header.

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.

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.

Multiple Rules - Archive of obsolete content
hild="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> <rule> <where subject="?title" rel="equals" value="canal"/> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </rule> <rule> <action> <image uri="?photo" src="?photo"/> </action> </rule> </template> </hbox> this template contains a query with two rules.

Sorting Results - Archive of obsolete content
vailable, the new content is inserted at the right location.

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
.

Tree Widget Changes - Archive of obsolete content
id, a new column object is used.

Adding HTML Elements - Archive of obsolete content
namespace as above.

Document Object Model - Archive of obsolete content
set the value to true.

Localization - Archive of obsolete content
ef="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> <!doctype window system "chrome://findfile/locale/findfile.dtd"> <window id="findfile-window" title="&findwindow.title;" persist="screenx screeny width height" orient="horizontal" onload="initsearchlist()" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="findfile.js"/> <popupset> <menupopup id="editpopup"> <menuitem label="&cutcmd.label;" accesskey="&cutcmd.accesskey;"/> <menuitem label="&copycmd.label;" accesskey="&copycmd.accesskey;"/> <menuitem label="&pastecmd.label;" accesskey="&pastecmd.accesskey;" disabled="true"/> </menupopup> </popupset> <keyset> <key id="cut_cmd" modifiers="accel" key="&cutcmd.commandkey;"/> ...

Tree View Details - Archive of obsolete content
deletecount); } } else { item[2] = true; var label = this.visibledata[idx][0]; var toinsert = this.childdata[label]; for (var i = 0; i < toinsert.length; i++) { this.visibledata.splice(idx + i + 1, 0, [toinsert[i], false]); } this.treebox.rowcountchanged(idx + 1, toinsert.length); } this.treebox.invalidaterow(idx); }, getimagesrc: function(idx, column) {}, getprogressmode : function(idx,column) {}, getcellvalue: function(idx, column) {}, cycleheader: function(col, elem) {}, selectionchanged: function() {}, cyclecell: function(idx, column) {}, performaction: function(action) {}, performactiononcell: function(action, index, column) {}, getrowproperties: function(idx, prop) {}, getcellproperties: function(i...

Trees - Archive of obsolete content
of the tree rows using the style attribute or with other css properties and the box related features such as flexibility and orientation cannot be used.

Updating Commands - Archive of obsolete content
on enough that mozilla includes a library which does just that.

Widget Cheatsheet - Archive of obsolete content
menu widget"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menu value="sub"> <menupopup> <menuitem value="subitem" /> </menupopup> </menu> </menupopup> </menu> <menulist value="menulist element"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menuitem value="boo" /> </menupopup> </menulist> <menubutton src="back.gif"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menuitem value="boo" /> </menupopup> </menubutton> ...

Accessibility/XUL Accessibility Reference - Archive of obsolete content
ox <groupbox> <caption label="<!--group label-->" /> <hbox> <button label="<!--button text-->" /> </hbox> </groupbox> iframe jaws 7.10 issues testing with jaws 7.10, use of an iframe element causes many, unpredictable issues with xul inside of the iframe.

notificationbox - Archive of obsolete content
// applies to current context's window object here, chromewin is the xul window (usually just window), and notifywindow is the web content window for the tab you want to find the notification box for.

panel - Archive of obsolete content
ofocus, noautohide, norestorefocus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, titlebar, top, type properties accessibletype, label, popupboxobject, popup, state methods hidepopup, moveto, openpopup, openpopupatscreen, sizeto examples the following example shows how a panel may be attached to a label.

stack - Archive of obsolete content
set, eg, if setting width, both "left" and "right" must be set.

window - Archive of obsolete content
="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!!

Building XULRunner with Python - Archive of obsolete content
mozilla or/c/projects/mozilla in msys) create the following .mozconfig file.

CommandLine - Archive of obsolete content
er: chrome/content/window.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="main" title="&window.title;" windowtype="xulmine" style="width: 300px; height: 350px;" persist="screenx screeny width height sizemode"> <script type="application/javascript" src="cmdline.js" /> ...

Getting started with XULRunner - Archive of obsolete content
ow, which is described in the file main.xul.

MacFAQ - Archive of obsolete content
try/catch can be removed, all you need is the window.arguments[0]) <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="myxul_hidden" windowtype="myxul:hiddenwindow" title="" width="0" height="0" persist="screenx screeny width height sizemode" > <!-- load the mozilla helpers --> <script type="application/javascript" src="chrome://global/content/nsusersettings.js" /> <script><![cdata[ function debug(alogstring) { var mconsoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice) mconsoleservice.logstringmessage("myxul: " + alogstring + "\n"); } function checkotherwindows() { var singletonwi...

Opening a Link in the Default Browser - Archive of obsolete content
xternal handler for a scheme exists.

XULRunner tips - Archive of obsolete content
if your application is based on gecko 2.0, you need to register a component through the new component registration because the extension manager uses fuel, namely application.restart(), to restart your xulrunner-based application after any change (installation, removal, enabling, disabling) in the extensions' list: copy files fuelapplication.js and fuelapplication.manifest from browser/fuel/src for instance into your components/ directory tweak the line #include ../../../toolkit/components/exthelper/extapplication.js in your copy of fuelapplication.js as needed make sure to declare the fuel module and the two files in your components/makefile.in as in browser/fuel/src/makefile.in rebuild...

nsIContentPolicy - Archive of obsolete content
cates a content security policy report.

symsrv_convert - Archive of obsolete content
make sure you have a symsrv.dll and symsrv.yes in the directory where symsrv_convert is looking.

Archived Mozilla and build documentation - Archive of obsolete content
y 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.

2006-11-03 - Archive of obsolete content
he encounters the following problem: no rule to make target `../../dist/lib/components/libpipboot.a', needed by `minimo'.

2006-11-10 - Archive of obsolete content
-enable-extensions=default,spatialnavigation then he tried running "make" and received the following error: /usr/bin/ld: testtarray.o(.text+0x2237): unresolvable relocation against symbol `nstarray_base::semptyhdr' /usr/bin/ld: final link failed: nonrepresentable section on output collect2: ld returned 1 exit status gmake[3]: *** [testtarray] error 1 gmake[3]: leaving directory `/usr/mozilla2/src/mozilla/xpcom/tests' gmake[2]: *** [libs] error 2 gmake[2]: leaving directory `/usr/mozilla2/src/mozilla/xpcom' gmake[1]: *** [tier_2] error 2 gmake[1]: leaving directory `/usr/mozilla2/src/mozilla' make: *** [default] error 2 he is not sure what is wrong with his build, and is asking for help on how to resolve the build error.

JS-Engine FAQ - Archive of obsolete content
spidermonkey how long are private pointers?

NPP_NewStream - Archive of obsolete content
roy the stream without calling npp_destroystream.

Adobe Flash - Archive of obsolete content
code snippet illustrates the ideas behind the use of fscommands demonstrated in example 3: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="myflash" width="250" height="150" viewastext> <param name="movie" value="js2flash.swf" /> <param name="quality" value="high"></param> <embed src="js2flash.swf" width="250" height="150" swliveconnect="true" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="myflash"> </embed> </object> .....

SSL and TLS - Archive of obsolete content
of security rsa key length ecc key length table 1: comparison of rsa and ecc cipher strength 80 1024 160-223 112 2048 224-255 128 3072 256-383 192 7860 384-511 256 15360 512+ the information in this table is from the national institute of standards and technology (nist).

TCP/IP Security - Archive of obsolete content
he transport layer security (tls) protocol is usually used for this.

Table Reflow Internals - Archive of obsolete content
table doesn't allocate extra height to rows until after it does a pass 2 reflow and then it is too late this can be fixed by doing a special 3rd pass reflow special reflow example <table border=2 width=300> <tr> <td> this cell's width is constrained by the table and image widths.

E4X for templating - Archive of obsolete content
e iterates over an array of the lines in an e4x child element to produce an xmllist of multiple vbox's representing each line: <vbox> {foreach(e(someel.somechild[0]).split('\n'), function (line) <description>{line}</description> )} </vbox> the following example shows iteration over an e4x object itself: {foreach(elems, function (k, elem, iter) <> <row>{k}: {elem}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)} or if the e4x child element had its own children and text: {foreach(elems, function (k, elem, iter) <> <row>{k}: {elem.text()} {elem.somechild}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)} sorting /* @param {xmllist} xmllist the xmllist to sort @param {function} h the sorting handler */ func...

Using JavaScript Generators in Firefox - Archive of obsolete content
warning: this technique works only in firefox, not ie, chrome, safari, etc.

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
applied.

XForms Custom Controls - Archive of obsolete content
tp://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="output-image" extends="chrome://xforms/content/xforms.xml#xformswidget-base"> <content> <html:div> <html:img anonid="content"/> </html:div> </content> <implementation implements="nsixformsuiwidget"> <method name="refresh"> <body> <!-- set the src attribute on the html:img to be the simplecontent of the instance node bound to this control --> var img = document.getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementation> </binding> </bindings> <xf:model> <xf:instance xmln...

XForms Custom Controls Examples - Archive of obsolete content
output showing images <binding id="output-image" extends="chrome://xforms/content/xforms.xml#xformswidget-base"> <content> <html:div> <html:img anonid="content"/> </html:div> </content> <implementation implements="nsixformsuiwidget"> <method name="refresh"> <body> var img = document.getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementation> </binding> output showing xhtml <binding id="output-xhtml" extends="chrome://xforms/content/xforms-xhtml.xml#xformswidget-output"> <content> <children includes="label"/> <xhtml:div class="xf-value" anonid="content"></xhtml:div> <children/> </content> <implementation implements="nsixformsuiwi...

Implementation Status - Archive of obsolete content
5; 10.11 revalidate partial is dispatching events instead of calling directly 332231; 10.12 refresh partial is dispatching events instead of calling directly 332231; 10.13 reset supported 10.14 load partial no xforms-link-error generated if @src invalid 333782; 10.15 send supported 10.16 message partial output inside message doesn't work correctly 366886; 10.17 conditional execution of xforms actions supported 10.18 iteration of xforms actions supported ...

Mozilla XForms Specials - Archive of obsolete content
ut how to whitelist domain can be found in the release notes the cross domain check also includes forms loaded from file://.

XForms Alert Element - Archive of obsolete content
tance data value is invalid or out of the specified range of selectable values (see the spec).

XForms Help Element - Archive of obsolete content
ntaining form control has focus or if the containing form control recieves a xforms-help event.

XForms Hint Element - Archive of obsolete content
l.

XForms Label Element - Archive of obsolete content
the access key is in a standard way.

XForms Message Element - Archive of obsolete content
t listeners to display a message to the user when the specified event occurs (see the spec).

Using the Right Markup to Invoke Plugins - Archive of obsolete content
vokes a netscape plugin.

XUL Parser in Python - Archive of obsolete content
t>dir</tt> command it depends on gets you your xul files.

Building up a basic demo with A-Frame - Game development
thub repository for latest stable a dev builds).

Building up a basic demo with Babylon.js - Game development
directory.

Building up a basic demo with the PlayCanvas engine - Game development
de your directory.

Building up a basic demo with Three.js - Game development
minimized three.js library inside your directory.

Implementing game control mechanisms - Game development
nal ones like tv remote, shouting to or waving your hand in front of the laptop, or squeezing bananas.

Crisp pixel art look with image-rendering - Game development
es; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; } and some javascript to set up the canvas and load the image: // get canvas context var ctx = document.getelementbyid('game').getcontext('2d'); // load image var image = new image(); image.onload = function () { // draw the image into the canvas ctx.drawimage(image, 0, 0); } image.src = 'https://udn.realityripple.com/samples/11/a2954fe197.png'; this code used together produces the following result: note: you can check out the original code on github (and a live example.) ...

Visual-js game engine - Game development
ges (alias sprite - but for now there's no sprite and frame by frame animation methods).

Gecko FAQ - Gecko Redirect 1
m?