Alt-Svc - HTTP
the alt-svc http response header is used to advertise alternative services through which the same resource can be reached. an alternative service is defined by a protocol/host/port combination. syntax alt-svc: clear alt-svc: <protocol-id>=<alt-authority>; ma=<max-age> alt-svc: <protocol-id>=<alt-authority>; ma=<max-age>; persist=1 clear the special value ''clear" indicates that the origin requests all alternatives for that origin to be invalidated. <protocol-id> the alpn protocol identifier. examples include h2 for http/2 and h3-25 for draft 25 of the http/3 protocol. <alt-authority> the quoted string specifying the alternative authority which consists of an optional host override, a colon, and a mandatory port number. ...
...requests all alternatives for that origin to be invalidated. <protocol-id> the alpn protocol identifier. examples include h2 for http/2 and h3-25 for draft 25 of the http/3 protocol. <alt-authority> the quoted string specifying the alternative authority which consists of an optional host override, a colon, and a mandatory port number. ma=<max-age>optional the number of seconds for which the alternative service is considered fresh. if omitted, it defaults to 24 hours. alternative service entries can be cached for up to <max-age> seconds, minus the age of the response (from the age header). if the cached entry expires, the client can no longer use this alternative service for new connections. ...
... ma=<max-age>optional the number of seconds for which the alternative service is considered fresh. if omitted, it defaults to 24 hours. alternative service entries can be cached for up to <max-age> seconds, minus the age of the response (from the age header). if the cached entry expires, the client can no longer use this alternative service for new connections. persist=1optional usually cached alternative service entries are cleared on network configuration changes. use of the persist=1 parameter ensures that the entry is not deleted through such changes. multiple entries can be specified in a single alt-svc header using comma as separator. in that case, early entries are considered more preferable. ...
...alternative service for new connections. persist=1optional usually cached alternative service entries are cleared on network configuration changes. use of the persist=1 parameter ensures that the entry is not deleted through such changes. multiple entries can be specified in a single alt-svc header using comma as separator. in that case, early entries are considered more preferable. example alt-svc: h2=":443"; ma=2592000; alt-svc: h2=":443"; ma=2592000; persist=1 alt-svc: h2="alt.example.com:443", h2=":443" alt-svc: h3-25=":443"; ma=3600, h2=":443"; ma=3600 specifications specification status comment rfc 7838 ietf rfc initial definition. ...

gestalt - Archive of obsolete content
for information on that function, see inside macintosh: operating system utilities. this method returns null on unix and windows platforms. ...
...for information on that function, see inside macintosh: operating system utilities. this method returns null on unix and windows platforms. ...
...only) retrieves information about the operating environment. method of install object syntax int gestalt ( string selector ); parameters the gestalt method takes the following parameters: selector the selector code for the information you want. returns returns the requested information. the format depends on the select code specified in the selector parameter. description the gestalt method is a wrapper for the gestalt function of the macintosh toolbox. for information on that function, see inside macintosh: operating system utilities. this method returns null on unix and windows platforms. ...

browser.altClickSave
false (default) no action triggered (see bug 736985). ...
... false (default) no action triggered (see bug 736985). ...
... false (default) no action triggered (see bug 736985). ...

PRIntervalTime
a platform-dependent type that represents a monotonically increasing integer--the nspr runtime clock. syntax #include <prinrval.h> typedef pruint32 printervaltime; #define pr_interval_min 1000ul #define pr_interval_max 100000ul #define pr_interval_no_wait 0ul #define pr_interval_no_timeout 0xfffffffful description the units of printervaltime are platform-dependent. they are chosen to be appropriate for the host os, yet provide sufficient resolution and period to be useful to clients. the increasing interval value represented by printervaltime wraps. it should therefore never be used for intervals greater than approximately 6 hours. interval times are accurate regardless of host processing requirements and are very cheap to acquire. the constants pr_interval_min and pr_interva...
... the reserved constants pr_interval_no_wait and pr_interval_no_timeout have special meaning for nspr. they indicate that the process should wait no time (return immediately) or wait forever (never time out), respectively. important note the counters used for interval times are allowed to overflow. ...
...it no time (return immediately) or wait forever (never time out), respectively. important note the counters used for interval times are allowed to overflow. since the sampling of the counter used to define an arbitrary epoch may have any 32-bit value, some care must be taken in the use of interval times. the proper coding style to test the expiration of an interval is as follows: if ((printervaltime)(now - epoch) > interval) <... interval has expired ...> as long as the interval and the elapsed time (now - epoch) do not exceed half the namespace allowed by a printervaltime (231-1), the expression shown above provides the expected result even if the signs of now and epoch differ. the resolution of a printervaltime object is defined by the api. nspr guarantees that there will be at leas...

SVGAltGlyphElement - Web APIs
the svgaltglyphelement interface represents an <altglyph> element. this interface makes it possible to implement more sophisticated and particular glyph characters. for some textal representations as: ligatures (e.g. æ, ß, etc ), special-purpose fonts (e.g. musical symbols) or even alternate glyphs such as asian text strings it is required that a different set of glyphs be used than the normal given character data. properties this interface also inherits properties from its parent interface, svggraphicselement. svgaltglyphelement.glyphref it corresponds to the attribute glyphref on the given element. it's data type is 'string'. it defines the glyph identifier, whose format is dependent on the ‘format’ of the given font. ...
...it's data type is 'string'. this property specifies the format of the given font. ...
...tglyphelement.format it corresponds to the attribute format on the given element. it's data type is 'string'. this property specifies the format of the given font. methods this interface has no methods but inherits methods from its parent, svgelement. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgaltglyphelement' in that specification. recommendation initial definition ...

SpeechRecognitionAlternative.transcript - Web APIs
the transcript read-only property of the speechrecognitionresult interface returns a string containing the transcript of the recognised word(s). for continuous recognition, leading or trailing whitespace will be included where necessary so that concatenation of consecutive speechrecognitionresults produces a proper transcript of the session. syntax var mytranscript = speechrecognitionalternativeinstance.transcript; returns a domstring. examples this code is excerpted from our speech color changer example. recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects. // it has a getter so it can be accessed like an array /...
...esult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. ...
...ains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects that contain individual results. // these also have getters so they can be accessed like arrays. // the second [0] returns the speechrecognitionalternative at position 0. // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'transcript' in that specification. dr...

KeyboardEvent.altKey - Web APIs
the keyboardevent.altkey read-only property is a boolean that indicates if the alt key (option or ⌥ on os x) was pressed (true) or not (false) when the event occured. syntax var altkeypressed = instanceofkeyboardevent.altkey return value boolean examples <html> <head> <title>altkey example</title> <script type="text/javascript"> function showchar(e){ alert( "key keydown: " + string.fromcharcode(e.charcode) + "\n" + "charcode: " + e.charcode + "\n" + "alt key keydown: " + e.altkey + "\n" ); } </script> </head> <body onkeydown="showchar(event);"> <p> press any character key, with or without holding down the alt key.<br /> you can also use the shift key together with the alt key. </p> </body> </html> specifications specification status comment ...
... obsolete initial definition. ...

msRealTime - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. msrealtime is a read/write property which specifies whether or not to enable low-latency playback on the media element. this proprietary property is specific to internet explorer and microsoft edge. syntax ptr = object.msrealtime; value boolean value set to true indicates that low-latency playback will be enabled on the media element. low-latency playback is useful in communication and some gaming scenarios, but is more demanding on power consumption and less reliable for smooth media playb...
...rietary property is specific to internet explorer and microsoft edge. syntax ptr = object.msrealtime; value boolean value set to true indicates that low-latency playback will be enabled on the media element. low-latency playback is useful in communication and some gaming scenarios, but is more demanding on power consumption and less reliable for smooth media playback. you must set the msrealtime before setting the src property in code. msrealtime should not be used in non-real-time or non-communication scenarios, such as audio and/or video playback, as this can affects playback startup latency of audio and video playback. ...

RTCIceCredentialType - Web APIs
values oauth the rtciceserver requires the use of oauth 2.0 to authenticate in order to use the ice server described. this process is detailed in rfc 7635. this property was formerly called token. password the rtciceserver requires a username and password to authenticate prior to using the described ice server. obsolete values the following values are no longer part of the webrtc specification, but were in the past. token authenticating with the ice server requires the use of an oauth 2.0 token as defined in rfc 7635. this value has been renamed to oauth. ...
...s the following values are no longer part of the webrtc specification, but were in the past. token authenticating with the ice server requires the use of an oauth 2.0 token as defined in rfc 7635. this value has been renamed to oauth. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecredentialtype' in that specification. candidate recommendation initial specification. ...

TouchEvent.altKey - Web APIs
summary a boolean value indicating whether or not the alt (alternate) key is enabled when the touch event is created. if the alt key is enabled, the attribute's value is true. otherwise, it is false. this property is read only . syntax var altenabled = touchevent.altkey; return value altenabled true if the alt key is enabled for this event; and false if the alt is not enabled. example this example illustrates how to access the touchevent key modifier properties: touchevent.altkey, touchevent.ctrlkey, touchevent.metakey and touchevent.shiftkey. in following code snippet, the touchstart event handler logs the state of the event's modifier keys. ...
... example this example illustrates how to access the touchevent key modifier properties: touchevent.altkey, touchevent.ctrlkey, touchevent.metakey and touchevent.shiftkey. in following code snippet, the touchstart event handler logs the state of the event's modifier keys. someelement.addeventlistener('touchstart', function(e) { // log the state of this event's modifier keys console.log("altkey = " + e.altkey); console.log("ctrlkey = " + e.ctrlkey); console.log("metakey = " + e.metakey); console.log("shiftkey = " + e.shiftkey); }, false); specifications specification status comment touch events – level 2 draft non-stable version. touch events recommendation initial definition. ...

alternatingbackground - Archive of obsolete content
« xul reference home alternatingbackground obsolete since gecko 2.0 type: boolean if true, the background of the tree's rows will alternate between two colors. you can use the :-moz-tree-row css style to do this instead. ...

externalToolbars - Archive of obsolete content
« xul reference externaltoolbars type: array of elements an array of external toolbars; that is, toolbar elements that should be considered to be members of this toolbox, even if they are not actually children of the toolbox. ...

PR_IntervalToMicroseconds
converts platform-dependent intervals to standard clock microseconds. syntax #include <prinrval.h> pruint32 pr_intervaltomicroseconds(printervaltime ticks); parameter ticks the number of platform-dependent intervals to convert. returns equivalent in microseconds of the value passed in the ticks parameter. description conversion may cause overflow, which is not reported. ...

PR_IntervalToMilliseconds
converts platform-dependent intervals to standard clock milliseconds. syntax #include <prinrval.h> pruint32 pr_intervaltomilliseconds(printervaltime ticks); parameter ticks the number of platform-dependent intervals to convert. returns equivalent in milliseconds of the value passed in the ticks parameter. description conversion may cause overflow, which is not reported. ...

PR_IntervalToSeconds
converts platform-dependent intervals to standard clock seconds. syntax #include <prinrval.h> pruint32 pr_intervaltoseconds(printervaltime ticks); parameter ticks the number of platform-dependent intervals to convert. returns equivalent in seconds of the value passed in the ticks parameter. description conversion may cause overflow, which is not reported. ...

PR_LocalTimeParameters
this time should be specified in gmt. returns a time parameters structure that expresses the time zone offsets at the specified time. ...

Event.originalTarget - Web APIs
the original target of the event before any retargetings. (mozilla-specific) in presence of xbl anonymous content this will be the anonymous node the event originally fired on. see anonymous content#event_flow_and_targeting for more details. note: originaltarget may also be native anonymous content (see bug 208427), in which case it's useless for non-privileged code. see also comparison of event targets example need an example that makes sense here specification this is a mozilla-specific property. defined in /dom/public/idl/events/nsidomnsevent.idl this event property is not defined in the w3.org dom level 2 events ...

GeolocationCoordinates.altitude - Web APIs
the geolocationcoordinates.altitude read-only property is a double representing the altitude of the position in meters, relative to sea level. this value is null if the implementation cannot provide this data. syntax let alt = geolocationcoordinatesinstance.altitude value a double representing the altitude of the position in meters, relative to sea level. specifications specification status comment geolocation apithe definition of 'coordinates.altitude' in that specification. recommendation initial definition ...

GeolocationCoordinates.altitudeAccuracy - Web APIs
the geolocationcoordinates.altitudeaccuracy read-only property is a strictly positive double representing the accuracy, with a 95% confidence level, of the altitude expressed in meters. this value is null if the implementation doesn't support measuring altitude. syntax let altacc = geolocationcoordinatesinstance.altitudeaccuracy value a positive double representing the accuracy, with a 95% confidence level, of the altitude expressed in meters. specifications specification status comment geolocation apithe definition of 'geolocationcoordinates.altitudeaccuracy' in that specification. recommendation initial specification. ...

HTMLMediaElement.initialTime - Web APIs
this property is obsolete, you can use a media fragments uri in the htmlmediaelement.src attribute instead. syntax ... value a double. example ... ...

RTCIceCandidateStats.mozLocalTransport - Web APIs
the non-standard mozilla extension to the rtcicecandidatestats dictionary, mozlocaltransport, has been supplanted by the standard relayprotocol property. syntax instead of using mozlocaltransport, you should use code like this: localtransport = rtcicecandidatestats.relayprotocol; specifications not part of any specification. ...

SVGAltGlyphElement.glyphRef - Web APIs
it has the same meaning as the ‘glyphref’ property on the svgglyphrefelement interface of the <glyphref> element. syntax string = myglyph.glyphref; myglyph.glyphref = string; value the return value is a glyph identifier, the value of which depends on the format of the given font. example myglyph.glypref = "#glyphid"; specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'glyphref' in that specification. ...

USBDevice.selectAlternateInterface() - Web APIs
the selectalternateinterface() method of the usbdevice interface returns a promise that resolves when the specified alternative endpoint is selected. syntax var promise = usbdevice.selectalternateinterface(interfacenumber, alternatesetting) parameters interfacenumber the index of one of the interfaces supported by the device. interfaces are device-specific. alternatesetting the configuration of the selected interface. return value a promise. specifications specification status comment webusbthe definition of 'selectalternateinterface()' in that specification. draft initial definition. ...

<altGlyphDef> - SVG: Scalable Vector Graphics
the <altglyphdef> svg element defines a substitution representation for glyphs. usage context categoriestext content elementpermitted contenteither: one or more <glyphref> elements, or one or more <altglyphitem> elements attributes global attributes core attributes specific attributes none dom interface this element implements the svgaltglyphdefelement interface. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<altglyphdef>' in that specification. recommendation initial definition ...

<altGlyphItem> - SVG: Scalable Vector Graphics
the <altglyphitem> element provides a set of candidates for glyph substitution by the <altglyph> element. usage context categoriestext content elementpermitted contentone or more <glyphref> elements example attributes global attributes core attributes specific attributes none dom interface this element implements the svgaltglyphitemelement interface. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<altglyphitem>' in that specification. recommendation initial definition ...

Index - Web APIs
eb audio api, resume the resume() method of the audiocontext interface resumes the progression of time in an audio context that has previously been suspended. 135 audiocontext.suspend() api, audio, audiocontext, method, reference, web audio api, suspend the suspend() method of the audiocontext interface suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing cpu/battery usage in the process — this is useful if you want an application to power down the audio hardware when it will not be using an audio context for a while. 136 audiocontextlatencycategory api, audio, audio context, audiocontextlatencycategory, enum, interface, media, reference, type, web audio, web audio api, latency the audio...
...d messageport. it can be used to communicate between the processor and the audioworkletnode to which it belongs. 215 audioworkletprocessor.process api, audio, audioworkletnode, audioworkletprocessor, experimental, method, process, reference, web audio api the process() method of an audioworkletprocessor-derived class implements the audio processing algorithm of the processor. although the method is not a part of the audioworkletprocessor interface, each class that derives from it must have it implemented. 216 authenticatorassertionresponse api, authentication, authenticatorassertionresponse, interface, reference, web authentication api, webauthn the authenticatorassertionresponse interface of the web authentication api is returned by credentialscontai...
...cardrequest dictionary can optionally be provided to specify an array of domstrings representing the card types that the retailer supports (e.g. credit, debit, prepaid). 256 basiccardresponse api, basic card payment, basiccardresponse, experimental, interface, payment request, payment request api, reference the basiccardresponse dictionary (related to the payment request api, although defined in the basic card payment spec) defines an object structure for payment response details such as the number/expiry date of the card used to make the payment, and the billing address. 257 basiccardresponse.billingaddress api, basic card payment, basiccardresponse, experimental, payment request, payment request api, property, reference, billingaddress the billingad...
...And 66 more matches

Fullscreen API - Web APIs
full-screen mode simply by pressing the esc (or f11) key, rather than waiting for the site or app to programmatically do so. make sure you provide, somewhere in your user interface, appropriate user interface elements that inform the user that this option is available to them. note: navigating to another page, changing tabs, or switching to another application using any application switcher (or alt-tab) will likewise exit full-screen mode. example in this example, a video is presented in a web page. pressing the return or enter key lets the user toggle between windowed and full-screen presentation of the video. view live examples watching for the enter key when the page is loaded, this code is run to set up an event listener to watch for the enter key. document.addeventlistener("keyp...
...data and send us a pull request. ...
...s a pull request. ...
...And 36 more matches

Setting up the Gecko SDK
this dialog, click finish. microsoft studio creates a new project per your specification and presents you with the standard project view. adding the gecko sdk to the project settings in order to build anything that uses gecko, you have to further modify the project so that it knows where to find the gecko sdk on the disk. to edit project settings, select settings from the project menu (or press alt-f7). most of the changes you make in the following steps apply to all configurations of the project (both debug and optimized), so select "all configurations" from the settings for dropdown menu: on the c/c++ tab, select the preprocessor category. this window is where you add the include paths to the gecko sdk as well as two preprocessor defines: xpcom_glue mozilla_strict_api at a minim...
... this allows you to created the component without sending any extra dlls set path=%path%;d:\projects\xulrunner-sdk\sdk\bin;d:\projects\xulrunner-sdk\bin this tells the command prompt where to find the gecko tools, importantly (xpidl, regxpcom, and gmake). building the sample built sample in d:\projects\sample the idl this step is fairly straight forward. first create the idl file. ...
...dk\sdk\bin;d:\projects\xulrunner-sdk\bin this tells the command prompt where to find the gecko tools, importantly (xpidl, regxpcom, and gmake). building the sample built sample in d:\projects\sample the idl this step is fairly straight forward. first create the idl file. ...
...And 26 more matches

:is() (:matches(), :any()) - CSS: Cascading Style Sheets
full support 68notes disabled notes combinators in the selector list argument may not match correctly (see bug 842157).disabled from version 68: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). to change preferences in chrome, visit chrome://flags. no support 66 — 71notes alternate name disabled notes combinators in the selector list argument may not match correctly (see bug 842157).alternate name uses the non-standard name: :matches()disabled from version 66 until version 71 (exclusive): this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). to change preferences in chrome, visit chrome://flags. ...
...ctor list argument may not match correctly (see bug 842157).alternate name uses the non-standard name: :matches()disabled from version 66 until version 71 (exclusive): this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). to change preferences in chrome, visit chrome://flags. ...
...ug 842157).alternate name uses the non-standard name: :matches()disabled from version 66 until version 71 (exclusive): this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). to change preferences in chrome, visit chrome://flags. ...
...And 26 more matches

MathML Torture Test
ola</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>2</td> <td><img src="https://udn.realityripple.com/samples/b8/da4a50ea34.png" width="30" heig...
...k, 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</mn><none/> <mprescripts/> <mn>2</mn><none/> </mmulti...
...</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> <mi>k</mi> <mo>+</mo> <mn>1</mn> </mrow> ...
...And 24 more matches

filter - CSS: Cascading Style Sheets
filter: blur(5px) <table class="standard-table"> <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"> ...
...iewbox="0 0 212 161" color-interpolation-filters="srgb"> <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; -webki...
...er> </filter> </svg> <table class="standard-table"> <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...
...And 20 more matches

Guide to the Fullscreen API - Web APIs
fullscreenenabled property tells you whether or not the document is currently in a state that would allow fullscreen mode to be requested. things your users want to know you'll want to be sure to let your users know that they can press the esc key (or f11) to exit fullscreen mode. in addition, navigating to another page, changing tabs, or switching to another application (using, for example, alt-tab) while in fullscreen mode exits fullscreen mode as well. example in this example, a video is presented in a web page. pressing the return or enter key lets the user toggle between windowed and fullscreen presentation of the video. view live examples watching for the enter key when the page is loaded, this code is run to set up an event listener to watch for the enter key. document.addev...
...data and send us a pull request. ...
...s a pull request. ...
...And 19 more matches

Images in HTML - Learn web development
ove code would give us the following result: note: elements like <img> and <video> are sometimes referred to as replaced elements. this is because the element's content and size are defined by an external resource (like an image or video file), not by the contents of the element itself. ...
... elements like <img> and <video> are sometimes referred to as replaced elements. this is because the element's content and size are defined by an external resource (like an image or video file), not by the contents of the element itself. note: you can find the finished example from this section running on github (see the source code too.) alternative text the next attribute we'll look at is alt. ...
...tion running on github (see the source code too.) alternative text the next attribute we'll look at is alt. its value is supposed to be a textual description of the image, for use in situations where the image cannot be seen/displayed or takes a long time to render because of a slow internet connection. for example, our above code could be modified like so: <img src="images/dinosaur.jpg" alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"> the easiest way to test your alt text is to purposely misspell your filename. ...
...And 18 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
image into the document. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the above example shows usage of the <img> element: the src attribute is required, and contains the path to the image you want to embed. the alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot. there are many other attributes to achieve v...
...rl of the page the user is currently on. the image is corrupted in some way that prevents it from being loaded. the image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <img> element's attributes. the image is in a format not supported by the user agent. attributes this element includes the global attributes. alt defines an alternative text description of the image. note: browsers do not always display images. there are a number of situations in which a browser might not display images, such as: non-visual browsers (such as those used by people with visual impairments) the user chooses not to display images (saving bandwidth, privacy reasons) the image is invalid or an unsupported type in...
...t always display images. ...
...And 18 more matches

HTML: A good basis for accessibility - Learn web development
cer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bgcolor="#ffffff"> <td colspan="6"> <p>©copyright 2050 by nobody. all rights reversed.</p> </td> </tr> </table> if you try to navigate this using a screen reader, it will probably tell you that there's a table to be looked at (although some screen readers can guess the difference between table layouts and data tables). you'll then likely (depending on which screen reader you're using) have to go down into the table as an object and look at its features separately, then get out of the table again to carry on navigating the content. table layouts are a relic of the past — they made sense back when css support was not wide...
...ands table example — you can see a few accessibility aids at work here: table headers are defined using <th> elements — you can also specify if they are headers for rows or columns using the scope attribute. this gives you complete groups of data that can be consumed by screen readers as single units. ...
......
...And 16 more matches

HTML: A good basis for accessibility - Learn web development
cer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bgcolor="#ffffff"> <td colspan="6"> <p>©copyright 2050 by nobody. all rights reversed.</p> </td> </tr> </table> if you try to navigate this using a screen reader, it will probably tell you that there's a table to be looked at (although some screen readers can guess the difference between table layouts and data tables). you'll then likely (depending on which screen reader you're using) have to go down into the table as an object and look at its features separately, then get out of the table again to carry on navigating the content. table layouts are a relic of the past — they made sense back when css support was not wide...
...ands table example — you can see a few accessibility aids at work here: table headers are defined using <th> elements — you can also specify if they are headers for rows or columns using the scope attribute. this gives you complete groups of data that can be consumed by screen readers as single units. ...
......
...And 16 more matches

Index - Archive of obsolete content
the code snippets on this page will let your site work until these new features are more widely available. 190 isdefaultnamespace no summary! 191 js xpcom code snippets, javascript, xpcom, about:, nsiabout...
...y of things. this page applies to thunderbird (mail/news). 491 java in firefox extensions add-ons, extensions, java if you are in need of calling java code from within a firefox extension, you can make use of liveconnect. liveconnect gives your extension's javascript code (linked from or contained in xul code) access to 2 objects: java and packages (note that per this thread, although the new documentation for the liveconnect reimplementation states that these globals will be deprecated (in the context of applets), "firefox and the java plug-in will continue to support the global java/packages keywords, in particular in the context of firefox extensions."). these 2 objects let you make use of the standard jdk classes, e.g., 492 javascript os.shared m...
...d control the statusbar of the browser. you can find the complete sourcecode in the status-bar-panel.js file in your jetpack repository. 548 litmus tests litmus tests are (non-automated) tests that are documented in the litmus database. see http://litmus.mozilla.org. 549 mac os x build prerequisites/fink fink is a package management system for mac os x, alternative to macports. it doesn't seem to be as well maintained (in terms of available packages) as macports, so it is strongly suggested that you use macports instead of fink. 550 makefile.mozextension.2 this makefile is a modification of the makefile.mozextention, found in makefile for packaging an extension - mozillazine knowledge base (2005). 551 measuring add-o...
...And 15 more matches

nsINavBookmarksService
ed along. void changebookmarkuri( in nsiuri olduri, obsolete since gecko 1.9 in long long aitemid, in nsiuri anewuri ); parameters olduri obsolete since gecko 1.9 the uri of the item to be changed. aitemid the item whose bookmark uri needs to be changed. anewuri the new uri. obsolete since gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this method creates a dynamic container under the given parent folder. long long createdynamiccontainer( in long long aparentfolder, in autf8string aname, in astring acontractid, in long aindex ); parameters aparentfolder the id of the parent folder. aname...
...e uri of the bookmark, in this case "mozilla.org". note: will only return bookmarks in the first 3 levels of redirection (1 -> 2 -> 3 -> auri). nsiuri getbookmarkedurifor( in nsiuri auri ); parameters auri the uri that needs to be checked if it is bookmarked or not. return value native code only!getbookmarkfolderstarray obsolete since gecko 1.9 (firefox 3)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. tarray version of getbookmarkfolders() for ease of use in c++ code. pass in a reference to a tarray; it will get cleared and filled with the resulting list of folder ids. void getbookmarkfolderstarray( in nsiuri auri, in print64array aresult ); parameters auri ...
...auri, out unsigned long count, optional [array, retval, size_is(count)] out long long bookmarks ); parameters auri the uri whose list of bookmark ids is to be retrieved. count the count of bookmark ids. bookmarks the list of bookmark ids. native code only!getbookmarkidsforuritarray obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this method is a tarray version of getbookmarkidsforuri() for ease of use in c++ code. pass in a reference to a tarray; it will get cleared and filled with the resulting list of folder ids. void getbookmarkidsforuritarray( in nsiuri auri, in print64array aresult ); ...
...And 15 more matches

SubtleCrypto.unwrapKey() - Web APIs
e unwrapkey() method supports the same algorithms as the wrapkey() method. examples note: you can try the working examples on github. unwrapping a "raw" key in this example we unwrap an aes-gcm symmetric key. the key was exported in "raw" format and encrypted using the aes-kw algorithm, with a key derived from a password. to unwrap, we ask the user for the password and use pbkdf2 and some salt to derive the aes-kw unwrapping key. the salt needs to be the same as the salt that was used to derive the original aes-kw key wrapping key. once we have the unwrapping key we pass it into unwrapkey() with the wrapped key and other parameters. see the complete code on github. /* salt that is to be used in derivation of the key-wrapping key, alongside the password the user supplies. this must ma...
...e the aes-kw unwrapping key. the salt needs to be the same as the salt that was used to derive the original aes-kw key wrapping key. once we have the unwrapping key we pass it into unwrapkey() with the wrapped key and other parameters. see the complete code on github. /* salt that is to be used in derivation of the key-wrapping key, alongside the password the user supplies. this must match the salt value that was originally used to derive the key. */ const saltbytes = [89,113,135,234,168,204,21,36,55,93,1,132,242,242,192,156]; /* the wrapped key itself. */ const wrappedkeybytes = [171,223,14,36,201,233,233,120,164,68,217,192,226,80, 224,39,199,235,239,60,212,169,100,23,61,54,244,197,160,80,109,230,207, 225,57,197,175,71,80,209]; /* convert an array of byte values to an arraybuffer...
... your password"); let enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* derive an aes-kw key using pbkdf2. */ async function getunwrappingkey() { // 1. ...
...And 14 more matches

imgIContainer
ore the previous(composited) frame. obsolete since gecko 2.0 kblendsource 0 all color components of the frame, including alpha, const long kblendover = 1; // the frame should be composited onto the output buffer. obsolete since gecko 2.0 methods native code only!addrestoredata obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void addrestoredata( [array, size_is(acount), const] in char data, in unsigned long acount ); parameters data missing description acount missing description exceptions thrown missing exception missing description native code only!appendfram...
...me. try to avoid using it. void addrestoredata( [array, size_is(acount), const] in char data, in unsigned long acount ); parameters data missing description acount missing description exceptions thrown missing exception missing description native code only!appendframe obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. adds to the end of the list of frames. void appendframe( in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength ); parameters ax ...
...description awidth missing description aheight missing description aformat missing description imagedata missing description imagelength missing description exceptions thrown missing exception missing description native code only!appendpalettedframe obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void appendpalettedframe( in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, in pruint8 apalettedepth, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength, [array, size_is(palette...
...And 13 more matches

Index
e of nss's expectation to operate with an nss database, it's mandatory that you perform an initialization call, where you tell nss which database you will be using. in the most simple scenario, the programmer will provide a directory on your filesystem as a parameter to the init function, and nss is designed to do the rest. it will detect and open an existing database, or it can create a new one. alternatively, should you decide that you don't want to work with any persistent recording of certificates, you may initialize nss in a no-database mode. usually, nss will flush all data to disk as soon as new data has been added to permanent storage. storage consists of multiple files: a key database file, which contains your secret keys, and a certificate database file which contains the public por...
... only. when dealing with certificates (x.509), file formats such as pkcs#12 (certificates and keys), pkcs#7 (signed data), and message formats as cms, we should mention asn.1, which is a syntax for storing structured data in a very efficient (small sized) presentation. it was originally developed for telecommunication systems at times where it was critical to minimize data as much as possible (although it still makes sense to use that principle today for good performance). in order to process data available in the asn.1 format, the usual approach is to parse it and transfer it to a presentation that requires more space but is easier to work with, such as (nested) c data structures. over the time nss has received three different asn.1 parser implementations, each having their own specific p...
...th their business, they might make deals with established cas and receive so-called cross-signing-certificates. as a result, when searching for a trust path from (a) to a trusted anchor (root) certificate (z), the set of candidate issuer certificates might have different issuer names (referring to the second or higher issuer level). as a consequence, it will be necessary to try multiple different alternative routes while searching for (z), in a recursive manner. only the newer verification engine (internally named libpkix) is capable of doing that properly. it's worth mentioning the extended validation (ev) principle, which is an effort by software vendors and cas to define a stricter set of rules for issuing certificates for web site certificates. instead of simply verifying that the requ...
...And 12 more matches

Background Tasks API - Web APIs
eratively scheduled background tasks</a> using the <code>requestidlecallback()</code> method. </p> <div class="container"> <div class="label">decoding quantum filament tachyon emissions...</div> <progress id="progress" value="0"></progress> <div class="button" id="startbutton"> start </div> <div class="label counter"> task <span id="currenttasknumber">0</span> of <span id="totaltaskcount">0</span> </div> </div> <div class="logbox"> <div class="logheader"> log </div> <div id="log"> </div> </div> the progress box uses a <progress> element to show the progress, along with a label with sections that are changed to present numeric information about the progress. in addition, there's a "start" button (creatively given the id "startbutton"), which the user will u...
...rogress { width: 100%; padding-top: 6px; } javascript content now that the document structure is defined, construct the javascript code that will do the work. the goal: to be able to add requests to call functions to a queue, with an idle callback that runs those functions whenever the system is idle for long enough a time to make progress. ...
... long enough a time to make progress. variable declarations let tasklist = []; let totaltaskcount = 0; let currenttasknumber = 0; let taskhandle = null; these variables are used to manage the list of tasks that are waiting to be performed, as well as status information about the task queue and its execution: tasklist is an array of objects, each representing one task waiting to be run. totaltaskcount is a counter of the number of tasks that have been added to the queue; it will only go up, never down. we use this to do the math to present progress as a precentage of total work to do. currenttasknumber is used to track how many tasks have been processed so far. ...
...And 12 more matches

How to build a binary XPCOM component using Visual Studio
ding arguments and return types, of the component. component implementation using c++. the implementation is where the methods actually do the work. component factory module, also in c++. the factory is in charge of creating instances of the implementations. let’s specify a simple interface: #include "nsisupports.idl" [scriptable, uuid(263ed1ba-5cc1-11db-9673-00e08161165f)] interface ispecialthing : nsisupports { attribute astring name; long add(in long a, in long b); }; remember to generate your own guid. the next step is to compile the idl into a type-library (*.xpt) and a c++ header file (*.h), which we can use to define our implementation object. the blank vc++ project has a bat file that will create the xpt and the h files. the command executes xpidl.exe twice, like this: {...
...he command executes xpidl.exe twice, like this: {path_to_geckosdk}\bin\xpidl.exe -m header -i..\gecko-sdk\idl {your_idl_file} {path_to_geckosdk}\bin\xpidl.exe -m typelib -i..\gecko-sdk\idl {your_idl_file} the generated h file actually has a skeleton implementation (commented out). you can take the code and create implementation h and cpp files. ...
...ice, like this: {path_to_geckosdk}\bin\xpidl.exe -m header -i..\gecko-sdk\idl {your_idl_file} {path_to_geckosdk}\bin\xpidl.exe -m typelib -i..\gecko-sdk\idl {your_idl_file} the generated h file actually has a skeleton implementation (commented out). you can take the code and create implementation h and cpp files. ...
...And 11 more matches

SubtleCrypto.wrapKey() - Web APIs
h as aes-gcm is that aes-kw does not require an initialization vector. to use aes-kw, the input must be a multiple of 64 bits. aes-kw is specified in rfc 3394. examples note: you can try the working examples out on github. raw wrap this example wraps an aes key. it uses "raw" as the export format and aes-kw, with a password-derived key, to encrypt it. see the complete code on github. let salt; /* get some key material to use as input to the derivekey method. the key material is a password supplied by the user. */ function getkeymaterial() { const password = window.prompt("enter your password"); const enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* giv...
...input to the derivekey method. the key material is a password supplied by the user. */ function getkeymaterial() { const password = window.prompt("enter your password"); const enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* given some key material and some random salt derive an aes-kw key using pbkdf2. */ function getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-kw", "length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* wrap the given key. */ async function wrapcryptokey(keytowrap) { ...
...eturn window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-kw", "length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* wrap the given key. */ async function wrapcryptokey(keytowrap) { // get the key encryption key const keymaterial = await getkeymaterial(); salt = window.crypto.getrandomvalues(new uint8array(16)); const wrappingkey = await getkey(keymaterial, salt); return window.crypto.subtle.wrapkey( "raw", keytowrap, wrappingkey, "aes-kw" ); } /* generate an encrypt/decrypt secret key, then wrap it. */ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256, }, true, ["encrypt", "decrypt"] ) .then((sec...
...And 10 more matches

Perceivable - Accessibility
ility guidelines (wcag) 2.0 and 2.1. perceivable states that users must be able to perceive it in some way, using one or more of their senses. note: to read the w3c definitions for perceivable and its guidelines and success criteria, see principle 1: perceivable - information and user interface components must be presentable to users in ways they can perceive. guideline 1.1 — providing text alternatives for non-text content the key here is that text can be converted to other forms that people with disabilities can use. for example, it can be spoken by a screenreader, converted to large print, or represented on a braille display. non-text content refers to multimedia such as images, audio, and video. success criteria how to conform to the criteria practical resource ...
...ies can use. for example, it can be spoken by a screenreader, converted to large print, or represented on a braille display. non-text content refers to multimedia such as images, audio, and video. ...
... it can be spoken by a screenreader, converted to large print, or represented on a braille display. non-text content refers to multimedia such as images, audio, and video. success criteria how to conform to the criteria practical resource 1.1.1 provide text equivalents (a) all images that convey meaningful content should be given suitable alternative text. text alternatives. complex images or charts should have an accessible alternative provided, either on the same page or via a link. use a regular link instead of a longdesc attribute. a text description may work, or an accessible data table (see html table advanced features and accessibility). see other text alternative mechanisms for the argument against longdesc. multimedia ...
...And 10 more matches

OpenType font features guide - CSS: Cascading Style Sheets
ile others are left to the designer or developer to choose to enable in specific scenarios. in addition to broad feature sets like ligatures or lining figures (numerals that line up evenly as opposed to 'oldstyle', which look more like lower-case letters), there are also very specific ones such as stylistic sets (which might include several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for east asian languages. in the latter case, these alterations are actually necessary to properly express the language, so they go beyond the more stylistic preference of most other opentype features. caution: there are many css attributes defined to leverage font features, but unfortunately m...
...serif pro, ibm plex serif, dancing script, and kokoro (all available and free to use, most are on google fonts and other services). kerning (font-kerning) this refers to the spacing between specific glyph pairings. this is generally on by default (as recommended by the opentype specification). it should be noted that if letter-spacing is also set on your text, that is applied after kerning. ...
..., dancing script, and kokoro (all available and free to use, most are on google fonts and other services). kerning (font-kerning) this refers to the spacing between specific glyph pairings. this is generally on by default (as recommended by the opentype specification). it should be noted that if letter-spacing is also set on your text, that is applied after kerning. ...
...And 10 more matches

Web video codec guide - Web media technologies
loss of sharpness the act of removing data in the process of encoding video requires that some details be lost. if enough compression is applied, parts or potentially all of the image could lose sharpness, resulting in a slightly fuzzy or hazy appearance. lost sharpness can make text in the image difficult to read, as text—especially small text—is very detail-oriented content, where minor alterations can significantly impact legibility. ringing lossy compression algorithms can introduce ringing, an effect where areas outside an object are contaminated with colored pixels generated by the compression algorithm. this happens when an algorithm that uses blocks that span across a sharp boundary between an object and its background. this is particularly common at higher compression level...
...n your needs. in the end, the decisions about what sacrifices you're able to make are entirely up to you and/or your design team. codec details av1 the aomedia video 1 (av1) codec is an open format designed by the alliance for open media specifically for internet video. it achieves higher data compression rates than vp9 and h.265/hevc, and as much as 50% higher rates than avc. av1 is fully royalty-free and is designed for use by both the <video> element and by webrtc. av1 currently offers three profiles: main, high, and professional with increasing support for color depths and chroma subsampling. in addition, a series of levels are specified, each defining limits on a range of attributes of the video. these attributes include frame dimensions, image area in pixels, display and decode rat...
... avc (h.264) the mpeg-4 specification suite's advanced video coding (avc) standard is specified by the identical itu h.264 specification and the mpeg-4 part 10 specification. it's a motion compensation based codec that is wi...
...And 10 more matches

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
using eval in add-ons is almost always unnecessary, and many times even a security vulnerability. moreover, code using eval is harder to parse for a human mind, is often pretty complex, and relies on assumptions that are not necessarily true in the future or even now. this article is aimed at presenting alternatives to common eval uses in add-ons and other javascript code. add-on authors are strongly encouraged to update their code to eliminate all instances of eval, no matter if the add-on is to be hosted in the mozilla add-ons gallery or not. in order to host your add-on with mozilla it is crucial to minimize or completely eliminate eval use in order to receive a positive review and have your add-on made public. if it cannot be easily proven that an eval() call is benign and necessary b...
...heir code to eliminate all instances of eval, no matter if the add-on is to be hosted in the mozilla add-ons gallery or not. in order to host your add-on with mozilla it is crucial to minimize or completely eliminate eval use in order to receive a positive review and have your add-on made public. if it cannot be easily proven that an eval() call is benign and necessary because there are no viable alternatives, a mozilla add-ons gallery reviewer will generally reject the submission! parsing json mozilla provides native json support since firefox 3. there is simply no need to parse json using eval. additionally, parsing json retrieved from a remote location becomes a security vulnerability when parsed with the eval function. basically, you are executing remote code with full chrome access; t...
...in of the data is usually known in all instances and where vulnerabilities would have a much smaller impact. what about jsonp? jsonp, which really is just another script tag containing generated, remotely retrieved code, is generally not secure. it might be possible to execute any retrieved jsonp code in an unprivileged sandbox (which is complicated!), but if you have a choice, just avoid jsonp altogether! passing around functions/code as strings often you'll want to pass functions or code to other functions, most notoriously settimeout and addeventlistener. often this is done passing around strings. // do not use! settimeout("dosomething();", 100); addeventlistener("load", "myaddon.init(); myaddon.onload();", true); setinterval(am_i_a_string_or_function_reference_qmark, 100); that in ...
...And 9 more matches

Handling common accessibility problems - Learn web development
most people immediately think of making sure websites/apps are usable by people with disabilities, for example: visually impaired people using screen readers or magnification/zoom to access text people with motor function impairments using the keyboard (or other non-mouse features) to activate website functionality. ...
... users of older devices that might not have the latest browsers. users of lower spec devices that might have slow processors. in a way, this whole module is about accessibility — cross browser testing makes sure that your sites can be used by as many people as possible. ...
...the element that is currently focused on the page. note: this technique will only work if you set your original event handlers via event handler properties (e.g. onclick). addeventlistener won't work. this is a lot of extra hassle to build the functionality back in. and there's bound to be other problems with it. better to just use the right element for the right job in the first place. text alternatives text alternatives are very important for accessibility — if a person has a visual or hearing impairment that stops them being able to see or hear some content, then this is a problem. the simplest text alternative available is the humble alt attribute, which we should include on all images that contain relevant content. this should contain a description of the image that successfully ...
...And 9 more matches

All keyboard shortcuts - Firefox Developer Tools
unlike the other toolbox-hosted tools,...
...unlike the other toolbox-hosted tools, this shortcut does not also close the web console.
... ...
...And 9 more matches

Text labels and names - Accessibility
er website feature should be given a descriptive name or label to allow users of assistive technologies to understand what its purpose is and to be able to understand and operate it correctly. there are a number of different types of problems in this category, found in different contexts, and each has its own solution. the different problems and solutions are discussed in the sections below. use alt attribute to label area elements that have the href attribute in image maps, give each <area> element an alt attribute containing a name that describes what resources the areas links to. failure to do so makes an image map hard to use for users of assistive technology — they need alternative text to be able to understand the purpose of an image. examples the following example show a simple i...
...ve the href attribute in image maps, give each <area> element an alt attribute containing a name that describes what resources the areas links to. failure to do so makes an image map hard to use for users of assistive technology — they need alternative text to be able to understand the purpose of an image. examples the following example show a simple image map (taken from h24: providing text alternatives for the area elements of image maps): <img src="welcome.gif" usemap="#map1" alt="areas in the library. ...
...le to understand the purpose of an image. examples the following example show a simple image map (taken from h24: providing text alternatives for the area elements of image maps): <img src="welcome.gif" usemap="#map1" alt="areas in the library. select an area for more information on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="reference" /> <area shape="rect" coords="34,34,100,100" href="media.html" alt="audio visual lab" /> </map> see the <area> element reference page for a live interactive example. ...
...And 9 more matches

min-width - CSS: Cascading Style Sheets
full support 33safari ios full support 11 full support 11 full support 7prefixed prefixed implemented with the vendor prefix: -webkit-samsung internet android full support 5.0alternate name full support 5.0alternate name alternate name uses the non-standard name: -webkit-fill-availablemax-contentchrome full support 46 full support 46 full support 25prefixed prefixed implemented with the vendor ...
... noopera full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix: -webkit-safari full support 11 full support 11 full support 2alternate name alternate name uses the non-standard name: intrinsicwebview android full support 46 full support 46 full support ≤37prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support ...
... 66 full support 4prefixed prefixed implemented with the vendor prefix: -moz-opera android full support 33safari ios full support 11 full support 11 full support 1alternate name alternate name uses the non-standard name: intrinsicsamsung internet android full support 5.0min-contentchrome full support 46 full support 46 full support 25prefixed prefixed implemented with the vendor pref...
...And 9 more matches

Link types - HTML: Hypertext Markup Language
in html, link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, <form>, or <link> element. ...
...ween two documents, in which one links to the other using an <a>, <area>, <form>, or <link> element. list of the defined link types and their significance in html link type description allowed in these elements not allowed in these elements alternate if the element is <link> and the rel attribute also contains the stylesheet type, the link defines an alternative style sheet; in that case the title attribute must be present and not be the empty string. ...
...if the element is <link> and the rel attribute also contains the stylesheet type, the link defines an alternative style sheet; in that case the title attribute must be present and not be the empty string. if the type is set to application/rss+xml or application/atom+xml, the link defines a syndication feed. the first one defined on the page is the default. ...
...And 9 more matches

Fundamental text and font styling - Learn web development
georgia s...
... georgia serif times n...
... in the late 90s and early 2000s): name generic type notes arial sans-serif it's often considered best practice to also add helvetica as a preferred alternative to arial as, although their font faces are almost identical, helvetica is considered to have a nicer shape, even if arial is more broadly available. courier new monospace some oses have an alternative (possibly older) version of the courier new font called courier. it's considered best practice to use both with courier new as the preferred alternative. georgia serif times new roman serif some oses have an alternative (possibly older) version of the times new roman font called times. it's considered best practice to use both with times new roman as the pre...
...And 8 more matches

Mozilla’s UAAG evaluation report
notes/plans checkpoint title status notes/plans 2.1 render content according to specification. (p1) vg renders html, css, and a number of graphic image formats. does not contradict current specifications for html and css rendering. 2.2 provide text view. (p1) c also known as view source. 2.3 render conditional content. ...
...der content according to specification. (p1) vg renders html, css, and a number of graphic image formats. does not contradict current specifications for html and css rendering. 2.2 provide text view. (p1) c also known as view source. 2.3 render conditional content. (p1) vg alt for img: rendered when images turned off. see meta bug 41924 for open issues with the alt attribute. ...
...tml and css rendering. 2.2 provide text view. (p1) c also known as view source. 2.3 render conditional content. (p1) vg alt for img: rendered when images turned off. see meta bug 41924 for open issues with the alt attribute. title for *any* element: rendered as tooltip longdesc for img element: in context menu - properties content of object element: ? alt for area element: ? alt for input element: ? acronym element: supported abbr element: supported abbr attribute for td/th: not supported summary for table: supported title for frame: ? longdesc for frame: not supported, see bug 3658 noframe for frame: must use user style sheets to render this. a ui for this would be good. noscript for script: must use user style...
...And 8 more matches

KeyboardEvent.getModifierState() - Web APIs
e. the value must be one of the keyboardevent.key values which represent modifier keys, or the string "accel" . this is case-sensitive. modifier keys on internet explorer ie9 uses "scroll" for "scrolllock" and "win" for "os". ...
...st be one of the keyboardevent.key values which represent modifier keys, or the string "accel" . this is case-sensitive. modifier keys on internet explorer ie9 uses "scroll" for "scrolllock" and "win" for "os". ...
...f the keyboardevent.key values which represent modifier keys, or the string "accel" . this is case-sensitive. modifier keys on internet explorer ie9 uses "scroll" for "scrolllock" and "win" for "os". ...
...And 8 more matches

<input type="image"> - HTML: Hypertext Markup Language
form of an image rather than text. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. value none — the value attribute should not be specified. events none. supported common attributes alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget idl attributes none. methods none. value <input type="image"> elements do not accept value attributes. the path to the image to be displayed is specified in the src attribute. additional attributes in addition to the attributes shared by all <input> elements, image button inputs ...
...get idl attributes none. methods none. value <input type="image"> elements do not accept value attributes. the path to the image to be displayed is specified in the src attribute. ...
... idl attributes none. methods none. value <input type="image"> elements do not accept value attributes. the path to the image to be displayed is specified in the src attribute. ...
...And 8 more matches

XUL accessibility guidelines - Archive of obsolete content
ly left to right, top to bottom. navigation order may vary depending on the nature of the application or the reading direction of the language. ensure that tab order is logical and all interactive elements can be accessed simply without the use of a mouse. you should be able to perform all functionality either directly in the application or through menu items or the context menu. trees provide alternative functionality for inaccessible operations. the column picker and column headers in xul trees are not keyboard accessible, consistent with the standard tree behavior on most contemporary operating systems. it is therefore necessary to provide a keyboard accessible alternative for accessing this functionality. the firefox "bookmarks manager" provides an example of how to make trees more ...
...on a click of the right mouse button. the oncontextmenu event and context attribute work with the correct platform-specific context menu triggers, including the keyboard button and appropriate mouse clicks. mouse dependent scripting functionality associated with mouse events such as onmouseover, onmousemove, and ondrag can only be activated with the use of the mouse. provide keyboard-accessible alternative access points for this functionality. consider using context menu items or other xul elements along with keyboard shortcuts. scrolling ensure that scrolling is keyboard accessible. many xul elements can be set to scroll using css. other elements, such as arrowscrollbox and listbox, are made to scroll automatically. as a general rule, elements set to scroll are inaccessible if the user c...
...eating the jump operation and thereby skipping ahead one form field. initial dialog focus the initial focus in a xul dialog (i.e., the focus when the dialog is first opened) should always be on a specific control, not on the dialog itself. in a tabbed dialog, focus should normally start on the first control in the selected tab. ...
...And 7 more matches

AudioParam.cancelAndHoldAtTime() - Web APIs
n/browser-compat-data and send us a pull request. ...
...t-data and send us a pull request. ...
...ame: cancelvaluesandholdattime()edge full support ≤79firefox no support noie no support noopera full support 44 full support 44 no support ? ...
...And 7 more matches

TextEncoder.prototype.encodeInto() - Web APIs
ut it is well worth the length because of the gains in performance. ...
... in performance. ...
... "use strict"; var log = math.log; var ln2 = math.ln2; var clz32 = math.clz32 || function(x) {return 31 - log(x >>> 0) / ln2 | 0}; var fromcharcode = string.fromcharcode; var patchedu8array = window.uint8array || array; var textencoderprototype = textencoder["prototype"]; var globaltextencoder = window["textencoder"]; var globaltextencoderprototype; var globaltextencoderinstance; ////////////////////////////////////////////////////////////////////////////////////// function encoderreplacer(nonasciichars){ // make the utf string into a binary utf-8 encoded string var point = nonasciichars.charcodeat(0)|0; if (0xd800 <= point && point <= 0xdbff) { var nextcode = nonasciichars.charcodeat(1)|0; // defaults to 0 wh...
...And 7 more matches

max-width - CSS: Cascading Style Sheets
css3 sizing.ie no support noopera full support 44safari full support 6.1prefixed full support 6.1prefixed prefixed implemented with the vendor prefix: -webkit- full support 2alternate name alternate name uses the non-standard name: intrinsicwebview android full support 46 full support 46 full support ≤37prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support ...
...so, the definition of fit-content is simpler than in css3 sizing.opera android full support 43safari ios full support 7prefixed full support 7prefixed prefixed implemented with the vendor prefix: -webkit- full support 1alternate name alternate name uses the non-standard name: intrinsicsamsung internet android full support 5.0max-content experimentalchrome full support 46 full support 46 full support 22prefixed prefixed implemented with th...
...refix: -moz-ie no support noopera full support 44safari full support 6.1prefixed full support 6.1prefixed prefixed implemented with the vendor prefix: -webkit- full support 2alternate name alternate name uses the non-standard name: intrinsicwebview android full support 46 full support 46 full support ≤37prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support ...
...And 7 more matches

The box model - Learn web development
th an understanding of how it works and the terminology that relates to it. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the css box model, what makes up the box model and how to switch to the alternate model. block and inline boxes in css we broadly have two types of boxes — block boxes and inline boxes. these characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page: if a box is defined as a block, it will behave in the following ways: the box will break onto a new line. the box will extend in the inline direction to fil...
...ncentrate on the outer display type. what is the css box model? the full css box model applies to block boxes, inline boxes only use some of the behavior defined in the box model. the model defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on the page. to add some additional complexity, there is a standard and an alternate box model. parts of a box making up a block box in css we have the: content box: the area where your content is displayed, which can be sized using properties like width and height. padding box: the padding sits around the content as white space; its size can be controlled using padding and related properties. border box: the border box wraps the content and any padding. its size and...
...+ 25 + 5 + 5), and the height 210px (150 + 25 + 25 + 5 + 5), as the padding and border are added to the width used for the content box. note: the margin is not counted towards the actual size of the box — sure, it affects the total space that the box will take up on the page, but only the space outside the box. the box's area stops at the border — it does not extend into the margin. the alternative css box model you might think it is rather inconvenient to have to add up the border and padding to get the real size of the box, and you would be right! for this reason, css had an alternative box model introduced some time after the standard box model. using this model, any width is the width of the visible box on the page, therefore the content area width is that width minus the width...
...And 6 more matches

Accessible Toolkit Checklist
the right iaccessible for each event. the checklist this checklist is currently only for microsoft windows, but should be expanded to include information about linux and os x. it is maintained by the mozilla accessibility community. contributions are welcome. general dialogs/windows/general escape key cancels dialogs and refocuses the previously focused on the parent window. ...
...osoft windows, but should be expanded to include information about linux and os x. it is maintained by the mozilla accessibility community. contributions are welcome. general dialogs/windows/general escape key cancels dialogs and refocuses the previously focused on the parent window. alt+f4 closes windows, similar to escape but even works on dialogs without cancel button alt+space opens window menu with restore, move, size, minimize, maximize, close the move and size options must be usable with the arrow keys on the keyboard in windows, initial focus goes to first focusable widget that is not a clickable tabbed property sheet label making tab order definable. default tab order should be in document order. tab order must wrap, not have invisibl...
...g what this iaccessible is used for, for example. is it a link, static text, editable text, a checkbox, or a table cell, etc. get_accstate: a 32 bit field representing possible on/off states, such as focused, focusable, selected, selectable, visible, protected (for passwords), checked, etc. get_acckeyboardshortcut: what is the keyboard shortcut for this iaccessible (underlined alt+combo mnemonic) get_accfocus: which child is focused? get_accselection: which children of this item are selected? acclocation: get the x,y coordinates, and the height and width of this iaccessible node. accnavigate: navigate to the first/last child, previous/next sibling, up, down, left or right from this iaccessible. [important, but no need to implement up...
...And 6 more matches

nsITextInputProcessor
ied, the methods don't dispatch the "keyup" event. key required. when you dispatch printable key events, this value should be the text to be inputted. even if the key event shouldn't cause text input actually, e.g., ctrl key is pressed, this value should be the text when such modifiers causing suppressing text input are not pressed. for example, ctrl+c should be "c", ctrl+shift+cshould be "c", altgr+c may be "©" and then, ctrl+altgr+c should be "©". when you dispatch non-printable key events, this value should be one of the key names defined by dom level 3 keyboardevent key values or registered by gecko with "moz" prefix. code optional, but should be specified when you emulate pc keyboard operation. the value should be one of the physical key names defined by dom level 3 keyboardeven...
...boardevent key values or registered by gecko with "moz" prefix. code optional, but should be specified when you emulate pc keyboard operation. the value should be one of the physical key names defined by dom level 3 keyboardevent code values. keycode optional, but should be specified when you dispatch printable key events. when you emulate pc keyboard, deciding the value may be complicated. although the rules to decide the keycode value are different on each web browser, you should use same rules as gecko because your events are dispatched on gecko. basically, gecko decides a keycode value for a printable key from ascii character which is inputted with a far simpler modifier state. see "printable keys in standard position" section of keyboardevent.keycode for the strict rules of gecko. ...
...y); // this inactivates capslock state. tip.keyup(capslockkey); // this doesn't modify capslock state. ...
...And 6 more matches

nsIXPConnect
bject); void initclasses(in jscontextptr ajscontext, in jsobjectptr aglobaljsobj); nsixpconnectjsobjectholder initclasseswithnewwrappedglobal(in jscontextptr ajscontext, in nsisupports acomobj, in nsiidref aiid, in nsiprincipal aprincipal, in nsisupports aextraptr, in pruint32 aflags); nsivariant jstovariant(in jscontextptr ctx, in jsval value); nsivariant jsvaltovariant(in jscontextptr cx, in jsvalptr ajsval); void movewrappers(in jscontextptr ajscontext, in jsobjectptr aoldscope, in jsobjectptr anewscope); [noscript,notxpcom] void notejscontext(in jscontextptr ajscontext, in nscctraversalcallbackref acb); void releasejscontext(in jscontextptr ajscontext, in prbool nogc); void removejsholder(in voidptr aholder); nat...
...pt,notxpcom] void getcaller( out jscontextptr ajscontext, out jsobjectptr aobject ); parameters ajscontext missing description aobject missing description return value missing description exceptions thrown missing exception missing description native code only!getcowforobject obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. wrap a jsval in a chrome object wrapper. jsval getcowforobject( in jscontextptr ajscontext, in jsobjectptr aparent, in jsobjectptr awrappedobj ); parameters ajscontext a context to use to create objects. aparent the parent to create the wrapper with. awrap...
... jsobjectptr ascope, in nsiclassinfo aclassinfo ); parameters ajscontext missing description ascope missing description aclassinfo missing description return value missing description exceptions thrown missing exception missing description native code only!getwrapperforobject obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns an xpcnativewrapper, xpcsafejsobjectwrapper, or xpccrossoriginwrapper for the given object based on the principal, scope, and filename flags that are passed in. note: in c++, the out jsval parameter must already be a strong gc root. jsval getwrapperforobject( ...
...And 6 more matches

HTML attribute: rel - HTML: Hypertext Markup Language
the rel attribute, which, if present, must have a value that is an unordered set of unique space-separated keywords, which are listed in the following table. every keyword within a space seperated value should be unique within that value. values for the rel attribute, and the elements for which each is relevant rel value description <link> <a> and <area> <form> alternate alternate representations of the current document. link link not allowed author author of the current document or article. link link not allowed bookmark permalink for the nearest ancestor section. not allowed link not allowed canonical preferred url for the current document. link not allowed not allowed dns...
...: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder. instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore. ...
...se this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder. instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore. ...
...And 6 more matches

Defining Cross-Browser Tooltips - Archive of obsolete content
summary: authors are used to having alt text appear as a &quot;tooltip&quot; above images, but that's not how it was meant to be used. learn how to define &quot;tooltips&quot; in a cross-browser, standards-friendly way. authors are used to using the alt attribute to create "tooltips" in web browsers. the classic example is a "tooltip" of an image; when the user pauses the mouse pointer over an image, the contents of the alt attribute are displayed as a "tooltip." gecko-based browsers such as mozilla, netscape 6+, and compuserve 7 do not support this behavior. see bug 25537 for a lengthy, sometimes passionate discussion of gecko's behavior in this regard. ...
...is a "tooltip" of an image; when the user pauses the mouse pointer over an image, the contents of the alt attribute are displayed as a "tooltip." gecko-based browsers such as mozilla, netscape 6+, and compuserve 7 do not support this behavior. see bug 25537 for a lengthy, sometimes passionate discussion of gecko's behavior in this regard. the problem according to the html 4.01 definition of the alt attribute: alt = text cs for user agents that cannot display images, forms, or applets, this attribute specifies alternate text. the language of the alternate text is specified by the lang attribute. in other words, alt text should only be displayed when a user agent cannot display the primary content of the element (e.g., a text-mode browser that cannot display images). in a visual browser...
...gents that cannot display images, forms, or applets, this attribute specifies alternate text. the language of the alternate text is specified by the lang attribute. in other words, alt text should only be displayed when a user agent cannot display the primary content of the element (e.g., a text-mode browser that cannot display images). in a visual browser, the image should be displayed and the alt text should not. this assumes that the browser can find the image and that it supports the image format used; if either of these is not true, and the image cannot be displayed, then the alt text should be displayed in place of the missing image. on the other hand, the html 4.01 definition of the title attribute states: title = text cs this attribute offers advisory information about the elem...
...And 5 more matches

Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
is nsdsuricontentlistener, which corresponds to a docshell and handles most of the data types that mozilla handles internally. nsiexternalhelperappservice if we can't do anything else with a load, we give it to the nsiexternalhelperappservice and let it look for a helper app, put up the "what do i do now?" dialog, and so forth. ...
...illa handles internally. nsiexternalhelperappservice if we can't do anything else with a load, we give it to the nsiexternalhelperappservice and let it look for a helper app, put up the "what do i do now?" dialog, and so forth. ...
...ppservice and let it look for a helper app, put up the "what do i do now?" dialog, and so forth. ...
...And 5 more matches

Browser Detection and Cross Browser Support - Archive of obsolete content
tests. introduction in an ideal world, we could author html, xml, css and javascript and only worry about the w3c and ecma standards. however, we don't quite live in such a world yet. due to bugs, incomplete implementations of the standards and legacy browsers, web developers must be able to determine which browser a visitor is using and provide the appropriate content and scripting code path. although browser detection is perhaps the most common scripting task that every web developer faces, it seems that the variety of different strategies in use for detecting browsers is unlimited. as a member of the netscape evangelism team who has spent over a year investigating existing web content, i can say without a doubt that most compatibility problems found on the web today are due to a lack of...
... can say without a doubt that most compatibility problems found on the web today are due to a lack of understanding of the standards combined with inadequate and inappropriate browser detection strategies. this article is intended to provide an overview of browser detection strategies and best practices. for more specific gecko recommendations, please see the gecko compatibility handbook gecko although many web developers are aware of firefox, mozilla, and netscape browsers, far fewer are aware that these browsers are members of an entire family of user agents based upon the gecko layout engine which includes the commercial browser compuserve 7, and open source browsers such as epiphany, galeon, camino, kmeleon, and seamonkey. gecko was designed from the ground up to be compliant with the...
...the browser provided. server side browser detection using user agent strings was born. user agent strings are defined in the http protocol and are available to web servers (see rfc 1945 - hypertext transfer protocol 1.0 and rfc 2068 - hypertext transfer protocol 1.1). the most common approach at this time was to distinguish user agents by vendor and version using the reported user agent string. although this approach was considered reasonable at the time, this approach caused problems for browser vendors right from the beginning. the original netscape browsers used a user agent string which began with the code name for the netscape browser followed by its version number, e.g. mozilla/version followed by a comment token which gave additional information regarding the operating system being u...
...And 5 more matches

Add a hitmap on top of an image - Learn web development
tyled with css) are preferable to image maps for several reasons: text links are lightweight, maintainable, often more seo-friendly, and support accessibility needs (e.g., screen readers, text-only browsers, translation services). how to insert an image map, properly step 1: the image not just any image is acceptable. the image must make it clear what happens when people follow image links. alt text is mandatory, of course, but many people never see it. the image must clearly indicate where hotspots begin and end. hotspots must be large enough to tap comfortably, at any viewport size. how large is large enough? 72 × 72 css pixels is a good minimum, with additional generous gaps between touch targets. the map of the world at 50languages.com (as of time of writing) illustrates the prob...
...ably, at any viewport size. how large is large enough? 72 × 72 css pixels is a good minimum, with additional generous gaps between touch targets. the map of the world at 50languages.com (as of time of writing) illustrates the problem perfectly. it’s much easier to tap russia or north america than albania or estonia. ...
...a good minimum, with additional generous gaps between touch targets. the map of the world at 50languages.com (as of time of writing) illustrates the problem perfectly. it’s much easier to tap russia or north america than albania or estonia. you insert your image much the same way as always (with an <img> element and alt text). if the image is only present as a navigation device, you may write alt="", provided you furnish appropriate alt text in the <area> elements later on. ...
...And 5 more matches

Responsive images - Learn web development
wser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction). note: the new features discussed in this article — srcset/sizes/<picture> — are all supported in release versions of modern desktop and mobile browsers (including microsoft's edge browser, although not internet explorer.) how do you create responsive images? in this section, we'll look at the two problems illustrated above and show how to solve them using html's responsive image features. you should note that we will be focusing on the html <img>s for this section, as seen in the content area of the example above — the image in the site header is only for decoration, and therefor...
...itching: different sizes so, what is the problem that we want to solve with resolution switching? we want to display identical image content, just larger or smaller depending on the device — this is the situation we have with the second content image in our example. the standard <img> element traditionally only lets you point the browser to a single source file: <img src="elva-fairy-800w.jpg" alt="elva dressed as a fairy"> we can however use two new attributes — srcset and sizes — to provide several additional source images along with hints to help the browser pick the right one. you can see an example of this in our responsive.html example on github (see also the source code): <img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600p...
...s — srcset and sizes — to provide several additional source images along with hints to help the browser pick the right one. you can see an example of this in our responsive.html example on github (see also the source code): <img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" alt="elva dressed as a fairy"> the srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line. each value contains a comma-separated list, and each part of those lists is made up of three sub-parts. let's run through the contents of each now: srcset defines the set of images we wil...
...And 5 more matches

Mozilla Web Developer FAQ
s text/html. width and height do not apply to non-replaced inline elements such as (by default) <span>. text-align: center; centers inline content within a block. it does not (and should not) center the block box itself. a block is centered by setting its margin-left and margin-right to auto and its width to a value that makes the block narrower than its containing block. it is also possible, although not very likely, that you are seeing a bug. javascript doesn’t work! why? some proprietary document objects such as document.all and document.layers are not part of the w3c dom and are not supported in mozilla. (there is partial undetectable support for document.all, though, in newer versions of mozilla. however, that functionality only exists for compatibility with sites authored specif...
...interoperability, and checking for a particular browser defeats that purpose. when working with the dom, it is better to check for the existence of the methods and objects you are planning on using. ...
...k for the existence of the methods and objects you are planning on using. for example, the existence of document.getelementbyid() can be checked as follows: if(document.getelementbyid) { /* code that uses document.getelementbyid() */ } why doesn’t mozilla display my alt tooltips? contrary to a popular belief stemming from the behavior of a couple browsers running on the windows platform, alt isn’t an abbreviation for ‘tooltip’ but for ‘alternative’. ...
...And 5 more matches

Index
uide a hashtable is a data construct that stores a set of items. each item has a key that identifies the item. items are found, added, and removed from the hashtable by using the key. hashtables may seem like arrays, but there are important differences: 123 mozilla::services namespace developing mozilla, xpcom the services c++ namespace offers an easy and efficient alternative for obtaining a service as compared to the indirect xpcom approach: getservice(), callgetservice(), etc methods are expensive and should be avoided when possible. 124 xpcom ownership guidelines xpcom ...naturally. if you create a temporary object, obviously it's up to you to destroy it. that's a sure sign of ownership. if you create an object with a longer lifespan, y...
...y: @mozilla.org/inspector/dom-utils;1 as a service: 192 jsdistackframe interfaces, interfaces:scriptable, needscontent, needshelp, xpcom, xpcom interface reference strict mode is on. warnings reported as errors. makes eval() use the last object on its 'obj' param's scope chain as the ecma 'variables object'. private data for this object is an nsisupports object. attempting to alter this bit will result in an ns_error_illegal_value. opt_* values above, or'd together. last version set on this context. scripts typically select this with the "language" attribute. see the version_* consts on jsdidebuggerservice. unique tag among all valid jsdicontext objects, useful as a hash key. private data for this context, if it is an nsisupports, |null| otherwise. retrieve the underlying...
... jsdiephemeral interface. once a jsdistackframe has been invalidated all method and property accesses will throw a ns_error_not_available exception. 193 moziasyncfavicons interfaces, interfaces:scriptable, places nsifaviconservice handles this interface, so you do not need to directly create a new service. simply queryinterface() the nsifaviconservice to this interface. as an alternative, you can just use placesutils.favicons from javascript. 194 moziasynchistory interfaces, interfaces:scriptable, places, xpcom interface reference implemented by: @mozilla.org/browser/history;1 as a service: 195 mozicoloranalyzer interfaces, interfaces:scriptable, places, reference, xpcom api reference, xpcom interface reference given an image uri,...
...And 5 more matches

Deprecated tools - Firefox Developer Tools
over the course of devtools development, we have added several experimental panels to try out new ideas. not all of these have had wide adoption, and due to the cost of maintenance, seldom used panels are eventually removed. we have created this list of deprecated or removed panels. this page documents the deprecated panels and the bugs that track their removal. although these panels have been removed, you still have access to the old code, and there are alternative webextensions that you can try to get similar functionality. when we deprecate a panel, we begin by getting feedback from the community to determine the impact of removing that panel. once we have decided to remove the panel, we will provide a warning message, and finally, we will remove the panel from the codebase. you may se...
... you open the panel for one of these tools, you will also see a warning message about its removal. scratchpad scratchpad is deprecated as of firefox 70 (bug 1565380), and will be removed as of firefox 72 (bug 1519103). description scratchpad provided an environment for experimenting with javascript code. you can write, run, and examine the result of code that interacts with the web page. alternatives in firefox 71+, you can write multi-line javascript code in the web console editor mode, making it similar to the scratchpad. the editor mode can be triggered clicking on the icon on the right of the console input, or with ctrl + b (cmd + b on macos) when in editor mode, the enter key adds a new line in the input, and you can evaluate the expression using ctrl + enter (cmd + enter on m...
...ut content to a file using ctrl + s (cmd + s on macos). webide and connect page webide was deprecated as of firefox 69 disabled as of firefox 70 (bug 1539451). removed as of firefox 71 (bug 1539462). description webide allowed you to connect the firefox developer tools to remote browsers, such as firefox for android. it was also intended to support application development for firefox os. alternatives remote debugging is available in about:debugging as of firefox 68. features not ported to about:debugging are: wifi debugging for firefox for android, application development. features that are planned but not ported yet: remote browser screenshots and edit remote browser configuration. more details on the mailing-list thread. canvas debugger bugzilla issue: bug 1403938 removed as of...
...And 5 more matches

KeyboardEvent: code values - Web APIs
keyc" "keyc" 0x002f "keyv" "keyv" 0x0030 "keyb" "keyb" 0x0031 "keyn" "keyn" 0x0032 "keym" "keym" 0x0033 "comma" "comma" 0x0034 "period" "period" 0x0035 "slash" "slash" 0x0036 "shiftright" "shiftright" 0x0037 "numpadmultiply" "numpadmultiply" 0x0038 "altleft" "altleft" 0x0039 "space" "space" 0x003a "capslock" "capslock" 0x003b "f1" "f1" 0x003c "f2" "f2" 0x003d "f3" "f3" 0x003e "f4" "f4" 0x003f "f5" "f5" 0x0040 "f6" "f6" 0x0041 "f7" "f7" 0x0042 "f8" "f8" 0x0043 "f9" "f9" 0x...
...004b "numpad4" "numpad4" 0x004c "numpad5" "numpad5" 0x004d "numpad6" "numpad6" 0x004e "numpadadd" "numpadadd" 0x004f "numpad1" "numpad1" 0x0050 "numpad2" "numpad2" 0x0051 "numpad3" "numpad3" 0x0052 "numpad0" "numpad0" 0x0053 "numpaddecimal" "numpaddecimal" 0x0054 (alt + printscreen) "printscreen" "" 0x0055 "unidentified" "" 0x0056 "intlbackslash" "intlbackslash" 0x0057 "f11" "f11" 0x0058 "f12" "f12" 0x0059 "numpadequal" "" 0x005a "unidentified" "" 0x005b "unidentified" "f13" 0x005c "unidentified" "f14...
... "audiovolumeup" "volumeup" (was "volumeup" until chrome 50) 0xe031 "unidentified" "" 0xe032 "browserhome" "browserhome" 0xe033, 0xe034 "unidentified" "" 0xe035 "numpaddivide" "numpaddivide" 0xe036 "unidentified" "" 0xe037 "printscreen" "printscreen" 0xe038 "altright" "altright" 0xe039, 0xe03a "unidentified" "" 0xe03b "unidentified" "help" 0xe03c～ 0xe044 "unidentified" "" 0xe045 "numlock" "numlock" 0xe046 (ctrl + pause) "pause" "pause" 0xe047 "home" "home" 0xe048 "arrowup" "arrowup" 0xe049 "pageup" "pageu...
...And 5 more matches

Index - Archive of obsolete content
itlebarcolor xul attributes, xul reference no summary! 12 afterselected xul attributes, xul reference no summary! 13 align reference, référence(2), xul no summary! 14 allowevents xul attributes, xul reference no summary! 15 allownegativeassertions xul attributes, xul reference no summary! 16 alternatingbackground xul attributes, xul reference no summary! 17 alwaysopenpopup xul attributes, xul reference no summary! 18 attribute xul attributes, xul reference no summary! 19 autofillaftermatch xul attributes, xul reference no summary! 20 autocheck xul attributes, xul reference no summary! 21 ...
... editor xul properties, xul reference no summary! 700 editortype xul properties, xul reference no summary! 701 emptytext xul properties, xul reference no summary! 702 enablecolumndrag xul properties, xul reference no summary! 703 eventnode xul properties, xul reference no summary! 704 externaltoolbars toolbars, xul, xul reference no summary! 705 findmode no summary! 706 firstordinalcolumn xul properties, xul reference no summary! 707 firstpermanentchild xul properties, xul reference no summary! 708 flex xul properties, xul reference no summary! 709 flexgroup no summary! ...
... are generated from a query, content is generated in the same order as the results. for an xml datasource, generated content will be output in the order corresponding to the results of the xpath query expression. for an sqlite datasource, the generated content corresponds to the order of results of the sql query. for an rdf datasource, again, the results are in the order the query generates them, although except in the case of an rdf seq, this order is arbitrary as rdf triples don't occur in any particular order. when the reference node is an rdf seq container and the results are in that container, however, the template builder orders the results in the order the items appear in the seq. for instance, the photos are listed in the same order in this example as they appear in the seq in the dat...
...And 4 more matches

Keyboard Shortcuts - Archive of obsolete content
only triggered when the user is focused on a particular element). creating a keyboard shortcut xul provides methods in which you can define keyboard shortcuts. we've already seen in the section on menus that we can define an attribute called accesskey which specifies the key which a user can press to activate the menu or menu item. in the example below, the file menu can be selected by pressing alt + f together (or some other key combination for a specific platform). once the file menu is open, the close menu item can be selected by pressing c. example 1 : source view <menubar id="sample-menubar"> <menu id="file-menu" label="file" accesskey="f"> <menupopup id="file-popup"> <menuitem id="close-command" label="close" accesskey="c"/> </menupopup> </menu> </menubar> you ca...
...le" accesskey="f"> <menupopup id="file-popup"> <menuitem id="close-command" label="close" accesskey="c"/> </menupopup> </menu> </menubar> you can also use the accesskey attribute on buttons. when the key is pressed in this case, the button is selected. you might want to set up more general keyboard shortcuts however. for example, pressing ctrl + c to copy text to the clipboard. although shortcuts such as this might not always be valid, they will usually work any time the window is open. usually, a keyboard shortcut will be allowed at any time and you can check to see whether it should do something using a script. for example, copying text to the clipboard should only work when some text is selected. key element xul provides an element, key, which lets you define a keyboar...
...s the shift key and r. the key attribute (note that it has the same name as the element itself) can be used to indicate which key should be pressed, in this case r. you could add any character for this attribute to require that key to be pressed. the modifiers that must be pressed are indicated with the modifiers attribute. it is a space-separated list of modifier keys, which are listed below. alt the user must press the alt key. on the macintosh, this is the option key. control the user must press the ctrl key. meta the user must press the meta key. this is the command key on the macintosh. shift the user must press the shift key. os the user must press the win key. this is the super key or the hyper key on linux. if this value is used, typically the key combination conflicts wit...
...And 4 more matches

Examples - Archive of obsolete content
--> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> ...
...his document contains inline css rules contained in a <code>style</code> element and surrounded by a sgml comment. </p> <p> note how the css rules for the background are applied in netscape 7.x, mozilla, opera 7 and internet explorer 5.5+. ...
... element and surrounded by a sgml comment. </p> <p> note how the css rules for the background are <strong>not</strong> applied in netscape 7.x, mozilla and opera 7 and that internet explorer 5.5+ can not display the page correctly at all. ...
...And 4 more matches

CSS and JavaScript accessibility best practices - Learn web development
s, lining up labels and inputs, and getting them looking neat and tidy. you shouldn't however deviate too much from the expected visual feedback form elements receive when they are focused, which is basically the same as links (see above). you could style form focus/hover states to make this behaviour more consistent across browsers or fit in better with your page design, but don't get rid of it altogether — again, people rely on these clues to help them know what is going on. tables tables for presenting tabular data. you can see a good, simple example of table html and css in our table-css.html example (see it live also). table css generally serves to make the table fit better into your design and look less ugly. it is a good idea to make sure the table headers stand out (normally us...
...k them with an asterisk and in red. hiding things there are many instances where a visual design will require that not all content is shown at once. for example, in our tabbed info box example (see source code) we have three panels of information, but we are positioning them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use tab and enter/return to select them). screen reader users don't care about any of this — they are happy with the content as long as the source order makes sense, and they can get to it all. absolute positioning (as used in this example) is generally seen as one of the best mechanisms of hiding content for visual effect, because it doesn't stop screen readers from getting to it.
... button that activate functions. as we looked at in our html: a good basis for accessibility article, the key considerations are: good semantics: using the right element for the right job. for example, making sure you use headings and paragraphs, and <button> and <a> elements making sure content is available as text, either directly as text content, good text labels for form elements, or text alternatives, e.g. alt text for images. we also looked at an example of how to use javascript to build in functionality where it is missing — see building keyboard accessibility back in. this is not ideal — really you should just use the right element for the right job — but it shows that it is possible in situations where for some reason you can't control the markup that is used. another way...
...And 4 more matches

Styling tables - Learn web development
t in a sequence, inside a <thead> element") and given them set percentage widths. the entire column width follows the width of its heading, making for a nice way to size your table columns. chris coyier discusses this technique in more detail in fixed table layouts. ...
...ll any container it is put in, and be nicely responsive (although it would still need some more work to get it looking good on narrow screen widths). a border-collapse value of collapse is a standard best practice for any table styling effort. ...
... fonts that is suitable for a table about punk bands. you can go there and find a different one if you like; you'll just have to replace our provided <link> element and custom font-family declaration with the ones google fonts gives you. ...
...And 4 more matches

Getting started with React - Learn web development
for react applications. using it will allow you spend more time building your app, and less time fussing with setup. requirements in order to use create-react-app, you need to have node.js installed. it's recommended that you use the long-term support (lts) version. node includes npm (the node package manager), and npx (the node package runner). you may also use the yarn package manager as an alternative, but we'll assume you are using npm in this set of tutorials. see package management basics for more information on npm and yarn. if you're using windows, you will need to install some software to give you parity with unix/macos terminal in order to use the terminal commands mentioned in this tutorial. gitbash (which comes as part of the git for windows toolset) or windows subsystem for ...
...hey serve a single, obvious purpose. let's open src/app.js, since our browser is prompting us to edit it. this file contains our first component, app, and a few other lines of code: import react from 'react'; import logo from './logo.svg'; import './app.css'; function app() { return ( <div classname="app"> <header classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to reload. </p> <a classname="app-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > learn react </a> </header> </div> ); } export default app; the app.js file consists of three main parts: some import statem...
...ts use pascal-case variable names, like helloworld, to make it clear that a given jsx element is a react component, and not a regular html tag. if you were to rename the app function to app, your browser would show you an error. let's look at app more closely. function app() { return ( <div classname="app"> <header classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to reload. </p> <a classname="app-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > learn react </a> </header> </div> ); } the app function returns a jsx expression. this expression defines what your browser...
...And 4 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
these three top-level variables. ...
... to prove it, go to that array, and try changing some of the todo object's completed property values, and even add a new todo object. observe how the numbers in the message are updated appropriately. ...
...ot being updated. read on to find out why this is happening and how we can solve it. reactive todos as we've already seen, every time the value of a component top-level variable is modified svelte knows how to update the ui. in our app, the todos array value is updated directly every time a todo is toggled or deleted, and so svelte will update the dom automatically. the same is not true for totaltodos and completedtodos, however. in the following code they are assigned a value when the component is instantiated and the script is executed, but after that, their values are not modified: let totaltodos = todos.length let completedtodos = todos.filter(todo => todo.completed).length we could recalculate them after toggling and removing todos, but there's an easier way to do it. we can tell s...
...And 4 more matches

Package management basics - Learn web development
to remove the packages. in addition, package managers handle duplicate dependencies (something that becomes important and common in front-end development). in the case of npm (and javascript- and node-based package managers) you have two options for where you install your dependencies. as we touched on in the previous article, dependencies can be installed globally or locally to your project. although there tend to be more pros for installing globally, the pros for installing locally are more important — such as code portability and version locking. for example, if your project relied on webpack with a certain configuration, you'd want to ensure that if you installed that project on another machine or returned to it much later on, the configuration would still work. if a different vers...
...mitigate this dependencies are installed locally to a project. to see local dependencies really shine, all you need to do is try to download and run an existing project — if it works and all the dependencies work right out of the box, then you have local dependencies to thank for the fact that the code is portable. note: npm is not the only package manager available. a successful and popular alternative package manager is yarn. yarn resolves the dependencies using a different algorithm that can mean a faster user experience. there are also a number of other emerging clients, such as pnpm. package registries for a package manager to work, it needs to know where to install packages from, and this comes in the form of a package registry. the registry is a central place that a package is ...
...that you’ll find again. we’ll call it parcel-experiment, but you can call it whatever you like: mkdir parcel-experiment cd parcel-experiment next, let's initialise our app as an npm package, which creates a config file — package.json — that allows us to save our configuration details in case we want to recreate this environment later on, or even publish the package to the npm registry (although this is somewhat beyond the scope of this article). type the following command, making sure you are inside the parcel-experiment directory: npm init you will now be asked some questions; npm will then create a default package.json file based on the answers: name: a name to identify the app. just press return to accept the default parcel-experiment. version: the starting version number...
...And 4 more matches

Gecko info for Windows accessibility vendors
dynamically much faster. roles, states and events: please read the msaa documentation on msdn if you are unfamiliar with these. in general we abbreviate by removing redundant words. for example, we may say event_alert instead of the full event_system_alert. msaa tree vs. dom tree - what's the relation? the msaa tree and the dom tree are parallel structures, although the msaa tree is a subset of the dom tree. queryservice() can be used to switch between the interfaces (iaccessible, isimpledomdocument, isimpledomnode and isimpledomtext). if there is no msaa node for a dom node, or vice-versa, queryservice() will return null. anything that is focusable or conveys important information about the structure of the document is exposed in the msaa tree of i...
...tact the mozilla accessibility community ): iaccessible methods that we don't currently support: get_acchelp get_acchelptopic put_accname put_accvalue we do not currently support the visual basic (idispatch) bindings for iaccessible. we do not currently support directional navigation via accnavigate() we do not currently support scroll bars as iaccessible objects, although we do support event_scrollingend and isimpledomnode::scrollto(), explained below. we do not currently support state_moveable, state_sizeable or state_marqueed. we do not currently support role_system_row, although internet explorer doesn't either, and the reason seems apparent. it is not obvious where the role_system_row should exist in the tree when the html rowspan attribute is use...
...aceid, /* [out] */ bstr __rpc_far *attribvalues); the get_computedstyle method is used to find out the cumulative, computed results for all style rules applied to a node. the return value numstyleproperties specifies the number of style properties for this node, and the last 2 parameters return 2 arrays corresponding to style property name and style property value. another [in] parameter, usealternativemediaproperties, indicates whether you want style information for the default media type (usually screen), or a set of alternative media types specified in nsisimpledomdocument::set_alternateviewmediatype(mediatypestring) . see the w3c's website for a list of official media type name. unfortunately, at this time the argument usealternateview is ignored. hresult get_computedstyle( /* ...
...And 4 more matches

nsIEditorIMESupport
positionstring, in nsiprivatetextrangelistptr atextrange, in nstexteventreplyptr areply); native code only! obsolete since gecko 2.0 attributes attribute type description composing boolean whether this editor has active ime transaction. read only. methods native code only!begincomposition obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. handles the start of inline input composition. void begincomposition( in nstexteventreplyptr areply ); parameters areply endcomposition() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) handles the end of inline input ...
...one. forcecompositionend() force the composition end. void forcecompositionend(); parameters none. native code only!getpreferredimestate get preferred ime status of current widget. void getpreferredimestate( out unsigned long astate ); parameters astate native code only!getquerycaretrect obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete. ...
...s obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. get the query caret rect. void getquerycaretrect( in nsquerycaretrecteventreplyptr areply ); parameters areply native code only!getreconversionstring obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. get the reconversion string. void getreconversionstring( in nsreconversioneventreplyptr areply ); parameters areply notifyimeonblur() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete. ...
...And 4 more matches

SpeechRecognitionResult.length - Web APIs
syntax var mylength = speechrecognitionresultinstance.length; returns a number. examples this code is excerpted from our speech color changer example. ...
... syntax var mylength = speechrecognitionresultinstance.length; returns a number. examples this code is excerpted from our speech color changer example. ...
... syntax var mylength = speechrecognitionresultinstance.length; returns a number. examples this code is excerpted from our speech color changer example. ...
...And 4 more matches

StorageManager.persist() - Web APIs
thub.com/mdn/browser-compat-data and send us a pull request. ...
...owser-compat-data and send us a pull request. ...
... ≤79firefox full support 55ie ? opera full support yessafari ? ...
...And 4 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
is no way for either of you to see the difference. a third party can tell the difference, but the two of you cannot. if you are a camera, you can achieve the same visual result both by moving the camera or by moving everything around the camera. and that's our solution. since we can't move the camera, we move the world around it. our renderer needs to know where we imagine the camera to be, then alter the position of every visible object to simulate that position and orientation. thus, instead of referring to an actual camera object, the term camera is used in webgl and webxr programming to refer to an object describing the position and viewing direction of a hypothetical viewer of the scene, whether there's an actual object present in 3d space or not. points of view since the camera is a ...
...amples include world of warcraft, tomb raider, and fortnite. this category also includes games where the camera is placed just over the player's shoulder. some 3d games offer the ability to change your point of view, such as to look out the various windows of an aircraft in a flight simulator, or to see the views from all the security cameras within the game level (a common feature of spy and stealth-based games). this ability is also used by games offering weapons with scopes, where the view isn't quite based off the head's position in the same way anymore. 3d games might also provide the ability for non-players to observe the action, either by positioning an invisible avatar of sorts or by choosing a fixed virtual camera to watch from. in advanced 3d games, a camera or camera-like object...
...y perform normalization. once you've determined the matrix representing the combination of movements you wish the camera to make, you need to reverse it, because you're not moving the camera. since you're actually moving everything except the camera, take the inverse of the transform matrix to get an inverse transform matrix. this inverse matrix can then be applied to the objects in the world to alter their positions and orientations to simulate the desired camera position. this is why the xrrigidtransform object used by webxr to represent transforms includes an inverse property. the inverse property is another xrrigidtransform object which is the inverse of the parent transform. since the xrview representing the view has a transform property which is an xrrigidtransform providing the camer...
...And 4 more matches

ARIA Test Cases - Accessibility
ign to test the alert expected at behavior: a screen reader or screen magnifier must speak an alert when it becomes visible. a screen magnifier should move the current view to the alert or open a new panel with the alert information optional, but desired: if there are widgets within the alert, their role and any keyboard mnemonic (accesskey) should be spoken. for example, "options, button, alt+shift+t" should be spoken if there is an options button in the alert with alt+shift+t as an accesskey. markup used: role="alert" notes: results: at firefox ie opera safari jaws 9 passed fail n/a n/a jaws 10 passed fail - - voiceover (leopard) n/a n/a - fail window-eyes passed- not announced ...
...pass pass zoom (leopard) pass n/a pass pass zoomtext fail- announced as 'alert' pass - - orca - - - - button basic button button with description dojo nightly build -- lots of other types of buttons there as well. expected at behavior: when focus falls on a button, a screen reader speaks the text of the button plus alternative text of any images within the button (the accessible name of the button). the word "button" is also spoken before or after the accessible name. markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 pass in non-v-pc mode, pass in v-pc-mode also if the button's text is not provided via labelledby or la...
...e entire groupbox should be read by a screen reader. when the button is focused, the description of the button should be read after the button's label and role are read by the screen reader. regression testers should test both tabbing forward and back, to make sure that the groupbox description and button description are both read when the button is the first item focused in the groupbox. (al) alternatively, description are not read automatically but may be accessible from a hotkey. however, if the screen reader does not at least indicate that the description exists, users are likely to miss important information. markup used: role="description" and aria-describedby notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaw...
...And 4 more matches

Using CSS animations - CSS: Cascading Style Sheets
through keyframes, by establishing acceleration curves. animation-delay configures the delay between the time the element is loaded and the beginning of the animation sequence. animation-iteration-count configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely. animation-direction configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself. animation-fill-mode configures what values are applied by the animation before and after it is executing. animation-play-state lets you pause and resume the animation sequence. defining the animation sequence using keyframes once you’ve configured the animation’s timing, you need to define t...
...time in silence: at last the caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> making it move back and forth that made it repeat, but it’s very odd having it jump back to the start each time it begins animating. what we really want is for it to move back and forth across the screen. ...
...king it move back and forth that made it repeat, but it’s very odd having it jump back to the start each time it begins animating. what we really want is for it to move back and forth across the screen. ...
...And 4 more matches

Video player styling basics - Developer guides
this has now been changed to use a data-state attribute, which this code already uses to handle its fullscreen implementation. this "data-state" idea is also used for setting the current state of buttons within the video control set, which allows specific state styling. javascri...
...t; background-size:contain; background-repeat:no-repeat; } by default, all <button> elements have a border, so this is removed. since background images will be used to display appropriate icons, the background colour of the button is set to be transparent, non-repeated, and the element should fully contain the image. simple :hover and :focus states are then set for each button that simply alters the opacity of the button: .controls button:hover, .controls button:focus { opacity:0.5; } to obtain appropriate button images, a set of free common control set icons was downloaded from the web. each image was then converted to a base64 encoded string (using an online base64 image encoder), since the images are quite small, the resultant encoded strings are quite short. since some butto...
...s its width initially set to 0% (it is updated via javascript) and it also has its background colour set. there are some browser-specific properties that need to be set to ensure that firefox and chrome use the required colour for the progress bar: .controls progress::-moz-progress-bar { background-color:#0095dd; } .controls progress::-webkit-progress-value { background-color:#0095dd; } although the same properties are set to the same value, these rules need to be defined separately, otherwise chrome ignores it. javascript that's really it for the immediate styling; the next task is making a number of javascript changes to ensure that everything works as expected. control visibility the first change is simple: the data-state for showing the video controls when javascript is avai...
...And 4 more matches

HTTP Index - HTTP
pening a connection to make a request, then waiting until it receives a response. http is a stateless protocol, meaning that the server does not keep any data (state) between two requests. though often based on a tcp/ip layer, it can be used on any reliable transport layer, that is, a protocol that doesn't lose messages silently like udp does. rudp — the reliable update of udp — is a suitable alternative. 2 a typical http session http in client-server protocols, like http, sessions consist of three phases: 3 an overview of http html, http, overview, webmechanics, l10n:priority http isthe foundation of any data exchange on the web and it is a client-server protocol, which means requests are initiated by the recipient, usually the web browser. a com...
...he preflight request is always an options and doesn't use the same method as the actual request. 63 age caching, http, response, header the age header contains the time in seconds the object has been in a proxy cache. 64 allow entity header, http, http header, reference, header the allow header lists the set of methods support by a resource. 65 alt-svc draft, http, http header, needscompattable, needscontent, needsexample, reference the alt-svc header is used to list alternate ways to reach this website. 66 authorization http, http header, reference, request header, header the http authorization request header contains the credentials to authenticate a user agent with a server, usually after the server has res...
...uage(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language. 73 content-length http, headers, reference the content-length entity header indicates the size of the entity-body, in bytes, sent to the recipient. 74 content-location http, reference, header the content-location header indicates an alternate location for the returned data. the principal use is to indicate the url of a resource transmitted as the result of content negotiation. 75 content-range http, http header, reference, response header, header the content-range response http header indicates where in a full body message a partial message belongs. 76 content-security-policy csp, content secu...
...And 4 more matches

Image file type and format guide - Web media technologies
when animated gifs began to be widely used for short "videos", memes, and other simple animation sequences. another popular feature of gif is support for interlacing, where rows of pixels are stored out of order so that partially-received files can be displayed in lower quality. this is particularly useful when network connections are slow. gif is a good choice for simple images and animations, although converting full color images to gif can result in unsatisfactory dithering. typically, modern content should use png for lossless and indexed still images, and should consider using apng for lossless animation sequences. mime type image/gif file extension(s) .gif specification gif87a specification gif89a specification browser compatibility ...
...and 16 each pixel is comprised of four d-pixel color components: red, green, blue, and the alpha sample indicating how opaque the pixel is. compression lossless, optionally indexed color like gif licensing ©2003 w3c® (mit, ercim, keio), all rights reserved. w3c liability, trademark, document use and software licensing rules apply. no known royalty-bearing patents. svg (scalable vector graphics) svg is an xml-based vector graphics format that specifies the contents of an image as a set of drawing commands that create shapes, lines, apply colors, filters, and so forth. svg files are ideal for diagrams, icons, and other images which can be accurately drawn at any size. as such, svg is popular for user interface elements in modern web...
... including with the <img> and <picture> elements, the background-image css property, and so forth. svg is an ideal choice for images which can be represented using a series of drawing commands, especially if the size at which the image will be rendered is unknown or may vary, since svg will smoothly scale to the desired size. it's not generally useful for strictly bitmap or photographic images, although it is possible to include bitmap images within an svg. mime type image/svg+xml file extension(s) .svg specification w3.org/tr/svg2 browser compatibility feature chrome edge firefox internet explorer opera safari svg support 4 12 ...
...And 4 more matches

xlink:href - SVG: Scalable Vector Graphics
the xlink:href attribute defines a reference to a resource as a reference iri. the exact meaning of that link depends on the context of each element using it. note: svg 2 removed the need for the xlink namespace, so instead of xlink:href you should use href. ...
..., <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the location of the referenced object. ...
...tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the location of the referenced object. ...
...And 4 more matches

Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
ndards across an organization. there are numerous standards organizations that affect how and why we do what we do. for example, in the accounting arena there is fasb (financial accounting standards board) and iasb (international accounting standards board). all businesses are expected and required to follow the guidelines set forth by the fasb. when auditors evaluate an organizations financial health, they do so by following the fasb rules. focusing on the software development portion of an organization, there are numerous standards bodies that can affect development decisions. for example, if an organization is developing a web-based client, they may have to adhere to standards imposed by these organizations: ansi (american national standards institute ) atsc (advanced television syste...
...izations make is to use proprietary methods, software, code, or standards. following a proprietary path has led many organizations down disastrous paths. case in point: xerox corporation. xerox was clearly ahead of their time in the early 1980’s when they designed and developed the star office system. it was an elegant workstation with an iconic desktop developed by the engineers at parc (palo alto research center). the star office system offered functionality that neither microsoft nor apple has been able to match with their current offerings. the engineers developed star on a proprietary development operating system known as pilot. pilot had a highly-integrated debugging tool called co-pilot that allowed the xerox development organization to quickly and easily debug issues. however, wha...
...er they are accessing a web site from their desktop, phone, or handheld. consequently, if an organization offers a suite of products they must ensure that the user experience is consistent and predictable across the product line. consistency to be successful, organizations need to understand this user expectation and provide a consistent experience across their product offerings. when usability alters too much across products, users complain. apple and microsoft have learned this lesson well. when a macintosh user shifted from mac os 8.x to mac os 9.x, the interface and desktop metaphor was virtually unchanged. users could quickly and easily shift from one version to the next. however, when mac os x was released, apple completely revamped the interface and desktop metaphor. that change cau...
...And 3 more matches

RDF in Mozilla FAQ - Archive of obsolete content
components .classes["@mozilla.org/rdf/rdf-service;1"] .getservice(components.interfaces.nsirdfservice); // ...and from it, get the datasource. ...
...arks = components. classes["@mozilla.org/rdf/datasource;1?name=bookmarks"]. getservice(components.interfaces.nsirdfdatasource); // now do something interesting with it... if (bookmarks.hasassertion( rdf.getresource("http://home.netscape.com/nc-rdf#bookmarksroot"), rdf.getresource("http://home.netscape.com/nc-rdf#child"), rdf.getresource("http://home.netscape.com/nc-rdf#personaltoolbarfolder"), true) { // ... } alternatively, some datasources have "special" rdf-friendly contractids that make it easy to instantiate the datasource using either the nsirdfserivce's getdatasource() method or the datasources attribute on a xul template. these contractids are of the form @mozilla.org/rdf/datasource;1?name=name and are accessable via getdatasource() and the datasource...
...mplate. <tree datasources="rdf:bookmarks"> ... ...
...And 3 more matches

Desktop mouse and keyboard controls - Game development
e game we can support keyboard input in games built with phaser by enabling the basic cursor keys in the create() function using the createcursorkeys() function: this.cursors = this.input.keyboard.createcursorkeys(); this creates four directional arrow keys for us: this.cursors.left; this.cursors.right; this.cursors.up; this.cursors.down; you can also define the keys on your own and offer an alternative, w a s d control mechanism for example: this.keyleft = this.input.keyboard.addkey(phaser.keycode.a); this.keyright = this.input.keyboard.addkey(phaser.keycode.d); this.keyup = this.input.keyboard.addkey(phaser.keycode.w); this.keydown = this.input.keyboard.addkey(phaser.keycode.s); to support both the cursor and w a s d keys, we need to do this: if(this.cursors.left.isdown || this.keyl...
...move left } else if(this.cursors.right.isdown || this.keyright.isdown) { // move right } if(this.cursors.up.isdown || this.keyup.isdown) { // move up } else if(this.cursors.down.isdown || this.keydown.isdown) { // move down } in the update() function we can now move the player's ship in any direction using one of the two sets of movement key options. we can also offer firing control alternatives. for cursor keys the natural shooting button would be on the other side of the keyboard, so the player can use the other hand — for example the x key. for w a s d keys it can be the space bar: this.keyfire1 = this.input.keyboard.addkey(phaser.keycode.x); this.keyfire2 = this.input.keyboard.addkey(phaser.keycode.spacebar); in the update() function we can easily check if any of those t...
...remember: it's a secret, so don't tell anyone! how to play we've implemented the controls, and now we should inform the player about their options to control the game — they wouldn't know about them otherwise. when showing the how to play screen where the various ways to control the ship in the game are shown, instea...
...And 3 more matches

2D maze game with device orientation - Game development
ch other we will store the elapsed time — players can then try to improve on their best game completion time. to implement this we have to create a variable for storing the actual number of seconds elapsed from the start of the game, and to show it for the player in the game. ...
... it for the player in the game. let’s define the variables in the create function first: this.timer = 0; // time elapsed in the current level this.totaltimer = 0; // time elapsed in the whole game then, right after that, we can initialize the necessary text objects to display this information to the user: this.timertext = this.game.add.text(15, 15, "time: "+this.timer, this.fontbig); this.totaltimetext = this.game.add.text(120, 30, "total time: "+this.totaltimer, this.fontsmall); we’re defining the top and left positions of the text, the content that will be shown and the styling applied to the text. we have this printed out on the screen, but it would be good to update the values every second: this.time.events.loop(phaser.timer.second, this.updatecounter, this); this loop, also in ...
...me.events.loop(phaser.timer.second, this.updatecounter, this); this loop, also in the create function, will execute the updatecounter function every single second from the beginning of the game, so we can apply the changes accordingly. this is how the complete updatecounter function looks: updatecounter: function() { this.timer++; this.timertext.settext("time: "+this.timer); this.totaltimetext.settext("total time: "+(this.totaltimer+this.timer)); }, as you can see we’re incrementing the this.timer variable and updating the content of the text objects with the current values on each iteration, so the player sees the elapsed time. finishing the level and the game the ball is rolling on the screen, the timer is working and we have the hole created that we have to reach. now le...
...And 3 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
http) is the underlying network protocol that enables transfer of hypermedia documents on the web, typically between a browser and a server so that humans can read them. the current version of the http specification is called http/2. 197 http header glossary, http header, webmechanics an http header is a field of an http request or response that passes additional information, altering or precising the semantics of the message or of the body. headers are case-insensitive, begins at the start of a line and are immediately followed by a ':' and a value depending of the header itself. the value finish at the next crlf or at the end of the message. 198 http/2 glossary, http, infrastructure, reference, web performance, l10n:priority http/2 is a major revisi...
... and padding have no impact, though horizontal margin and padding do. 238 jpeg beginner, composing, glossary, images, jpeg jpeg (joint photographic experts group) is a commonly used method of lossy compression for digital images. 239 json codingscripting, glossary, intro, json, l10n:priority javascript object notation (json) is a data-interchange format. although not a strict subset, json closely resembles a subset of javascript syntax. though many programming languages support json, json is especially useful for javascript-based apps, including websites and browser extensions. 240 jank beginner, codingscripting, glossary, performance, web performance jank refers to sluggishness in a user interface, usually caused by executing lo...
...rd search a keyword is a word or phrase that describes content. online keywords are used as queries for search engines or as words identifying content on websites. 245 lgpl glossary, license, openpractices, remixing, sharing lgpl (gnu lesser general public license) is a free software license published by the free software foundation. the lgpl provides a more permissive alternative for the strictly copyleft gpl. while any derivative work using a gpl-licensed program must be released under the same terms (free to use, share, study, and modify), the lgpl only requires the lgpl-licensed component of the derivative program to continue using the lgpl, not the whole program. lgpl is usually used to license shared components such as libraries (.dll, .so, .jar, etc.). ...
...And 3 more matches

What is accessibility? - Learn web development
s people without disabilities, and so are their disabilities. the key lesson here is to think beyond your own computer and how you use the web, and start learning about how others use it — you are not your users. the main types of disability to consider are explained below, along with any special tools they use to access web content (known as assistive technologies, or ats). note: the world health organization's disability and health fact sheet states that "over a billion people, about 15% of the world's population, have some form of disability", and "between 110 million and 190 million adults have significant difficulties in functioning." people with visual impairments people with visual impairments include people with blindness, low-level vision, and color blindness. many people with...
...me os), and talkback (android). it is a good idea to familiarise yourself with screen readers; you should also set up a screen reader and have a play around with it, to get an idea of how it works. see our cross-browser testing screen readers guide for more details on using them. the below video also provides a brief example of what the experience is like. in terms of statistics, the world health organization estimates that "285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision." (see visual impairment and blindness). that's a large and significant population of users to just miss out on because your site isn't coded properly — almost the same size as the population of the united states of america. people with hearing impairme...
...ents otherwise known as people with auditory impairments or deaf people, this group of people has either low hearing levels or no hearing at all. hearing-impaired people do use ats (see assistive devices for people with hearing, voice, speech, or language disorders), but there are not really special ats specific for computer/web use. there are, however, specific techniques for providing textual alternatives to audio content which range from simple text transcripts to text tracks (i.e. captions) that can be displayed along with video. an article, later on, will discuss these. hearing-impaired people also represent a significant userbase — "466 million people worldwide have disabling hearing loss", says the world health organization's deafness and hearing loss fact sheet. people with mobi...
...And 3 more matches

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

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

TypeScript support in Svelte - Learn web development
this creates a starter project that includes typescript support, which you can then modify as you wish. then you'll have to tell npm to download dependencies and start the project in development mode, like we usually do: npm install npm run dev adding typescript support to an existing svelte project to add typescript support to an existing svelte project you can follow these instructions. alternatively, you can download the setuptypescript.js file to a scripts folder inside your project's root folder, and then run node scripts/setuptypescript.js. you can even use degit to download the script. that's what we will do to start porting our application to typescript. note: remember that you can run npx degit opensas/mdn-svelte-tutorial/07-typescript-support svelte-todo-typescript to get...
... let headingel: htmlelement finally, you'll notice the following error reported, related to where we set the tabindex attribute. that's because typescript is type-checking the <h2> element and expects tabindex to be of type number. to fix it, replace tabindex="-1" with tabindex={-1}, like this: <h2 id="list-heading" bind:this={headingel} tabindex={-1}>{completedtodos} out of {totaltodos} items completed</h2> this way typescript can prevent us from incorrectly assigning it to a string variable. newtodo.svelte next we will take care of newtodo.svelte. as usual, add the lang='ts' attribute. the warning will indicate that we have to specify a type for the nameel variable. set its type to htmlelement like this: let nameel: htmlelement // reference to th...
...check our application's .svelte files. if you want to also check the .ts files you can run npm run validate && npx tsc --noemit, which tells the typescript compiler to check for errors without generating the .js output files. you could even add a script to your package.json file that runs that command. we'll start with stores.js. rename the file to stores.ts. ...
...And 3 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
ve picked the status heading because it's near the list of todos, and it's a way to give a visual feedback about the removal of the task, as well as indicating what's happened to screenreader users. first we'll extract the status heading to its own component. create a new file — components/todosstatus.svelte. ...
...ndicating what's happened to screenreader users. first we'll extract the status heading to its own component. create a new file — components/todosstatus.svelte. ...
...to do this, replace the block that begins with let newtodoid with this: $: newtodoid = todos.length ? math.max(...todos.map(t => t.id)) + 1 : 1 everything works...
...And 3 more matches

Handling common JavaScript problems - Learn web development
rite one simple bit of code (see jquery.ajax()). jquery (or whatever library you are using) will then handle the differences in the background, so you don't have to. things have improved significantly since then; modern browsers do a good job of supporting "classic javascript features", and the requirement to use such code has diminished as the requirement to support older browsers has lessened (although bear in mind that they have not gone away altogether). these days, most cross-browser javascript problems are seen: when poor-quality browser-sniffing code, feature-detection code, and vendor prefix usage block browsers from running code they could otherwise use just fine. when developers make use of new/nascent javascript features (for example ecmascript 6 / ecmascript next features, m...
...ng bad browser sniffing code, later on, for more details. note: some features are known to be undetectable — see modernizr's list of undetectables. note: feature detection will be covered in a lot more detail in its own dedicated article, later in the module. libraries javascript libraries are essentially third party units of code that you can attach to your page, providing you with a wealth of ready-made functionality that can be used straight away, saving you a lot of time in the process. a lot of javascript libraries probably came into existence because their developer was writing a set of common utility functions to save them time when writing future projects, and decided to release them into the wild because other people might find them useful too. javascript libraries tend to...
...lse it is stored), etc. note: javascripting.com gives you a good idea of just how many javascript libraries there are available, and can be useful for finding libraries for specific purposes. library usage at a basic level tends to consist of downloading the library's files (javascript, possibly some css or other dependencies too) and attaching them to your page (e.g. via a <script> element), although there are normally many other usage options for such libraries, like installing them as bower components, or including them as dependencies via the webpack module bundler. you will have to read the libraries' individual install pages for more information. note: you will also come across javascript frameworks in your travels around the web, like ember and angular. whereas libraries are ofte...
...And 3 more matches

Gecko Keypress Event
gecko 1.9 key handling changed significantly after beta 5 (bug 359638, bug 429510 and the bugs on which they depend). the changes were risky so late in the release schedule, but they were necessary for fixing the many key handling bugs. charcode of dom keypress event if a keypress event is fired without any modifier keys (ctrl/alt(option)/meta(win/command)), then the properties of the event are the same as they were in gecko1.8.1. that is, when the currently selected keyboard layout produces a unicode character (according to the current state of capslock and numlock), the charcode property contains that character. when the keypress event includes modifier keys, sometimes the charcode value is replaced with an ascii character according to the following rules. the accel key depends...
...character. this behavior helps the internationalization of web applications that have custom shortcut keys. if gecko doesn't replace the charcode with an ascii character, the web application developers would need to consider all non-latin keyboard layouts (arabic, greek, hebrew, russian, etc.). the charcode value depends on the state of capslock and numlock (except they are currently ignored if alt (option) is down on mac - see bug 432953). there are also some differences between the platforms, as described in the following sections. windows the charcode is replaced only when ctrl is down but alt is not down. if the os-provided character cannot be entered without using the ctrl key, then, gecko does not replace the character. e.g., ctrl+shift+'2' on persian keyboard layout inputs a zwnj,...
...replacing the original (non-ascii) characters on these keys means that there are some accessibility issues for non-latin keyboard layout users as many non-ascii characters will not be available for shortcuts. therefore, web application developers should use only letters, ascii numerals, plus sign, and minus sign for custom shortcut keys. linux the charcode is replaced only when ctrl is down but alt and meta are not down. if the character provided by the keyboard layout cannot be entered without ctrl key, then, gecko does not replace the character (as on windows). mac the charcode is replaced when meta (command) or ctrl is down. if the current keyboard layout is dvorak-qwerty layout or a non-latin layout, the command key switches the keyboard layout to the us qwerty keyboard layout tempo...
...And 3 more matches

nsACString_internal
ing hierarchy. it represents a single contiguous array of characters, which may or may not be null-terminated. this type is not instantiated directly. a sub-class is instantiated instead. for example, see nststring. names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
...ated directly. a sub-class is instantiated instead. for example, see nststring. names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
... nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
...And 3 more matches

nsAString (External)
class declaration this header provides wrapper classes around the frozen string api which are roughly equivalent to the internal string classes. ...
... class declaration this header provides wrapper classes around the frozen string api which are roughly equivalent to the internal string classes. ...
...i which are roughly equivalent to the internal string classes. ...
...And 3 more matches

nsAString_internal
ing hierarchy. it represents a single contiguous array of characters, which may or may not be null-terminated. this type is not instantiated directly. a sub-class is instantiated instead. for example, see nststring. names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
...tiated directly. a sub-class is instantiated instead. for example, see nststring. names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
...ters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
...And 3 more matches

EffectTiming.direction - Web APIs
iteration element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of timing properties including direction. the value of direction corresponds directly to animationeffecttimingreadonly.direction in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. syntax var timingproperties = { direction: "normal" | "reverse" | "alternate" | "alternate-reverse" }; timingproperties.direction = "normal" | "reverse" | "alternate" | "alternate-reverse"; value a domstring which specifies the direction in which the animation should play as well as what to do when the playback reaches the end of the animation sequence in the current direction. it can take one of the following values, with the default being "normal": "normal"...
...es the direction in which the animation should play as well as what to do when the playback reaches the end of the animation sequence in the current direction. it can take one of the following values, with the default being "normal": "normal" the animation runs forwards, from beginning to end, in the way we experience the flow of time. ...
...the default being "normal": "normal" the animation runs forwards, from beginning to end, in the way we experience the flow of time. "reverse" the animation runs backwards, or "rewinds." "alternate" the animation switches direction after each iteration, going forward through the animation sequence the first iteration, then backward through the sequence the second iteration, and so forth. ...
...And 3 more matches

Comparison of Event Targets - Web APIs
he call that triggered this event, eg: element.dispatchevent(event) event.currenttarget dom event interface the eventtarget whose eventlisteners are currently being processed. as the event capturing and bubbling occurs, this value changes. event.relatedtarget dom mouseevent interface identifies a secondary target for the event. event.explicitoriginaltarget event.webidl if the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. for example, mouse events are retargeted to their parent node when they happen over text nodes (bug 185889), and in that case .target will show the parent and .explicitoriginaltarget will show the text node. unlike .orig...
...get event.webidl if the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. for example, mouse events are retargeted to their parent node when they happen over text nodes (bug 185889), and in that case .target will show the parent and .explicitoriginaltarget will show the text node. unlike .originaltarget, .explicitoriginaltarget will never contain anonymous content. event.originaltarget event.webidl the original target of the event, before any retargetings. see anonymous content#event_flow_and_targeting for details. event.composedtarget event.webidl the original non-native target of the event before composition from shadow dom. use of explicitoriginal...
...riginaltarget will never contain anonymous content. event.originaltarget event.webidl the original target of the event, before any retargetings. see anonymous content#event_flow_and_targeting for details. event.composedtarget event.webidl the original non-native target of the event before composition from shadow dom. ...
...And 3 more matches

ARIA: img role - Accessibility
the aria img role can be used to identify multiple elements inside page content that should be considered as a single image. these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner. ...
... to deliver information in a visual manner. <div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div> description any set of content that should be consumed as a single image (which could include images, video, audio, code snippets, emojis, or other content) can be identified using role="img". you shouldn't count on the alt text of individual elements images for conveying context to assistive technologies; most screenreaders will consider the element with role="img" set on it to be to be like a black box, and not access the individual elements inside it. ...
...code snippets, emojis, or other content) can be identified using role="img". you shouldn't count on the alt text of individual elements images for conveying context to assistive technologies; most screenreaders will consider the element with role="img" set on it to be to be like a black box, and not access the individual elements inside it. ...
...And 3 more matches

Web accessibility for seizures and physical reactions - Accessibility
ual images, even in the absence of motion or flicker, can trigger seizures in patients with photosensitive epilepsy” the epilepsy foundation, in its article, "shedding light on photosensitivity, one of epilepsy's most complex conditions" talks about static images and patterns. "static or moving patterns of discernable light and dark stripes have the same effect as flashing lights because of the alternation of dark and bright areas." the epilepsy foundation of america working group is able to "quantify" the problem a little. "a pattern with the potential for provoking seizures contains clearly discernible stripes, numbering more than five light-dark pairs of stripes in any orientation" in addition to stripes, checkered patterns have also been known to cause photosensitive seizures, accordin...
... bright areas." the epilepsy foundation of america working group is able to "quantify" the problem a little. "a pattern with the potential for provoking seizures contains clearly discernible stripes, numbering more than five light-dark pairs of stripes in any orientation" in addition to stripes, checkered patterns have also been known to cause photosensitive seizures, according to cedars-sinai. although static images are possible as triggers, they are less consistent. the trigger that is well established and strong is flashing/strobe lights. dr. selim benbadis of usf's comprehensive epilepsy program notes, "the only thing that is really documented is flashing lights, which can trigger seizures in patients with photosensitive epilepsy. only a few types of epilepsies are photosensitive though...
...rogram notes, "the only thing that is really documented is flashing lights, which can trigger seizures in patients with photosensitive epilepsy. only a few types of epilepsies are photosensitive though, and the vast majority of epilepsies are not." in addition to seizures brought about by photosensitivity, listening to certain pieces of music can also trigger what are called musicogenic seizures, although these types of seizures seem to be much more rare. for a great introduction on the topic of musicogenic seizures, visit epilepsy ontario's web page on musicogenic seizures. seizures and epilepsy are not the same. in its article, "a revised definition of epilepsy" the epilepsy foundation notes that…"a seizure is an event and epilepsy is the disease involving recurrent unprovoked seizures."...
...And 3 more matches

max-height - CSS: Cascading Style Sheets
css3 sizing.ie no support noopera full support 44safari full support 6.1prefixed full support 6.1prefixed prefixed implemented with the vendor prefix: -webkit- full support 2alternate name alternate name uses the non-standard name: intrinsicwebview android full support 46 full support 46 full support ≤37prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support ...
...so, the definition of fit-content is simpler than in css3 sizing.opera android full support 43safari ios full support 7prefixed full support 7prefixed prefixed implemented with the vendor prefix: -webkit- full support 1alternate name alternate name uses the non-standard name: intrinsicsamsung internet android full support 5.0 full support 5.0 full support 1.5prefixed prefixed implemented with the vendor prefix: -webkit-max-contentchrome full support ...
...full support 11 full support 11 full support 9prefixed prefixed implemented with the vendor prefix: -webkit-samsung internet android full support 5.0stretch experimentalchrome full support 28alternate name full support 28alternate name alternate name uses the non-standard name: -webkit-fill-availableedge full support 79alternate name full support 79alternate name alternate name uses the non-standard name: -webkit-fill-availablefirefox no...
...And 3 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
attribute to define the types of files that the control can select. <input type="file" accept="image/*, text/*" name="file"/> hidden a control that is not displayed but whose value is submitted to the server. there is an example in the next column, but it's hidden! image a graphical submit button. displays an image defined by the src attribute. the alt attribute displays if the image src is missing. <input type="image" name="image" src="" alt="image input"/> month a control for entering a month and year, with no time zone. <input type="month" name="month"/> html5 number a control for entering a number. displays a spinner and adds default validation when supported. displays a numeric keypad ...
...n a given input type—are instead documented on those types' pages. this element includes the global attributes. those with extra importance as it relates to <input> are highlighted. attributes for the <input> element include global html attributes and: attribute type or types description accept file hint for expected file type in file upload controls alt image alt attribute for the image type. required for accessibility autocomplete all hint for form autofill feature autofocus all automatically focus the form control when the page is loaded capture file media capture input method in file upload controls checked radio, checkbox whether the command or control is checked dirn...
...he form as part of a name/value pair. width image same as width attribute for <img> a few additional non-standard attributes are listed following the descriptions of the standard attributes. individual attributes accept valid for the file input type only, the accept attribute defines which file types are selectable in a file upload control. see the file input type. alt valid for the image button only, the alt attribute provides alternative text for the image, displaying the value of the attribute if the image src is missing or otherwise fails to load. see the image input type. autocomplete (not a boolean attribute!) the autocomplete attribute takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the...
...And 3 more matches

accesskey - HTML: Hypertext Markup Language
ays you can specify multiple space-separated characters, and the browser will use the first one it supports. however, this does not work in most browsers. ie/edge uses the first one it supports without problems, provided there are no conflicts with other commands. ...
... the first one it supports. however, this does not work in most browsers. ie/edge uses the first one it supports without problems, provided there are no conflicts with other commands. ...
...ot work in most browsers. ie/edge uses the first one it supports without problems, provided there are no conflicts with other commands. ...
...And 3 more matches

Details of the object model - JavaScript
ifferent from a class. in javascript, "instance" does not have this technical meaning because javascript does not have this difference between classes and instances. however, in talking about javascript, "instance" can be used informally to mean an object created using a particular constructor function. so, in this example, you could informally say that jane is an instance of engineer. similarly, although the terms parent, child, ancestor, and descendant do not have formal meanings in javascript; you can use them informally to refer to objects higher or lower in the prototype chain. creating objects with simple definitions object hierarchy the following hierarchy is created using the code on the right side. individual objects = jim, sally, mark, fred, jane, etc. "instances" created f...
... specific to a single object, you assign a value to the object, as follows: mark.bonus = 3000; now, the mark object has a bonus property, but no other workerbee has this property. if you add a new property to an object that is being used as the prototype for a constructor function, you add that property to all objects that inherit properties from the prototype. for example, you can add a specialty property to all employees with the following statement: employee.prototype.specialty = 'none'; as soon as javascript executes this statement, the mark object also has the specialty property with the value of "none". the following figure shows the effect of adding this property to the employee prototype and then overriding it for the engineer prototype. adding properties more flexible cons...
...perties to the employee or workerbee prototypes, those properties are not inherited by the engineer object. for example, assume you have the following statements: function engineer(name, projs, mach) { this.base = workerbee; this.base(name, 'engineering', projs); this.machine = mach || ''; } var jane = new engineer('doe, jane', ['navigator', 'javascript'], 'belau'); employee.prototype.specialty = 'none'; the jane object does not inherit the specialty property. you still need to explicitly set up the prototype to ensure dynamic inheritance. assume instead you have these statements: function engineer(name, projs, mach) { this.base = workerbee; this.base(name, 'engineering', projs); this.machine = mach || ''; } engineer.prototype = new workerbee; var jane = new engineer('doe, jan...
...And 3 more matches

Web audio codec guide - Web media technologies
sample size the larger the samples, the more detail each sample can contain, resulting in more accurate representation of each sample. depends on the codec; codecs typically have an internal sample format that may or may not be the same as the original sample size. but more source detail may make the encoded file larger; it will never make it smaller. of course, these effects can be altered by decisions made while encoding the audio. for example, if the encoder is configured to reduce the sample rate, the sample rate's effect on the output file will be reduced in kind. for more information about these and other features of audio data, see audio data format and structure in digital audio concepts. the effect of codec configuration on encoded audio output audio codecs typically...
...dio data for subwoofers, for example. when you see the number of audio channels written in the form x.y (such as 2.1 or 5.1), the number after the decimal point, y, is the number of lfe channels. for example, mp3 supports one lfe channel, while aac supports up to 16. in addition to providing audio for specific speakers in a sound system, some codecs may allow audio channels to be used to provide alternative audio, such as vocals in different languages or descriptive audio for visually impaired people. audio frequency bandwidth the audio frequency bandwidth of a codec indicates the range of audio frequencies that can be represented using the codec. some codecs operate specifically by eliminating audio that falls outside a given frequency range. there is a correlation between the sample rate...
...see voiceage licensing for details [1] while the chrome browser does not support amr, chrome os supports amr-nb (narrowband) and amr-wb (wideband). [2] the firefox browser doesn't support amr; however, the boot to gecko platform does support both narrow and wideband amr in 3gp containers. flac (free lossless audio codec) flac (free lossless audio codec) is a lossless audio cod...
...And 3 more matches

dx - SVG: Scalable Vector Graphics
the dx attribute indicates a shift along the x-axis on the position of an element or its content. ...
... if there are multiple values, dx defines a shift along the x-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphs, the remaining glyphs use a value of 0. if there are ...
... if there are multiple values, dx defines a shift along the x-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphs, the remaining glyphs use a value of 0. if there are more values than glyphs, extra ...
...And 3 more matches

dy - SVG: Scalable Vector Graphics
the dy attribute indicates a shift along the y-axis on the position of an element or its content. ...
... if there are multiple values, dy defines a shift along the y-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there ar...
... if there are multiple values, dy defines a shift along the y-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, ext...
...And 3 more matches

HTML to DOM - Archive of obsolete content
the code snippets on this page will let your site work until these new features are more widely available. safely parsing simple html to dom when using xmlhttprequest to get the html of a remote webpage, it is often advantageous to turn that html string into dom for easier manipulation. however, there are potential dangers involved in injecting remote content in a privileged context in your extension, so it can be desirable to parse the html safely. the function below will safely parse simple html and return a dom object which can be manipulated like web page elements. ...
...navigation.allowauth = false; frame.webnavigation.allowimages = false; frame.webnavigation.allowjavascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; // listen for load frame.addeventlistener("load", function (event) { // the document of the html in the dom var doc = event.originaltarget; // skip blank page or frame if (doc.location.href == "about:blank" || doc.defaultview.frameelement) return; // do something with the dom of doc alert(doc.location.href); // when done remove frame or set location "about:blank" settimeout(function (){ var frame = document.getelementbyid("sample-frame"); // remove frame // frame.destroy(); // if u...
...f = "about:blank"; },10); }, true); } // load a page frame.contentdocument.location.href = "http://www.mozilla.org/"; // or // frame.webnavigation.loaduri("http://www.mozilla.org/",components.interfaces.nsiwebnavigation,null,null,null); if you are starting with an html string, you can convert it to a data uri and use that to load in the browser element. using a hidden xul iframe (alternate example) sometimes, a browser element is overkill, or does not meet your needs, or you can't fulfill its requirements. while working on donkeyfire, i discovered the iframe xul element, and it is very easy to implement it. as an example, i will show a browser overlay .xul file, and some javascript code to access it. here is some xul code you can add to your browser overlay .xul file. don'...
...And 2 more matches

Install Manifests - Archive of obsolete content
t must conform to the rules specified in extension versioning, update and compatibility. for firefox/thunderbird 1.5, see toolkit version format. examples <em:version>2.0</em:version> <em:version>1.0.2</em:version> <em:version>0.4.1.2005090112</em:version> firefox 1.5 / xulrunner 1.8 - add-ons that do not use a valid version format will not be installed. the version format is different from, although backwards-compatible with, 1.0's. for add-ons hosted on addons.mozilla.org - mozilla's update website may repackage your add-on and correct or reject malformed version strings. optional property reference you may need to supply these properties, depending on the capabilities of your add-on. abouturl the chrome:// url of the extension's about dialog box. this is only useful to extensions...
...ons list. the icon will be displayed at 32x32 in firefox 3.6 and lower. in firefox 4.0 and later the icon can be up to 48x48 pixels in size. if this property is not specified, a default icon is used. <em:iconurl>chrome://myext/skin/icon.png</em:iconurl> note: for the above example to work you will also have to add a skin package line to your chrome.manifest file. see chrome registration#skin. alternatively you can place your icon in the directory specified in your content package line. gecko 1.9.2 note starting in gecko 1.9.2 (firefox 3.6), you can also simply include your icon, named icon.png, in the base directory of the add-on. this allows your add-on's icon to be displayed even when the add-on is disabled, or if the manifest is missing an iconurl entry. icon64url a chrome:// ur...
...is missing an iconurl entry. icon64url a chrome:// url to a 64x64 pixel icon to display in the add-on's details view . if this property is not specified, the smaller icon above will be used. <em:icon64url>chrome://myext/skin/icon64.png</em:icon64url> note: for the above example to work you will also have to add a skin package line to your chrome.manifest file. see chrome registration#skin. alternatively you can place your icon in the directory specified in your content package line. gecko 2.0 note starting in gecko 2.0 (firefox 4.0), you can also simply include your icon, named icon64.png, in the base directory of the add-on. this allows your add-on's icon to be displayed even when the add-on is disabled, or if the manifest is missing an icon64url entry. localized allows you to ...
...And 2 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
plications. xul, on the other hand, was conceived from the ground up as a markup language for user interfaces, and makes it possible to insert ui components with sophisticated features just by writing tags, without any particular scripting. unlike languages with formal specifications that have been standardized by bodies like the w3c, xul currently does not have an explicit specification. note: although there is a specification document, its markup is based on implementations and markup as of 2001, and current xul differs from it in many aspects. for the latest xul specifications, please see the xul reference on mdc and the xul page in the mozilla wiki. for each element that i explain in this chapter, i will illustrate it with a source code example. you can type these examples up and open ...
...3). <hbox> <label value="label1" flex="1" style="border: 1px solid;"/> <label value="label2" flex="2" style="border: 1px solid;"/> </hbox> listing 4: growing with flex figure 3: output of listing 4 ordinal within a xul box, elements will ordinarily be laid out following their order of appearance in the source code (laid out left to right or top to bottom). use the ordinal attribute to alter their order. the ordinal attribute takes positive integer values, which are used to order the box’s layout—in the example in listing 5, the buttons would be laid out in the order button3, button2, button1 (figure 4). if multiple elements have the same ordinal value, they will be laid out in the same relative order they appear in the source code. the default value for ordinal is 1. <vbox> ...
...t your code inside a cdata section as shown in listing 18; this will avoid errors caused by mistakenly reading "&" and other characters as the beginnings of entity references. <script type="application/javascript"><![cdata[ var nodes = gbrowser.mtabcontainer.childnodes; for (var i = 0; i < nodes.length; i++) alert(nodes[i].label); ]]></script> listing 18: embedding a script in xul note: although embedding javascript is permitted, it's generally encouraged that you instead place your javascript code in an external file. browser and tabbrowser xul allows you to use inline frames. you can set the src attribute of an iframe element to the uri of another xul document or web page, and it will be displayed there. but iframes are rarely used in xul—in practice, the browser element is us...
...And 2 more matches

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
ylesheets used at any one time. the breakdown: 1 master screen media file which imports 4 files: a base file (bulk of formatting) a file for finance/table formatting color file (override colors and background images for specific color scheme) temp file (used for styles associated with temporary features and ad-related pages) 1 print media file 1 aural media file 3 master alternate style sheets which import 1 file each the 3 imported files set alternate font sizes (small, large, larger) how much did the size of a typical wired news page shrink? the html went from 32 kb down to 19 kb, but images increased from 8 to 13 kb. we've noted that some of the file size comparison's aren't necessarily fair, because we're not comparing apples to apples-- we're compa...
... worked for the wired news design. by eliminating tables that were strictly used for layout, we significantly cut back on the amount of markup and useless tags in our html, and gained a structure that is much easier to maintain. now that the content is not locked into a specific table structure, we have much more flexibility in how we present that content. a few changes to the css can completely alter the presentation of thousands of pages. as a very welcome side benefit, we also believe the accessibility of wired news will dramatically improve without the clutter of nested layout tables. are you setting up your columns with floats or positioning? in trying to eliminate that last table i was using to set the column structure of our pages, i took a close look at both floated divs and positi...
...rs and images to save on printer ink. fonts are sized in point (pt) units and use serif faces for improved legibility on a printed page. our stories are logically the most printed pages of the site. technically, with the print media css file, we didn't have to generate a separate print template for stories. however, since some of our stories are broken up into 2 or 3 pages, we created a slightly altered template for print versions which pulls the entire text of the story into one (web) page. since we had a separate template to work with, we changed the media attribute of the linked print style sheet to "all", and eliminated the links to normal screen media files. this allows us to temporarily display on screen the same formatting to be used for printing that page. so what advantages does th...
...And 2 more matches

MMgc - Archive of obsolete content
nal delete mmgc contains a page allocator called gcheap, which allocates large blocks (megabytes) of memory from the system and doles out 4kb pages to the unmanaged memory allocator (fixedmalloc) and the managed memory allocator (gc). mmgc namespace the mmgc library is in the c++ namespace mmgc. you can qualify references to classes in the library; for example: mmgc::gc, mmgc::gcfinalizedobject. alternately, you can open the mmgc namespace in your c++ source so that you can refer to the objects more concisely: using namespace mmgc; ... gc* gc = gc::getgc(this); gcobject* gcobject; gc class the class mmgc::gc is the main class of the gc. it represents a full, self-contained instance of the garbage collector. it may be multiply instantiated; you may have multiple instances of the garbage ...
...nces. the gc typically is constructed early in your program's initialization, and then passed to operations like operator new for allocating gc objects. there are a few methods that you may need to call directly, such as alloc and free. gc::alloc, gc::free the alloc and free methods are garbage-collected analogs for malloc and free. memory allocated with alloc doesn't need to be explicitly freed, although it can be freed with free if it is known that there are no other references to it. alloc is often used to allocate arrays and other objects of variable size that contain gc pointers or are otherwise desirable to have in managed memory. these flags may be passed to alloc to control the allocation type. /** * flags to be passed as second argument to alloc */ enum allocflags { kzero=1, kcon...
... if a finalized object holds a reference to an rcobject, it may safely call decrementref on the rcobject. threading the gc routines are not currently thread safe, we're operating under the assumption that none of the player spawned threads create gc'd things. if this isn't true we hope to eliminate other threads from doing this and if we can't do that we will be forced to make our gc thread safe, although we hope we don't have to do that. threading gets more complicated because it makes sense to re-write chunkmalloc and chunkallocbase to get their blocks from the gcheap. they can also take advantage of the 4k boundary to eliminate the 4 byte per allocation penalty. troubleshooting mmgc dealing with bugs gc bugs are hard. forgetting a write barrier if you forget to put a write barrier on a poi...
...And 2 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
element(aid){ return (document.getelementbyid) ? document.getelementbyid(aid) : document.all[aid]); } differences between mozilla and internet explorer first, i'll discuss the differences in the way html behaves between mozilla and internet explorer. tooltips legacy browsers introduced tooltips into html by showing them on links and using the value of the alt attribute as a tooltip's content. the latest w3c html specification created the title attribute, which is meant to contain a detailed description of the link. modern browsers will use the title attribute to display tooltips, and mozilla only supports showing tooltips for that attribute and not the alt attribute. entities html markup can contain several entities, which the w3c web standards body...
...explorer. </a> mozilla follows the css specification correctly and will change the color to green in this example. you can use two ways to make mozilla behave like internet explorer and not change the color of the text when hovered over: first, you can change the css rule to be a:link:hover {color: green;}, which will only change the color if the element is a link (has an href attribute). alternatively, you can change the markup and close the opened <a /> before the start of the text -- the anchor will continue to work this way. quirks versus standards mode older legacy browsers, such as internet explorer 4, rendered with so-called quirks under certain conditions. while mozilla aims to be a standards-compliant browser, it has three modes that support older web pages created with th...
... function handleevent(aevent) { var myevent = window.event ? window.event : aevent; } </script> the properties and functions that the event object exposes are also often named differently in mozilla and internet explorer, as table 4 shows. table 4. event properties differences between mozilla and internet explorer internet explorer name mozilla name description altkey altkey boolean property that returns whether the alt key was pressed during the event. cancelbubble stoppropagation() used to stop the event from bubbling farther up the tree. clientx clientx the x coordinate of the event, in relation to the element viewport. clienty clienty the y coordinate of the event, in relation to the element viewport. ...
...And 2 more matches

Elements - Archive of obsolete content
ute indicates whether style rules from the document will affect anonymous content generated by the xbl binding. if this attribute is true, styles from the document will also be applied to the xbl generated anonymous content. content <!element content any> <!attlist content id id #implied > a binding can specify new content that is placed inside the bound element. although you can see this content on screen as if it was directly in the file, this content is anonymous and is hidden from the normal dom. to access anonymous nodes on an xbl bound element, you can use the getanonymouselementbyattribute and getanonymousnodes functions. the only xbl element that can appear inside the content tag is the children tag. attributes on the <content> element in the binding ...
... can be obtained directly from the bound element. the property tag must be inside the implementation tag. id - the id attribute is a document-unique identifier. name - the name of the property. this is the name used to refer to the property on the bound element. readonly - the readonly attribute is used to designate a property as read-only. if set to true, the value of the property cannot be altered. if this attribute is omitted, the property will be readable and writable. onget - the onget attribute's value is a script that executes when the value of the property is requested. if this attribute is set, any initial value contained underneath the element will be ignored. the return value of the script represents the value of the property that will be returned to the requestor. a property...
... this attribute is set, any initial value contained underneath the element will be ignored. the return value of the script represents the value of the property that will be returned to the requestor. a property getter can also be specified as a child of the property element using the getter tag. onset - the onset attribute's value is a script that executes when the value of the property is being altered. if this attribute is set, any initial value contained underneath the element will be ignored. within the script, the parameter val represents the new value being assigned. a property setter can also be specified as a child of the property element using a setter tag. getter <!element getter pcdata> <!attlist getter id id #implied > the getter element con...
...And 2 more matches

XUL Structure - Archive of obsolete content
on for all xul files. you can load xul files from your own machine by opening them in the browser, or by double-clicking the file in your file manager. remember that remote xul will have significant restrictions on what it can do, and does not work with current firefox versions! document types: html xml xul css mozilla uses a distinctly different kind of document object (dom) for html and xul, although they share much of the same functionality. there are three main types of document in mozilla: html, xml, and xul. naturally, the html document is used for html documents, the xul document is used for xul documents, and the xml document is used for other types of xml documents. since xul is also xml, the xul document is a subtype of the more generic xml document. there are subtle differences ...
...indow and the address book dialogs. the packages that are provided with mozilla are located within the chrome directory, which is in the directory where you built mozilla. the chrome directory is where you find all the files that describe the user interface used by the mozilla browser, mail client, and other applications. typically, you put all the xul files for an application in this directory, although extensions are installed in the extensions directory for a particular user. just copying a xul file into the chrome directory doesn't give the file any extra permissions, nor can it be accessed via a chrome url. to gain the extra privileges, you will need to create a manifest file and put that in the chrome directory. this file is easy to create, as it is typically only a couple of lines lon...
...nu and toolbar. you will commonly use this feature in more complex xul applications since you wouldn't want the browser ui to exist around your dialog boxes. the files for a package are usually combined into a single jar file. a jar file may be created and examined using a zip utility. for instance, you can open the jar files in mozilla's chrome directory to see the basic structure of a package. although it's normal to combine the files into a jar file, packages may also be accessed in expanded form into a directory. although you don't normally distribute a package this way, it is handy during development since you can edit the file directly and then reload the xul file without having to repackage or reinstall the files. by default, mozilla applications parse xul files and scripts, and stor...
...And 2 more matches

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

Correctly Using Titles With External Stylesheets - Archive of obsolete content
this can lead to a stylesheet being ignored, which is typically not what an author intends to do. why titles matter the title attribute affects how your external stylesheet is applied to a document. ...
...a document. in fact, the use of the title attribute is so significant that html 4.01 categorizes stylesheets according to the presence or absence of a title. by including a title attribute, you can control whether a particular stylesheet always affects a document, or if it is only used under certain circumstances. there are three kinds of stylesheets that are possible: persistent, preferred, and alternate stylesheets. authors will be most familiar with persistent stylesheets, of which any number may be applied to a document at once. a persistent stylesheet is one which has no title attribute and a value of stylesheet supplied for the rel attribute. a document may refer to one or more persistent stylesheets, all of which are used in the presentation of the document. a preferred stylesheet, ...
... applied to the document. the specification does not supply a procedure to decide which one should be used, so user agents are free to make whatever choice they like. therefore, any link to a stylesheet that includes a title attribute cannot be persistent, and is likely to be ignored by the web browser. any link element referring to a stylesheet with a title attribute must be either preferred or alternate, depending on the value of the rel attribute. in a document that refers to alternate stylesheets, the preferred stylesheet will be used so long as none of the alternate stylesheets are selected by the user. thus, when the document is loaded, the browser will use all of the persistent stylesheets and one preferred stylesheet (but remember, there should only be one preferred stylesheet). onc...
...And 2 more matches

Accessible multimedia - Learn web development
this article shows how. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of what accessibility is. objective: to understand the accessibility issues behind multimedia, and how to overcome them. ...
...n't as easy to ensure accessibility for — multimedia. images, videos, <canvas> elements, flash movies, etc., aren't as easily understood by screenreaders or navigated by the keyboard, and we need to give them a helping hand. but don't despair — here we will help you navigate through the techniques available for making multimedia more accessible. ...
... them a helping hand. but don't despair — here we will help you navigate through the techniques available for making multimedia more accessible. simple images we already covered simple text alternatives for html images in our html: a good basis for accessibility article — you can refer back to there for the full details. in short, you should ensure that where possible visual content has an alternative text available for screenreaders to pick up and read to their users. ...
...And 2 more matches

Index - Learn web development
er, codingscripting, google maps, learn, nytimes, third party, youtube this article has given you a useful introduction to using third-party apis to add functionality to your websites. 63 video and audio apis api, article, audio, beginner, codingscripting, guide, javascript, learn, video i think we've taught you enough in this article. the htmlmediaelement api makes a wealth of functionality available for creating simple video and audio players, and that's only the tip of the iceberg. see the "see also" section below for links to more complex and interesting functionality. 64 introducing javascript objects article, assessment, beginner, codingscripting, guide, javascript, learn, objects, tutorial in javascript, most things are objects, from core...
... types of code blocks such as conditional statements, loops, functions, and events. you've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly. 90 build your own function article, beginner, codingscripting, functions, guide, javascript, learn, tutorial, build, invoke, l10n:priority, parameters with most of the essential theory dealt with in the previous article, this article provides practical experience. here you will get some practice building your own, custom function. along the way, we'll also explain some useful details of dealing with functions. 91 function return values article, beginner, codingscripting, functions, guide, javascript, learn, return, return values, l10n:priority there's one last es...
...g javascript. 102 learn to style html using css beginner, css, codingscripting, debugging, landing, style, topic, length, specificity cascading stylesheets — or css — is the first technology you should start learning after html. while html is used to define the structure and semantics of your content, css is used to style it and lay it out. for example, you can use css to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. 103 css building blocks beginner, css, learn, building blocks this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to di...
...And 2 more matches

Manipulating documents - Learn web development
riting web pages and apps, one of the most common things you'll want to do is manipulate the document structure in some way. this is usually done by using the document object model (dom), a set of apis for controlling html and styling information that makes heavy use of the document object. in this article we'll look at how to use the dom in detail, along with some other interesting apis that can alter your environment in interesting ways. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript — including javascript objects. objective: to gain familiarity with the core dom apis, and the other apis commonly associated with dom and document manipulation the important parts of a web browser web browsers are very complicated p...
...is the actual page loaded into the window, and is represented in javascript by the document object. you can use this object to return and manipulate information on the html and css that comprises the document, for example get a reference to an element in the dom, change its text content, apply new styles to it, create new elements and add them to the current element as children, or even delete it altogether. in this article we'll focus mostly on manipulating the document, but we'll show a few other useful bits besides. the document object model the document currently loaded in each one of your browser tabs is represented by a document object model. this is a "tree structure" representation created by the browser that enables the html structure to be easily accessed by programming language...
...ple.html (see it live also). try opening this up in your browser — it is a very simple page containing a <section> element inside which you can find an image, and a paragraph with a link inside. ...
...And 2 more matches

Introduction to client-side frameworks - Learn web development
overview: client-side javascript frameworks next we begin our look at frameworks with a general overview of the area, looking at a brief history of javascript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks. prerequisites: familiarity with the core html, css, and javascript languages. objective: to understand how client-side javascript frameworks came to exist, what problems they solve, what alternatives there are, and how to go about choosing one. a brief history when javascript debuted in 1996, it added occasional interactivity and excitement to a web that was, up until then, composed of static documents. the web became no...
...dern javascript frameworks has made it much easier to build highly dynamic, interactive applications. a framework is a library that offers opinions about how software gets built. these opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software. javascript frameworks power much of the impressive software on the modern web – including many of the websites you likely use every day. mdn web docs, which you are currently reading this on, uses the react/reactdom framework to power its front end. what frameworks are out there? there are many frameworks out there, but currently the "big four" are considered to b...
...rrently reading this on, uses the react/reactdom framework to power its front end. what frameworks are out there? there are many frameworks out there, but currently the "big four" are considered to be the following. ember ember was initially released in december 2011 as a continuation of work that started in the sproutcore project. it is an older framework that has less users than more modern alternatives such as react and vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles. start learning ember angular angular is an open-source web application framework led by the angular team at google and by a community of individuals and corporations. it is a complete rewrite from the same team that built angularjs. angula...
...And 2 more matches

Software accessibility: Where are we today?
endors created products and software which helped people who could not perform one of the four basic tasks to use common computer applications. ...
... one of the four basic tasks to use common computer applications. ...
...ead portions of the screen comprehension software, which allows a dyslexic or learning disabled computer user to see and hear text as it is manipulated on the computer screen in fact, the entire adaptive technology industry has grown up around these issues. one great place to go and learn about this industry is the csun conference in los angeles, which takes place every year in mid-late march. alternative ways to access the screen's contents most computer programs are so visual, they are difficult or impossible to use for persons with visual impairments. this need not be the case. here's how non-print readers use desktop software today: text-to-speech (tts) makes the computer talk to the user: those who can't read print at all usually use talking programs (text-to-speech). t...
...And 2 more matches

NSS tools : certutil
and key database file. this argument is provided to support legacy servers. most applications do not use a database prefix. -p phone specify a contact telephone number to include in new certificates or certificate requests. bracket this string with quotation marks if it contains spaces. -q pqgfile or curve-name read an alternate pqg value from the specified file when generating dsa key pairs. if this argument is not used,certutil generates its own pqg value. pqg files are created with a separate dsa utility. elliptic curve name is one of the ones from suite b: nistp256, nistp384, nistp521 if nss has been compiled with support curves outside of suite b: sect163k1, nistk163, sect16...
...th the -v argument. -x force the key and certificate database to open in read-write mode. this is used with the -u and -l command options. -x use certutil to generate the signature for a certificate being created or added to a database, rather than obtaining a signature from a separate ca. -y exp set an alternate exponent value to use in generating a new rsa public key for the database, instead of the default value of 65537. the available alternate values are 3 and 17. -z noise-file read a seed value from the specified file to generate a new private and public key pair. this argument makes it possible to use hardware-generated s...
... keywords are available: + serverauth + clientauth + codesigning + emailprotection + timestamp + ocspresponder + stepup + critical x.509 certificate extensions are described in rfc 5280. ...
...And 2 more matches

NSS Tools certutil
. bracket theoutput-file string with quotation marks if it contains spaces. if this argument is not used the output destination defaults to standard output. -p phone specify a contact telephone number to include in new certificates or certificate requests. bracket this string with quotation marks if it contains spaces. -q pqgfile read an alternate pqg value from the specified file when generating dsa key pairs. if this argument is not used, the key database tool generates its own pqg value. pqg files are created with a separate dsa utility. -r display a certificate's binary der encoding when listing information about that certificate with the -l option. -s subject identify a...
...set. if this argument is not used, the validity period begins at the current system time. the length of the validity period is set with the -v argument. -x use the certificate database tool to generate the signature for a certificate being created or added to a database, rather than obtaining a signature from a separate ca. -y exp set an alternate exponent value to use in generating a new rsa public key for the database, instead of the default value of 65537. the available alternate values are 3 and 17. -z noise-file read a seed value from the specified binary file to use in generating a new rsa private and public key pair. this argument makes it possible to use hardware-generated seed values and unneces...
.... -6 add an extended key usage extension to a certificate that is being created or added to the database. extended key usage extensions are described in standard x.509 v3 certificate extensions in appendix a.3 of thered hat certificate system administration guide. ...
...And 2 more matches

Parser API
dy: [ statement ]; } a block statement, i.e., a sequence of statements surrounded by braces. interface expressionstatement <: statement { type: "expressionstatement"; expression: expression; } an expression statement, i.e., a statement consisting of a single expression. interface ifstatement <: statement { type: "ifstatement"; test: expression; consequent: statement; alternate: statement | null; } an if statement. interface labeledstatement <: statement { type: "labeledstatement"; label: identifier; body: statement; } a labeled statement, i.e., a statement prefixed by a break/continue label. interface breakstatement <: statement { type: "breakstatement"; label: identifier | null; } a break statement. interface continuestatement <: sta...
...dy: statement; } a for/of statement. interface letstatement <: statement { type: "letstatement"; head: [ variabledeclarator ]; body: statement; } a let statement. note: the let statement form is spidermonkey-specific. interface debuggerstatement <: statement { type: "debuggerstatement"; } a debugger statement. note: the debugger statement is new in ecmascript 5th edition, although spidermonkey has supported it for years. declarations interface declaration <: statement { } any declaration node. note that declarations are considered statements; this is because declarations can appear in any statement context in the language recognized by the spidermonkey parser. note: declarations in arbitrary nested scopes are spidermonkey-specific. interface functiondeclaration ...
... argument: expression; prefix: boolean; } an update (increment or decrement) operator expression. interface logicalexpression <: expression { type: "logicalexpression"; operator: logicaloperator; left: expression; right: expression; } a logical operator expression. interface conditionalexpression <: expression { type: "conditionalexpression"; test: expression; alternate: expression; consequent: expression; } a conditional expression, i.e., a ternary ?/: expression. interface newexpression <: expression { type: "newexpression"; callee: expression; arguments: [ expression ]; } a new expression. interface callexpression <: expression { type: "callexpression"; callee: expression; arguments: [ expression ]; } a function or metho...
...And 2 more matches

XPIDL
one of the fundamental types, or any other type declared via a typedef, interface, or a native type. native types are types which correspond to a given c++ type. most native types are not scriptable: if it is not present in the list above, then it is certainly not scriptable (some of the above, particularly jsid, are not scriptable). the contents of the parentheses of a native type declaration (although native declarations without parentheses are parsable, i do not trust that they are properly handled by the xpidl handlers) is a string equivalent to the c++ type. xpidl itself does not interpret this string, it just literally pastes it anywhere the native type is used. the interpretation of the type can be modified by having properties on the native declaration: table 3: native type defin...
...tants are technically legal at the top level, but xpidl i forbids them from being placed there; instead, they must be in an interface. the only constants supported are those which become integer types when compiled to source code; string constants and floating point constants, though parseable, cannot be made into a header or xpt file. constants are emitted in header files using anonymous enums, although there is an outstanding patch that combines adjacent constants into the same anonymous enums to quiet enum mismatch warnings. interfaces specifying interfaces is the primary purpose of using xpidl. interfaces are basically a collection of constants, methods, and attributes; in mozilla, these are the primary ways in which javascript code can interact with native c++ code. furthermore, inter...
...h other functions). for example, the method '[binaryname(foo)] void bar();' becomes 'nsresult foo()' in native code (note that capitalization is still applied). however, the capitalization is not applied when using binaryname with attributes; i.e., [binaryname(foo)] readonly attribute quux bar; becomes getfoo(quux**) in native code. attributes named 'iid' and methods named 'getiid' are forbidden, although this is checked before binaryname conversion. the implicit_jscontext and optional_argc parameters are properties which help native code implementations determine how the call was made from script. if implicit_jscontext is present on a method, then an additional jscontext *cx parameter is added just after the regular list which receives the context of the caller. if optional_argc is present,...
...And 2 more matches

DOMMatrixReadOnly - Web APIs
a 4×4 matrix is suitable to describe any rotation and translation in 3d. this interface should be available inside web workers, though some implementations doesn't allow it yet. properties this interface doesn't inherit any properties. is2d read only a boolean flag whose value is true if the matrix was initialized as a 2d matrix. ...
...red in order to perform 2d rotations and translations. these are aliases for specific components of a 4×4 matrix, as shown below. 2d 3d equivalent a m11 b m12 c m21 d m22 e m41 f m42 methods this interface doesn't inherit any methods. none of the following methods alter the original matrix. dommatrixreadonly.flipx() returns a new dommatrix created by flipping the source matrix around its x-axis. this is equivalent to multiplying the matrix by dommatrix(-1, 0, 0, 1, 0, 0). the original matrix is not modified. dommatrixreadonly.flipy() returns a new dommatrix created by flipping the source matrix around its y-axis. this is equivalent to multiplying the ma...
...pping the source matrix around its y-axis. this is equivalent to multiplying the matrix by dommatrix(1, 0, 0, -1, 0, 0). the original matrix is not modified. dommatrixreadonly.inverse() returns a new dommatrix created by inverting the source matrix. if the matrix cannot be inverted, the new matrix's components are all set to nan and its is2d property is set to false. the original matrix is not altered. dommatrixreadonly.multiply() returns a new dommatrix created by computing the dot product of the source matrix and the specified matrix: a⋅b. if no matrix is specified as the multiplier, the matrix is multiplied by a matrix in which every element is 0 except the bottom-right corner and the element immediately above and to its left: m33 and m34. these have the default value of 1. the orig...
...And 2 more matches

FileSystemDirectoryReader - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...m/mdn/browser-compat-data and send us a pull request. ...
...ompat-data and send us a pull request. ...
...And 2 more matches

Drag Operations - Web APIs
y element, including images and links. however, for these last two, the default value is true, so you would only use the draggable attribute with a value of false to disable dragging of these elements. note: when an element is made draggable, text or other elements within it can no longer be selected in the normal way by clicking and dragging with the mouse. instead, the user must hold down the alt key to select text with the mouse, or use the keyboard. starting a drag operation in this example, a listener is added for the dragstart event by using the ondragstart attribute. <p draggable="true" ondragstart="event.datatransfer.setdata('text/plain', 'this text may be dragged')"> this text <strong>may</strong> be dragged. </p> when a user begins to drag, the dragstart event is fired. i...
... however, you can use setdragimage() to specify a custom drag feedback image. event.datatransfer.setdragimage(image, xoffset, yoffset); three arguments are necessary. the first is a reference to an image. this reference will typically be to an <img> element, but it can also be to a <canvas> or any other element. the feedback image will be generated from whatever the image looks like on screen, although for images, they will be drawn at their original size. the second and third arguments to the setdragimage() method are offsets where the image should appear relative to the mouse pointer. it is also possible to use images and canvases that are not in a document. this technique is useful when drawing custom drag images using the canvas element, as in the following example: function dragwith...
..., should be set within one of these events to specify which single operation should be performed. valid values for dropeffect are none, copy, move, or link. the combination values are not used for this property. with the dragenter and dragover event, the dropeffect property is initialized to the effect that the user is requesting. the user can modify the desired effect by pressing modifier keys. although the exact keys used vary by platform, typically the shift and control keys would be used to switch between copying, moving, and linking. the mouse pointer will change to indicate which operation is desired. for instance, for a copy, the cursor might appear with a plus sign next to it. you can modify the dropeffect property during the dragenter or dragover events, if for example, a particula...
...And 2 more matches

Key Values - Web APIs
aries varies varies modifier keys modifiers are special keys which are used to generate special characters or cause special actions when used in combination with other keys. examples include the shift and control keys, and lock keys such as caps lock and numlock. keyboardevent.key value description virtual keycode windows mac linux android "alt" [5] the alt (alternative) key. vk_menu (0x12) vk_lmenu (0xa4) vk_rmenu (0xa5) kvk_option (0x3a) kvk_rightoption (0x3d) gdk_key_alt_l (0xffe9) gdk_key_alt_r (0xffea) qt::key_alt (0x01000023) keycode_alt_left (57) keycode_alt_right (58) "altgraph" [5] the altgr or altgraph (alternate graphics) key. enables the iso level 3 shift modifier (where shi...
...toggles the capital character lock on and off for subsequent input. vk_capital (0x14) kvk_capslock (0x39) gdk_key_caps_lock (0xffe5) qt::key_capslock (0x01000024) keycode_caps_lock (115) "control" the control, ctrl, or ctl key. allows typing control characters. ...
...ed), and gdk_key_hyper_r (0xffee) on linux. [2] internet explorer (tested on release 9 and 11) reports "scroll" instead of "scrolllock" for the scroll lock key. [3] firefox did not add support for the symbol key until firefox 37. [4] firefox generates the key value "os" for the super and hyper keys, instead of "super" and "hyper". [5] chrome 67 and firefox 63 now correctly interpret the right alt key for keyboard layouts which map that key to altgr. see firefox bug bug 900750 and chrome bug 25503 for further details. whitespace keys keyboardevent.key value description virtual keycode windows mac linux android "enter" the enter or ↵ key (sometimes labeled return). vk_return (0x0d) kvk_return (0x24) kvk_ansi_keypadenter (0x4c) ...
...And 2 more matches

SpeechRecognitionResult - Web APIs
the speechrecognitionresult interface of the web speech api represents a single recognition match, which may contain multiple speechrecognitionalternative objects. properties speechrecognitionresult.isfinal read only a boolean that states whether this result is final (true) or not (false) — if so, then this is the final time this result will be returned; if not, then this result is an interim result, and may be updated later on. ...
... objects. properties speechrecognitionresult.isfinal read only a boolean that states whether this result is final (true) or not (false) — if so, then this is the final time this result will be returned; if not, then this result is an interim result, and may be updated later on. speechrecognitionresult.length read only returns the length of the "array" — the number of speechrecognitionalternative objects contained in the result (also referred to as "n-best alternatives".) methods speechrecognitionresult.item a standard getter that allows speechrecognitionalternative objects within the result to be accessed via array syntax. examples this code is excerpted from our speech color changer example. recognition.onresult = function(event) { // the speechrecognitionevent resul...
...esult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. ...
...And 2 more matches

TextRange - Web APIs
this property should only be used as one of the solutions when you need to be compatible with lower versions of ie, rather than relying on it completely in cross browser scripts. a textrange object represents a fragment of text in a document, similar to the standard defined range interface. this object is used to represent a specific piece of text in the document. for example, when you hold down the mouse to select the content on the page, you create a typical textrange. it is implemented in ie, then a textrange object can be created by element.createtextrange() or document.selection.createrange(). ...
...ined range interface. this object is used to represent a specific piece of text in the document. for example, when you hold down the mouse to select the content on the page, you create a typical textrange. it is implemented in ie, then a textrange object can be created by element.createtextrange() or document.selection.createrange(). note that this interface is not supported in non ie browsers. alternative selection and range interfaces can be used. properties textrange.boundingheightread only returns the height of the rectangle bound to the textrange object. textrange.boundingleftread only returns the distance between the left edge of the rectangle that binds the textrange object and the left edge that completely contains the textrange object. textrange.boundingtopread only ...
...ycommandstate() returns the boolean indicating the current state of the specified command. you can also see document.querycommandstate(). textrange.querycommandvalue() returns the domstring indicating the current value of the specified command. you can also see document.querycommandvalue(). textrange.scrollintoview() scroll the range to the visible range (top or bottom). it can be used as an alternative to element.scrollintoview in the lower version of ie. textrange.select() select the current range (i.e. the blue selection seen by the user). textrange.setendpoint() sets the end point of the current range based on the bounds of other textrange. example the following example is valid under ie9. the example gets the textrange through document.selection, and sets the specified elemen...
...And 2 more matches

Lighting a WebXR setting - Web APIs
however, there are issues and details to keep in mind while creating your lighting code, especially for augmented reality (ar) applications. this guide discusses these topics. and while this article provides brief reminders as to how lighting works in general, it is not by any means a tutorial in lighting or a guide to how to create a properly-lit 3d scene. flashback: simulating lighting in 3d although this article isn't a comprehensive guide to lighting a 3d scene, it's useful to provide a brief reminder as to how lighting works in general. fundamentally, simulating lighting in a virtual scene involves computing how much light from each light source is received by the eye after interacting with and reflecting off of each object in the scene. reflection of light a diagram showing how ...
...ion, Θr, is equal to the angle of incidence, except it's on the opposite side of the normal vector. the reflected ray, then, departs along at that angle off the normal. this is the law of reflection. this is the foundation for much of what's involved in shading a scene, and comes into play in terms of how different types of light source behave. the reflected light ray's color may, of course, be altered in intensity and/or hue due to the light's interaction with the surface, but the angle is always the same. components of a light source a light source has three major components; each component is in essence a type of light there are three kinds of light that can affect the color and brightness of objects and their pixels as displayed on the viewer's screen or headset. a sphere with on...
...he effect of ambient light is computed by simply multiplying the intensity of the light source by the reflectance of the surface at the pixel's location. the color and intensity of every pixel in the scene is affected exactly the same way, regardless of where it is in the scene or the direction it's facing. ambient light is commonly present simply to prevent shadowed areas from becoming too dark, although it affects the entire scene; however, the amount of ambient light in a scene should be very low. because the bouncing and scattering of light can be expensive to compute in real time, especially if multiple light sources are involved, it's common to use ambient lighting to simulate the scattered light caused by all the other light sources in the scene, instead of actually calculating the tr...
...And 2 more matches

Using the Web Speech API - Web APIs
semi-colons, just like in javascript. the first line — #jsgf v1.0; — states the format and version used. this always needs to be included first. the second line indicates a type of term that we want to recognise. public declares that it is a public rule, the string in angle brackets defines the recognised name for this term (color), and the list of items that follow the equals sign are the alternative values that will be recognised and accepted as appropriate values for the term. note how each is separated by a pipe character. you can have as many terms defined as you want on separate lines following the above structure, and include fairly complex grammar definitions. for this basic demo, we are just keeping things simple. plugging the grammar into our speech recognition the next ...
...e), or just a single result each time recognition is started (false). speechrecognition.lang: sets the language of the recognition. setting this is good practice, and therefore recommended. speechrecognition.interimresults: defines whether the speech recognition system should return interim results, or just final results. final results are good enough for this simple demo. speechrecognition.maxalternatives: sets the number of alternative potential matches that should be returned per result. this can sometimes be useful, say if a result is not completely clear and you want to display a list if alternatives for the user to choose the correct one from. but it is not needed for this simple demo, so we are just specifying one (which is actually the default anyway.) recognition.grammars = spee...
...if a result is not completely clear and you want to display a list if alternatives for the user to choose the correct one from. but it is not needed for this simple demo, so we are just specifying one (which is actually the default anyway.) recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; starting the speech recognition after grabbing references to the output <div> and the html element (so we can output diagnostic messages and update the app background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start. this is achieved by calling speechrecognition.start(). the foreach() method is us...
...And 2 more matches

Web APIs
specifications this is a list of all the apis that are available. ...
...ushmanager pushmessagedata pushregistrationmanager pushsubscription r rtcansweroptions rtccertificate rtcconfiguration rtcdtmfsender rtcdtmftonechangeevent rtcdatachannel rtcdatachannelevent rtcdtlstransport rtcerror rtcerrorevent rtcicecandidate rtcicecandidateinit rtcicecandidatepair rtcicecandidatepairstats rtcicecandidatestats rtcicecandidatetype rtcicecomponent rtcicecredentialtype rtcicegathererstate rtciceparameters rtciceprotocol rtcicerole rtciceserver rtcicetcpcandidatetype rtcicetransport rtcicetransportstate rtcidentityassertion rtcidentityerrorevent rtcidentityevent rtcinboundrtpstreamstats rtcnetworktype rtcofferansweroptions rtcofferoptions rtcoutboundrtpstreamstats rtcpeerconnection rtcpeerconnectioniceerrorevent rtcpeerconnectioniceevent rtcremoteou...
...ller readablestream readablestreambyobreader readablestreambyobrequest readablestreamdefaultcontroller readablestreamdefaultreader relativeorientationsensor renderingcontext report reportingobserver reportingobserveroptions request requestdestination resizeobserver resizeobserverentry response rsahashedimportparams rsahashedkeygenparams rsaoaepparams rsapssparams s svgaelement svgaltglyphdefelement svgaltglyphelement svgaltglyphitemelement svgangle svganimatecolorelement svganimateelement svganimatemotionelement svganimatetransformelement svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimate...
...And 2 more matches

Cognitive accessibility - Accessibility
, with a single column mobile design. all information, including structure and relationships conveyed through the presentation, should be available in a form that can be perceived by all users to achieve this goal. for example, the information could be spoken aloud via a narration tool. making your content capable of being understood by the software is a good way to help ensure it can be used by alternate presentational modes. time it is important to allow users the time they require to complete tasks. guideline 2.2 states "provide users enough time to read and use content." a time limit is any process that happens without user initiation after a set time or on a periodic basis, such as being logged out after 30 minutes or having 15 minutes to make a purchase. people with cognitive disabi...
... process that happens without user initiation after a set time or on a periodic basis, such as being logged out after 30 minutes or having 15 minutes to make a purchase. people with cognitive disabilities may require more time to read content, or to perform functions such as filling out forms. solutions include providing users enough additional time to complete tasks or eliminate time constraints altogether. timers options for adjusting time requirements include: allowing the user to turn off or adjust the time to at least 10 times the original limit before encountering it. alerting the user and providing a buffer of at least 20 seconds to extend the timeout duration by a factor of 10 with a simple action, such as hitting the space bar. provide a toggle on content that allows ...
...ons may need more time to read and to understand. for improved usability remove any time limit. timed content should also be avoided, with exceptions for non-interactive synchronized media and real-time events. people with attention deficit disorders should be able to focus on content without distractions. the user should be able to postpone or suppress interruptions, except situations involving altering a person to an emergency. this provides access to people with cognitive disabilities by enabling them to focus on the main purpose of the content. enable the user to postpone content updates by providing a way to request content updates rather than updating automatically. also, enable a way to make nonessential alerts optional. ensure that people can continue an activity without loss of dat...
...And 2 more matches

Web Accessibility: Understanding Colors and Luminance - Accessibility
pact than others. font size, font style (some fonts are so thin or fancy that they present accessibility problems on their own), background color, the size of the background space around the text, even pixel densities and more all affect how color is delivered from the screen. (see understanding success criterion 1.4.3: contrast) a viewer's distance from the screen, the ambient background, the health of his eyes, and more all affect how that color is received by the viewer. how the viewer perceives color after it gets to his eyes is yet another matter, and can be affected by overall health. luckily, css media queries level 5 will be a game-changer in accessibility initiatives, because it will allow users to select settings that accomodate their needs best. color, contrast, and luminance a...
...b is hardware-oriented, reflecting the use of crts, and that rgb is non-intuitive. that said, hsl colors incorporate lightness, not luminance, and this is a significant consideration. note that in that same section of the css color module 3, there are algorigthms available to translate the hsl to rgb. newer technologies, such as opengl and direct3d incorporate support for the srgb gamma curve, although some articles for opengl reference use of rgba rather than srgb. webgl is usually in the rgba format; see an example of how it is used in "clearing with colors". where accessibility is concerned, however, standards and guidelines are currently written predominantly using the srgb color space, especially as it applies to color contrast ratios. in speaking specifically to relative luminanc...
...it comes to "perceiving" colors, not all colors are created equal. our eyes are tuned to perceive certain colors, red, blue, and green, but we do not perceive these colors with equal strength. according to the article, hypersensitive cones, the authors note that "by population, about 64% of the cones are red-sensitive, about 32% green sensitive, and about 2% are blue sensitive." surprisingly, although cones that are blue-sensitive typically make up the fewest number of cones, they are also the most "sensitive" to color. put another way, as humans, the color blue is perceived differently than other colors, for multiple reasons. first, because the blue cones are actually the most sensitive of the three, second, we have fewer blue cones than red or green, and third, it so happens that thes...
...And 2 more matches

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
rid items there is a mention in the specification of anonymous grid items. these are created if you have a string of text inside your grid container, that is not wrapped in any other element. in the example below we have three grid items, assuming you had set the parent with a class of grid to display: grid. the first is an anonymous item as it has no enclosing markup, this item will always be dealt with via the auto-placement rules. the other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid. <div class="grid"> i am a string and will become an anonymous item <div>a grid item</div> <div>a grid item</div> </div> anonymous items are always auto-placed because there is no way to target them. therefore if yo...
... 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/643f590dbc.png" alt="placeholder"></li> <li><img src="https://udn.re...
...e"><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> <li><img src="https://udn.realityripple.com/samples/72/ab41das78...
...And 2 more matches

animation-direction - CSS: Cascading Style Sheets
the animation-direction css property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. ...
...s stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. syntax /* single animation */ animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; /* multiple animations */ animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; /* global values */ animation-direction: inherit; animation-direction: initial; animation-direction: unset; values normal the animation plays forwards each cycle. in other words, each time the animation cycles, the animation will r...
...he animation will reset to the beginning state and start over again. this is the default value. reverse the animation plays backwards each cycle. in other words, each time the animation cycles, the animation will reset to the end state and start over again. animation steps are performed backwards, and timing functions are also reversed. for example, an ease-in timing function becomes ease-out. alternate the animation reverses direction each cycle, with the first iteration being played forwards. the count to determine if a cycle is even or odd starts at one. alternate-reverse the animation reverses direction each cycle, with the first iteration being played backwards. the count to determine if a cycle is even or odd starts at one. note: when you specify multiple comma-separated values...
...And 2 more matches

font-variant-ligatures - CSS: Cascading Style Sheets
values normal this keyword leads to the activation of the usual ligatures and contextual ...
... values normal this keyword leads to the activation of the usual ligatures and contextual forms needed for correct rendering. the ligatures and forms activated depend on th...
...<historical-lig-values> these values control the ligatures used historically, in old books, like the german tz digraph being displayed ß. they correspond to the opentype values hlig. two values are possible: historical-ligatures activating these ligatures. no-historical-ligatures deactivating the ligatures. note that the keyword normal usually deactivates these ligatures. <contextual-alt-values> these values control whether letters adapt to their context—that is, whether they adapt to the surrounding letters. these values correspond to the opentype values calt. two values are possible: contextual specifies that the contextual alternates are to be used. note that the keyword normal usually activates these ligatures too. no-contextual prevents their use. formal defin...
...And 2 more matches

font-variant - CSS: Cascading Style Sheets
iant, (that is, normal or small-caps), by using the font shorthand. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric syntax font-variant: small-caps; font-variant: common-ligatures small-caps; /* global values */ font-variant: inherit; font-variant: initial; font-variant: unset; values normal specifies a normal font face; each of the longhand properties has an initial value of normal. longhand properti...
... font-variant-numeric syntax font-variant: small-caps; font-variant: common-ligatures small-caps; /* global values */ font-variant: inherit; font-variant: initial; font-variant: unset; values normal specifies a normal font face; each of the longhand properties has an initial value of normal. longhand properties of font-variant are: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian. none sets the value of the font-variant-ligatures to none and the values of the other longhand property as normal, their initial value. <common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values> specifies the keywords related to the font-variant-ligatures longhand property. the possible values ...
...-variant-ligatures longhand property. the possible values are: common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, and no-contextual. stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation() specifies the keywords and functions related to the font-variant-alternates longhand property. small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps specifies the keywords and functions related to the font-variant-caps longhand property. <numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero specifies the keywords related to the font-variant-numeric longhand property. the possible values ar...
...And 2 more matches

object-fit - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax the object-fit property is specified as a single keyword chosen from the list of values below. ...
...uld result in a smaller concrete object size. ...
...mentsinheritednocomputed valueas specifiedanimation typediscrete formal 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="c...
...And 2 more matches

Creating a cross-browser video player - Developer guides
76"> <param name="movie" 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></f...
... <progress> element later). mute mute.addeventlistener('click', function(e) { video.muted = !video.muted; }); the mute button is a simple toggle button that uses the media api's muted attribute to mute the video: this is a boolean indicating whether the video is muted or not. to get it to toggle, we set it to the inverse of itself. ...
...on(e) { video.muted = !video.muted; }); the mute button is a simple toggle button that uses the media api's muted attribute to mute the video: this is a boolean indicating whether the video is muted or not. to get it to toggle, we set it to the inverse of itself. ...
...And 2 more matches

<picture>: The Picture element - HTML: Hypertext Markup Language
the browser will consider each child <source> element and choose the best match among them. if no matches are found—or the browser doesn't support the <picture> element—the url of the <img> element's src attribute is selected. the selected image is then presented in the space occupied by the <img> element. the source for this interactive example is stored in a github repository. ...
...ibes the size and other attributes of the image and its presentation. it provides a fallback in case none of the offered <source> elements are able to provide a usable image. common use cases for <picture>: art direction. cropping or modifying images for different media conditions (for example, loading a simpler version of an image which has too many details, on smaller displays). offering alternative image formats, for cases where certain formats are not supported. saving bandwidth and speeding page load times by loading the most appropriate image for the viewer's display. if providing higher-density versions of an image for high-dpi (retina) display, use srcset on the <img> element instead. this lets browsers opt for lower-density versions in data-saving modes, and you don't have ...
...cture>. the media attribute the media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each <source> element. if the <source>'s media condition evaluates to false, the browser skips it and evaluates the next element inside <picture>. <picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="mdn"> </picture> the srcset attribute the srcset attribute is used to offer list of possible images based on size. it is composed of a comma-separated list of image descriptors. each image descriptor is composed of a url of the image, and either... a width descriptor, followed by a w (such as 300w); or a pixel density descriptor, followed by an x (such as 2x) to serve a high-res image ...
...And 2 more matches

Evolution of HTTP - HTTP
text transfer protocol (http). a client to display (and accidentally edit) these documents, the first web browser called worldwideweb. a server to give access to the document, an early version of httpd. these four building blocks were completed by the end of 1990, and the first servers were already running outside of cern by early 1991. on august 6th 1991, tim berners-lee's post on the public alt.hypertext newsgroup is now considered as the official start of the world wide web as a public project. the http protocol used in those early phases was very simple, later dubbed http/0.9, and sometimes as the one-line protocol. http/0.9 – the one-line protocol the initial version of http had no version number; it has been later called 0.9 to differentiate it from the later versions. http/0.9...
...ions 1.0, 1.1, 1.2, and 1.3 appearing successfully to close vulnerabilities. during the same time, the need for an encrypted transport layer raised: the web left the relative trustiness of a mostly academic network, to a jungle where advertisers, random individuals or criminals compete to get as much private information about people, try to impersonate them or even to replace data transmitted by altered ones. as the applications built over http became more and more powerful, having access to more and more private information like address books, e-mail, or the geographic position of the user, the need to have tls became ubiquitous even outside the e-commerce use case. using http for complex applications the original vision of tim berners-lee for the web wasn't a read-only medium. he envisio...
...h more data is transmitted over significantly more http requests. http/1.1 connections need requests sent in the correct order. theoretically, several parallel connections could be used (typically between 5 and 8), bringing considerable overhead and complexity. for example, http pipelining has emerged as a resource burden in web development. in the first half of the 2010s, google demonstrated an alternative way of exchanging data between client and server, by implementing an experimental protocol spdy. this amassed interest from developers working on both browsers and servers. defining an increase in responsiveness, and solving the problem of duplication of data transmitted, spdy served as the foundations of the http/2 protocol. the http/2 protocol has several prime differences from the htt...
...And 2 more matches

Browser detection using the user agent - HTTP
on't yet support, and you want to send those users to an older web site with fewer features but that you know will work. this is the worst reason to use user agent detection because odds are eventually all the other browsers will catch up. in addition, it is not practical to test every one of the less popular browsers and test for them. you should never do user agent sniffing. there is always the alternative of doing feature detection instead. do you want to provide different html depending on which browser is being used? this is usually a bad practice, but there are some cases in which this is necessary. in these cases, you should first analyze your situation to be sure it's really necessary. can you prevent it by adding some non-semantic <div> or <span> elements? the difficulty of succ...
...really after. people use user agent sniffing to detect if the users' device is touch-friendly and has a small screen so they can optimize their website accordingly. while user agent sniffing can sometimes detect these, not all devices are the same: some mobile devices have big screen sizes, some desktops have a small touchscreen, some people use smart tv's which are an entirely different ballgame altogether, and some people can dynamically change the width and height of their screen by flipping their tablet on its side! so, user agent sniffing is definitely not the way to go. thankfully, there are much better alternatives. use navigator.maxtouchpoints to detect if the user's device has a touchscreen. then, default back to checking the user agent screen only if (!("maxtouchpoints" in navigator...
...e desktop version. rather, try to have fewer columns of information in a longer page on smaller screens while having more columns with a shorter page on larger screen sizes. this effect can be easily achieved using css flexboxes, sometimes with floats as a partial fallback. also try to move less relevant/important information down to the bottom and group the page's content together meaningfully. although it is off-topic, perhaps the following detailed example might give you insights and ideas that persuade you to forgo user agent sniffing. let us imagine a page composed of boxes of information; each box is about a different feline breed or canine breed. each box has an image, an overview, and a historical funfact. the pictures are kept to a maximum reasonable size even on large screens. for ...
...And 2 more matches

Critical rendering path - Web Performance
of steps the browser goes through to convert the html, css, and javascript into pixels on the screen. optimizing the critical render path improves render performance.the critical rendering path includes the document object model (dom), css object model (cssom), render tree and layout. the document object model is created as the html is parsed. the html may request javascript, which may, in turn, alter the dom. the html includes or makes requests for styles, which in turn builds the css object model. the browser engine combines the two to create the render tree. layout determines the size and location of everything on the page. once layout is determined, pixels are painted to the screen. optimizing the critical rendering path improves the time to first render. understanding and optimizing th...
... app starts with an html request. the server returns the html - response headers and data. the browser then begins parsing the html, converting the received bytes to the dom tree. the browser initiates requests every time it finds links to external resources, be they stylesheets, scripts, or embedded image references. some requests are blocking, which means the parsing of the rest of the html is halted until the imported asset is handled. the browser continues to parse the html making requests and building the dom, until it gets to the end, at which point it constructs the css object model. with the dom and cssom complete, the browser builds the render tree, computing the styles for all the visible content. after the render tree is complete, layout occurs, defining the location and size of al...
...n with later parsing should not be rendered to the screen. in terms of selector performance, less specific selectors are faster than more specific ones. for example, .foo {} is faster than .bar .foo {} because when the browser finds .foo, in the second scenario, it has to walk up the dom to check if .foo has an ancestor .bar. the more specific tag requires more work from the browser, but this penalty is not likely worth optimizing. if you measure the time it takes to parse css, you'll be amazed at how fast browsers truly are. the more specific rule is more expensive because it has to traverse more nodes in the dom tree - but that extra expense is generally minimal. measure first. optimize as needed. specificity is likely not your low hanging fruit. when it comes to css, selector performance...
...And 2 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
we also have a mid-width layout, which is aimed at working well on tablets and narrow laptop screens. this is created by all of the css inside the first media query: @media all and (max-width: 1024px) { x-card:nth-child(1), x-card:nth-child(2) { width: 50%; } x-card:nth-child(3) { width: 100%; clear: left; } x-card:nth-child(3) img { width: 20%; } } so here we're altering the widths of the columns and removing the float of the third column (and adding clearing to guard against any float funny business). we've also altered the width of the images inside the third container (no longer a column — this is the gallery) so that now you get five per line (it was previously three per line). narrow screen/mobile layout we then have a narrow screen layout, design...
...on a cinema display), the layout stops getting wider, and just centers in the space available. this is pretty simple to achieve. you could use a min-width media query to fix the <body> width at a certain point: @media all and (min-width: 1400px) { body { width: 1400px; margin: 0 auto; } } but it's actually easier to just set the following rule instead, and get rid of the media query altogether: body { max-width: 1400px; margin: 0 auto; } orientation fail we also came across some problems with orientation: the mobile-app layout of our example app is designed for portrait orientation, and looks terrible when viewed on a device in landscape orientation. to fix this, we added in a media query that only applies its contents to the markup when device is viewed in landscape orie...
... removes the top margin from the x-card contents so you don't end up with an unsightly gap at the top of the screen in landscape mode. changes the sizing of the control buttons (e.g. take picture, delete photo) so they don't look too big and sit properly on the screen. this results in the following layout: note:...
...And 2 more matches

x - SVG: Scalable Vector Graphics
the x attribute defines a x-axis coordinate in the user coordinate system. ...
... value list of <length> default value none animatable yes feblend for <feblend>, x defines the minimum x coordinate for the rendering area of the primitive. value <length> | <percentage> ...
... value list of <length> default value none animatable yes feblend for <feblend>, x defines the minimum x coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% a...
...And 2 more matches

y - SVG: Scalable Vector Graphics
the y attribute defines a y-axis coordinate in the user coordinate system. ...
... value list of <length> default value none animatable yes feblend for <feblend>, y defines the minimum y coordinate for the rendering area of the primitive. value <length> | <percentage> ...
... value list of <length> default value none animatable yes feblend for <feblend>, y defines the minimum y coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% a...
...And 2 more matches

SVG documentation index - SVG: Scalable Vector Graphics
acing attribute specifies spacing behavior between words. 250 writing-mode needsexample, svg, svg attribute the writing-mode attribute specifies whether the initial inline-progression-direction for a <text> element shall be left-to-right, right-to-left, or top-to-bottom. the writing-mode attribute applies only to <text> elements; the attribute is ignored for <tspan>, <tref>, <altglyph> and <textpath> sub-elements. (note that the inline-progression-direction can change within a <text> element due to the unicode bidirectional algorithm and properties direction and unicode-bidi.) 251 x svg, svg attribute the x attribute defines a x-axis coordinate in the user coordinate system. 252 x-height deprecated, svg, svg attribute the x-height...
...o the construction, drawing, and layout of vector images and diagrams. here you'll find reference documentation for each of the svg elements. 294 <a> element, reference, svg, svg container the <a> svg element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other url. it is very similar to html’s <a> element. ...
...'ll find reference documentation for each of the svg elements. 294 <a> element, reference, svg, svg container the <a> svg element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other url. it is very similar to html’s <a> element. ...
...And 2 more matches

SDK and XUL Comparison - Archive of obsolete content
advantages of the sdk simplicity the sdk provides high-level javascript apis to simplify many common tasks in add-on development, and tool support which greatly simplifies the process of developing, testing, and packaging an add-on. compatibility although we can't promise we'll never break a high-level api, maintaining compatibility across firefox versions is a top priority for us. we've designed the apis to be forward-compatible with the new multiple process architecture (codenamed electrolysis) planned for firefox. we also expect to support both desktop and mobile firefox using a single edition of the sdk: so you'll be able to write one extension and have it work on both products. security if they're not carefu...
... with the new multiple process architecture (codenamed electrolysis) planned for firefox. we also expect to support both desktop and mobile firefox using a single edition of the sdk: so you'll be able to write one extension and have it work on both products. security if they're not carefully designed, firefox add-ons can open the browser to attack by malicious web pages. ...
... security if they're not carefully designed, firefox add-ons can open the browser to attack by malicious web pages. although it's possible to write insecure add-ons using the sdk, it's not as easy, and the damage that a compromised add-on can do is usually more limited. restartlessness add-ons built with the sdk can be installed without having to restart firefox. although you can write traditional add-ons that are restartless, you can't use xul overlays in them, so most traditional add-ons would have to be substantially rewritten anyway. user experience best practices the ui components available in the sdk are designed to align with the usability guidelines for firefox, giving your users a better, more consistent experience. ...
...firefox functionality via xpcom. the sdk's supported apis expose a relatively small set of this functionality. low-level apis and third-party modules that's not the whole story. if you need more flexibility than the sdk's high-level apis provide, you can use its low-level apis to load xpcom objects directly or to manipulate the dom directly as in a traditional bootstrapped extension. alternatively, you can load third-party modules, which extend the sdk's core apis. note that by doing this you lose some of the benefits of programming with the sdk including simplicity, compatibility, and to a lesser extent security. ...

CSS3 - Archive of obsolete content
of the contextual inter-glyph spacing via the css font-kerning property. the choice of language-specific glyphs via the css font-language-override property. the choice of glyphs with specific opentype features via the css font-feature-settings property. the control of the aspect ratio to use when fallback fonts are selected via the css font-size-adjust property. the choice of alternative font faces using the css font-stretch, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, and font-variant-position properties. it also extends the related css font-variant shorthand property and introduces the @font-feature-values at-rule. the control of the automatic generation of an oblique or bold face when none are ...
... css counter styles level 3 candidate recommendation testing modules css images module level 3 candidate recommendation defines the <image> data type. extends the url() syntax to support image slices using media fragments. adds: the dppx unit to the <resolution> data type. the image() function as a more flexible alternative to url() to define an image from an url. at risk: due to insufficient browser support, standardization of the image() function may be postponed to the next iteration of this module. support for linear-gradient(), repeating-linear-gradient(), radial-gradient() and repeating-radial-gradient(). the ability to define how a replaced element should fit in its element, using the ...
...rking draft css easing functions level 1 working draft css logical properties and values level 1 editor's draft modules in the revising phase modules that are in the revising phase are much less stable than those in the refining phase. often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. alternative syntaxes are tested and often implemented. css paged media module level 3 working draft css object model (cssom) view module working draft css intrinsic & extrinsic sizing module level 3 working draft css ruby layout module level 1 working draft css overflow module...
...() and repeating-conic-gradient() functional notation describing a new type of gradient. the image-rendering property that allow to define how resize of the object should be handled. modules in the rewriting phase modules that are in the rewriting phase are outdated and require to be rewritten. the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. alternative syntaxes are tested and often implemented. css generated content module level 3 working draft abandoned modules non-element selectors module level 1 working draft ...

The Joy of XUL - Archive of obsolete content
ation developers and their managers to xul so they can not only understand why mozilla's platform is based on it, but how they might adopt it for their own use. xul (pronounced "zool") is mozilla's xml-based user interface language that lets you build feature rich cross-platform applications that can run connected to or disconnected from the internet. these applications are easily customized with alternative text, graphics, and layout so they can be readily branded or localized for various markets. web developers already familiar with dynamic html (dhtml) will learn xul quickly and can start building applications right away. also described are some reasons application developers might choose to leverage xul and mozilla technology for building cross-platform applications. this same investigat...
...e often satisfied by different people. xul provides a clear separation among the client application definition and programmatic logic ("content" consisting of xul, xbl, and javascript), presentation ("skin" consisting of css and images), and language-specific text labels ("locale" consisting of dtds and string bundles in .properties files). the layout and appearance of xul applications can be altered independently of the application definition and logic. further, the application can be localized for different languages and regions independently of its logic or presentation. this degree of separation results in applications that are easier to maintain by programmers and readily customized by designers and language translators. the work flow of these interdependent activities is more e...
...ecial features for customers with a completely independent code base. this leads to an overall solution that is easier and less costly to maintain in the long run. there is an additional benefit to overlays for software developers who intend to add features to mozilla that they wish to keep proprietary. the netscape public license (npl) and mozilla public license (mpl) require developers who alter original work (source code files that are provided with mozilla) to release the source code for these changes to their customers. overlays can be used to add features to mozilla without contaminating the original open source code with proprietary alterations. xpcom/xpconnect xpcom and xpconnect are complementary technologies that enable the integration of external libraries with...
...latforms is trivial.the calendar originated as a linux application with no consideration given to porting it to other platforms. but later, when the original developer (oeone corporation) contributed the source to the mozilla project, the calendar had to be migrated to the windows and macintosh platforms. the ui for the xul application required zero porting effort because it worked with almost no alteration on both new platforms. similarly, since the ui code is written in javascript, the interaction logic worked with no effort. however, since the libical library is written in c, more significant effort was required to migrate this component to the other platforms. fortunately, an implementation of the libical library was already available for macintosh so, with the cross platform nature of x...

Templates - Archive of obsolete content
method in which we create elements from data supplied by rdf, either from an rdf file or from an internal datasource. numerous datasources are provided with mozilla such as bookmarks, history and mail messages. more details on these will be provided in the later section. usually, elements such as treeitems and menuitems will be populated with data. however, you can use other elements if you want although they are more useful for specialized cases. nevertheless, we'll start with these other elements because trees and menus require more code. to allow the creation of elements based on rdf data, you need to provide a simple template which will be duplicated for each element that is created. essentially, you provide only the first element and the remaining elements are constructed based on the ...
...cates where in the datasource you would like to retrieve data from. in the case of the bookmarks, the value nc:bookmarksroot is used to indicate the root of the bookmarks hierarchy. other values that you can use will depend on the datasource you are using. if you are using your own rdf file as a datasource, the value will usually correspond to the value of an about attribute on an rdf bag, seq or alt element. inside the template by adding these two attributes to the box above, it allows the generation of elements using the template. however, the elements inside the template need to be declared differently. you may notice in the example above that the button has a uri attribute and an unusual value for the label attribute. an attribute value inside the template that begins with 'rdf:' indic...
...dicates that the element is expected to be built from a template. note that it isn't the template tag that determines whether content is built, it is the datasources attribute. when this attribute is present, an object called a builder is added to the element which is responsible for building the content from the template. in javascript you can access the builder object with the builder property, although usually you would only need to do this to have the builder regenerate the content in situations where it is not done automatically. there are two different types of builders. the first is a content builder and is used in most situations, and the other is a tree builder which is used only for trees. content builder the content builder takes the content inside the template element and dupli...
... inside the template element and duplicates it for each row. for instance, if the user had ten bookmarks in the example above, ten label elements would be created and added as children of the vbox element. if you were to use dom functions to traverse the tree, you will find these elements there and can query their properties. these elements get displayed, but the template itself is not displayed, although it still exists in the document tree. in addition, the id of each of the labels will be set to the rdf resource for that row. the content builder always starts at the place where uri="rdf:*" is specfied. if the uri attribute is placed on an element lower in the element tree, the elements outside are only created once. in the example below, one hbox will be created and it will be filled with...

Introduction to SSL - Archive of obsolete content
ent and a server to be encrypted by the sending software and decrypted by the receiving software, thus providing a high degree of confidentiality. confidentiality is important for both parties to any private transaction. in addition, all data sent over an encrypted ssl connection is protected with a mechanism for detecting tampering-that is, for automatically determining whether the data has been altered in transit. the ssl protocol includes two sub-protocols: the ssl record protocol and the ssl handshake protocol. the ssl record protocol defines the format used to transmit data. the ssl handshake protocol involves using the ssl record protocol to exchange a series of messages between an ssl-enabled server and an ssl-enabled client when they first establish an ssl connection. this exchange ...
...ndshake", the server sends the client a certificate to authenticate itself. the client uses the certificate in step 3 to authenticate the identity the certificate claims to represent. to authenticate the binding between a public key and the server identified by the certificate that contains the public key, an ssl-enabled client must receive a "yes" answer to the four questions shown in figure 2. ...
...m that ca and proceeds. at this point, the client has determined that the server certificate is valid. it is the client's responsibility to take step 4 before step 5. does the domain name in the server's certificate match the domain name of the server itself? this step confirms that the server is actually located at the same network address specified by the domain name in the server certificate. although step 4 is not technically part of the ssl protocol, it provides the only protection against a form of security attack known as "man in the middle." clients must perform this step and must refuse to authenticate the server or establish a connection if the domain names don't match. if the server's actual domain name matches the domain name in the server certificate, the client goes on to step ...
...nt and server. the hash of the data is then encrypted with the private key that corresponds to the public key in the certificate being presented to the server. to authenticate the binding between the public key and the person or other entity identified by the certificate that contains the public key, an ssl-enabled server must receive a "yes" answer to the first four questions shown in figure 3. although the fifth question is not part of the ssl protocol, red hat servers can be configured to support this requirement to take advantage of the user's entry in an ldap directory as part of the authentication process. an ssl-enabled server goes through these steps to authenticate a user's identity: does the user's public key validate the user's digital signature? the server checks that the u...

Responsive design - Learn web development
xt in the early days of web design, pages were built to target a particular screen size. if the user had a larger or smaller screen than the designer expected, results ranged from unwanted scrollbars to overly long line lengths, and poor use of space. as more diverse screen sizes became available, the concept of responsive web design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. it is an idea that changed the way we design for a multi-device web, and in this article, we'll help you understand the main techniques you need to know to master it. prerequisites: html basics (study introduction to html), and an idea of how css works (study css first steps and css building blocks.) ...
... it, but not grow larger and become pixellated if the column becomes wider than the image. the third key component was the media query. media queries enable the type of layout switch that cameron adams had previously explored using javascript, using only css. rather than having one layout for all screen sizes, the layout could be changed. sidebars could be repositioned for the smaller screen, or alternate navigation could be displayed. it is important to understand that responsive web design isn't a separate technology — it is a term used to describe an approach to web design or a set of best practices, used to create a layout that can respond to the device being used to view the content. in marcotte's original exploration this meant flexible grids (using floats) and media queries, howev...
... be downloading an image several times the size of what they actually see in the browser window. in addition, you may not want the same image aspect ratio on mobile as on desktop. for example, it might be nice to have a square image for mobile, but show the same scene as a landscape image on desktop. or, acknowledging the smaller size of an image on mobile you might want to show a different image altogether, one which is more easily understood at a small screen size. these things can't be achieved by simply scaling down an image. responsive images, using the <picture> element and the <img> srcset and sizes attributes solve both of these problems. you can provide multiple sizes along with "hints" (meta data that describes the screen size and resolution the image is best suited for), and the b...
... the layout goes to the two column version. on mobile the heading is smaller: on desktop, however, we see the larger heading size: note: see this example in action: example, source code. as this approach to typography shows, you do not need to restrict media queries to only changing the layout of the page. they can be used to tweak any element to make it more usable or attractive at alternate screen sizes. using viewport units for responsive typography an interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport. h1 { font-size: 6vw; } the problem with doing the above is that the user loses the abil...

What is CSS? - Learn web development
{ color: black; } you will find that you quickly learn some values, whereas others you will need to look up. the individual property pages on mdn give you a quick way to look up properties and their values when you forget, or want to know what else you can use as a value. note: you can find links to all the css property pages (along with other css features) listed on the mdn css reference. alternatively, you should get used to searching for "mdn css-feature-name" in your favourite search engine whenever you need to find out more information about a css feature. for example, try searching for "mdn color" and "mdn font-size"! css modules as there are so many things that you could style using css, the language is broken down into modules. you'll see reference to these modules as you ex...
...droid full support 1.0system-uichrome full support 56edge full support 79firefox no support no no support no full support 43notes alternate name notes supported on macos only.alternate name uses the non-standard name: -apple-systemie no support noopera full support 43safari full support 9notes alternate name full support 9notes alternate name notes s...
... on macos only.alternate name uses the non-standard name: -apple-systemie no support noopera full support 43safari full support 9notes alternate name full support 9notes alternate name notes supported since macos 10.11.alternate name uses the non-standard name: -apple-systemwebview android full support 56chrome android full support 56firefox android no support noopera android full support 43safari ios full support ...
...on-standard name: -apple-systemwebview android full support 56chrome android full support 56firefox android no support noopera android full support 43safari ios full support 9alternate name full support 9alternate name alternate name uses the non-standard name: -apple-systemsamsung internet android full support 6.0legend full support full support no support ...

How can we design for all types of users? - Learn web development
tra easy to read the text, to help visually-impaired people and people using their phones on the street. the w3c defines a good color mix with an algorithm that calculates luminosity ratio between foreground and background. the calculation may seem pretty complicated, but we can rely on tools to do the job for us. let's download and install the paciello group's colour contrast analyser. note: alternatively you can find a number of contrast checkers online, such as webaim's color contrast checker. we suggest a local checker because it comes packaged with an on-screen color picker to find out a color value. for instance, let's test the colors on this page and see how we fare in the colour contrast analyser: the luminosity contrast ratio between text and background is 8.30:1, which exce...
...with class container. we can style the div either to set its width (using the width property) or its maximum width so that it never gets too large (using the max-width property). if you want an elastic/responsive website, and you don't know what the browser's default width is, you can use the max-width property to allow up to 70 characters per line and no more: div.container { max-width:70em; } alternative content for images, audio, and video websites often include stuff besides plain text. images images can be either decorative or informative, but there's no guarantee that your users can see them. for example, visually impaired users rely on a screen reader, which can only handle text. your readers may be using a very strict intranet that blocks images originating from a cdn. your ...
...which can only handle text. your readers may be using a very strict intranet that blocks images originating from a cdn. your readers may have disabled images to save bandwidth, especially on mobile devices (see below). decorative images they're just for decoration and don't convey any real information. they could most often be replaced by a background image. make sure they feature an empty alt attribute: <img src="deco.gif" alt=""> so they don't clog up the text. informative images they are used to convey information, hence their name. they can, for instance, feature a graph, or show a person's gesture, or any other information. at minimum, you must provide a relevant alt attribute. if the image can be described succinctly, you can provide an alt attribute and nothing more. if the ...
... same data), or resort to a longdesc attribute. this attribute's value is a url pointing towards a resource explicitly describing in detail the image's content. note: the use and even the existence of longdesc has been debated for quite some time. please refer to the w3c's image description extension (longdesc) for the full explanation and thorough examples. audio/video you must also provide alternatives to multimedia content. subtitling/close-captioning you should include captions in your video to cater to visitors who can't hear the audio. some users have hearing challenges, lack functioning speakers, or work in a noisy environment (like on the train). transcript subtitles only work if somebody watches the video. many users don't have time, or lack the proper plugin or codec. add...

How to build custom form controls - Learn web development
x design. if you want to learn more about this topic, you should check out the following helpful resources: uxmatters.com uxdesign.com the ux design section of smashingmagazine note: also, in most systems there is a way to open the <select> element with the keyboard to look at all the available choices (this is the same as clicking the <select> element with a mouse). this is achieved with alt + down on windows. we didn't implement this in our example, but it would be easy to do so, as the mechanism has already been implemented for the click event. defining the html structure and (some) semantics now that the control's basic functionality has been decided upon, it's time to start building it. the first step is to define its html structure and to give it some basic semantics. here i...
... check out the final source code if you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. this is an exercise you can try to perform. two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. building an object to share that context would be wise. an alternative approach: using radio buttons in the above example, we reinvented a <select> element using non-semantic html, css, and javascript. this select was selecting one option from a limited number of options, which is the same functionality of a same-named group of radio buttons. we could therefore reinvent this using radio buttons instead; let's look at this option. we can start with a compl...
...er is on the last button takes them to the first button; it doesn't stop at the top and bottom of the option list like a <select> does. we'll leave adding this missing functionality as a reader exercise. conclusion we have seen all the basics of building a custom form control, but as you can see it's not trivial to do. before creating your own customized control, consider whether html provides alternative elements that can be used to adequately support your requirements. if you do need to create a custom control, it is often easier to rely on third-party libraries instead of building your own. but, if you do create your own, modify existing elements, or use a framework to implement a pre-baked control, remember that creating a usable and accessible form control is more complicated than it ...
...stead of building your own. but, if you do create your own, modify existing elements, or use a framework to implement a pre-baked control, remember that creating a usable and accessible form control is more complicated than it looks. here are a few libraries you should consider before coding your own: jquery ui axe accessible custom select dropdowns msdropdown nice forms if you do create alternative controls via radio buttons, your own javascript, or with a 3rd party library, ensure it is accessible and feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the web standards they use vary. have fun! ...

Document and website structure - Learn web development
all rights reversed.</p> </footer> </body> </html> take some time...
...better semantic block element to use, or don't want to add any specific meaning. for example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site: <div class="shopping-cart"> <h2>shopping cart</h2> <ul> <li> <p><a href=""><strong>silver earrings</strong></a>: $99.95.</p> <img src="../products/3333-0985/thumb.png" alt="silver earrings"> </li> <li> ... </li> </ul> <p>total cost: $237.89</p> </div> this isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). it doesn't even particularly warrant using a <section>, as it isn't part of the main content of the page. so a <div> is fine in this case. we've included a headin...
...tic change in the text (such as a change in topic or scene). visually it just looks like a horizontal line. as an example: <p>ron was backed into a corner by the marauding netherbeasts. scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p> <hr> <p>meanwhile, harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. he read it hazily and sighed; "better get back to work then", he mused.</p> would render like this: planning a simple website once you've planned out the structure of a simple webpage, the next logical step is to try to work out what content...
... live together on different pages. this is very similar to a technique called card sorting. now try to sketch a rough sitemap — have a bubble for each page on your site, and draw lines to show the typical workflow between pages. the homepage will probably be in the center, and link to most if not all of the others; most of the pages in a small site should be available from the main navigation, although there are exceptions. you might also want to include notes about how things might be presented. active learning: create your own sitemap try carrying out the above exercise for a website of your own creation. what would you like to make a site about? note: save your work somewhere; you might need it later on. test your skills! you've reached the end of this article, but can you remem...

Drawing graphics - Learn web development
canvas. <canvas width="320" height="240"> <p>your browser doesn't support canvas. boo hoo!</p> </canvas> of course, the above message is really unhelpful! in a real example you'd want to relate the fallback content to the canvas content. for example, if you were rendering a constantly updating graph of stock prices, the fallback content could be a static image of the latest stock graph, with alt text saying what the prices are in text. creating and sizing our canvas let's start by creating our own canvas that we draw future experiments on to. first make a local copy of our 0_canvas_start.html file, and open it in your text editor. add the following code into it, just below the opening <body> tag: <canvas class="mycanvas"> <p>add suitable fallback here.</p> </canvas> ...
...anvas, because once it's drawn, it's part of the canvas, and is not an individual accessible element or object. instead, you have to erase and redraw, either by erasing the entire frame and redrawing everything, or by having code that knows exactly what parts need to be erased and only erases and redraws the minimum area of the canvas necessary. optimizing animation of graphics is an entire specialty of programming, with lots of clever techniques available. those are beyond what we need for our example, though! in general, the process of doing a canvas animation involves the following steps: clear the canvas contents (e.g. with fillrect() or clearrect()). save state (if necessary) using save() — this is needed when you want to save settings you've updated on the canvas before continui...
...ut out of the source image, with the x value as sprite multiplied by 102 (where sprite is the sprite number between 0 and 5) and the y value always 0. parameters 4 and 5 specify the size of the slice to cut out — 102 pixels by 148 pixels. parameters 6 and 7 specify the top-left corner of the box into which to draw the slice on the canvas — the x position is 0 + posx, meaning that we can alter the drawing position by altering the posx value. parameters 8 and 9 specify the size of the image on the canvas. we just want to keep its original size, so we specify 102 and 148 as the width and height. now we'll alter the sprite value after each draw — well, after some of them anyway. add the following block to the bottom of the draw() function: if (posx % 13 === 0) { i...
...re, shading: three.flatshading } ); cube = new three.mesh(geometry, material); scene.add(cube); draw(); }); there's a bit more to take in here, so let's go through it in stages: we first create a cube global variable so we can access our cube from anywhere in the code. next, we create a new textureloader object, then call load() on it. load() takes two parameters in this case (although it can take more): the texture we want to load (our png), and a function that will run when the texture has loaded. inside this function we use properties of the texture object to specify that we want a 2 x 2 repeat of the image wrapped around all sides of the cube. next, we create a new boxgeometry object and a new meshlambertmaterial object, and bring them together in a mesh to create o...

Command line crash course - Learn web development
a command line and a terminal? generally you'll find these two terms used interchangeably. technically, a terminal is software that starts and connects to a shell. a shell is your session and session environment (where things like the prompt and shortcuts might be customised). the command line is the literal line where you enter commands and the cursor blinks. do you have to use the terminal? although there's a great wealth of tools available from the command line, if you're using tools like visual studio code there's also a mass of extensions that can be used as a proxy to using terminal commands without needing to use the terminal directly. however, you won’t find a code editor extension for everything you want to do — you’ll have to get some experience with the terminal eventuall...
...for that, we'll add awk to the mix (which is a programming language akin to javascript or ruby or python, just a lot older!). try running this: curl /docs/web/api/fetch -l -i | grep location | awk '{ print...
...plementary npm-centric tool called npx), which offers a gateway to installing additional command line tools. node.js and npm work the same across all systems: macos, windows, and linux. install npm on your system now, by going to the url above and downloading an running a node.js installer appropriate to your operating system. if prompted, make sure to include npm as part of the installation. although we'll look at a number of different tools in the next article onwards, we'll cut our teeth on prettier. prettier is an opinionated code formatter that has "few options". fewer options tends to mean simpler. given how tooling can sometimes get out of hand in terms of complexity, "few options" can be very appealing. where to install our cli tools? before we dive into installing prettier, the...
...on't have access to these tools, for example if you are sharing the codebase over a tool like git. uses less disk space related to the previous point, it makes project code harder to replicate (if you install your tools locally, they can be set up as dependencies and installed with npm install). always the same version feels like any other unix command although the cons list is shorter, the negative impact of global installing is potentially much larger than the benefits. however, for now we'll err on the side of simplicity and install globally to keep things simple. we'll look more at local installs and why they're good in the next article. installing prettier for this article we will install prettier as a global command line utility. prettier ...

Accessibility Features in Firefox
s amazing features: browse with caret allows users to select arbitrary content with the keyboard and move through content as if inside a read-only editor. this allows copying arbitrary pieces of text to the clipboard. the f7 key toggles this feature on/off. tabbed browsing helps keyboard users by putting all of the browsed documents in one firefox application window rather than cluttering the alt+tab order which makes keyboard navigation within the entire windows os much simpler. both history and bookmarks can be searched with a "quick search" field that quickly narrows the list down via a substring search. bookmarks can have a keyword assigned to them which can be typed into the address bar to bring up the bookmark. a "smart keywords" feature enhances this even further by allowing cust...
... up the word "punditry" in an online dictionary. these smart keywords can be setup via the context menu for the search field on the desired website. integrated web search via ctrl+k is much faster to use than first going to the search tool's web site. custom searches can be added to this quick search bar and the user can switch between them by choosing from a drop down available via the standard alt+down arrow key combination. the built-in text zoom feature can be accessed with the ctrl+plus and ctrl+minus hotkeys. the accessibility extension may be installed on top of firefox, allowing keyboard access to document structure. the find bar allows for quick navigation to links and text searching without opening a separate dialog -- this allows more convenient use by screen magnification user...
...right-click contextual menus, change the status bar text, etc. you can furthermore control javascript capabilities to remove scrollbars, toolbars or system buttons like minimize, close and maximize by editing the about:config related properties or by editing accordingly the user.js file as explained in this "disable other javascript window features" document. moving back and forward by web page (alt+left and alt+right) occurs near-instantaneously the download manager provides keyboard access to all of your recent downloads operating system "look and feel" support: mozilla's default skin will match the colors and sizes currently being used in your desktop. mozilla can follow the system appearance whether it's high or low contrast, with large or small fonts. text files used in configuration...
...ng accessibility problems in some web sites. customize your experience! many users are finding the true greatness of firefox lies in support for third party extensions. extensions are small add-ons which can change your browser experience as you see fit. extensions can easily be installed or removed with the extension manager in the tools menu. here are some examples of accessible extensions, although there are hundreds more to try (thank you to the gw micro knowledge base for some of this information): adblock plus removes ads (and other objects, like banners) from web pages greasemonkey lets you add bits of javascript ("user scripts") to any web page to change its behavior. in much the same way that user css lets you take control of a web page's style, user scripts let you easily co...

CSUN Firefox Materials
links to get there. browse with caret allows users to select arbitrary content with the keyboard and move through content as if inside a read-only editor. this allows copying arbitrary pieces of text to the clipboard. the f7 key toggles this feature on/off. tabbed browsing helps keyboard users by putting all of the browsed documents in one firefox application window rather than cluttering the alt+tab order which makes keyboard navigation within the entire windows os much simpler. both history and bookmarks can be searched with a "quick search" field that quickly narrows the list down via a substring search. bookmarks can have a keyword assigned to them which can be typed into the address bar to bring up the bookmark. a "smart keywords" feature enhances this even further by allowing cu...
...up the word "punditry" in an online dictionary. these smart keywords can be setup via the context menu for the search field on the desired website. integrated web search via ctrl+k is much faster to use than first going to the search tool's web site. custom searches can be added to this quick search bar and the user can switch between them by choosing from a drop down available via the standard alt+down arrow key combination. the built-in text zoom feature can be accessed with the ctrl+plus and ctrl+minus hotkeys. the accessibility extension may be installed on top of firefox, allowing keyboard access to document structure. caret browsing allows you to move through web content one letter a time. you can even select web content and copy it to the clipboard. -- all with the keyboard m...
...uilt-in text zoom feature can be accessed with the ctrl+plus and ctrl+minus hotkeys. the accessibility extension may be installed on top of firefox, allowing keyboard access to document structure. caret browsing allows you to move through web content one letter a time. you can even select web content and copy it to the clipboard. -- all with the keyboard moving back and forward by web page (alt+left and alt+right) occurs near-instantaneously the download manager provides keyboard access to all of your recent downloads customize your experience! many users are finding the true greatness of firefox lies in support for third party extensions. extensions are small add-ons which can change your browser experience as you see fit. extensions can easily be installed or removed with the exten...
...keyboard access to all of your recent downloads customize your experience! many users are finding the true greatness of firefox lies in support for third party extensions. extensions are small add-ons which can change your browser experience as you see fit. extensions can easily be installed or removed with the extension manager in the tools menu. here are some examples of accessible extensions, although there are hundreds more to try (thank you to the gw micro knowledge base for some of this information): adblock plus removes ads (and other objects, like banners) from web pages greasemonkey lets you add bits of javascript ("user scripts") to any web page to change its behavior. in much the same way that user css lets you take control of a web page's style, user scripts let you easily c...

Theme concepts
themes developed using the webextensions api in firefox enable you to change the look of the browser by adding images to the header area of the firefox browser; this is the area behind the menu bar, toolbars, address bar, search bar, and tab strip. these theme options can be implemented as static themes (although the theme images themselves may be animated) or as dynamic themes created in a browser extension. if you have a lightweight theme it will be converted to this new theme format automatically before lightweight themes are deprecated. you do not need to port your theme. however, please feel free to update your themes to use any of the new features described here. static themes static themes are specified using the same resources as a browser extension: a manifest.json file to def...
...tter approach is to use a narrower image with a transparent left edge so that it fades to the background color. for example, we could use this image combined with a complementary background color, to create this effect in the header see details about this theme in the themes example weta_fade. obviously, you can still provide a single wide image if you prefer. multiple image themes as an alternative to creating a single image theme, you have the option to use multiple images. these images can be individually anchored to locations within the header, with the option to apply tiling to each image. depending on the effect you want to create you may need to suppress the mandatory "theme_frame": image with an empty or transparent image. you would use an empty or transparent image if, for ...
...: "empty.png", "additional_backgrounds": [ "weta_for_tiling.png"] }, and the images tiling with: "properties": { "additional_backgrounds_alignment": [ "top" ], "additional_backgrounds_tiling": [ "repeat" ] }, full details of how to setup this theme can be found in the themes example weta_tiled. full detais of the alignment and tiling options can be found in the "theme" key description. ...
... using the theme generator for self-hosted static themes, a new version can be updated through amo by following the above steps or be handled by you through an updateurl or external application updates. a new version will need to be signed through the developer hub. if you are uploading a packaged file, the version number must be higher than the current version number dynamic themes as an alternative to defining a static theme, you can use the theme api to control the theme used in firefox from within a browser extension. there are a couple of use cases for this option: to bundle a theme with a browser extension, as an added extra. create a dynamic theme that changes under programmatic control. and, obviously, you can combine the two and bundle a programmatically controlled them...

Eclipse CDT
introduction eclipse cdt (c/c++ development tools) is an open-source ide for c and c++ development with advanced code assistance (inheritance/call graph explorer, jump to definition, refactoring, autocomplete, syntax highlighting, and so on). system requirements eclipse will use a lot of memory to fully index the mozilla source tree to provide code assistance features (easily 4 gb of ram, although this will drop to just over 1 gb if you restart after indexing is complete). therefore, it is not recommended for use if your machine only has 4 gb of ram. installing eclipse regarding llvm4eclipsecdt, do not install or select this toolchain for mozilla development. this plugin is intended mainly for managed projects but we use an unmanaged project for mozilla (since it has its own build ...
...h more frequently since the source changes more frequently. in principle, you can set the index to rebuild automatically by opening the workspace preferences, selecting "c/c++ > indexer", and reenabling "automatically update the index". however, you may find this too disruptive, since re-indexing will then happen very frequently and code assistance can be broken while the index is rebuilding. the alternative is to leave that option disabled and update the index manually as necessary. to update the index manually, use the context menu in the project explorer tab on the left side of the window. to rebuild for changes in an individual directory (for example, to take account of some changes that you yourself made) select "index > freshen all files" on that directory. to rebuild the entire index (...
...t to work you also either need to find the existing bindings for that key combination (using the bindings column to sort by key combination helps with this) and remove them, or else you need to make your binding very specific by setting the "when" field to "c/c++ editor" instead of the more general "editing text". opening files you can quickly open a file by name using cmd-shift-r/ctrl-shift-r. although eclipse doesn't do fuzzy matching when you type a file name, it does allow you to use wildcards. to quickly switch between a source file and its header file, use ctrl-tab. to quickly switch to a recently viewed document use cmd-f6/ctrl-f6. if you want to change this awkward key binding, the command you need to rebind is "next editor". to show a filterable list of open documents (similar t...
... the caller in nsobjectframe.cpp because that caller is wrapped in "#ifndef xp_macosx". just something to keep in mind. ;-) to jump to the definition of a symbol (or the declaration of a symbol if already at the definition), hover over the symbol, hold down the ctrl/cmd key, move the mouse slightly to linkify the symbol, then click on it. (having to move the mouse slightly is eclipse bug 26873). alternately, you can jump to the definition of the symbol under the cursor by pressing f3. to do a c++ symbol search select "search > c/c++" from the menubar, or use ctrl-h and select the "c/c++" search tab. to quickly find the definition of an enum, class, method, etc. use ctrl-shift-t/cmd-shift-t. to get a list of autocomplete options in an editor tab, start typing the name of an identifier and ...

Obsolete Build Caveats and Tips
f mozillabuild (prior to 1.6), if you download version 7.1 of the windows 7 sdk (which is the current version available), your build will fail, often while building cairo with "ocidl.h" errors. in order to fix this issue, you need to use the latest version of mozillabuild. windows vista sdk obsolete since gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this is the sdk that mozilla-1.9.1 (firefox 3.5) builds used to be built against. features that depend on this sdk include: windows vista parental controls file associations and application registration on vista and above ability to display the uac shield icon in the...
...dows xp service pack 2 and .net framework 2.0 installed before installing the vista sdk. use visual studio 2008 professional. gecko 1.9.2 through 11: if you would like to use this sdk, add ac_add_options --with-windows-version=600 to your .mozconfig. windows server 2003 r2 platform sdk obsolete since gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this is your only option if you're on windows 2000. this also used to be necessary for building a default gecko 1.9.2 through 8 with visual c++ express editions (see atlbase.h for more). you can download the sdk from the microsoft download center. you need to install ...
...s available free from microsoft. visual c++ 10 is available from microsoft as part of the free visual c++ 2010 express edition. visual c++ 9 is available from microsoft as part of the free visual c++ 2008 express edition with sp1 (make sure you get this and not the one without sp1!). you do not need to install the silverlight runtime or the sql server 2008 express edition when offered. alternatively you can install the command-line compiler as part of the windows 7 sdk, but you are then expected to use the included windbg debugger. the visual c++ 8 command-line compiler is included with the vista sdk, but you are then expected to use the included windbg debugger. from configuring build options [en-us] note: starting with gecko 5.0, building firefox has become extremely simpl...
..., using a comma-separated list, such as "mk_add_options moz_co_project=browser,mail,calendar,suite,xulrunner". this setting is ignored by most mozilla project branches, which now use mercurial instead of cvs for source control. note: starting in gecko 2.0, objdir builds are enabled by default. if you do not specify a moz_objdir it will be automatically set to @topsrcdir@/obj-@config_guess@ alternatively, you can run client.mk directly from your objdir, using make -f <path_to_srcdir>/client.mk. note: starting in gecko 5.0, if you don't specify an application, --enable-application=browser is assumed, thereby building firefox. ...

Storage access policy: Block cookies from trackers
this policy protects against cross-site tracking while minimizing the site breakage associated with traditional cookie blocking. this article explains how the policy works and how you can test it. testing in firefox this cookie policy has been available in firefox since version 63. ...
...htly. the cookie policy can be enabled in other versions of firefox through the content blocking settings (these steps will vary by version; the linked documentation includes a dropdown to select the appropriate firefox version). report broken sites if you find a website broken as a result of this change, file a bug under the tracking protection component within the firefox product on bugzilla. alternatively you can report broken sites directly in firefox by clicking "report a problem" in the content blocking section of the control center (this shortcut may not be available in all versions of firefox). tracking protection explained how does firefox determine which resources are tracking resources? firefox uses the tracking protection list to determine which resources are tracking resourc...
...s to create a new broadcastchannel will throw a securityerror exception. shared worker: attempts to create a new sharedworker will throw a securityerror exception. service worker: attempts to create a new serviceworker will throw a securityerror exception. dom cache: calls to cachestorage will always reject with a securityerror. browser caches: the http cache, the image cache, and the alternative services (alt-svc) cache are all partitioned for tracking resources, such that each top-level origin will have a separate partition and tracking resources on different top-level origins will be cached separate from each other. network connections: tls sessions will not be resumed using a session ticket when an https connection is made to an embedded third-party resource that is class...
...ibility heuristics that grant storage access to third-party resources classified as trackers when a user interacts with those third parties. we do this when we expect that not granting access would cause the web page to break. we also support an initial implementation of the storage access api, through which embedded <iframe>s can request storage access by calling document.requeststorageaccess(). although both of these approaches provide the same level of storage access, we recommend third parties switch to using the storage access api in order to guarantee their access to storage. automatic storage access upon interaction in order to improve web compatibility, firefox currently includes some heuristics to grant storage access automatically to third parties that receive user interaction. th...

Application Translation with Mercurial
ry once. mozillabuild must be installed into an absolute file path without whitespaces, else it will break. file comparison program for the translation, it is recommend to use file comparison program to compare the english file (containing the new texts) with the file of your locale (which is still missing the new strings). this example uses winmerge: download and install it. a comparison of alternatives (e.g. for linux and mac os) is available on wikipedia. file and text editor for editing individual files a text editor can be a better choice than a file comparion program, e.g. because the file is new and everything has to be translated, the file is too customized to compare it to the english one, or special functionality is required (e.g. bookmarking untranslated lines). use a text e...
...han a few strings, you usually want to keep track of what has already been translated (and later if the text has been tested in the product as fitting into the available area and suiting the functionality it describes). this guide achieves this with the firefox extension scrapbook. you installed scrapbook earlier, now open it in firefox either by calling it from the firefox menu bar (press the alt key to show it if necessary) using "view" > "sidebar" > "scrapbook" or by clicking its toolbar button which you likely have to add by toolbar customization if you didn't do this before. drag the tab with the localization error showing missing and obsolete strings to the sidebar. after scrapbook has saved the web page to your local disk, click with the right mouse button on the page in the sideb...
...ime by calling hg qref again. now export the patch to the file system using the qexport command which is defined in the .hgrc file (see above): hg qexport > ../firefox-29-aboutprivatebrowsing-v1.patch this creates a patch file called firefox-29-aboutprivatebrowsing-v1.patch containing the changes in the parent directory of de-mozilla-aurora (in this example: c:\mozilla\). proof-reading and altering the patch now proof-read the patch. this detects often more than 90 percent of the possible reasons for the reviewer to not accept the patch. if you find that changes have to be done, edit the real aboutprivatebrowsing.dtd file from the localization repository, save it and follow the steps from exporting the changes as patch (see above). validating the translation in the product this guid...
...leading the translation of the locale. this information can be found on the page of the localization team. submit the bug report. now you have to wait for the review of that person. this can happen on the same day, on the next weekend or later, but should happen in the timeframe given for the localization of aurora. if the person requests changes, follow the instructions under proof-reading and altering the patch. if the reviewer accepts the changes, the patch will get uploaded and your translation will officially be added to firefox. ...

Localization and Plurals
the order in which the plural forms are listed is the same order you need to localize a word, separated by semi-colons. for example, english uses plural rule 1, and localizing plurals would require a string of "plural;plurals" where the first word is the singular form and the second is the general plural form. ...
..., 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, … plural rule #2 (2 forms) families: romanic (french, brazilian portuguese), lingala is 0 or 1: 0, 1 everything else: 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, … plural rule #3 (3 forms) families: baltic (latvian, latgalian) ends in 0: 0 ends in 1, excluding 11: 1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, … everything else: 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 15, 16, 17, 18, 19, 22, 23, 24, 25, 26, 27, 28, 29, 32, 33, 34, 35, 36, 37, 38, 39, 42, 43, 44, 45, 46, 47, 48, 49, 52, 53, … plural rule #4 (4 fo...
... 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, … everything else: 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, … plural rule #6 (3 forms) families: baltic (lithuanian) ends in 1, excluding 11: 1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, … ends in 0 or ends in 11-19: 0, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 211, 212, 213, 214, ...
...09, 210, … everything else but is 0 and ends in 00-02, excluding 0-2: 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, … ends in 00-02, excluding 0-2: 100, 101, 102, 200, 201, 202, … is 0: 0 plural rule #13 (4 forms) families: semitic (maltese) is 1: 1 is 0 or ends in 01-10, excluding 1: 0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, … ends in 11-19: 11, 12, 13, 14, 15, 16, 17, 18, 19, 111, 112, 113, 114, 115, 116, 117, 118, 119, 211, 212, 213, 214, 215, 216, 217, 218, 219, … everything else: 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32...

Mozilla Style System Documentation
the css specification describes formatting objects that correspond to elements in the content model and formatting objects that correspond to pseudo-elements. ...
... the css specification describes formatting objects that correspond to elements in the content model and formatting objects that correspond to pseudo-elements. ...
... the css specification describes formatting objects that correspond to elements in the content model and formatting objects that correspond to pseudo-elements. ...
...propriate location in the rule tree or on the style context. problems: dynamic style changes often destroy too much data. css stylesheet backend css stylesheet loading [this section needs to be written. i'm reluctant to write it both since i don't know much about it.] problems:a bunch the code needs to be rewritten to prevent stylesheets from blocking the parser and to reduce string copying (although that partly goes with parsing).] parsing stylesheet representation problems: the stylesheet representation uses way too much memory. other nsistylesheet implementations problems: some of the html style information is implemented in the content node classes. it should be consolidated so that the style system code can be moved back within the layout dll and nsistylecontext can be de-com-i...

Interval Timing
such parameters are common in nspr functions such as those used for i/o operations and operations on condition variables. nspr 2.0 provides interval times that are efficient in terms of performance and storage requirements. ...
...such parameters are common in nspr functions such as those used for i/o operations and operations on condition variables. nspr 2.0 provides interval times that are efficient in terms of performance and storage requirements. ...
...ing a time-of-day clock that gets reset due to some administrative action). the counters have no fixed epoch and have a finite period. to make use of these counters, the application must declare a point in time, the epoch, and an amount of time elapsed since that epoch, the interval. in almost all cases the epoch is defined as the value of the interval timer at the time it was sampled. ...
...orm-dependent intervals converting platform-dependent intervals to standard clock units getting the current interval and ticks per second pr_intervalnow pr_tickspersecond converting standard clock units to platform-dependent intervals pr_secondstointerval pr_millisecondstointerval pr_microsecondstointerval converting platform-dependent intervals to standard clock units pr_intervaltoseconds pr_intervaltomilliseconds pr_intervaltomicroseconds ...

sslfnc.html
or of pr_connect. if this option is off, then pr_connect configures the ssl socket to handshake as a client. if it is on, then pr_connect configures the ssl socket to handshake as a server, even though it connected as a tcp client. ssl_enable_fdx tells the ssl library whether the application will have two threads, one reading and one writing, or just one thread doing reads and writes alternately. the factory setting for this option (which is the default, unless the application changes the default) is off (pr_false), which means that the application will not do simultaneous reads and writes. an application that wishes to do sumultaneous reads and writes should set this to pr_true. in nss 2.8, the ssl_enable_fdx option only affects the behavior of non-blocking ssl socke...
...d ssl_handshake_as_server with ssl_enabledefault and ssl_enable, see ssl_optionset. the ssl protocol is defined to be able to handle simultaneous two-way communication between applications at each end of an ssl connection. two-way simultaneous communication is also known as "full duplex", abbreviated fdx. however, most application protocols that use ssl are not two-way simultaneous, but two-way alternate, also known as "half dupled"; that is, each end takes turns sending, and each end is either sending, or receiving, but not both at the same time. for an application to do full duplex, it would typically have two threads sharing the socket; one doing all the reading and the other doing all the writing. the ssl_enable_fdx option tells the ssl library whether the application will have tw...
...ch end is either sending, or receiving, but not both at the same time. for an application to do full duplex, it would typically have two threads sharing the socket; one doing all the reading and the other doing all the writing. the ssl_enable_fdx option tells the ssl library whether the application will have two threads, one reading and one writing, or just one thread doing reads and writes alternately. ssl_v2_compatible_hello tells the ssl library whether or not to send ssl3 client hello messages in ssl2-compatible format. if an ssl3 client hello message is sent to a server that only understands ssl2 and not ssl3, then the server will interpret the ssl3 client hello as a very large message, and the connection will usually seem to "hang" while the ssl2 server expects more data that ...
... behavior of pr_connect. if this option is off, then pr_connect configures the ssl socket to handshake as a client. if it is on, then pr_connect configures the ssl socket to handshake as a server, even though it connected as a tcp client. ssl_enable_fdx tells the ssl library whether the application will have two threads, one reading and one writing, or just one thread doing reads and writes alternately. the factory setting for this option (which is the default, unless the application changes the default) is off (pr_false), which means that the application will not do simultaneous reads and writes. an application that needs to do simultaneous reads and writes should set this to pr_true. in nss 2.8, the ssl_enable_fdx option only affects the behavior of nonblocking ssl sockets. ...

certutil
nd key database file. this option is provided as a special case. changing the names of the certificate and key databases is not recommended. -p phone specify a contact telephone number to include in new certificates or certificate requests. bracket this string with quotation marks if it contains spaces. -q pqgfile read an alternate pqg value from the specified file when generating dsa key pairs. if this argument is not used, certutil generates its own pqg value. pqg files are created with a separate dsa utility. -q curve-name set the elliptic curve name to use when generating ecc key pairs. a complete list of ecc curves is given in the help (-h). -r ...
... with the -v argument. -x force the key and certificate database to open in read-write mode. this is used with the -u and -l command options. -x use certutil to generate the signature for a certificate being created or added to a database, rather than obtaining a signature from a separate ca. -y exp set an alternate exponent value to use in generating a new rsa public key for the database, instead of the default value of 65537. the available alternate values are 3 and 17. -z noise-file read a seed value from the specified file to generate a new private and public key pair. this argument makes it possible to use hardware-generated seed values o...
...le: o serverauth o clientauth o codesigning o emailprotection o timestamp o ocspresponder o stepup o critical x.509 certificate extensions are described in rfc 5280. ...
...amp o ocspresponder o stepup o critical x.509 certificate extensions are described in rfc 5280. -7 emailaddrs add a comma-separated list of email addresses to the subject alternative name extension of a certificate or certificate request that is being created or added to the database. subject alternative name extensions are described in section 4.2.1.7 of rfc 3280. -8 dns-names add a comma-separated list of dns names to the subject alternative name extension of a certificate or certificate request that is being created or added to the database. subject alternative name extensions are described in section 4.2.1.7 of rfc 3280. ...

A Web PKI x509 certificate primer
ions not described on rfc 5280, but that is out of the scope of this document. extensions can be marked as critical or non-critical, conforming certificate verification libraries should stop processing verification when encountering a critical extension that they do not understand ( and should continue processing if the extension is marked as non-critical) mozila::pkix has this behavior. subject alternate name this extension defines what other names (such as dns names) are valid for this certificate. this allows for a certificate to be used for more than one fqdn, for example you can have a certificate that is valid for both a.example.com and b.example.com basic constraints this allows certificates to be asserted as issuing certificates (it is mandatory for ca certificates). it can also b...
...years. 2. generate csr using this command: openssl req -new -key key.pem -days 1096 -extensions v3_ca -batch -out example.csr -utf8 -subj '/cn=www.example.com' this creates a new certificate signing request (csr) that will be valid for 3 years. 3. write extensions file by creating a new file with name openssl.ss.cnf with the following contents: basicconstraints = ca:false subjectaltname =dns:www.example.com extendedkeyusage =serverauth 4. self-sign csr (using sha256) and append the extensions described in the file "openssl x509 -req -sha256 -days 3650 -in example.csr -signkey key.pem -set_serial $any_integer -extfile openssl.ss.cnf -out example.pem" you can now use example.pem as your certfile cas included in firefox when you visit a secure website, firefox w...
...red secure for the next 4 years. generate csr "openssl req -new -key key.pem -days 1096 -extensions v3_ca -batch -out example.csr - utf8 -subj '/cn=www.example.com' make a new certificate signing request (csr) that will be valid for 3 years. ...
...ertificate is improperly formatted or the certificate has been tampered with re-issue the certificate with the bad signature sec_error_cert_bad_access_location the ocsp uri in the authorityinformationaccess extension is improperly formed re-generate the certificate with a well-formed ocsp uri sec_error_cert_not_in_name_space a certificate has a common name or subject alternative name that is not in the namespace of an issuing certificate re-issue the certificate with names that are within the namespace of all certificates in the chain sec_error_cert_signature_algorithm_disabled a certificate has been signed with an obsolete algorithm re-sign the certificate using a modern algorithm sec_error_expired_certificate a certificate is too o...

nsIDBFolderInfo
on missing description getcharptrproperty() string getcharptrproperty( in string propertyname ); parameters propertyname missing description return value missing description exceptions thrown missing exception missing description native code only!getlocale obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void getlocale( in nsstring result ); parameters result missing description exceptions thrown missing exception missing description native code only!getmailboxname obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0)...
... some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void getlocale( in nsstring result ); parameters result missing description exceptions thrown missing exception missing description native code only!getmailboxname obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void getmailboxname( in nsstring boxname ); parameters boxname missing description exceptions thrown missing exception missing description getproperty() astring getproperty( in string propertyname ); parameters propertyname ...
... missing description sethighwater() void sethighwater( in nsmsgkey highwater, in boolean force ); parameters highwater missing description force missing description exceptions thrown missing exception missing description native code only!setlocale obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void setlocale( in nsstring locale ); parameters locale missing description exceptions thrown missing exception missing description native code only!setmailboxname obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0)...
... some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void setlocale( in nsstring locale ); parameters locale missing description exceptions thrown missing exception missing description native code only!setmailboxname obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void setmailboxname( in nsstring newboxname ); parameters newboxname missing description exceptions thrown missing exception missing description setproperty() void setproperty( in string propertyname, in astring propertystr ); parame...

nsIDOMEvent
get whose eventlisteners are currently being processed. this is particularly useful during capturing and bubbling. read only. defaultprevented boolean used to indicate whether preventdefault() has been called for this event. read only. eventphase unsigned short used to indicate which phase of event flow is currently being evaluated. read only. ...
...read only. ...
...iginal target of the event. if the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. for example, mouse events are retargeted to their parent node when they happen over text nodes (bug 185889), and in that case .target will show the parent and .explicitoriginaltarget will show the text node. .explicitoriginaltarget differs from .originaltarget in that it will never contain anonymous content. read only. istrusted boolean read only. originaltarget nsidomeventtarget the original target of the event, before any retargetings. read only. target nsidomeventtarget used to indicate the eventtarget to which the event was originally dispatched. read only. t...
...load 0x00080000 unload 0x00100000 xfer_done 0x00200000 abort 0x00400000 error 0x00800000 locate 0x01000000 move 0x02000000 resize 0x04000000 forward 0x08000000 help 0x10000000 back 0x20000000 text 0x40000000 alt_mask 0x00000001 control_mask 0x00000002 shift_mask 0x00000004 meta_mask 0x00000008 methods violates the xpcom interface guidelines deserialize() boolean deserialize( in constipcmessageptr amsg, out voidptr aiter ); parameters amsg aiter return value native code only!duplicateprivatedata void duplicatep...

Page inspector keyboard shortcuts - Firefox Developer Tools
show/hide more information about current property (computed view o...
... show/hide more information about current property (computed view only, when a property is selected) enter or space return...
... show/hide more information about current property (computed view only, when a property is selected) enter or space return or space enter...
...ue by 10 shift + up arrow shift + up arrow shift + up arrow decrement selected value by 10 shift + down arrow shift + down arrow shift + down arrow increment selected value by 0.1 alt + up arrow (ctrl + up arrow from firefox 60 onwards.) alt + up arrow alt + up arrow (ctrl + up arrow from firefox 60 onwards.) decrement selected value by 0.1 alt + down arrow (ctrl + down arrow from firefox 60 onwards). alt + down arrow alt + down arrow (ctrl + down arrow from firefox 60 onwards). show/hide more information about current property (computed view only, when a property is selected) enter or space return or space enter or space open mdn reference page about current property (computed view only, when a property...

Document.readyState - Web APIs
// but sub-resources such as images, stylesheets and frames are still loading. var span = document.createelement("span"); span.textcontent = "a <span> element."; document.body.appendchild(span); break; case "complete": // the page is fully loaded. ...
...lesheets and frames are still loading. var span = document.createelement("span"); span.textcontent = "a <span> element."; document.body.appendchild(span); break; case "complete": // the page is fully loaded. ...
...e "complete": // the page is fully loaded. ...
...is fully loaded. ...

Document Object Model (DOM) - Web APIs
the dom represents a document with a logical tree. each branch of the tree ends in a node, and each node contains objects. dom methods allow programmatic access to the tree. with them, you can change the document's structure, style, or content. ...
...nced to become htmlelement and various subclasses, each representing one of (or a family of closely related) elements. the html dom api provides access to various browser features such as tabs and windows, css styles and stylesheets, browser history, and so forth. these interfaces are discussed further in the html dom api documentation. ...
...ment and various subclasses, each representing one of (or a family of closely related) elements. the html dom api provides access to various browser features such as tabs and windows, css styles and stylesheets, browser history, and so forth. these interfaces are discussed further in the html dom api documentation. ...
...es, each representing one of (or a family of closely related) elements. the html dom api provides access to various browser features such as tabs and windows, css styles and stylesheets, browser history, and so forth. these interfaces are discussed further in the html dom api documentation. ...

EffectTiming.fill - Web APIs
not applied to the element if the current time is outside the range of times during which the animation is running, while "forwards" ensures that once the animation's end time has been passed, the element will continue to be drawn in the state it was in at its last rendered frame. note that authors are discouraged from using fill modes to persist the effect of an animation indefinitely. see the alternatives to fill modes section below for approaches that are simpler and more performant. element.animate(), and keyframeeffect() accept an object of timing properties including fill. the value of fill corresponds directly to fill in effecttiming objects returned by gettiming() in animationeffect and keyframeeffect. syntax var timingproperties = { fill: "none" | "forwards" | "backwards" | ...
...n should take to run, how many times it should run, what state the element should be in before the animation begins and after it ends, and so forth. here we specify that the animation should take 2000 milliseconds (2 seconds) to complete, should only run once, and that the fill mode should be "none". as defined above, the "none" fill mode means that the element will be rendered in its natural, unaltered condition anytime the animation isn't actively running. document.getelementbyid("animatebutton").addeventlistener("click", event => { document.getelementbyid("box").animate( boxrotationkeyframes, boxrotationtiming ); }, false); the rest of the code is pretty simple: it adds an event listener to the "animate" button so that when it's clicked by the user, the box is animated by ca...
...when used to persist the effect of an animation indefinitely, however, they have a number of drawbacks: the forwards fill of an animation (or backwards fill if the animation is playing in reverse) will continue to override any changes to specified style indefi...
...s overlap, the browser is required to remove overlapped animations which can lead to surprising results in some cases. rather than using fill modes to persist an animation, it is often simpler to set the final value of the animation effect directly in specified style: elem.animate({ transform: 'translatey(100px)' }, 200).finished.then(() => { elem.style.transform = 'translatey(100px)'; }); alternatively, it may be simpler still to set the final value in specified style before triggering the animation and then animate from the start value. this is the approach used in flip animation. elem.style.transform = 'translatey(100px)'; elem.animate({ transform: 'none', offset: 0 }, 200); for some complex effects where animations layer on top of one another, it may be necessary to use a fill m...

EventTarget.addEventListener() - Web APIs
efits are as follows: it allows adding more than a single handler for an event. this is particularly useful for ajax libraries, javascript modules, or any other kind of code that needs to work well with other libraries/extensions. it gives you finer-grained control of the phase when the listener is activated (capturing vs. bubbling). it works on any dom element, not just html elements. the alternative, older way to register event listeners, is described below. adding a listener during event dispatch if an eventlistener is added to an eventtarget while it is processing an event, that event does not trigger the listener. however, that same listener may be triggered during a later stage of event flow, such as the bubbling phase. multiple identical event listeners if multiple identical...
...er is to make it accessible to the scope in which the event listener is declared. const mybutton = document.getelementbyid('my-button-id'); const somestring = 'data'; mybutton.addeventlistener('click', function() { console.log(somestring); // expected value: 'data' somestring = 'data again'; }); console.log(somestring); // expected value: 'data' (will never output 'data again') note: although inner scopes have access to const, let variables from outer scopes, you cannot expect any changes to these variables to be accessible after the event listener definition, within the same outer scope. why? simply because by the time the event listener would execute, the scope in which it was defined would have already finished executing. getting data into and out of an event listener using ...
...html elements are resized. polyfill you can work around addeventlistener(), removeeventlistener(), event.preventdefault(), and event.stoppropagation() not being supported by internet explorer 8 by using the following code at the beginning of your script. the code supports the use of handleevent() and also the domcontentloaded event. note: usecapture is not supported, as ie 8 does not have any alternative method. the following code only adds ie 8 support. this ie 8 polyfill only works in standards mode: a doctype declaration is required. (function() { if (!event.prototype.preventdefault) { event.prototype.preventdefault=function() { this.returnvalue=false; }; } if (!event.prototype.stoppropagation) { event.prototype.stoppropagation=function() { this.cancelbu...
...he default value of the passive option to true for the touchstart and touchmove events on the document-level nodes window, document, and document.body. this prevents the event listener from being called, so it can't block page rendering while the user is scrolling. note: see the compatibility table below if you need to know which browsers (and/or which versions of those browsers) implement this altered behavior. you can override this behavior by explicitly setting the value of passive to false, as shown here: /* feature detection */ let passiveifsupported = false; try { window.addeventlistener("test", null, object.defineproperty( {}, "passive", { get: function() { passiveifsupported = { passive: false }; } } ) ); } catch(err) {} window.addeve...

FileSystemDirectoryEntry - Web APIs
ured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...//github.com/mdn/browser-compat-data and send us a pull request. ...
...n/browser-compat-data and send us a pull request. ...
... no support noopera full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitsafari full support 11.1webview android full support ≤37alternate name full support ≤37alternate name alternate name uses the non-standard name: directoryentrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: directoryentryfirefox android ...

FileSystemEntry - Web APIs
om structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...ut https://github.com/mdn/browser-compat-data and send us a pull request. ...
...ub.com/mdn/browser-compat-data and send us a pull request. ...
...refixed prefixed implemented with the vendor prefix: webkitfirefox full support 50ie no support noopera no support nosafari full support 11.1webview android full support ≤37alternate name full support ≤37alternate name alternate name uses the non-standard name: entrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: entryfirefox android full support ...

FileSystemFileEntry - Web APIs
erated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...e check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...ps://github.com/mdn/browser-compat-data and send us a pull request. ...
...refixed prefixed implemented with the vendor prefix: webkitfirefox full support 50ie no support noopera no support nosafari full support 11.1webview android full support ≤37alternate name full support ≤37alternate name alternate name uses the non-standard name: fileentrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: fileentryfirefox android full su...

HTMLImageElement - Web APIs
ructor image() the image() constructor creates and returns a new htmlimageelement object representing an html <img> element which is not attached to any dom tree. it accepts optional width and height parameters. when called without parameters, new image() is equivalent to calling document.createelement("img"). properties inherits properties from its parent, htmlelement. htmlimageelement.alt a domstring that reflects the alt html attribute, thus indicating the alternate fallback content to be displayed if the image has not been loaded. htmlimageelement.complete read only returns a boolean that is true if the browser has finished fetching the image, whether successful or not. that means this value is also true if the image has no src value indicating an image to load. htmlimageel...
...d image is corrupted in some way that prevents it from being loaded. the specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <img> element's attributes. the specified image is in a format not supported by the user agent. ...
... is corrupted in some way that prevents it from being loaded. the specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <img> element's attributes. the specified image is in a format not supported by the user agent. ...
...e to retrieve its dimensions, and no dimensions were specified in the <img> element's attributes. the specified image is in a format not supported by the user agent. example var img1 = new image(); // image constructor img1.src = 'image1.png'; img1.alt = 'alt'; document.body.appendchild(img1); var img2 = document.createelement('img'); // use dom htmlimageelement img2.src = 'image2.jpg'; img2.alt = 'alt text'; document.body.appendchild(img2); // using first image in the document alert(document.images[0].src); specifications specification status comment css object model (cssom) view modulethe definition of 'extensions to htmlimageelement' in that specification. working draft added the x and y properties. html living standardthe definition of 'html...

KeyboardEvent - Web APIs
he keyboard. the event type (keydown, keypress, or keyup) identifies what kind of keyboard activity occurred. note: keyboardevent events just indicate what interaction the user had with a key on the keyboard at a low level, providing no contextual meaning to that interaction. when you need to handle text input, use the input event instead. keyboard events may not be fired if the user is using an alternate means of entering text, such as a handwriting system on a tablet or graphics tablet. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><...
...stance, is on the left side of the keyboard. examples include the left control key, the left command key on a macintosh keyboard, or the left shift key. dom_key_location_right 0x02 the key is one which may exist in multiple positions on the keyboard and, in this case, is located on the right side of the keyboard. examples include the right shift key and the right alt key (option on a mac keyboard). dom_key_location_numpad 0x03 the key is located on the numeric keypad, or is a virtual key associated with the numeric keypad if there's more than one place the key could originate from. the numlock key does not fall into this group and is always encoded with the location dom_key_location_standard. examples include the digits on the num...
...s more than one place the key could originate from. the numlock key does not fall into this group and is always encoded with the location dom_key_location_standard. examples include the digits on the numeric keypad, the keypad's enter key, and the decimal point on the keypad. properties this interface also inherits properties of its parents, uievent and event. keyboardevent.altkey read only returns a boolean that is true if the alt ( option or ⌥ on os x) key was active when the key event was generated. keyboardevent.code read only returns a domstring with the code value of the physical key represented by the event. warning: this ignores the user's keyboard layout, so that if the user presses the key at the "y" position in a qwerty keyboard layout (near the middl...
...s a boolean that is true if the key is being held down such that it is automatically repeating. keyboardevent.shiftkey read only returns a boolean that is true if the shift key was active when the key event was generated. methods this interface also inherits methods of its parents, uievent and event. keyboardevent.getmodifierstate() returns a boolean indicating if a modifier key such as alt, shift, ctrl, or meta, was pressed when the event was created. obsolete methods keyboardevent.initkeyevent() initializes a keyboardevent object. this was implemented only by firefox, and is no longer supported even there; instead, you should use the keyboardevent() constructor. keyboardevent.initkeyboardevent() initializes a keyboardevent object. this is now deprecated. you should ins...

PannerNode - Web APIs
e default value is "inverse". pannernode.maxdistance a double value representing the maximum distance between the audio source and the listener, after which the volume is not reduced any further. pannernode.orientationx represents the horizontal position of the audio source's vector in a right-hand cartesian coordinate system. while this audioparam cannot be directly changed, its value can be altered using its value property. the default is value is 1. pannernode.orientationy represents the vertical position of the audio source's vector in a right-hand cartesian coordinate system. the default is 0. while this audioparam cannot be directly changed, its value can be altered using its value property. the default is value is 0. pannernode.orientationz represents the longitudinal (back and...
...dinate system. the default is 0. while this audioparam cannot be directly changed, its value can be altered using its value property. the default is value is 0. pannernode.orientationz represents the longitudinal (back and forth) position of the audio source's vector in a right-hand cartesian coordinate system. the default is 0. while this audioparam cannot be directly changed, its value can be altered using its value property. the default is value is 0. pannernode.panningmodel an enumerated value determining which spatialisation algorithm to use to position the audio in 3d space. ...
...the default is value is 0. ...
...the audio in a right-hand cartesian coordinate system. the default is 0. while this audioparam cannot be directly changed, its value can be altered using its value property. the default is value is 0. pannernode.positiony represents the vertical position of the audio in a right-hand cartesian coordinate system. the default is 0. while this audioparam cannot be directly changed, its value can be altered using its value property. the default is value is 0. pannernode.positionz represents the longitudinal (back and forth) position of the audio in a right-hand cartesian coordinate system. the default is 0. while this audioparam cannot be directly changed, its value can be altered using its value property. the default is value is 0. pannernode.refdistance a double value representing the refe...

SubtleCrypto.deriveBits() - Web APIs
=> { // alice then generates a secret using her private key and bob's public key. // bob could generate the same secret using his private key and alice's public key. derivesharedsecret(aliceskeypair.privatekey, bobskeypair.publickey); }); }); pbkdf2 in this example we ask the user for a password, then use it to derive some bits using pbkdf2. see the complete code on github. let salt; /* get some key material to use as input to the derivebits method. the key material is a password supplied by the user. */ function getkeymaterial() { const password = window.prompt("enter your password"); const enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* de...
...eymaterial() { const password = window.prompt("enter your password"); const enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* derive some bits from a password supplied by the user. ...
..., enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* derive some bits from a password supplied by the user. ...
...enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* derive some bits from a password supplied by the user. ...

Touch events - Web APIs
ion provides additional tips on how to handle touch events in your web application. handling clicks since calling preventdefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing, it's common to call preventdefault() on touchmove rather than touchstart. that way, mouse events can still fire and things like links will continue to work. alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (this example is oversimplified and may result in strange behavior. it is only intended as a guide.) function ontouch(evt) { evt.preventdefault(); if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0)) return; var newevt = document.createevent("mouseevents")...
...this behavior i...
...this behavior is not well defined in the touch events spec and results in different behavior for different browsers (i.e., ios will prevent...
...this behavior is not well defined in the touch events spec and results in different behavior for different browsers (i.e., ios will prevent zooming but still allow panning with both fingers; andro...

Web Video Text Tracks Format (WebVTT) - Web APIs
example of a cue 1 - title crawl 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start some time ago in a place rather distant.... cue identifier the identifier is a name that identifies the cue. it can be used to reference the cue from a script. it must not contain a newline and cannot contain the string "-->". it must end with a single newline. they do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...). example 8 - cue identifier from example 7 1 - title crawl example 9 - common usage of identifiers webvtt 1 00:00:22.230 --> 00:00:24.606 this is the first subtitle. 2 00:00:30.739 --> 00:00:34.074 this is the second. 3 00:00:34.159 --> 00:00:35.743 third cue timings a cue timing indicates when the cue is shown. it has a start and en...
...rt></ruby> voice tag (<v></v>) similar to class tag, also used to style the contained text using css. example 20 - voice tag <v bob>text</v> interfaces there are two interfaces or apis used in webvtt which are: vttcue interface it is used for providing an interface in document object model api, where different attributes supported by it can be used to prepare and alter the cues in number of ways. constructor is the first point for starting the cue which is defined using the default constructor vttcue(starttime, endtime, text) where starting time, ending time and text for cue can be adjusted. after that we can set the region for that particular cue to which this cue belongs using cue.region. vertical, horizontal, line, linealign, position, positionalign, text...
...constructor is the first point for starting the cue which is defined using the default constructor vttcue(starttime, endtime, text) where starting time, ending time and text for cue can be adjusted. after that we can set the region for that particular cue to which this cue belongs using cue.region. vertical, horizontal, line, linealign, position, positionalign, text, size and align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in html using css. but the vttcue interface is within the webvtt provides the vast range of adjustment variables which can be used directly to alter the cue. following interface can be used to expose webvtt cues in dom api: enum autokeyword { "auto" }; enum directionsetting { "" /* horizontal */, "rl", "lr...
...we can categorize them for better understanding relating to each interface in webvtt: vttcue the methods which are available in this interface are: getcueashtml to get the html of that cue. vtt constructor for creating new objects of cues. autokeyword. directionsetting: to set the direct...

Basic concepts behind Web Audio API - Web APIs
audio routing graph. several sources — with different types of channel layout — are supported even within a single context. this modular design provides the flexibility to create complex audio functions with dynamic effects. audio nodes are linked via their inputs and outputs, forming a chain that starts with one or more sources, goes through one or more nodes, then ends up at a destination. although, you don't have to provide a destination if you, say, just want to visualize some audio data. a simple, typical workflow for web audio would look something like this: create the audio context. inside the context, create sources — such as <audio>, oscillator, or stream. create effects nodes, such as reverb, biquad filter, panner, or compressor. choose the final destination for the aud...
...way for doing precise audio manipulation. note: to get a time in seconds from a frame count, simply divide the number of frames by the sample rate. to get a number of frames from a number of samples, simply divide by the channel count. here's a couple of simple examples: var context = new audiocontext(); var buffer = context.createbuffer(2, 22050, 44100); note: in digital audio, 44,100 hz (alternately represented as 44.1 khz) is a common sampling frequency. why 44.1khz? firstly, because the hearing range of human ears is roughly 20 hz to 20,000 hz. via the nyquist–shannon sampling theorem, the sampling frequency must be greater than twice the maximum frequency one wishes to reproduce. therefore, the sampling rate has to be greater than 40 khz. secondly, signals must be low-pas...
...e, but in practice you will be unable to properly reproduce high frequency content, or treble sound. planar versus interleaved buffers the web audio api uses a planar buffer format. the left and right channels are stored like this: llllllllllllllllrrrrrrrrrrrrrrrr (for a buffer of 16 frames) this is very common in audio processing: it makes it easy to process each channel independently. the alternative is to use an interleaved buffer format: lrlrlrlrlrlrlrlrlrlrlrlrlrlrlrlr (for a buffer of 16 frames) this format is very common for storing and playing back audio without much processing, for example a decoded mp3 stream. the web audio api exposes only planar buffers, because it's made for processing. it works with planar, but converts the audio to interleaved when it is sent to the ...
...nput channel with the same index. input channels with no corresponding output channels are dropped. visualizations in general, audio visualizations are achieved by accessing an output of audio data over time, usually gain or frequency data, and then using a graphical technology to turn that into a visual output, such as a graph. the web audio api has an analysernode available that doesn't alter the audio signal passing through it. instead it outputs audio data that can be passed to a visualization technology such as <canvas>. you can grab data using the following methods: analysernode.getfloatfrequencydata() copies the current frequency data into a float32array array passed into it. analysernode.getbytefrequencydata() copies the current frequency data into a uint8array (un...

WindowOrWorkerGlobalScope.setInterval() - Web APIs
its delay to 2147483647 ms, since it's specified as a signed integer in the idl. examples example 1: basic syntax the following example demonstrates setinterval()'s basic syntax. var intervalid = window.setinterval(mycallback, 500, 'parameter 1', 'parameter 2'); function mycallback(a, b) { // your code here // parameters are purely optional. console.log(a); console.log(b); } example 2: alternating two colors the following example calls the flashtext() function once a second until the stop button is pressed. <!doctype html> <html> <head> <meta charset="utf-8" /> <title>setinterval/clearinterval example</title> <script> var nintervid; function changecolor() { nintervid = setinterval(flashtext, 1000); } function flashtext() { var oelem = document...
...rval = function (vcallback, ndelay /*, argumenttopass1, argumenttopass2, etc. */) { var aargs = array.prototype.slice.call(arguments, 2); return __nativesi__(vcallback instanceof function ? function () { vcallback.apply(null, aargs); } : vcallback, ndelay); }; window.setinterval.ispolyfill = true; } another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. example: var intervalid = setinterval(function() { myfunc('one', 'two', 'three'); }, 1000); another possibility is to use function's bind. example: var intervalid = setinterval(function(arg1) {}.bind(undefined, 10), 1000); inactive tabs requires gecko 5.0(firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) starting in gecko 5.0 (firefox 5.0 / ...
.... minidaemon - a framework for managing timers in pages requiring many timers, it can often be difficult to keep track of all of the running timer events. one approach to solving this problem is to store information about the state of a timer in an object. following is a minimal example of such an abstraction. the constructor architecture explicitly avoids the use of closures. it also offers an alternative way to pass the this object to the callback function (see the "this" problem for details). the following code is also available on github. for a more complex but still modular version of it (daemon) see javascript daemons management. this more complex version is nothing but a big and scalable collection of methods for the daemon constructor. however, the daemon constructor itself is noth...
... to mitigate the potential impact this can have on performance, once intervals are nested beyond five levels deep, the browser will automatically enforce a 4 ms minimum value for the interval. attempts to specify a value less than 4 ms in deeply-nested calls to setinterval() will be pinned to 4 ms. browsers may enforce even more stringent minimum values for the interval under some circumstances, although these should not be common. note also that the actual amount of time that elapses between calls to the callback may be longer than the given delay; see reasons for delays longer than specified in windoworworkerglobalscope.settimeout() for examples. ensure that execution duration is shorter than interval frequency if there is a possibility that your logic could take longer to execute than t...

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
rd for exposing accessibility. myth: msaa is too slow reality: assistive technology vendors have found ways around most of the performance problems related to out-of-process com method calls. just make sure to have decent performance on your end. myth: "msaa sucks" reality: this statement may come from another engineer or even an employee of an at vendor. and what are they recommending for an alternative, a proprietary solution? msaa is by no means perfect, but it is the only thing that will make your custom ui elements work with most assistive technologies. try to be careful that at vendors do not lock you into a prioprietary solution that will work with only their products. related myth: msaa is not supported by at vendors reality: it's a standard, and it is supported by jaws, window-...
...one with isimpledomnode (you can qi to it from iaccessible). this is likely to be a painful road even if you are a major player, in terms of getting the cooperation of at vendors. it may be a good enough solution; however, if what you need is jaws, dragon and zoomtext support. zoomtext and dragon can get by with your msaa support., and jaws can be scripted (even by external developers) to support alternative interfaces. don't use msaa if you're working with a small number of at vendors, you can get everyone to agree on a different solution, and you're sure that you won't be needing to support other assistive technologies later. deciding which msaa features to support msaa methods - cheat sheet for developers the iaccessible interface is used in a tree of iaccessible's, each one represent...
... a 32 bit field representing possible on/off states, such as focused, focusable, selected, selectable, visible, protected (for passwords), checked, etc. [important] get_acchelp: get context sensitive help for the iaccessible. get_acchelptopic: we don't use this, it's only if the windows help system is used. get_acckeyboardshortcut: what is the keyboard shortcut for this iaccessible (underlined alt+combo mnemonic) get_accfocus: which child is focused? [important] get_accselection: which children of this item are selected? get_accdefaultaction: get a description or name of the default action for this component, such as "jump" for links. accselect: select the item associated with this iaccessible. [important] acclocation: get the x,y coordinates, and the height and width of this iaccessi...
...simpledomnode, and vice versa for a round trip. however, one might qi isimpledomnode to iaccessible only to find it is null, which means that particular node in question is not exposed in the iaccessible tree. see the following diagram for examples of nodes that do no support iaccessible. msaa tree vs. dom tree - what's the relationship? the msaa tree and the dom tree are parallel structures, although the msaa tree is a subset of the dom tree. queryinterface() can be used to switch between the interfaces used in the two trees (iaccessible and isimpledomnode). if there is no msaa node for a dom node, paccessible->queryinterface(iid_iaccessible) will return null. a variety of implementations for iaccessible there are two main kinds of classes in mozilla's accessibility class hierarchy, pl...

@font-feature-values - CSS: Cascading Style Sheets
the @font-feature-values css at-rule lets you use a common name in the font-variant-alternates property for features activated differently in opentype. this can help simplify your css when using multiple fonts. the @font-feature-values at-rule may be used either at the top level of your css or inside any css conditional-group at-rule. syntax feature value blocks @swash specifies a feature name that will work with the swash() functional notation of font-variant-alternates. a swash feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @annotation specifies a feature name that will work with the annotation() functional notation of font-variant-alternates. an annotation feature value definition allows only one value: ident1: 2 is valid, but ident2: 2...
...s only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @annotation specifies a feature name that will work with the annotation() functional notation of font-variant-alternates. an annotation feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @ornaments specifies a feature name that will work with the ornaments() functional notation of font-variant-alternates. an ornaments feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @stylistic specifies a feature name that will work with the stylistic() functional notation of font-variant-alternates. a stylistic feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @styleset specifies a feature name that will work with the s...
... allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @stylistic specifies a feature name that will work with the stylistic() functional notation of font-variant-alternates. a stylistic feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @styleset specifies a feature name that will work with the styleset() functional notation of font-variant-alternates. a stylset feature value definition allows an unlimited number of values: ident1: 2 4 12 1 maps to the opentype values ss02, ss04, ss12, and ss01. note that values higher than 99 are valid, but don't map to any opentype values and are ignored. @character-variant specifies a feature name that will work with the character-variant() functional notation of font-variant-alternates. a characte...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out htt...

<color> - CSS: Cascading Style Sheets
e #-hexadecimal or the rgb() and rgba() functional notations) using the hsl cylindrical-coordinate system (via the hsl() and hsla() functional notations) note: this article describes the <color> data type in detail. to learn more about using color in html, see applying color to html elements using css. syntax the <color> data type is specified using one of the options listed below. ...
... there are a few caveats to consider when using color keywords: html only recognizes the 16 basic color keywords found in css1, using a specific algorithm to convert unrecognized values (often to completely different colors). ...
...from the corresponding color on x11 systems since manufacturers sometimes tailor x11 colors to their specific hardware. note: the list of accepted keywords has undergone many changes during the evolution of css: css level 1 only included 16 basic colors, called the vga colors as they were taken from the set of displayable colors on vga graphics cards. css level 2 added the orange keyword. although various colors not in the specification (mostly adapted from the x11 colors list) were supported by early browsers, it wasn't until svg 1.0 and css colors level 3 that they were formally defined. they are called the extended color keywords, the x11 colors, or the svg colors. css colors level 4 added the rebeccapurple keyword to honor web pioneer eric meyer. specification keyw...
... css color module level 3the definition of '<color>' in that specification. recommendation deprecates system colors. adds svg colors and rgba(), hsl(), and hsla() functional notations. css level 2 (revision 1)the definition of '<color>' in that specification. recommendation...

content - CSS: Cascading Style Sheets
the content css property replaces an element with a generated value. objects inserted using the content property are anonymous replaced elements. ...
...ing the content property are anonymous replaced elements. ...
...e; content: no-open-quote; content: no-close-quote; /* except for normal and none, several values can be used simultaneously */ content: open-quote chapter_counter; /* global values */ content: inherit; content: initial; content: unset; syntax values none the pseudo-element is not generated. normal computes to none for the ::before and ::after pseudo-elements. <string> specifies the "alt text" for the element. this value can be any number of text characters. non-latin characters must be encoded using their unicode escape sequences: for example, \000a9 represents the copyright symbol. <image> an <image>, denoted by the <url> or <gradient> data type, or part of the webpage, defined by the element() function, denoting the content to display. <counter>() the value of a css counte...
... recommendation initial definition ...

Cross-browser audio basics - Developer guides
users will have a fast network connection. note: this value is often ignored on mobile platforms. <audio preload="auto"> ... </audio> controls we specify the controls attribute when we require the browser to provide us with its default playback controls. <audio controls> ... </audio> src as mentioned above, you can use the <source> element to specify one or more source audio files. alternatively, you can include the src attribute directly on the <audio> element to specify a single source file. <audio src="audiofile.mp3"> ... </audio> type as mentioned above, to be sure that the browser knows what type of file is being specified, it's good practice to specify a type attribute alongside the src attribute. the type attribute specifies the mime type or internet media type of t...
...ecify a single source file. <audio src="audiofile.mp3"> ... </audio> type as mentioned above, to be sure that the browser knows what type of file is being specified, it's good practice to specify a type attribute alongside the src attribute. the type attribute specifies the mime type or internet media type of the file. <audio src="audiofile.mp3" type="audio/mpeg"> ... </audio> fallbacks although the vast majority of browsers now support the <audio> element, you may want to cater for those that don't, such as ie<9. such browsers can be covered using a simple link to the media file, as we showed earlier, or via a fallback written in a plugin technology such as adobe flash or microsoft silverlight. for example, mediaelement.js includes flash fallbacks, which are used something like th...
...ing the audio element with javascript in addition to being able to specify various attributes in html, the <audio> element comes complete with several properties and methods that you can manipulate via javascript. given the following html: <audio id="my-audio" src="audiofile.mp3"> ... </audio> you can grab the <audio> element like this: var myaudio = document.getelementbyid('my-audio'); alternatively, you can create a new element. here's an example of creating an <audio> element, setting the media to play, playing and pausing, and then playing from 5 seconds into the audio: var myaudio = document.createelement('audio'); if (myaudio.canplaytype('audio/mpeg')) { myaudio.setattribute('src','audiofile.mp3'); } if (myaudio.canplaytype('audio/ogg')) { myaudio.setattribute('src','au...
.... this event can be used to trigger the displaying of playback progress. myaudio.addeventlistener("timeupdate", function() { //update something related to playback progress }); playing the playing event is initiated when playback is ready to start after having being paused due to lack of media data. waiting the waiting event is triggered when playback has stopped due to lack of media data, although it is expected to resume once data becomes available. play the play event is initiated after the play() method is returned or when the autoplay attribute has caused playback to begin. this is when the state of the media switches from paused to playing. pause the pause event is triggered after the pause() method is returned. this is when the states switch from playing to paused. ended t...

Audio and Video Delivery - Developer guides
int for exploring the various delivery mechanisms of web based media and compatibility with popular browsers. the audio and video elements whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's <audio> and <video> elements remains pretty much the same. currently, to support all browsers we need to specify two formats, although with the adoption of mp3 and mp4 formats in firefox and opera, this is changing fast. you can find compatibility information in the guide to media types and formats on the web. to deliver video and audio, the general workflow is usually something like this: check what format the browser supports via feature detection (usually a choice of two, as stated above). if the browser doesn't sup...
...ive streaming are hls and mpeg-dash. mse has been designed with dash in mind. mse defines byte streams according to isobmff and m2ts (both supported in dash, the latter supported in hls). generally speaking, if you are interested in standards, are looking for flexibility, or wish to support most modern browsers, you are probably better off with dash. note: currently safari does not support dash although dash.js will work on newer versions of safari scheduled for release with osx yosemite. dash also provides a number of profiles including simple ondemand profiles that no preprocessing and splitting up of media files. there are also a number of cloud based services that will convert your media to both hls and dash. for further information see live streaming web audio and video. custo...
...o/ogg"): http://jplayer.org/video/ogv/big_buck_bunny_trailer.ogv (play the ogg video live.) if these don't play then the browser you are testing doesn't support the given format. consider using a different format or using a fallback. if these work but the files you are supplying don't, there are two possible issues: 1. the media server is not delivering the correct mime types with the file although this is usually supported, you may need to add the following to your media server's .htaccess file. # addtype type/subtype extension addtype audio/mpeg mp3 addtype audio/mp4 m4a addtype audio/ogg ogg addtype audio/ogg oga addtype video/mp4 mp4 addtype video/mp4 m4v addtype video/ogg ogv addtype video/webm webm addtype video/webm webmv 2. your files have been encoded incorrectly your fil...
...source could be decoded another way to show the fallback content of a video, when none of the sources could be decoded in the current browser, is to add an error handler on the last source element. ...

<a>: The Anchor element - HTML: Hypertext Markup Language
'click', event => event.target.href = canvas.todataurl() ); result security and privacy <a> elements can have consequences for users’ security and privacy. see referer header: privacy and security concerns for information. using target="_blank" without rel="noreferrer" and rel="noopener" makes the website vulnerable to window.opener api exploitation attacks (vulnerability description), although note that, in newer browser versions (e.g. firefox 79+) setting target="_blank" implicitly provides the same protection as setting rel="noopener". accessibility strong link text the content inside a link should indicate where the link goes, even out of context. inaccessible, weak link text a sadly common mistake is to only link the words “click here” or “here”: <p> learn more...
...indow, or application opens unexpectedly. older screen-reading software may not even announce the behavior. ...
... announce the behavior. ...
... wikipedia (opens in new tab) </a> link to a non-html resource <a href="2017-annual-report.ppt"> 2017 annual report (powerpoint) </a> if an icon is used to signify link behavior, make sure it has alt text: <a target="_blank" href="https://www.wikipedia.org"> wikipedia <img alt="(opens in new tab)" src="newtab.svg"> </a> <a href="2017-annual-report.ppt"> 2017 annual report <img alt="(powerpoint file)" src="ppt-icon.svg"> </a> webaim: links and hypertext - hypertext links mdn / understanding wcag, guideline 3.2 g200: opening new windows and tabs from a link only when necessary g201: giving users advanced warning when opening a new window skip links a skip link is a link placed as early as possible in <body> content that points to the beginning of the page's main con...

<link>: The External Resource Link element - HTML: Hypertext Markup Language
gle icon; therefore most of the time the sizes attribute contains only one entry. ms's ico format does, as well as apple's icns. ico is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old ie versions). title the title attribute has special semantics on the <link> element. when used on a <link rel="stylesheet"> it defines a preferred or an alternate stylesheet. incorrectly using it may cause the stylesheet to be ignored. type this attribute is used to define the type of the content linked to. the value of the attribute should be a mime type such as text/html, text/css, and so on. the common use of this attribute is to define the type of stylesheet being referenced (such as text/css), but given that css is the only stylesheet language...
...e with the opposite link type value. for example, to establish the reverse link for made, specify author. also this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way. ...
...le, to establish the reverse link for made, specify author. also this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way. examples including a stylesheet to include a stylesheet in a page, use the following syntax: <link href="style.css" rel="stylesheet"> providing alternative stylesheets you can also specify alternative style sheets. ...
...e following syntax: <link href="style.css" rel="stylesheet"> providing alternative stylesheets you can also specify alternative style sheets. the user can choose which style sheet to use by choosing it from the view > page style menu. this provides a way for users to see multiple versions of a page. <link href="default.css" rel="stylesheet" title="default style"> <link href="fancy.css" rel="alternate stylesheet" title="fancy"> <link href="basic.css" rel="alternate stylesheet" title="basic"> providing icons for different usage contexts you can include links to several different icons on the same page, and the browser will choose which one works best for its particular context using the rel and sizes values as hints. <!-- third-generation ipad with high-resolution retina display: --> ...

Index - HTTP
he preflight request is always an options and doesn't use the same method as the actual request. 15 age caching, http, response, header the age header contains the time in seconds the object has been in a proxy cache. 16 allow entity header, http, http header, reference, header the allow header lists the set of methods support by a resource. 17 alt-svc draft, http, http header, needscompattable, needscontent, needsexample, reference the alt-svc header is used to list alternate ways to reach this website. 18 authorization http, http header, reference, request header, header the http authorization request header contains the credentials to authenticate a user agent with a server, usually after the server has res...
...uage(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language. 25 content-length http, headers, reference the content-length entity header indicates the size of the entity-body, in bytes, sent to the recipient. 26 content-location http, reference, header the content-location header indicates an alternate location for the returned data. the principal use is to indicate the url of a resource transmitted as the result of content negotiation. 27 content-range http, http header, reference, response header, header the content-range response http header indicates where in a full body message a partial message belongs. 28 content-security-policy csp, http, refere...
...omain directive controls whether the current document is allowed to set document.domain. when this policy is enabled, attempting to set document.domain will fail and cause a securityerror domexception to be be thrown. 74 forwarded http, http header, reference, request header, header the forwarded header contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request. 75 from http, reference, header the from request header contains an internet email address for a human user who controls the requesting user agent. 76 host http, reference, header the host request header specifies the domain name of the server (for virtual hosting), and (optionally) the tcp ...
...> or <object> . sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites. 122 x-xss-protection http, reference, security, xss, header the http x-xss-protection response header is a feature of internet explorer, chrome and safari that stops pages from loading when they detect reflected cross-site scripting (xss) attacks. although these protections are largely unnecessary in modern browsers when sites implement a strong content-security-policy that disables the use of inline javascript ('unsafe-inline'), they can still provide protections for users of older web browsers that don't yet support csp. ...

Warning: JavaScript 1.6's for-each-in loops are deprecated - JavaScript
error type warning what went wrong? javascript 1.6's for each (variable in obj) statement is deprecated, and will be removed in the near future. examples object iteration for each...in has been used to iterate over the specified object values. ...
...s: var object = { a: 10, b: 20 }; for (var x of object.values(object)) { console.log(x); // 10 // 20 } array iteration for each...in has been used to iterate over specified array elements. deprecated syntax var array = [10, 20, 30]; for each (var x in array) { console.log(x); // 10 // 20 // 30 } alternative standard syntax this is now possible with for...of (es2015) loops as well. var array = [10, 20, 30]; for (var x of array) { console.log(x); // 10 // 20 // 30 } iterating over a null-able array for each...in does nothing if the specified value is null or undefined, but for...of will throw an exception in these cases. depreca...
...iterating over a null-able array for each...in does nothing if the specified value is null or undefined, but for...of will throw an exception in these cases. deprecated syntax function func(array) { for each (var x in array) { console.log(x); } } func([10, 20]); // 10 // 20 func(null); // prints nothing func(undefined); // prints nothing alternative standard syntax to rewrite for each...in statements so that values can be null or undefined with for...of as well, you need to guard around for...of. function func(array) { if (array) { for (var x of array) { console.log(x); } } } func([10, 20]); // 10 // 20 func(null); // prints nothing func(undefined); // prints nothing ...
...efined); // prints nothing iterating over an object's key-value pair deprecated syntax there's a deprecated idiom to iterate over the specified object's key-value pairs using for each...in and the deprecated iterator object. ...

Arrow function expressions - JavaScript
arrow function expressions are ill suited as methods, and they cannot be used as constructors. syntax basic syntax (param1, param2, …, paramn) => { statements } (param1, param2, …, paramn) => expression // equivalent to: => { return expression; } // parentheses are optional when there's only one parameter name: (singleparam) => { statements } singleparam => { statements } // the parameter list for a function with no parameters should be written with a pair of parentheses. ...
...ctor. this.age++; }, 1000); } var p = new person(); in ecmascript 3/5, the this issue was fixable by assigning the value in this to a variable that could be closed over. function person() { var that = this; that.age = 0; setinterval(function growup() { // the callback refers to the `that` variable of which // the value is the expected object. that.age++; }, 1000); } alternatively, a bound function could be created so that a preassigned this value would be passed to the bound target function (the growup() function in the example above). an arrow function does not have its own this. the this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. so while searching for this which is not present in the current scope, ...
...ctions do not have their own arguments object. thus, in this example, arguments is simply a reference to the arguments of the enclosing scope: var arguments = [1, 2, 3]; var arr = () => arguments[0]; arr(); // 1 function foo(n) { var f = () => arguments[0] + n; // foo's implicit arguments binding. arguments[0] is n return f(); } foo(3); // 6 in most cases, using rest parameters is a good alternative to using an arguments object. function foo(n) { var f = (...args) => args[0] + n; return f(10); } foo(1); // 11 arrow functions used as methods as stated previously, arrow function expressions are best suited for non-method functions. let's see what happens when we try to use them as methods: 'use strict'; var obj = { // does not create a new scope i: 10, b: () => console.lo...
... '=>' however, this can be amended by putting the line break after the arrow or using parentheses/braces as seen below to ensure that the code stays pretty and fluffy. you can also put line breaks between arguments. var func = (a, b, c) => 1; var func = (a, b, c) => ( 1 ); var func = (a, b, c) => { return 1 }; var func = ( a, b, c ) => 1; // no syntaxerror thrown parsing order although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with operator precedence compared to regular functions. let callback; callback = callback || function() {}; // ok callback = callback || () => {}; // syntaxerror: invalid arrow-function arguments callback = callback || (() => {}); // ok examples basic usage // an...

Authoring MathML - MathML
note that ua string sniffing is not the most reliable method and might break from version to version: var ua = navigator.useragent; var isgecko = ua.indexof("gecko") > -1 && ua.indexof("khtml") === -1 && ua.indexof('trident') === -1; var iswebkit = ua.indexof('app...
... you may need to synchronize the javascript converter with other javascript programs on your page. texzilla has an <x-tex> custom element, that can be used to write things like <x-tex>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</x-tex> and get it automatically converted into mathml. this is still a work-in-progress, but could be improved in the future thanks to web components and shadow dom. alternatively, you can use the more traditional javascript parsing of expressions at load time as all the other tools in this section do. one simple client-side conversion tools is asciimathml. just download the asciimathml.js script and copy it to your web site. then on your web pages, add a <script> tag to load asciimathml and the mathematical expressions delimited by ` (grave accent) will be auto...
...he relevant javascript and css files on your web site and reference them in your page header (see the copy-me.html file from the zip archive for an example). one of the advantage of jqmath over the previous scripts is that it will automatically add some simple css rules to do the mathematical layout and make the formulas readable on browsers with limited mathml support. command-line programs an alternative way is to parse the simple syntax before publishing your web pages. that is, you use command-line programs to generate them and publish these static pages on your server. pros: you get static web pages: the latex source don't need to be parsed at each page load, the mathml code is exposed to web crawlers and you can put them easily on any web server. binary programs may run fa...
...eoffice have an equation editor (file → new → formula). it is semi-wysiwyg: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. the editor uses its own syntax "starmath" for the source but mathml is also generated when the document is saved. to get the mathml code, save the document as mml and open it with any text editor. alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called content.xml. amaya is the w3c's web editor, which is able to handle mathml inside xhtml documents. use the elements and the special chars panels to create various advanced mathematical constructs. simple text such as a+2 is automatically parsed and the appropriate mathml markup is generated. o...

SVG element reference - SVG: Scalable Vector Graphics
nt>, <solidcolor> renderable elements <a>, <circle>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <unknown>, <use> shape elements <circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect> structural elements <defs>, <g>, <svg>, <symbol>, <use> text content elements <altglyph>, <altglyphdef>, <altglyphitem>, <glyph>, <glyphref>, <textpath>, <text>, <tref>, <tspan> text content child elements <altglyph>, <textpath>, <tref>, <tspan> uncategorized elements <clippath>, <color-profile>, <cursor>, <filter>, <foreignobject>, <hatchpath>, <meshpatch>, <meshrow>, <script>, <style>, <view> obsolete and deprecated elements warning: these are old svg elements which ar...
...>, <color-profile>, <cursor>, <filter>, <foreignobject>, <hatchpath>, <meshpatch>, <meshrow>, <script>, <style>, <view> obsolete and deprecated elements warning: these are old svg elements which are deprecated and should not be used. ...
...ofile>, <cursor>, <filter>, <foreignobject>, <hatchpath>, <meshpatch>, <meshrow>, <script>, <style>, <view> obsolete and deprecated elements warning: these are old svg elements which are deprecated and should not be used. ...
...>, <filter>, <foreignobject>, <hatchpath>, <meshpatch>, <meshrow>, <script>, <style>, <view> obsolete and deprecated elements warning: these are old svg elements which are deprecated and should not be used. ...

platform/xpcom - Archive of obsolete content
or service has been registered by using the isregistered() function: if (xpcom.isregistered(factory)) xpcom.unregister(factory); globals constructors factory(options) parameters options : object required options: name type component constructor constructor for the component this factory creates. this will typically return a descendant of unknown, although it may return a custom object that satisfies the nsisupports interface. optional options: name type contract string a contract id. users of xpcom can use this value to retrieve the factory from components.classes: var factory = components.classes['@me.org/request'] var component = factory.createinstance(ci.nsirequest); this param...
...g: function() { return this.pending; }, resume: function() { console.log('resuming...'); }, suspend: function() { console.log('suspending...'); }, cancel: function() { console.log('canceling...'); } }); this component definition: specifies that we support nsirequest using the interfaces property. initializes pending in initialize() adds our implementation of the nsirequest interface although request also implements nsisupports, there is no need to add it here, because the base class unknown declares support for nsisupports and this is accounted for when retrieving objects. we can register a factory for this component by using the factory class to associate its constructor with its contract id: var { factory } = require('sdk/platform/xpcom'); var { cc, ci } = require('chrome');...
...upports. factory use this class to register an xpcom factory. to register a factory for a component, construct a factory, giving it: a constructor for the component a contract id and/or a class id // create and register the factory var factory = factory({ contract: '@me.org/mycomponent', component: mycomponent }); the component constructor typically returns a descendant of unknown, although it may return a custom object that satisfies the nsisupports interface. the contract id and/or class id may be used by xpcom clients to retrieve the factory. if a class id is not given, a new one will be generated. the contract id and class id are accessible as the values of the contract and id properties, respectively. by default, the factory is registered when it is created and unregiste...

jpm - Archive of obsolete content
ome && npm install jpm to run jpm from a terminal when installed locally, you must add the directory "$home/node_modules/.bin/" to your terminal's path first. add the following line to the end of the file $home/.profile to add it to your path permanently (as the file .profile is executed every time a new terminal is opened): export path="$home/node_modules/.bin/:$path" installing jpm from git alternatively, you can also get the latest version of jpm using git: git clone https://github.com/mozilla-jetpack/jpm.git cd jpm npm install npm link after installing jpm after installation, at the command prompt, type: jpm you should see a screen summarizing the available jpm commands. note that unlike cfx, jpm is available in every command prompt you start, as long as you installed it with th...
...rted from jpm 1.0.4 onwards. this command retrieves a new xpi for your add-on signed by mozilla. this allows you to self-host your add-on so that users can install it without error when signed add-ons are required. you can sign an xpi you've already generated by passing the xpi file in the --xpi argument, like this: jpm sign --api-key ${jwt_issuer} --api-secret ${jwt_secret} --xpi <xpi file> alternatively, you can omit the --xpi argument, in which case jpm sign will generate an xpi from the current directory (or --addon-dir). jpm sign --api-key ${jwt_issuer} --api-secret ${jwt_secret} this submits an xpi it to the addons.mozilla.org signing api, then downloads a signed xpi to the working directory if it passes validation. to get values for --api-key and --api-secret, you will need to ...
...d. if you need changes to the profile to persist, add the --no-copy argument. however beware that jpm might also apply changes to the profile, setting some preferences that will make it unusable for daily usage. developing without browser restarts because jpm run restarts the browser each time you invoke it, it can be a little cumbersome if you are making very frequent changes to an add-on. an alternative development model is to use the extension auto-installer add-on: this listens for new xpi files on a specified port and installs them automatically. that way you can test new changes without needing to restart the browser: make a change to your add-on run jpm post --post-url http://localhost:8888/, to make an xpi and post it. you could even automate this workflow with a simple scrip...

Miscellaneous - Archive of obsolete content
the meaning of the action preference is shown in the following table mousewheel.withxxxkey.action result 0 scroll by lines. if set, you will receive dommousescroll events. 1 scroll by page. 2 move around in the history. if set, you will not receive dommousescroll e...
...nddispatcher.focusedwindow.document; var inputlist = pagedoc.getelementsbytagname('input'); for (var i=1; i<inputlist.length; i++) { inputlist.item(i). addeventlistener("focus", function(e) {onfocusinput(e);}, false); inputlist.item(i). ...
...n = { _bundle: components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice) .createbundle("chrome://myext/locale/myext.properties"), getlocalizedmessage: function(msg) { return this._bundle.getstringfromname(msg); } }; alert(common.getlocalizedmessage("invalid.url")) another similar alternative (using both getstringfromname and formatstringfromname), is: var fcbundle = components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice) .createbundle("chrome://myext/locale/myext.properties"); function getstr(msg, args){ //get localised message if (args){ args = array.prototype.slice.call(arguments,...

On page load - Archive of obsolete content
content"); // browser if(appcontent){ appcontent.addeventlistener("domcontentloaded", myextension.onpageload, true); } var messagepane = document.getelementbyid("messagepane"); // mail if(messagepane){ messagepane.addeventlistener("load", function(event) { myextension.onpageload(event); }, true); } }, onpageload: function(aevent) { var doc = aevent.originaltarget; // doc is document that triggered "onload" event // do something with the loaded page. // doc.location is a location object (see below for a link). // you can use it to make your code executed on certain pages only. if(doc.location.href.search("forum") > -1) alert("a forum page is loaded"); // add event listener for page unload aevent.originaltarget.defaultvie...
... if you are running code on a page load it is likely you would want to run some cleanup code on page unload. ...
....onpageunload, false); and add your code to onpageunload method. basic onpageload for a browser window var myextension = { init: function() { // the event can be domcontentloaded, pageshow, pagehide, load or unload. if(gbrowser) gbrowser.addeventlistener("domcontentloaded", this.onpageload, false); }, onpageload: function(aevent) { var doc = aevent.originaltarget; // doc is document that triggered the event var win = doc.defaultview; // win is the window for the doc // test desired conditions and do something // if (doc.nodename != "#document") return; // only documents // if (win != win.top) return; //only top window. // if (win.frameelement) return; // skip iframes/frames alert("page is loaded \n" +do...

JavaScript Object Management - Archive of obsolete content
indow.settimeout and window.setinterval to control timed code execution. in case you're using javascript code modules or xpcom objects, where a window object is not readily available, use an nsitimer instead. this post suggests a way to achieve a true zero ms timeout, as a simple way to achieve parallelism in js code. notice the way we send callback functions as parameters, and the use of an alternate reference for this which we always name that. this is all necessary due to a javascript feature (quirk would be a better word for it) called method binding. the consequence of doing this wrong is to have a this reference that doesn't do what you expected it to do. there are a few workarounds for this, and we use the ones we have found to be the most elegant and clear to read. the general...
...nside the function, declare a variable called that that equals this, and use that in the anonymous function. javascript has a host of features that make it extremely flexible, but it also has some disadvantages, as it is not as strict as other languages, such as java. a clear example of this is the fact that there are no private or public keywords that allow you to protect object members. as a alternative for this, a naming standard is frequently used to distinguish private and public members. there's no scope enforcement whatsoever, but this standard give others the chance to "play nice" and don't use private members. use "_" at the beginning of private attributes and methods in js objects. for example: _stringbundle, _createusernode(). exercise here's a short exercise to test a pa...
...me); this is something you can do with js in general. you can use it in jsm, chrome, even on regular web pages. since entities tend to be used all throughout an application, we think that having those classes defined at the module level is the best approach. jsm is the best solution to handle objects that are window-independent. in the following section we'll discuss xpcom, which is an older alternative to jsm and one of the foundations of mozilla applications. you shouldn't skip that section because there are many common situations in extension development where you'll have to use xpcom, maybe even implement xpcom components of your own. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Setting up an extension development environment - Archive of obsolete content
profile(s) created automatically when you run other versions of firefox earlier. choose default and uncheck "don't ask at startup" checkbox. click "start firefox". now when you start any version of firefox you may choose any profile you like. development command flags as of gecko 2 (firefox 4), javascript files are cached ("fastload"). the -purgecaches command-line flag disables this behavior. alternatively, you can set the moz_purge_caches environment variable. see this bug for more information. development preferences there is a set of development preferences that, when enabled, allows you to view more information about application activity, thus making debugging easier. however, these preferences can degrade performance, so you may want to use a separate development profile when you ...
...ager automatically restarts the application at startup sometimes, which may mean you won't have time to see the messages logged before the automatic restart happens. to see them, prevent the automatic restart by setting the environment no_em_restart to 1 before starting the application.) nglayout.debug.disable_xul_fastload = true. for gecko 2.0+ (firefox 4.0+). see this bug for more information. although the bug has been closed, it is believed that this pref is still relevant. you might also want to set dom.report_all_js_exceptions = true. see exception logging in javascript for details. devtools.errorconsole.deprecation_warnings = true. detect deprecated code use. warning: never set nglayout.debug.disable_xul_fastload to true in a production environment; it exists solely to aid in debu...
... file that points to an extension that is installed in a location other than the user profile. get the extension id from the extension's install.rdf file. create a file in the "extensions" directory under your profile directory with the extension's id as the file name (for example "your_profile_directory/extensions/{46d1b3c0-db7a-4b1a-863a-6ee6f77ecb58}"). (how to find your profile directory) alternatively, rather than using a guid, create a unique id using the format "name@yourdomain" (for example chromebug@mydomain.com) - then the proxy filename will be same as that id, with no curly brackets {}. the contents of this file should be the path to the directory that contains your install.rdf file, for example /full/path/to/yourextension/ on mac and linux, and c:\full\path\to\yourextensi...

Supporting search suggestions in search plugins - Archive of obsolete content
optional element is an array of descriptions for each of the suggestions in thecompletion list . these can be any additional information the search engine might want to return to be displayed by the browser, such as the number of results available for that search. descriptions are not supported in firefox, and are ignored if any are specified. query urls this optional element is an array of alternate urls for each of the suggestions in thecompletion list . for example, if you want to offer a map link instead of just a search result page for a given suggestion, you can return an url to a map in this array. if you don't specify a query url, the default query is used based on the search described by the <url> element in the search plugin's xml description. query urls are not supporte...
...e search described by the <url> element in the search plugin's xml description. query urls are not supported in firefox, and are ignored. this enhancement request - the handling of a selected suggestion, namely calling of a full specified url as proposed in the opensearch standard - is tracked in bug 386591. ...
...in addition, the method you use to select suggestions is entirely up to you. note: firefox requires that suggest requests complete within 500ms for suggestions to be displayed. ...

Tabbed browser - Archive of obsolete content
the code given is for a menuitem, but will work equally well for other xul elements. this will only work in an overlay of browser.xul. xul: <menuitem oncommand="myextension.f...
... generic removetab method, which accepts a xul tab element as its single parameter. changing active tab this moves one tab forward (to the right). gbrowser.tabcontainer.advanceselectedtab(1, true); this moves one tab to the left. gbrowser.tabcontainer.advanceselectedtab(-1, true); detecting page load see also code snippets:on page load function examplepageload(event) { if (event.originaltarget instanceof components.interfaces.nsidomhtmldocument) { var win = event.originaltarget.defaultview; if (win.frameelement) { // frame within a tab was loaded. win should be the top window of // the frameset. if you don't want do anything when frames/iframes // are loaded in this web page, uncomment the following line: // return; // find the root document: ...
...d do the loadcontext stuff below try { loadcontext = interfacerequestor.getinterface(ci.nsiloadcontext); } catch (ex) { try { loadcontext = subject.loadgroup.notificationcallbacks.getinterface(ci.nsiloadcontext); } catch (ex2) {} } } catch (ex0) {} if (!loadcontext) { //no load context so dont do anything although you can run this, which is your old code //this probably means that its loading an ajax call or like a google ad thing return null; } else { var contentwindow = loadcontext.associatedwindow; if (!contentwindow) { //this channel does not have a window, its probably loading a resource //this probably means that its loading an ajax cal...

Notes on HTML Reflow - Archive of obsolete content
frames, for example, for a text frame when the text must be wrapped. some reflows are immediate in response to user or script actions; for example, resizing the window or changing the document's default font. these are dispatched directly from the presentation shell (e.g., nsipresshell::stylechangereflow), and affect the entire frame tree. other reflows are incremental and are dealt with asynchronously; for example, when content streams in from the network. incremental reflows are queued by the presentation shell for batched dispatch. reflow state the reflow state object, nshtmlreflowstate, is used to pass constraining information "down" from parent frames to child frames. for example, a <div> with a constrained width (e.g., set via the css width property) would not...
...ected when an incremental reflow reaches its target frame , described below. reflow metrics the reflow metrics object, nshtmlreflowmetrics, is used to propagate information from child frames back to the parent. for example, the dimensions of each child frame of an unconstrained <div> would be passed back to the <div>'s frame via the nshtmlreflowmetrics object. incremental reflow although all of the reflow in gecko attempts to re-use as much existing state as possible (and is in therefore some sense "incremental") an incremental reflow corresponds to a reflow that is specifically targeted at an individual frame in the frame hierarchy. a frame requests a incremental reflow (or one is requested on a frame's behalf) when something about the frame itself has changed. scheduling. ...
...contentchanged indicates that the content corresponding to the target frame has changed somehow; for example, the text associated with a text frame has been modified. in reality, the only frame that responds to this sort of reflow is the block frame. the block frame treats this sort of change as a `full reflow' (i.e., as a resize). this makes me believe that we could probably eliminate this class altogether. stylechanged indicates that the stylistic information corresponding to the target frame has changed; for example, the font size has increased. this causes the frame to mutate the reflow state's reason to stylechange, which is propagated recursively to the entire subtree beneath the target frame. reflowdirty indicates that container frame has decided to coalesce several ...

The new nsString class implementation (1999) - Archive of obsolete content
trings between modules that may not use nsstrimpl implementation. this is the most generic approach, but offers reference counted strings. there are implications regarding this implementation, notably dealing with api changes throughout gecko. notably, nsstrings in api's will be discouraged in public api's. these api's will need to be rewritten using nsstrimpl references instead. as an alternative, programmers can pass nsistrings between modules. i18n issues another concern (mainly of the i18n team) has to do with the use of a 1-byte (ascii) nscstring at all. the i18n team correctly points out that that anarchy will prevail if judicious control over their use is not mandated. the problem stems from assumptions that programmers make regarding ascii strings; the typical assumpti...
.... it is recognized that (ascii) nscstring's are useful in the following contexts: whenever calling libraries that expect a char* variant whenever maximum memory efficiency is essential i would argue that only the first case is normatively legitimate. the i18n folks will tell you it's better to use a wide string and convert to 1-byte forms for this purpose even though there is a performance penalty for doing so. since i have to acknowledge the idiom, i have made nscstring available but note that it should be used sparingly. memory management a principal enhancement of the new architecture is pluggable memory allocators. all nsstring subclasses provide their own default allocator implementations, but programmers are free to use their own. in the new prototype nsstrimpl and nsstring classes,...
...mary concerns of our i18n team. first, nsstrimpl offers charset conversion hooks for use during construction, comparison and assignment. (these are stubbed out today awaiting their review and implementation). second, they are concerned that programmers be prevented from abusing the string classes in a number of ways. to wit: they want to ensure that the underlying buffers cannot be corrupted or altered erroneously they want to ensure that the appropriate set of conversion functions get applied they want some control over the usage pattern of strings, such that the 2-byte (ucs2) form is used whenever possible, and some restrictions are applied to the use of 1-byte (ascii) nscstrings. original document information author: rick gessner last updated date: january 20, 1999 copyright...

List of commands - Archive of obsolete content
d_selectpagedown other commands the following list other commands (prefixed by cmd_ or browser:) which have not been categorized here yet (though they are in the alphabetical list below): http://lxr.mozilla.org/seamonkey/sou...baroverlay.xul http://lxr.mozilla.org/seamonkey/sou...t/navigator.js http://lxr.mozilla.org/seamonkey/sou...toroverlay.xul http://lxr.mozilla.org/seamonkey/sou...onaltoolbar.js http://lxr.mozilla.org/seamonkey/sou...rceoverlay.xul http://lxr.mozilla.org/seamonkey/sou...extoverlay.xul http://lxr.mozilla.org/seamonkey/sou...lityoverlay.js http://lxr.mozilla.org/seamonkey/sou...oomoverlay.xul http://lxr.mozilla.org/seamonkey/sou...toroverlay.xul http://lxr.mozilla.org/seamonkey/sou...ark.properties http://lxr.mozilla.org/seamonkey/sou...kmarks-temp.js http...
...md_bm_copy cmd_bm_cut cmd_bm_delete cmd_bm_expandfolder cmd_bm_export cmd_bm_find cmd_bm_import cmd_bm_managefolder cmd_bm_movebookmark cmd_bm_newbookmark cmd_bm_newfolder cmd_bm_newseparator cmd_bm_open cmd_bm_openinnewtab cmd_bm_openinnewwindow cmd_bm_paste cmd_bm_properties cmd_bm_rename cmd_bm_selectall cmd_bm_setnewbookmarkfolder cmd_bm_setnewsearchfolder cmd_bm_setpersonaltoolbarfolder cmd_bm_sortfolder cmd_bm_sortfolderbyname cmd_close cmd_closeothertabs cmd_closewindow cmd_copy cmd_copyimage cmd_copylink cmd_cut cmd_delete cmd_editpage cmd_findtypelinks cmd_findtypetext cmd_gotoline cmd_handlebackspace cmd_handleshiftbackspace cmd_minimizewindow cmd_neweditor cmd_neweditordraft cmd_neweditortemplate cmd_newnavigator cmd_newnavigatortab cmd_n...
...also obtained from http://www.mozilla.org/unix/customizing.html ...

Namespaces - Archive of obsolete content
container providing context for the items ... it holds and allows disambiguation of items having the same name." if you are familiar with c++ namespaces, java packages, perl packages, or python module importing, you are already familiar with the namespace concept. an xml namespace is identified by an unique name (called a uri, not a url, even though it can look like a url). an uri is any string, although most people choose a url-based uri because urls are an easy way to hope for uniqueness. although there's nothing preventing someone else from using the namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul, it's fairly unlikely anyone would choose that accidentally. even if they did accidentally choose it, they may not define the same elements as xul anyway (e.g., <textbox/...
...r that http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul is the default namespace for the element and its descendant elements (unless further overridden by a default namespace on a descendant element), and that any element without a namespace (i.e., no prefix and colon) belongs to the default namespace. that's why we can write the shorthand <textbox/> instead of <xul:textbox/> in xul (although the latter is just as correct when not using http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul as the default namespace) -- the xul namespace is defined as the default on the topmost element. in other words, a default namespace permits a kind of short-hand to be used for all descendants of an element. here's a question: what namespace contains the element foo in the xml document ...
....mozilla.org/keymaster/gatekeeper/there.is.only.xul as the default namespace) -- the xul namespace is defined as the default on the topmost element. in other words, a default namespace permits a kind of short-hand to be used for all descendants of an element. here's a question: what namespace contains the element foo in the xml document below? <foo/> the answer is that it's in no namespace, or alternately, it's in the namespace denoted by the empty string: <foo xmlns=""/> this second example is semantically equivalent to the first. now, a second question: what namespaces are the bar, baz, and quux attributes in? <foo bar="value"> <element xmlns="namespace!" baz="value"> <element quux="value"/> </element> </foo> bar is obviously not in a namespace. what about baz and q...

Additional Template Attributes - Archive of obsolete content
late attribute on the root element set to the id of a template. <listbox datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" template="phototemplate"/> ... <template id="phototemplate"> ... </template> this template will be shared with any other element that references the id 'phototemplate'. the listbox here does not have any children, although it may do. if you did add children, they act just like the static content as if the template was present. however, it is possible to use different static content for each usage, even though the template is shared. the datasources and ref attributes also differ for each usage, so it is possible to use a shared template to display the same structure multiple times but with different starting n...
...ag inside a query, while the member variable is determined by the value of the uri attribute inside the action body. it is also possible to be explicit about the two variables by using two attributes on the <template> element. <template container="?first" member="?item"> the container and member attributes can be used to specify the container and member variables. this isn't particularly useful although there is a very slight optimization since the builder does not need to scan the action body looking for the member variable when compiling the queries and rules. you might also use these attributes just to make the code clearer when using very complex queries. one possible advantage is when using the simple rdf query syntax where you don't specify variables; instead you use the special 'rdf...
...s implied. by using the container and member attributes, you can use specific variables instead. <hbox datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template container="?start" member="?photo"> <rule> <image uri="?photo" src="?photo"/> </rule> </template> </hbox> in this example, the ?photo variable can be used instead of 'rdf:*' (although you can use either even if you specify the member variable). this may make the code clearer as to its function. we could use the container variable ?start in the action body also. if you are using the simple syntax and want to use the container variable in the content, you must use the container attribute since there is no other way to refer to it. note also that a rule element is needed her...

Multiple Rule Example - Archive of obsolete content
images/t/canal.jpg, ?phototitle = canal) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?phototitle = obelisk) the first result matches the first rule and contains variables for the two additional predicates that were examined in the conditions. since the second rule doesn't refer to these variables, they will not be filled in. although the canal photo has a date, the second rule doesn't use it, so you cannot refer to the ?date variable in this rule. but, you could use a <binding> to get the date without requiring it to match the conditions. of course, the variable doesn't have to be ?date in the second rule. you might notice that the ?title variable is used in the first rule whereas the ?phototitle variable is used for the...
...e variable is used in the first rule whereas the ?phototitle variable is used for the second rule, despite that they both store the value of the title predicate. there is no reason for this -- it is only used in this example to show that there is no connection between the variables used in the two rules. you can use different variables if it makes sense in the context of the template or the data, although in this example it would seem more reasonable to use the same variable name. the only exception to this is that the container and member variables (those that are referred to in the uri attributes), must be the same in all rules. in this example, the container variable is ?start and the member variable is ?photo. if different variables were used for these, the rules would not work properly. ...
...ame in all rules. in this example, the container variable is ?start and the member variable is ?photo. if different variables were used for these, the rules would not work properly. the reason for this is due to the manner in which the builder processes the data. looking back at the results listed above, the palace photo appears twice so the second one will be removed, leaving only three matches. although the builder actually generates mutliple matches for one resource, in many cases it isn't necessary to be aware of this detail when creating templates. it is usually sufficient to assume that earlier rules are used to filter results much like an if-else construct in a programming language. if the last rule has no specific conditions (for example a simple rule with no attributes on the <rule> ...

Grids - Archive of obsolete content
the columns that are used and the rows that are used. just like html tables, you put content such as labels and buttons inside the rows. however, the grid allows either row or column based organization so you may put content in either rows or in columns. it is most common to use rows, as with a table. however, you can still use columns to specify the size and appearance of the columns in a grid. alternatively, you can put content inside the columns, and use the rows to specify the appearance. we'll look at the case of organizing elements by row first. declaring a grid to declare a set of rows, use the rows tag, which should be a child element of grid. inside that you should add row elements, which are used for each row. inside the row element, you should place the content that you want ins...
...laceholders to specify how many there are. you may add the flex attribute to a row to make it flexible. the content is placed inside in each column. the first element inside each column element is placed in the first row, the second element in the second row and the third element is placed in the third row. if you put content in both the columns and the rows, the content will overlap each other, although they will align in a grid properly. it creates an effect much like a grid of stack elements. the order of the elements in the grid determines which is displayed on top and which is placed underneath. if the rows element is placed after the columns element, the content within the rows is displayed on top. if the columns element is placed after the rows element, the content within the columns...
...n"/> <button label="grape"/> </row> <row flex="1"> <button label="strawberry"/> <button label="raspberry"/> <button label="peach"/> </row> </rows> </grid> the first column and both rows have been made flexible. this will result in every cell in the first column being flexible horizontally. in addition, every cell will be flexible vertically because both rows are flexible, although the first row is more so. the cell in the first column and first row (the cherry button) will be flexible by a factor of 5 horizontally and flexible by a factor of 10 vertically. the next cell, (lemon) will only be flexible vertically. the flex attribute has also been added to the grid element so that the entire grid is flexible, otherwise it would only grow in one direction. column spanni...

Simple Menu Bars - Archive of obsolete content
nds. menuitem an individual command on a menu. this would be placed in a menupopup. menuseparator a separator bar on a menu. this would be placed in a menupopup. you can customize the menus on the menubar to have whatever you want on them on all platforms except the macintosh. this is because the macintosh has its own special menu along the top of the screen controlled by the system. although you can create custom menus, any special style rules or non-menu elements that you place on a menu may not be applied. you should keep this is mind when creating menus. example of a simple menu bar example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <m...
...ate a vertical menubar by setting the orient attribute to vertical. menu element the menu element works much like the button element. it accepts some of the same attributes plus some additional ones: id the unique identifier of the menu title button. label the text to appear on the menu, such as file or edit. disabled this boolean attribute determines whether the menu is disabled. although you can, there's rarely a need to disable an entire menu. this attribute can be set to either true or false. of course, the latter is the default. accesskey this is the key that the user can press to activate the menu item. this letter is typically shown underlined on the menu title. mozilla will look at the label attribute and add an underline character to the character specified here.
...bute can be set to either true or false. of course, the latter is the default. accesskey this is the key that the user can press to activate the menu item. this letter is typically shown underlined on the menu title. mozilla will look at the label attribute and add an underline character to the character specified here. for that reason, you should specify a character that exists in the text (although the key will still work if it doesn't). the menu element is normally placed on a menubar, although it does not have to be. however, it will be given a different look. the image here shows what the earlier example would look like without the menu bar. menupopup element the menupopup element creates the popup window containing the menu commands. it is a type of box which defaults to a ve...

XUL element attributes - Archive of obsolete content
space-separated list of rdf properties or resources. context type: id should be set to the value of the id of the popup element that should appear when the user context-clicks on the element. a context-click varies on each platform. usually it will be a right click. you can use the special value '_child' to indicate the first menupopup child of the element. ...
...the element should have a template element as a child. for rdf templates, the specified datasources are combined into a single composite datasource which holds the data from all of the datasources. this composite datasource is accesssible via a script through the database property. ...
...fies the pixel position of the left edge of the element relative to the left edge of the stack. maxheight type: string (representing an integer) the maximum height of the element. this corresponds to the max-height css property. maxwidth type: string (representing an integer) the maximum width of the element. this corresponds to the max-width css property. menu type: id alternate name for the popup attribute, but also has a corresponding script property 'menu'. minheight type: string (representing an integer) the minimum height of the element. this corresponds to the min-height css property. minwidth type: string (representing an integer) the minimum width of the element. this corresponds to the min-width css property. mousethrough type: on...

key - Archive of obsolete content
uld appear next to a menuitem label if that menuitem is associated with the key element via its key attribute. modifiers type: space-separated list of the values below a list of modifier keys that should be pressed to invoke the keyboard shortcut. multiple keys may be separated by spaces or commas. keys will map to other keys on platforms that do not have them. shift: the shift key. alt: the alt key. on the macintosh, this is the option key. on macintosh this can only be used in conjunction with another modifier, since alt+letter combinations are reserved for entering special characters in text. meta: the meta key. on the macintosh, this is the command key. control: the control key. os: windows logo key on windows, super or hyper key on linux. this shouldn't be specified dire...
...y on windows, super or hyper key on linux. this shouldn't be specified directly because it may conflict with system wide shortcut key. accel: the key used for keyboard shortcuts on the user's platform, which is control on windows and linux, and command on mac. usually, this would be the value you would use. access: the access key for activating menus and other elements. on windows, this is the alt key, used in conjuction with an element's accesskey. any: indicates that all modifiers preceding it are optional. oncommand type: script code this event handler is called when the command is activated. this occurs when a user selects a menu item or presses a keyboard shortcut attached to the command. phase type: string the event phase where the handler is invoked. this should...
...ey="" modifiers="control"/> <key keycode="" modifiers="control"/> modifying attributes in case you want to change one of the <key>'s attributes, such as the modifiers attribute, the keyset element has to be re-added to its parent node; otherwise the new attributes won't be applied. for example: // modify some attributes let key = document.getelementbyid(key_id); key.setattribute("modifiers", "alt shift"); // apply the changes let keyset = document.getelementbyid(keyset_id); keyset.parentnode.appendchild(keyset); ...

toolbox - Archive of obsolete content
ot be collapsed and expanded. note: gecko 2.0 adds support for external toolbars. these are toolbars that are not children of a toolbox. you can associate an external toolbar with a toolbox for the purpose of managing your toolbars by setting the toolboxid property on the toolbar. ...
...oolbars by setting the toolboxid property on the toolbar. the external toolbars associated with a toolbox are listed in the array of elements provided by the toolbox's externaltoolbars property. more information is available in the xul tutorial. if you'd like to detect when toolbars in a toolbox are changed, see toolbar customization events. ...
...ement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element. customtoolbarcount firefox only type: integer the number of custom toolbars currently within the toolbox. externaltoolbars type: array of elements an array of external toolbars; that is, toolbar elements that should be considered to be members of this toolbox, even if they are not actually children of the toolbox. palette firefox only type: element the toolbarpalette within the toolbox. toolbarset firefox only type: element the toolbarset within the toolbox. methods inherited methods ad...

Archived Mozilla and build documentation - Archive of obsolete content
to process this audio data and to create new audio data. java in firefox extensions if you are in need of calling java code from within a firefox extension, you can make use of liveconnect. liveconnect gives your extension's javascript code (linked from or contained in xul code) access to 2 objects: java and packages (note that per this thread, although the new documentation for the liveconnect reimplementation states that these globals will be deprecated (in the context of applets), "firefox and the java plug-in will continue to support the global java/packages keywords, in particular in the context of firefox extensions."). these 2 objects let you make use of the standard jdk classes, e.g., java...
..., like internet explorer 4, that were built before the conception of w3c standards inherited many quirks. in this article, i will describe mozilla's quirks mode, which provides strong backwards html compatibility with internet explorer and other legacy browsers. monitoring downloads firefox 3 makes it easier than ever to monitor the status of downloads. although it was possible to do so in previous versions of firefox, it was previously only possible for one observer to do so at a time. firefox 3 introduces new api that allows any number of listeners to observe downloads. mozilla application framework the mozilla application framework: for powerful, easy to develop cross-platform applications mozilla crypto ...
...com is a tree configuration that builds a minimal set of libraries (shared mostly) that can be used to get all features of xpcom. the contents of this standalone xpcom in general are: stress testing consume.exe from the windows server 2003 resource kit tools can consume various resources: physical memory, cpu time, page file, disk space and even the kernel pool. although for win2003, it should install into winxp fine (win2000 compatibility is unknown). the only downside is you can't specify how much of the resource to use, only which one to consume. also be warned: always remember the -time option, or you may be hitting that physical reset button sooner than you would have liked! structure of an installable bundle ...

Gecko Compatibility Handbook - Archive of obsolete content
rietary html that will work as expected in each browser. gecko browsers will ignore both internet explorer and netscape navigator 4 proprietary html tags. so, a page may not display in gecko browsers as it does in internet explorer 4 or in netscape navigator 4. the prime example of this is the use of netscape navigator 4 proprietary <layer>, commonly used in site navigation. for standards-based alternatives, see updating dhtml web pages for next generation browsers. an html page can be quickly checked for the use of proprietary html markup by submitting the page to the w3's html validator using the html 4.01 doctype. we will have more to say about doctypes later in this article, but essentially the doctype is supposed to indicate to a browser what version of html is used in the page. the ...
...lines state that empty elements can be coded by following the tag name with a space followed with as slash as in <tag />. to be backwardly compatible you must have a space before the trailing />. in addition, you must only use the xml empty tag notation for html elements that are always empty - and not for html elements that have optional ending tags. for example, it is ok to code <br> as <br /> although there is no benefit to do so in html documents. but it is not ok to code <option> as <option />. to understand why, consider the following: html without optional ending tags equivalent html with optional ending tags <select> <option>optionvalue </select> <select> <option>optionvalue</option> </select> now consider if we used the xml empty t...
...reasons listed above. this is also the case for older versions of web authoring tools such as macromedia's dreamweaver 2 and 3. newer versions of these apis and tools do support gecko however. for example, dynapi is now maintained at sourceforge and offers a gecko-compatible version. newer versions of web authoring tools support gecko. wrong doctype problem: an incorrect doctype can completely alter a page's presentation. gecko, internet explorer for mac os and internet explorer 6 all use a technique called doctype sniffing to determine if a page is to be laid out in a fashion compatible with the older browsers or if it is to be laid out in a fashion compatible with the w3 standards. using the appropriate doctype in an html document allows a web page author to continue to support the ol...

Syndicating content with RSS - Archive of obsolete content
page(s). adding a special <a> element to html page(s). we've already discussed the first step—creating rss feeds— so we'll focus on the other two steps here. adding the <link> often the data in an rss feed is also made available on an html web page. when this is the case, the html web page can let people and machines know about the feed by using the <link> element, like this: <link rel="alternate" type="application/rss+xml" href="http://example.com/feed" /> adding the <a> while use of the html <link> element is powerful, it is mostly hidden. to advertise the rss feed in a more direct way, the html <a> element can be used. this mimics the <link> element discussed above. linking from the the html web page where the data in an rss feed is also contained makes the rss feed available...
...cation/rss+xml" href="http://example.com/feed" /> adding the <a> while use of the html <link> element is powerful, it is mostly hidden. to advertise the rss feed in a more direct way, the html <a> element can be used. this mimics the <link> element discussed above. linking from the the html web page where the data in an rss feed is also contained makes the rss feed available for use: <a rel="alternate" type="application/rss+xml" href="http://example.com/feed">...</a> feed icons rss (and other) feeds use a special icon. it is recommended that you too use this icon when creating the special <a> link to your feed. the icon looks like the following: you can get more icons like this from feed icons. (other sizes and colors, along with their source files, are available too.) advanced...
.../rss+xml" href="http://example.com/feed">...</a> feed icons rss (and other) feeds use a special icon. it is recommended that you too use this icon when creating the special <a> link to your feed. the icon looks like the following: you can get more icons like this from feed icons. (other sizes and colors, along with their source files, are available too.) advanced syndication techniques although this advanced technique for syndication is not required, support of this is recommended, especially for web sites and applications with high performance needs. the http protocol, one of the core technologies behind the web, provides a way of prioritizing the content type that an http client prefers to receive. this technique takes advantage by having the client prefer rss (over html or othe...

What is RSS - Archive of obsolete content
this page explains what rss is. you will not yet be creating your own rss files, but you will be seeing how rss is commonly used and simple example rss files for these common uses. you will also be getting a little history on rss. what is rss? the most popular versions of rss are xml-based markup languages used for syndication. (although rdf-based rss formats exist, namely the deprecated rss 0.90 and rss 1.0.) common uses of rss syndication are for the syndication of news web sites, of blogs, of internet radio, and of internet television. this tutorial teaches rss 2.0, but makes an effort to point out issues with other versions of rss. rss is almost never written by hand; it is almost always created by server-side software (usually written in a language like php, java, c#, or pyth...
...l" so it remained only a draft, and never became a replacement for userland's rss 0.92. in august 2002 userland released a draft for rss 0.94. like rss 0.93, this version of rss was never made "final" and was also only a draft, and never became a replacement for userland's rss 0.92. so at this point we still had netscape's rss 0.91, the rss-dev working group's rss 1.0, and userland's rss 0.92. (although some were using rss 0.93 and rss 0.94 even though they weren't supposed to.) in september 2002 userland released rss 2.0. rss 2.0 was meant to be a replacement for rss 0.92 (and the rss 0.93 and rss 0.94 drafts that no one was supposed to use). userland bumped up the version number all the way up to 2.0 because the rss-dev working group already used 1.0 with their rdf-based rss 1.0. so at ...
...erland bumped up the version number all the way up to 2.0 because the rss-dev working group already used 1.0 with their rdf-based rss 1.0. so at this point we had netscape's rss 0.91, the rss-dev working group's rss 1.0, and userland's rss 2.0. now, the story doesn't quite end there. in november 2002 and again in january 2003, rss 2.0 was changed from its original specification by userland. and although these are each different, they all label themselves as rss 2.0 on the <rss> element. so now, at this point, we still have netscape's rss 0.91 (since netscape never deprecated it) although most people don't use it anymore. most people use either the rdf-based rss 1.0 or the xml-based rss 2.0, with the xml-based rss 2.0 seeming to be the most popular. (this tutorial uses rss 2.0.) how rss is...

TCP/IP Security - Archive of obsolete content
curity, available from https://csrc.nist.gov/publications/nistpubs/.) the use of tls typically requires each application to support tls; however, unlike application layer controls, which typically involve extensive customization of the application, transport layer controls such as tls are much less intrusive because they do not need to understand the application’s functions or characteristics. although using tls may require modifying some applications, tls is a well-tested protocol that has several implementations that have been added to many applications, so it is a relatively low-risk option compared to adding protection at the application layer. traditionally tls has been used to protect http-based communications and can be used with ssl portal vpns. network layer. controls at this l...
...rotecting ip information. nevertheless, in many cases, controls at another layer are better suited to providing protection than network layer controls. for example, if only one or two applications need protection, a network layer control may be excessive. transport layer protocols such as ssl are most commonly used to provide security for communications with individual http-based applications, although they are also used to provide protection for communication sessions of other types of applications such as smtp, point of presence (pop), internet message access protocol (imap), and file transfer protocol (ftp). because all major web browsers include support for tls, users who wish to use web-based applications that are protected by tls normally do not need to install any client software o...
... key—a value known only to the two parties exchanging data. the data can only be decrypted by someone who has the secret key. integrity. ssl can determine if data has been changed (intentionally or unintentionally) during transit. the integrity of data can be assured by generating a message authentication code (mac) value, which is a keyed cryptographic checksum of the data. if the data is altered and the mac is recalculated, the old and new macs will differ. peer authentication. each ssl endpoint can confirm the identity of the other ssl endpoint with which it wishes to communicate, ensuring that the network traffic and data is being sent from the expected host. ssl authentication is typically performed one-way, authenticating the server to the client, but it can be performed mutua...

Using the Right Markup to Invoke Plugins - Archive of obsolete content
media.com/downloads/"> here.</a></p> </object> </object> web authors have to specify anobtainment mechanism in mozilla-based browsers -- the browser won't automatically retrieve plugins that are missing if you don't specify where to get the plugin from using the codebase attribute. ...
...adding an additional layer of convenience in the form of automatic retrieval is the subject of a bug 180411 in the mozilla open source code. ...
... <param name="sounds" value="1.au|2.au|3.au|4.au|5.au|6.au|7.au|8.au|9.au|0.au" /> <param name="pause" value="200" /> <p>you need the java plugin. get it from <a href="http://java.sun.com/products/plugin/index.html">here.</a></p> </object> the above code mentions a version specific mime type, and if the mozilla-based browser such as netscape 7 doesn't have jre 1.4.1_01 installed, the alternate text is displayed. it isn't always necessary to give such a version specific mime type. if you aren't taking advantage of any version specific features, a more generic mime type such as application/x-java-vm will do the job just as well. the configuration parameters for the applet, including the class which contains the initial entry point (animator.class, referenced by the "code" param ele...

Anatomy of a video game - Game development
ew frame (while the previous frame is handled by the display). go through the list of requestanimationframe callbacks and invoke them. perform garbage collection and other per-frame tasks when the above callbacks stop controlling the main thread. sleep (unless an event interrupts the browser's nap) until the monitor is ready for your image (vsync) and repeat. you can think about developing realtime applications as having a budget of time to do work. all of the above steps must take place every 16-and-a-half milliseconds to keep up with a 60 hz display. browsers invoke your code as early as possible to give it maximum computation time. your main thread will often start workloads that are not even on the main thread (such as rasterization or shaders in webgl). long calculations can be perf...
...kip rendering frames or interpolate extra ones depending on their performance. you can count on all users updating non-cosmetic variables at the same constant frequency minus hiccups. much more complicated to program than the basic loops we saw earlier. user input is completely ignored until the next update (even if the user has a fast device). the mandatory interpolation has a performance penalty. a separate update and draw method could look like the following example. for the sake of demonstration, the example is based on the third bullet point, just without using web workers for readability (and, let's be honest, writability). note: this example, specifically, is in need of technical review. /* * starting with the semicolon is in case whatever line of code above this example * re...
...k = mygame.lasttick + mygame.ticklength; // now lasttick is this tick. update( mygame.lasttick ); } } mygame.lasttick = performance.now(); mygame.lastrender = mygame.lasttick; // pretend the first draw was on first update. mygame.ticklength = 50; // this sets your simulation to run at 20hz (50ms) setinitialstate(); main(performance.now()); // start the cycle })(); another alternative is to simply do certain things less often. if a portion of your update loop is difficult to compute but insensitive to time, you might consider scaling back its frequency and, ideally, spreading it out into chunks throughout that lengthened period. an implicit example of this is found over at the artillery blog for artillery games, where they adjust their rate of garbage generation to opt...

Index - Game development
ads, games, javascript, controllers that's it! we have successfully implemented gamepad controls in our game — try connecting any popular controller like the xbox 360 one and see for yourself how fun it is to avoid the asteroids and shoot the aliens with a gamepad. 32 desktop mouse and keyboard controls controls, desktop, games, javascript, keyboard, mouse ok, we've dealt with touch, keyboard and mouse controls. now let's move on to look at how to set up the game to be controlled using a console gamepad, using the gamepad api. 33 mobile touch controls controls, games, javascript, mobile, pointer, touch that covers adding touch controls for mobile; in the next article we'll see how to add keyboard and mouse support. 34 unconventiona...
...game development, consisting of building the game world or level map out of small, regular-shaped images called tiles. this results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times. this set of articles covers the basics of creating tile maps using javascript and canvas (although the same high level techniques could be used in any programming language.) 36 square tilemaps implementation: scrolling maps canvas, games, javascript, atlas, scrolling, spritesheet, tilemap, tiles this article covers how to implement scrolling square tilemaps using the canvas api. 37 square tilemaps implementation: static maps canvas, games, javascript, s...
... canvas, games, javascript, phaser, tutorial, bouncing now that physics have been introduced, we can start implementing collision detection into the game — first we'll look at the walls. 45 build the brick field 2d, beginner, canvas, games, javascript, phaser, tutorial building the brick field is a little bit more complicated than adding a single object to the screen, although it's still easier with phaser than in pure javascript. let's explore how to create a group of bricks and print them on screen using a loop. 46 buttons 2d, beginner, buttons, canvas, games, javascript, phaser, tutorial instead of starting the game right away we can leave that decision to the player by adding a start button they can press. let's investigate how to do that.

Building up a basic demo with A-Frame - Game development
ese attributes can be manipulated to create the illusion of animation. rotation there's a special <a-animation> entity that can help us animate elements. add the <a-animation> element seen below to the <a-box> element as a child, as shown: <a-box color="#0095dd" rotation="20 40 0" position="0 1 0"> <a-animation attribute="rotation" from="20 0 0" to="20 360 0" direction="alternate" dur="4000" repeat="indefinite" easing="ease"> </a-animation> </a-box> as with any other entities, you can define key properties for the animation. we'll be animating the rotation attribute from 20 0 0 to 20 360 0, so it will do a full spin. the animation direction is set to alternate so the animation will be played forward, and then back. the duration is set to 4 seconds, a...
...om geometry like the torus, in much the same way. ...
...again, the animation is being repeated indefinitely. moving we could use the <a-animation> to change the position of the third shape, or we could use javascript instead. ...

Audio for Web games - Game development
t. however, preloading is still useful — without it, there would always need to be some client-server communication required before playing can commence. concurrent audio playback a requirement of many games is the need to play more than one piece of audio at the same time; for example, there might be background music playing along with sound effects for various things happening in the game. although the situation is soon going to get better with the adoption of the web audio api, the current most widely-supported method — using the vanilla <audio> element — leads to patchy results on mobile devices. element — results in patchy results on mobile devices. testing and support here's a table that shows what mobile platforms support the features talked about above. mobile suppo...
... playback you may have some degree of success. note: concurrent audio playback is tested using our concurrent audio test example, where we attempt to play three pieces of audio at the same time using the standard audio api. note: simple autoplay functionality is tested with our autoplay test example. note: volume changeability is tested with our volume test example. mobile workarounds although mobile browsers can present problems, there are ways to work around the issues detailed above. audio sprites audio sprites borrow their name from css sprites, which is a visual technique for using css with a single graphic resource to break it into a series of sprites. we can apply the same principle to audio so that rather than having a bunch of small audio files that take time to load an...
...h means it's now possible to write web-based games with native-quality audio for ios. as the web audio api allows precise timing and control of audio playback, we can use it to play samples at specific moments, which is a crucial immersive aspect of gaming. you want those explosions to be accompanied by a thundering boom, not followed by one, after all. background music with the web audio api although we can use the <audio> element to deliver linear background music that doesn't change in reaction to the game environment, the web audio api is ideal for implementing a more dynamic musical experience. you may want music to change depending on whether you are trying to build suspense or encourage the player in some way. music is an important part of the gaming experience and depending on the...

Safe - MDN Web Docs Glossary: Definitions of Web-related terms
they can log or keep statistics. what is important here is that by calling a safe method, the client doesn't request any server change itself, and therefore won't create an unnecessary load or burden for the server. ...
...they can log or keep statistics. what is important here is that by calling a safe method, the client doesn't request any server change itself, and therefore won't create an unnecessary load or burden for the server. ...
...d on-the-fly, as long as the generating script guarantees safety: it should not trigger external effects, like triggering an order in an e-commerce web site. it is the responsibility of the application on the server to implement the safe semantic correctly, the webserver itself, being apache, nginx or iis, can't enforce it by itself. in particular, an application should not allow get requests to alter its state. a call to a safe method, not changing the state for the server: get /pagex.html http/1.1 a call to a non-safe method, that may change the state of the server: post /pagex.html http/1.1 a call to an idempotent but non-safe method: delete /idx/delete http/1.1 learn more general knowledge definition of safe in the http specification. technical knowledge description of ...

WAI-ARIA basics - Learn web development
d in to be valid, whereas aria-labelledby="label" allows you to put an id on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using <label for="input">. as an example, you could use aria-labelledby to specify that a key description contained in a <div> is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing information on the page as an image's alt text, rather than having to repeat it inside the alt attribute. you can see an example of this at text alternatives. states — special properties that define the current conditions of elements, such as aria-disabled="true", which specifies to a screenreader that a form input is currently disabled. states di...
...don't change throughout the lifecycle of an app, whereas states can change, generally programmatically via javascript. an important point about wai-aria attributes is that they don't affect anything about the web page, except for the information exposed by the browser's accessibility apis (where screenreaders get their information from). wai-aria doesn't affect webpage structure, the dom, etc., although the attributes can be useful for selecting elements by css. note: you can find a useful list of all the aria roles and their uses, with links to futher information, in the wai-aria spec — see definition of roles. the spec also contains a list of all the properties and states, with links to further information — see definitions of states and properties (all aria-* attributes). where ...
...ond the semantics available in html5. you'll see a lot more about these semantics and the power of aria properties/attributes below, especially in the accessibility of non-semantic controls section. for now though, let's look at how aria can help with dynamic content updates. dynamic content updates content loaded into the dom can be easily accessed using a screenreader, from textual content to alternative text attached to images. traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments. the problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like xmlhttprequest, fetch, or do...

Positioning - Learn web development
s. we'd like you to follow along with the exercises on your local computer, if possible — grab a copy of 0_basic-flow.html from our github repo (source code here) and use that as a starting point. introducing positioning the whole idea of positioning is to allow us to override the basic document flow behavior described above, to produce interesting effects. what if you want to slightly alter the position of some boxes inside a layout from their default layout flow position, to give a slightly quirky, distressed feel? positioning is your tool. or if you want to create a ui element that floats over the top of other parts of the page, and/or always sits in the same place inside the browser window no matter how much the page is scrolled? positioning makes such layout work possible. th...
...px; border-radius: 5px; } .positioned { position: sticky; top: 30px; left: 30px; } an interesting and common use of position: sticky is to create a scrolling index page where different headings stick to the top of the page as they reach it. ...
...ground-color: black; color: white; padding: 10px; position: sticky; top: 0; left: 0; margin: 1em 0; } body { width: 500px; height: 1400px; margin: 0 auto; } dt { background-color: black; color: white; padding: 10px; position: sticky; top: 0; left: 0; margin: 1em 0; } <h1>sticky positioning</h1> <dl> <dt>a</dt> <dd>apple</dd> <dd>ant</dd> <dd>altimeter</dd> <dd>airplane</dd> <dt>b</dt> <dd>bird</dd> <dd>buzzard</dd> <dd>bee</dd> <dd>banana</dd> <dd>beanstalk</dd> <dt>c</dt> <dd>calculator</dd> <dd>cane</dd> <dd>camera</dd> <dd>camel</dd> <dt>d</dt> <dd>duck</dd> <dd>dime</dd> <dd>dipstick</dd> <dd>drone</dd> <dt>e</dt> <dd>egg</dd> <dd>elephant</dd> <dd>eg...

Supporting older browsers - Learn web development
ten very worried about the experience of 1% of users in an old version of internet explorer, while not considering at all the far greater number who have accessibility needs. what is the support for the features you want to use? once you know the browsers that come to your site, you can assess any technology that you want to use against how well it is supported and how easily you can provide an alternative for visitors who do not have that technology available. we are trying to make this easy for you at mdn, by providing browser compatibility information on each page detailing a css property. for example, take a look at the page for grid-template-columns. at the bottom of this page is a table, which lists major browsers along with the version they began supporting this property. another ...
... created to fix up the table structure are not created. multiple-column layout for certain layouts you could use multi-col as a fallback, if your container has any of the column-* properties defined on it and then becomes a grid container, the multicol behaviour will not happen. flexbox as a fallback for grid flexbox has greater browser support than grid due to being supported by ie10 and 11, although do check out the information later in this lesson explaining the rather patchy and confusing support for flexbox in older browsers. if you make a flex container into a grid container, any flex property applied to the children will be ignored. for many layout tweaks in older browsers, you may find you can give a decent experience by using css in this way. we add a simpler layout based on ol...
... and tutorials in existence; this useful guide helps you check what you are looking at and can also help if you need flex support in very old browsers. the ie10 and 11 prefixed version of grid the css grid specification was initially prototyped in internet explorer 10; this means that while ie10 and ie11 do not have modern grid support, they do have a version of grid layout that is very usable, although different to the modern specification documented on this site. the ie10 and 11 implementations is -ms- prefixed, which means you can use it for these browsers and it will be ignored by non-microsoft browsers. edge does still understand the old syntax, however, so take care that everything is safely overwritten in your modern grid css. the guide to progressive enhancement in grid layout can...

How CSS is structured - Learn web development
xample, perhaps you're working with a content management system where you are blocked from modifying external css files. but for sites with more than one page, an internal stylesheet becomes a less efficient way of working. to apply uniform css styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every web page that will use the styling. the efficiency penalty carries over to site maintenance too. with css in internal stylesheets, there is the risk that even one simple styling change may require edits to multiple web pages. inline styles inline styles are css declarations that affect a single html element, contained within a style attribute. the implementation of an inline style in an html document might look like this: <!doctype html> <html> <he...
...8"> <title>my css experiments</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p>create your test html here</p> </body> </html> styles.css: /* create your test css here */ p { color: red; } when you find css that you want to experiment with, replace the html <body> contents with some html to style, and then add your test css code to your css file. as an altenative, you can also use the interactive editor below. read on and have fun! selectors a selector targets html to apply styles to content. we have already discovered a variety of selectors in the getting started with css tutorial. if css is not applying to content as-expected, your selector may not match the way you think it should match. each css rule starts with a selector—or a list of...
...% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width: 70em) { body { font-size: 130%; } } h1 { font-size: 1.5em; } div p, #id:first-line { background-color: red; border-radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } the next example shows the equivalent css in a more compressed format. although the two examples work the same, the one below is more difficult to read. body {font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} div p, #id:first-line {background-color: red; border-radius: 3px;} div p {margin: 0; padding: 1em;} div p + p {padding-top: 0;} for your own ...

HTML forms in legacy browsers - Learn web development
f css one of the big issues with html forms is styling form widgets with css. form controls appearance is browser and operating system specific. for example, the input of color type looks different in safari, chrome and firefox browser, but the color picker widget is the same in all browsers on a device as it opens up the operating system's native color picker. it's generally a good idea to not alter the default appearance of form control because altering one css property value may alter some input types but not others. for example, if you declare input { font-size: 2rem; }, it will impact number, date, and text, but not color or range. if you alter a property, that may impact the appearance of the widget in unexpected ways. for example, [value] { background-color: #ccc; } may have been use...
...don't. as you can see from the complexity of the property compatibility table for form widgets article, it's very difficult. even if it's still possible to do a few adjustments on text elements (such as sizing or font color), there are always side effects. the best approach remains to not style html form widgets at all. but you can still apply styles to all the surrounding items. and, if you must alter the default styles of your form widgets, define a style guide to ensure consistency among all your form controls so user experience is not destroyed. you can also investigate some hard techniques such as rebuilding widgets with javascript. but in that case, do not hesitate to charge your client for such foolishness. feature detection and polyfills css and javascript are awesome technologies, ...
...erience than having exactly the same functionality in all browsers. as a last reminder, just always think about the end users. conclusion as you can see, considering browser and operating system default form control appearance is important. there are many techniques to handle these issue; however mastering all of them is beyond the scope of this article. the basic premise is to consider whether altering the default implemenation is worth the work before embarking on the challenge. if you read all the articles of this html forms guide, you should now be at ease with using forms. ...

JavaScript basics - Learn web development
te: the reason the instructions (above) place the <script> element near the bottom of the html file is that the browser reads code in the order it appears in the file. if the javascript loads first and it is supposed to affect the html that hasn't loaded yet, there could be problems. placing javascript near the bottom of an html page is one way to accommodate this dependency. to learn more about alternative approaches, see script loading strategies. what happened? the heading text changed to hello world! using javascript. you did this by using a function called queryselector() to grab a reference to your heading, and then store it in a variable called myheading. this is similar to what we did using css selectors. when you want to do something to an element, you need to select it first. f...
... see if the two are equal. if this comparison returns true, the first block of code runs. if the comparison is not true, the second block of code—after the else statement—runs instead. functions functions are a way of packaging functionality that you wish to reuse. it's possible to define a body of code as a function that executes when you call the function name in your code. this is a good alternative to repeatedly writing the same code. you have already seen some uses of functions previously. for example: let myvariable = document.queryselector('h1'); alert('hello!'); these functions, document.queryselector and alert, are built into the browser. if you see something which looks like a variable name, but it's followed by parentheses— () —it is likely a function. fu...
...ctor('html').onclick = function() {}; is equivalent to let myhtml = document.queryselector('html'); myhtml.onclick = function() {}; it's just shorter. supercharging our example website with this review of javascript basics completed (above), let's add some new features to our example site. adding an image changer in this section, you will learn how to use javascript and dom api features to alternate the display of one of two images. this change will happen as a user clicks the displayed image. choose an image you want to feature on your example site. ideally, the image will be the same size as the image you added previously, or as close as possible. save this image in your images folder. rename the image firefox2.png. add the javascript below to your main.js file. (also delete yo...

Define terms with HTML - Learn web development
an operate on all abbreviations uniformly. just as with any new keyword, you should define your abbreviations the first time they occur. <p> <dfn><abbr>html</abbr> (hypertext markup language)</dfn> is a description language used to structure documents on the web. </p> the html spec does indeed set aside the title attribute for expanding the abbreviation. however, this is not an acceptable alternative for providing an inline expansion. the contents of title are completely hidden from your users, unless they're using a mouse and they happen to hover over the abbreviation. the spec duly acknowledges this as well. improve accessibility <dfn> marks the keyword defined, and indicates that the current paragraph defines the keyword. in other words, there's an implicit relationship between ...
... the whole paragraph, you can use the aria-describedby attribute to associate a term more formally with its definition: <p> <span id="ff"> <dfn aria-describedby="ff">firefox</dfn> is the web browser created by the mozilla foundation. </span> you can download it at <a href="http://www.mozilla.org">mozilla.org</a> </p> assistive technology can often use this attribute to find a text alternative to a given term. you can use aria-describedby on any tag enclosing a keyword to be defined (not just the <dfn> element). aria-describedby references the id of the element containing the description. how to build a description list description lists are just what they claim to be: a list of terms and their matching descriptions (e.g., definition lists, dictionary entries, faqs, and key-v...
...ng description follows immediately, contained within one or more <dd> elements. enclose the whole description list with a <dl> element. a simple example here's a simple example describing kinds of food and drink: <dl> <dt>jambalaya</dt> <dd> rice-based entree typically containing chicken, sausage, seafood, and spices </dd> <dt>sukiyaki</dt> <dd> japanese specialty consisting of thinly sliced meat, vegetables, and noodles, cooked in sake and soy sauce </dd> <dt>chianti</dt> <dd> dry italian red wine originating in tuscany </dd> </dl> the basic pattern, as you can see, is to alternate <dt> terms with <dd> descriptions. if two or more terms occur in a row, the following description applies to all of them. if two or more descript...

HTML text fundamentals - Learn web development
d to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. in this context the <h1> element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page." <h1>this is a top level heading</h1> by default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using css). more importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above). on the other hand, you could make any element look like a top level heading. consider the following: <span style="font-size: 32px; margin: 21px 0; display: block;">is this a top level headi...
...all the ingredients into a paste. <ul> <li>if you want a coarse "chunky" hummus, process it for a short time.</li> <li>if you want a smooth hummus, process it for a longer time.</li> </ul> </li> </ol> try going back to the previous active learning example and updating the second list like this. ...
...similarly, in written language we tend to stress words by putting them in italics. for example, the following two sentences have different meanings. i am glad you weren't late. i am glad you weren't late. the first sentence sounds genuinely relieved that the person wasn't late. ...

Adding vector graphics to the Web - Learn web development
he different ways in which you can add svg vector graphics to your web pages. the quick way: <img> to embed an svg via an <img> element, you just need to reference it in the src attribute as you'd expect. you will need a height or a width attribute (or both if your svg has no inherent aspect ratio). if you have not already done so, please read images in html. <img src="equilateral.svg" alt="triangle with all three sides equal" height="87" width="100" /> pros quick, familiar image syntax with built-in text equivalent available in the alt attribute. you can make the image into a hyperlink easily by nesting the <img> inside an <a> element. the svg file can be cached by the browser, resulting in faster loading times for any page that uses the image loaded in the future. ...
...ubleshooting and cross-browser support for browsers that don't support svg (ie 8 and below, android 2.3 and below), you could reference a png or jpg from your src attribute and use a srcset attribute (which only recent browsers recognize) to reference the svg. this being the case, only supporting browsers will load the svg — older browsers will load the png instead: <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"> you can also use svgs as css background images, as shown below. in the below code, older browsers will stick with the png that they understand, while newer browsers will load the svg: background: url("fallback.png") no-repeat center; background-image: url("image.svg"); background-size: contain; like the <img> method described above, inserti...
...while, just to support obsolescent browsers. how to embed an svg with an <iframe> you can open svg images in your browser just like webpages. so embedding an svg document with an <iframe> is done just like we studied in from <object> to <iframe> — other embedding technologies. here's a quick review: <iframe src="triangle.svg" width="500" height="500" sandbox> <img src="triangle.png" alt="triangle with three unequal sides" /> </iframe> this is definitely not the best method to choose: cons iframes do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for iframes altogether. moreover, unless the svg and your current webpage have the same origin, you cannot use javascript on your main webpage to manipulate the svg. active ...

From object to iframe — other embedding technologies - Learn web development
someone else made it, assume it's dangerous until proven otherwise." besides security, you should also be aware of intellectual property issues. most content is copyrighted, offline and online, even content you might not expect (for example, most images on wikimedia commons). never display content on your webpage unless you own it or the owners have given you written, unequivocal permission. penalties for copyright infringement are severe. again, you can never be too cautious. if the content is licensed, you must obey the license terms. for example, the content on mdn is licensed under cc-by-sa. that means, you must credit us properly when you quote our content, even if you make substantial changes. use https https is the encrypted version of http. you should serve your websites using h...
... if you make substantial changes. use https https is the encrypted version of http. you should serve your websites using https whenever possible: https reduces the chance that remote content has been tampered with in transit, https prevents embedded content from accessing content in your parent document, and vice versa. using https requires a security certificate, which can be expensive (although let's encrypt makes things easier) — if you can't get one, you may serve your parent document with http. however, because of the second benefit of https above, no matter what the cost, you must never embed third-party content with http. (in the best case scenario, your user's web browser will give them a scary warning.) all reputable companies that make content available for embedding via ...
...ons back one by one (inside the sandbox="" attribute value) — see the sandbox reference entry for all the available options. one important note is that you should never add both allow-scripts and allow-same-origin to your sandbox attribute — in that case, the embedded content could bypass the same-origin policy that stops sites from executing scripts, and use javascript to turn off sandboxing altogether. note: sandboxing provides no protection if attackers can fool people into visiting malicious content directly (outside an iframe). if there's any chance that certain content may be malicious (e.g., user-generated content), please serve it from a different domain to your main site. configure csp directives csp stands for content security policy and provides a set of http headers (meta...

Aprender y obtener ayuda - Learn web development
er to jump straight in and start playing with code. this is also a reasonable approach, and some learning sites tend to favor it. codecademy for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired result was achieved. many mdn web docs reference pages provide interactive examples too, where you can alter the code and see how the live result changes. and there is also nothing wrong with creating your own code examples on your computer, or in an online code editor like jsbin, codepen, or glitch. in fact, you'll be called to do so as part of this course when you are learning! note: online code editors are also really useful for sharing code you've written, for example, if you are collaborating o...
... diffuse learning you do in that time can often help you to figure out a solution to the problem you were facing. it is also physically bad to work for too long without a break — looking at a monitor for too long can hurt your eyes, and sitting still for too long can be bad for your back or legs. we'd recommend taking a 15 minutes break every hour to 90 minutes. eat, exercise, and sleep. eat healthily, get regular exercise, and make sure you get enough sleep. this sounds obvious, but it is easy to forget when you get really into coding. factor these essential ingredients into your schedule, and make sure you are not doing your learning time instead of these things. give yourself rewards. it's true that all work and no play makes jack a dull boy. you should try to schedule fun things to do...
... if your problem is affecting all browsers, or whether it only occurs in one or a small number of browsers. if it is only affecting one browser, for example, you can use that browser to narrow down the search. example searches might look like: <video> playback doesn't work in the ios browser. firefox doesn't seem to support the beetlejuice api. using mdn the site you are already on has a wealth of information available to you — both reference material for looking up code syntax, and guides/tutorials for learning techniques. we've provided most of the answers to the questions you'll have about web development fundamentals in this part of mdn. if you are stuck, then it is good to re-read the associated articles to see if you missed anything. if you are not sure which article to read,...

Deploying our app - Learn web development
ed to actually deploy) it's possible to deploy during development to either share work in progress or to have a pre-release for some other purpose. netlify, amongst other things, also allows you to run pre-deployment tasks, which in our case means that all the production code build processes can be performed inside of netlify and if the build is successful, the website changes will be deployed. although netlify offers a drag and drop deployment service, we are intending to trigger a new deployment to netlify each time we push to a github repo. it's exactly these kinds of connected services that we would encourage you to look for when deciding on your own build toolchain. we can commit our code and push to github and the updated code will automatically trigger the entire build routine. if a...
...e git add . command is a bit of a sledgehammer approach — it will add all local changes you’ve worked on in one go. if you want finer control over what you add, then use git add -p for an interactive process, or add individual files using git add path/to/file. now all the code is staged, we can commit; run the following command: git commit -m ’committing initial code’ note: although you're free to write whatever you wish in the commit message, there's some useful tips around the web on good commit messages. keep them short, concise, and descriptive, so they clearly describe what the change does. finally the code needs to be pushed to your github hosted repository. let's do that now. over at github, visit https://github.com/new and create your own repositor...
...and ensure it's in the correct format. if not, the test will fail and will prevent the project from going live. to do anything else would be beyond the scope of this module — testing is a huge subject that really requires its own separate module. we are hoping that this section will at least make you aware of the need for testing, and will plant the seed that inspires you to go and learn more. although the test for this project does not include a test framework, as with all things in the front-end development world, there are a slew of framework options. the test itself isn't what is important. what is important is how the failure or success is handled. some deployment platforms will include a specific method for testing as part of their pipeline. products like github, gitlab, etc., all s...

Introducing a complete toolchain - Learn web development
such as a way to backup your work in a remote place, and a mechanism to work in a team on the same project without fear of overwriting each other's code. it might be obvious to some, but it bears repeating: git is not the same thing as github. git is the revision control tool, whereas github is an online store for git repositories (plus a number of useful tools for working with them). note that, although we're using github in this chapter, there are several alternatives including gitlab and bitbucket, and you could even host your own git repositories. using revision control in your projects and including it as part of the toolchain will help manage the evolution of your code. it offers a way to "commit" blocks of work as you progress, along with comments such as "x new feature implemented",...
...e commands from the command line in one go, such as npm run tidy-code. using special "git hooks" to test if the code is formatted before a commit. using code editor plugins to run prettier commands each time a file is saved. note: what is a git hook? git (not github) provides a system that lets us attach pre- and post- actions to the tasks you perform with git (such as committing your code). although git hooks can be a bit overly complicated (in this author's opinion), once they're in place they can be very powerful. if you're interested in using hooks, husky is a greatly simplified route into using hooks. for vs code, one useful extension is the prettier code formatter by esben petersen, which lets vscode automatically format code upon saving. this means that any file in the project w...
...low these steps: add a single file called .postcssrc to the root of your project directory. add the following contents to the new file, which will automagically give us full access to the latest css features: { "plugins": { "postcss-preset-env": { "stage": 0 } } } that’s all we need to do — remember that parcel installs the dependencies for us by default! although this stage of our toolchain can be quite painful, because we've chosen a tool that purposely tries to reduce configuration and complexity, there's really nothing more we need to do during the development phase. modules are correctly imported, nested css is correctly transformed to "regular css", and our development is unimpeded by the build process. now our software is ready to be written! ...

Accessibility API cross-reference
, or general types, such as button, menu item, text, etc. they also define a list of possible object states, such as focused, read-only, checked, etc. an interesting problem is that mozilla, safari/khtml, opera, staroffice and other apps are cross-platform, but there is currently no cross-platform accessibility api. the ipc mechanisms used by current generation api's are also not cross-platform, although communication for some cross-platform accessibility api of the future could be done through sockets. these tables describe how various accessibility apis define possible roles of an object, and states. all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc. they also define a list of possible object states, such as focus...
...., tooltips may be drawn on the glass pane layer. glass_pane glass_pane n/a multiple adjacent panes that can be sized relative to each other by dragging a grippy on their border split_pane split_pane n/a an object that can be drawn into and is used to trap events. ...
... children. n/a expandable expandable implied by the presence of the aria-expanded attribute, regardless of value can extend selection extselectable n/a n/a not clipped to boundary of parent, does not auto-move with parent floating n/a n/a identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. very poor support in user agents and ats, and no sufficient techniques available n/a n/a aria-flowto indicates the availability and type of interactive popup element, such as menu or dialog, that can ...

How Mozilla's build system works
rator writes out makefiles. when config.status runs, you'll see the following output: reticulating splines... finished reading 1096 moz.build files into 1276 descriptors in 2.40s backend executed in 2.39s 2188 total backend files. 0 created; 1 updated; 2187 unchanged total wall time: 5.03s; cpu time: 3.79s; efficiency: 75% what this is saying is that a total of 1,096 moz.build files were read. altogether, 1,276 data structures describing the build configuration were derived from them. it took 2.40s wall time just to read these files and produce the data structures. the 1,276 data structures were fed into the build backend, which then determined it had to manage 2,188 files derived from those data structures. most of the files already existed and didn't need to be changed. however, one was ...
...tadataemitter is then fed into a build backend. a build backend is simply an instance of a child class of a buildbackend from base.py (in the mozbuild.backend package now, not mozbuild.frontend). the child class implements methods for processing individual class instances as well as common hook points, such as processing has finished. see recursivemake.py for an implementation of a buildbackend. although we call the base class buildbackend, the class doesn't need to be focused with building at all. if you wanted to create a consumer that performed a line count of all c++ files or generated a clang compilation database, for example, this would be an acceptable use of a buildbackend. technically, we don't need to feed the treemetadataemitter output into a buildbackend: it's possible to create...
...ile to package jars. below is an example: depth = ../../../.. topsrcdir = @top_srcdir@ srcdir = @srcdir@ vpath = @srcdir@ include $(depth)/config/autoconf.mk include $(topsrcdir)/config/rules.mk as you can see, there are no extra variables to define. if a jar.mn file exists in the same directory as this makefile.in, it will automatically be processed. although the common practice is to have a resources directory that contains the jar.mn and chrome files, you may also put a jar.mn file in a directory that creates a library, in which case it will be processed. related links see the glossary of makefile variables for information about specific variables and how to use them. original document information author: brian ryner copyright informati...

Eclipse CDT Manual Setup
w taken care of by the mach project generation code. for now it's stored here until that integration happens in order that the eclipse cdt page isn't hugely cluttered with mostly redundant information, make setting up eclipse look much more complicated than it is nowadays. setup time some points in the rest of this document below are old and taken care of by the mach commands described above (although some of the project configuration is not done automatically yet). some of it like the section on building the index and usage tips are still relevant, and other parts still may provide useful background information to understand it in more detail on how eclipse works. you can expect it to take an hour or so to work through these instructions if you're doing so for the first time. (this as...
..."build automatically" in "c/c++ > indexer", disable "automatically update the index" turning off automatic indexing prevents the cpu intensive indexer from running at various stages during the steps below before we're ready. select "general > content types", expand "text > c source file > c++ source file", click "add" and add "*.mm". eclipse cdt doesn't currently understand objective-c files (although there is a project that promises to add objective-c support), so for now, this is the best we can do to give eclipse a chance of expanding its understanding of the source into the objective-c files. select "general > editors > text editors". if you want line numbers, tick "show line numbers". if you want a column marker to mark the 80th column to help with formatting code to mozilla's 80 ch...
...ation for the source files by processing a build log from a full, clean build made using -j1 -w. since such a non-parallel, full build would take a very long time, we're going to cheat and set eclipse's "build" action to run jwatt's just-print-mozilla-build.py script instead. this script will complete in about 30 seconds on a warm tree (files cached in ram) if your object directory is up to date, although eclipse will take several minutes to process the "build output" that it produces. download just-print-mozilla-build.py and change its permissions to make it executable ('chmod a+x just-print-mozilla-build.py'). if you don't put just-print-mozilla-build.py somewhere in your path, then go back to the initial project properties section where you set just-print-mozilla-build.py and specify its...

SVG Guidelines
luding: the typical "created with editor" comments non-standard editor specific tags and attributes (sketch:foo, illustrator:foo, sopodi:foo, …) the xml namespace definition that comes with the latter (xmlns:sketch, xmlns:sopodi, …) other metadata in addition to non-standard editor metadata, standard compliant metadata also exists. typical examples of this are <title> and <desc> tags. although this kind of data is supported by the browser, it can only be displayed when the svg is opened in a new tab. plus, in most of the cases, the filename is quite descriptive so it's recommended to remove that kind of metadata since it doesn't bring much value. you shouldn't include doctypes in your svgs either; they are a source of many issues, and the svg wg recommends not to include them. se...
.... tools tools can help to clean svg files. note, however that some of the rules stated above can be hard to detect with automated tools since they require too much context-awareness. to this date, there doesn't seem to be a tool that handles all of the above. ...
... of the above. ...

mach
hat. if the mozconfig environment variable is set, use the file pointed to in that variable. if the current working directory mach is invoked with is inside an object directory, the mozconfig used when creating that object directory is used. the default mozconfig search logic is applied. here are some examples: # use an explicit mozconfig file. $ mozconfig=/path/to/mozconfig ./mach build # alternatively (for persistent mozconfig usage): $ export mozconfig=/path/to/mozconfig $ ./mach build # let's pretend the mozconfig environment variable isn't set. this will use # the mozconfig from the object directory. $ cd objdir-firefox $ mach build adding mach to your shell's search path if you add mach to your path (by modifying the path environment variable to include your source directory, ...
...ryptic error message) - in the former case, people don't need to discover your tool from a blog post, wiki page, or word of mouth). so this 3rd point does not make much sense, does it? are there any known issues? yes, of course several! mach is still relatively young ("born" in 2012) and there are a number of bugs and numerous areas for improvement. some larger known issues include: mintty (alternative terminal emulator on windows) doesn't work. text encoding issues (especially on windows where latin-1 is not the default system encoding). failed commands spew lots of extra error output, e.g. you will see a big mach error message when all that happened was an invoked command returned a non-0 exit code - possibly expectedly so in mozilla! generally, mach is known to work pretty well w...
...enting a mach command for it. some other cases where you should consider implementing something as a mach command: when your tool is a random script in the tree. random scripts are hard to find and may not conform to coding conventions or best practices. mach provides a framework in which your tool can live that will put it in a better position to succeed than if it were on its own. when the alternative is a make target. the build team generally does not like one-off make targets that aren't part of building (read: compiling) the tree. this includes things related to testing and packaging. these weigh down make files and add to the burden of maintaining the build system. instead, you are encouraged to implement ancillary functionality in not make (preferably python). if you do implement ...

Cross Process Object Wrappers
e blocked by the content process, then a slow content process could cause firefox to become unresponsive to users. converting synchronous code to be asynchronous can be difficult and time-consuming. as a migration aid, the messaging framework enables frame scripts to make content objects available to chrome through a wrapper called a cross process object wrapper, also known as a cpow. however, although cpows are convenient, they have serious limitations and can cause responsiveness problems, so should only be used when necessary and only as a migration aid. passing cpows from frame scripts frame scripts can send messages to chrome using one of two global functions: sendasyncmessage() or sendsyncmessage(). the optional third parameter to each of these functions is an object whose properti...
...s a common pattern is to get the xul <browser> that corresponds to a content document. to enable this, gbrowser.getbrowserfordocument and gbrowser.getbrowserforcontentwindow can be passed a cpow for the content document and content window, respectively, and return the xul <browser> that these documents / windows belong to. both return null if no such browser can be found. limitations of cpows although cpows can be convenient they have several major limitations, which are listed below. cpows and platform apis you can't pass cpows into platform apis that expect to receive dom objects. for example, you can't pass a cpow into nsifocusmanager.setfocus(). also, from firefox 47 onwards, browser code can no longer perform unsafe cpow operations. this means that as an add-on developer, you shou...
...iveness the lack of a synchronous api on the chrome side is intentional: because the chrome process runs the firefox ui, any responsiveness problems affect the whole browser. by making the chrome process block on the content process, cpows break this principle and allow unresponsive content process to make the whole browser unresponsive. see safe and unsafe cpows for more on this. performance although the wrapper looks just like an object completely contained in the chrome script scope, it's really just a reference to an object in the content process. when you access a property of the wrapper, it sends a synchronous message to the content process and returns the result. this means it is many times slower to use than an object. message ordering cpows can violate assumptions you might mak...

Embedding Tips
call the loaduri method with the appropriate uri and flags. this interface also has methods for reloading, stopping a load and going back and forward in the history. how do i block a load? implement the nsiwebprogresslistener interface and register it with the appropriate web browser object via the nsiwebbrowser::addwebbrowserlistener() method. use the callbacks for after-the-fact cancellation. alternatively, implement a nsiuricontentlistener as described below. how do i watch/intercept a load before it happens? implement the nsiuricontentlistener interface, and register it with the appropriate web browser object via the nsiwebbrowser::parenturicontentlistener attribute. watch for changes in nsiuricontentlistener::onstarturiopen(). you can abort the uri load at this point if you don't wan...
...ontent type. how do i copy items to the clipboard? obtain the nsiclipboardcommands interface from the appropriate web browser object via nsiserviceprovider::getinterface (or the do_getinterface() helper method). how do i save a document or data to disk? query for the nsiwebbrowserpersist interface implemented on the web browser object and call the saveuri() or savedocument() methods on that. alternatively, create a standalone webbrowser persist object and call the nsiwebbrowserpersist interface on that to save uris and documents. this is recommended if you intend anything other than the uri or document your browser is looking at. register your own nsiwebprogresslistener object to listen for progress and state notifications. how do i save / upload a document / data to a web or ftp site? ...
...script constructor instead of a javascript property: catman->addcategoryentry("javascript global constructor", "my_prop_name", "my_prop_contract_id", pr_true, pr_true, getter_copies(previous)); that way you will be able to do: var my_comp = new my_prop_name(); this was taken from weirdal's excellent "burning chrome" article. how do i specify alternate locations for profiles? specify a profile directory in your implementation of nsidirectoryserviceprovider passed to xre_initembedding. use xre_notifyprofile to make gecko actually use a profile location. how do i change the user agent string? the default useragent is set using the value from your application.ini/nsxreappdata. you can override this default using the "general.useragent.ove...

How to get a stacktrace for a bug report
if you file a bug report in bugzilla about a crash you should include a stacktrace (call stack) in your report. a stacktrace will tell mozilla developers what crashed and provide a starting point for investigating its cause. this article describes how to use the mozilla crash reporter (breakpad) to get a crash id, which our engineers can use to get a stacktrace, and alternative ways to get a stacktrace if you can't get a crash id. requirements you need a binary build of firefox from mozilla.org. seamonkey and thunderbird also support crash reporting. mozilla's crash report server currently only has debug information for mozilla builds and thus the crash reporter cannot work if you use a build from a linux distribution or if you compile from source code. in these cases you will need...
...an't get a crash id. requirements you need a binary build of firefox from mozilla.org. seamonkey and thunderbird also support crash reporting. mozilla's crash report server currently only has debug information for mozilla builds and thus the crash reporter cannot work if you use a build from a linux distribution or if you compile from source code. in these cases you will need to use one of the alternative methods listed below. note: when filing a crash report, it is important to know whether the crash occurs with firefox safe mode. this helps engineers determine whether a particular extension or plugin is the cause of the crash. how to get a crash id with the mozilla crash reporter 1. crash and submit a report to the system. the mozilla crash reporter window should au...
...n your operating system: windows : %appdata%\mozilla\firefox\crash reports\submitted\ os x : ~/library/application support/firefox/crash reports/submitted/ linux : ~/.mozilla/firefox/crash reports/submitted/ each file in this folder contains one submitted crash report id. you can check the modified or creation time for each file to discern which crash reports are relevant to your bug report. alternative ways to get a stacktrace if the mozilla crash reporter doesn't come up or isn't available you will need to obtain a stacktrace manually: windows see the article create a stacktrace with windbg for information on how to do this. for a full process dump, see how to get a process dump with windows task manager [en-us] os x run /applications/utilities/console.app. expand "~/library/log...

Downloads.jsm
methods createdownload() creates a new download object. promise<download> createdownload( object aproperties ); parameters aproperties provides the initial properties for the newly created download. this matches the serializable representation of a download object. some of the most common properties in this object include: source: string containing the uri for the download source. alternatively, may be an nsiuri, a downloadsource object, or an object with the following properties: url: string containing the uri for the download source. isprivate: optional indicates whether the download originated from a private window. if omitted, the download is public. referrer: optional string containing the referrer uri of the download source. can be omitted or null if no r...
...aining the uri for the download source. isprivate: optional indicates whether the download originated from a private window. if omitted, the download is public. referrer: optional string containing the referrer uri of the download source. can be omitted or null if no referrer should be sent or the download source is not http. target: string containing the path of the target file. alternatively, may be an nsifile, a downloadtarget object, or an object with the following properties: path: string containing the path of the target file. saver: optional string representing the class of the download operation. if omitted, defaults to "copy". alternatively, may be the serializable representation of a downloadsaver object. promise resolves to the newly created...
...o cancel or restart the download programmatically. for that, you should obtain a reference to a download object using the createdownload() function. since the download cannot be restarted, any partially downloaded data will not be kept in case the download fails. promise fetch( asource, atarget, object aoptions ); parameters asource string containing the uri for the download source. alternatively, may be an nsiuri or a downloadsource object. atarget string containing the path of the target file. alternatively, may be an nsifile or a downloadtarget object. aoptions optional an optional object used to control the behavior of this function. you may pass an object with a subset of the following fields: isprivate: optional indicates whether the download originated from a priv...

source-editor.jsm
represent the default values for each of the available configuration options. see the editor configuration object for details on configuring the editor. ...
...the context menu. expandtab boolean a boolean value indicating whether or not tab characters should be expanded out to spaces. this value is overridden by the user preference named by sourceeditor.prefs.expand_tab. highlightcurrentline boolean a boolean value indicating whether or not to highlight the line on which the text caret is currently located. initialtext string the default initial text to be in the editor when it's created. by default, this is the empty string, indicating there should be no text on startup. keys array an array of objects defining custom keyboard bindings. see xxxxx for details. mode string a string indicating the default syntax highlighting mode; by default, the content is assumed to be pl...
...dings. see xxxxx for details. mode string a string indicating the default syntax highlighting mode; by default, the content is assumed to be plain text. see editor mode constants for permitted values. placeholdertext string the default initial text to be in the editor when it's created; by default, an empty string. this is deprecated starting in firefox 13; use initialtext instead. deprecated since gecko 13.0 readonly boolean a boolean value indicating whether or not the source editor should be read only. showannotationruler boolean a boolean value indicating whether or not to display the annotations gutter/ruler. see xxxxx for details. showlinenumbers boolean a boolean value indicating whether or not the line numbe...

Creating localizable web applications
gn in") . "</a> : " . _("forgot your password?"), $locale_conf->url('/'), $locale_conf->url('/signin'));?> </p> snippet 7. bad: <p class="description"><?= _("<strong>description:</strong>");?></p> snippet 8. good: <p class="description"><strong><?= _("description:");?></strong></p> snippet 9. good: <h1> <?printf("<a href=\"%s\"><img src=\"/static/img/logo.png\" alt=\"" . _("mozilla labs personas") . "\" /></a>", $locale_conf->url('/'));?> </h1> snippet 10. better: <h1> <a href="<?= $locale_conf->url('/') ?>"> <img src="/static/img/logo.png" alt="<?= /* l10n: link title attribute */ _("mozilla labs personas"); ?> " /> </a> </h1> ...but don't sacrifice flexibility don't sacrifice flexibility trying to satisfy the rule above. make sure ...
...with # ... or // ...). in either way, use a consistent prefix for localization-related comments, e.g. "l10n". when extracting strings with xgettext you will be able to include only comments starting with this prefix using the --add-comments=prefix option, for example xgettext --add-comments=l10n. snippet 1. bad: <h1> <a href="<?= $locale_conf->url('/') ?>"> <img src="/static/img/logo.png" alt="<?= _("mozilla labs personas"); ?>" /> </a> </h1> snippet 2. good: <h1> <a href="<?= $locale_conf->url('/') ?>"> <img src="/static/img/logo.png" alt="<?= /* l10n: link title attribute */ _("mozilla labs personas") ?> " /> </a> </h1> snippet 3. bad: <p class="added"><? printf(_("<strong>added:</strong> %s"), $persona['date']);?></p> snippet 4. good: <p class="added"><? printf(...
... bad: image 5 & snippet 1. good: image file (/img/tignish/firefox/performance-chart.png): html: (in this case, no gettext was used and the localizers worked on pure html files) <div id="performance-chart"> <h4>firefox performance: fast — faster — <em>fastest</em></h4> <p>results of a sunspider test on a windows xp machine</p> <img src="/img/tignish/firefox/performance-chart.png" alt="firefox 2, firefox 3, firefox 3.5 performance chart" /> <ul> <li>18,148 ms</li> <li>3,669 ms</li> <li>1,524 ms!</li> </ul> </div> in the above example, not only does the text above the clock charts require translation, but so do the milliseconds captions below them. many languages use different number formats than english, like 18 148 or 18.148. also, the last caption includes ...

Memory reporting
flexible and integrate well with dmd. the amallocsizeof parameter allows mozilla::mallocsizeof functions with dmd-specific hooks to be passed in when they are used by memory reporters, but functions without such hooks (such as moz_malloc_size_of) can also be passed in when they are used in other circumstances. some other things to note. please use size_t for the sizes in functions like this. although nsimemoryreporter uses int64_t, this is because (a) you can't use size_t in idl, and (b) not every "amount" is a bytes measurement. so it's best to mostly use size_t and convert to int64_t as late as possible. you don't always need both sizeofexcludingthis and sizeofincludingthis. implement one or both as needed. if you have both, sizeofexcludingthis is the interesting one; sizeofincludingt...
...ling b::sizeofexcludingthis instead of d::sizeofexcludingthis, and thus we'll fail to measure any objects that d's fields point to. d::sizeofexcludingthis must also call b::sizeofexcludingthis, to ensure that any objects pointed to by fields inherited from b are measured. however, if d does not have any of its own fields that point to other objects, then d::sizeofexcludingthis is not necessary. alternatively, if d does have fields that point to other objects but you don't want to measure them because they're insignificant, then d::sizeofexcludingthis is again not necessary. but it's a good idea to add a comment indicating this decision not to measure, and the names of the unmeasured fields. the obvious place for this comment is within d, but if b has many sub-classes like that, it might be ...
...ory. in this case it's often clearer to increment the numbers rather than assigning to them, especially if you're measuring multiple entities and summing their measurements. for example: void foobar::addsizeofexcludingthis(nsmallocsizeoffun amallocsizeof, size_t *afoosizeout, size_t* abarsizeout) const { *afoosizeout += ...; *abarsizeout += ...; } alternatively, you could create a struct: struct foobarsizes { size_t mfoo; size_t mbar; foobarsizes() { mozilla::podzero(this); } } void foobar::addsizeofexcludingthis(nsmallocsizeoffun amallocsizeof, foobarsizes* asizes) const { asizes->mfoo += ...; asizes->mbar += ...; } note the add prefix that makes this incrementing behaviour clear. obviously, if...

PR_IntervalNow
returns the value of nspr's free-running interval timer. syntax #include <prinrval.h> printervaltime pr_intervalnow(void); returns a printervaltime object. description you can use the value returned by pr_intervalnow() to establish epochs and to determine intervals (that is, compute the difference between two times). pr_intervalnow() is both very efficient and nonblocking, so it is appropriate to use (for example) while holding a mutex. the most common use for pr_intervalnow() is to establish an epoch and test for the expiration of intervals. in this case, you typically call pr_intervalnow() in a sequence that looks like this: pruint32 interval = ... ; // milliseconds // ... ...
...times). pr_intervalnow() is both very efficient and nonblocking, so it is appropriate to use (for example) while holding a mutex. the most common use for pr_intervalnow() is to establish an epoch and test for the expiration of intervals. in this case, you typically call pr_intervalnow() in a sequence that looks like this: pruint32 interval = ... ; // milliseconds // ... ...
... pr_intervalnow() is to establish an epoch and test for the expiration of intervals. in this case, you typically call pr_intervalnow() in a sequence that looks like this: pruint32 interval = ... ; // milliseconds // ... ...

PR_TicksPerSecond
pr_pr_tickspersecond() allows you to discover exactly what that relationship is. ...
...pr_pr_tickspersecond() allows you to discover exactly what that relationship is. ...
...h> pruint32 pr_tickspersecond(void); returns an integer between 1000 and 100000 indicating the number of ticks per second counted by printervaltime on the current platform. this value is platform-dependent and does not change after nspr is initialized. description the value returned by pr_tickspersecond() lies between pr_interval_min and pr_interval_max. the relationship between a printervaltime tick and standard clock units is platform-dependent. pr_pr_tickspersecond() allows you to discover exactly what that relationship is. seconds per tick (the inverse of pr_pr_tickspersecond()) is always between 10 microseconds and 1 millisecond. ...

An overview of NSS Internals
e of nss's expectation to operate with an nss database, it's mandatory that you perform an initialization call, where you tell nss which database you will be using. in the most simple scenario, the programmer will provide a directory on your filesystem as a parameter to the init function, and nss is designed to do the rest. it will detect and open an existing database, or it can create a new one. alternatively, should you decide that you don't want to work with any persistent recording of certificates, you may initialize nss in a no-database mode. usually, nss will flush all data to disk as soon as new data has been added to permanent storage. storage consists of multiple files: a key database file, which contains your secret keys, and a certificate database file which contains the public por...
... only. when dealing with certificates (x.509), file formats such as pkcs#12 (certificates and keys), pkcs#7 (signed data), and message formats as cms, we should mention asn.1, which is a syntax for storing structured data in a very efficient (small sized) presentation. it was originally developed for telecommunication systems at times where it was critical to minimize data as much as possible (although it still makes sense to use that principle today for good performance). in order to process data available in the asn.1 format, the usual approach is to parse it and transfer it to a presentation that requires more space but is easier to work with, such as (nested) c data structures. over the time nss has received three different asn.1 parser implementations, each having their own specific p...
...th their business, they might make deals with established cas and receive so-called cross-signing-certificates. as a result, when searching for a trust path from (a) to a trusted anchor (root) certificate (z), the set of candidate issuer certificates might have different issuer names (referring to the second or higher issuer level). as a consequence, it will be necessary to try multiple different alternative routes while searching for (z), in a recursive manner. only the newer verification engine (internally named libpkix) is capable of doing that properly. it's worth mentioning the extended validation (ev) principle, which is an effort by software vendors and cas to define a stricter set of rules for issuing certificates for web site certificates. instead of simply verifying that the requ...

NSS tools : crlutil
orresponding to the private key used to sign a crl. authkeyid critical [key-id | dn cert-serial] where: authkeyident: identifies the name of an extension critical: value of 1 of 0. should be set to 1 if this extension is critical or 0 otherwise. key-id: key identifier represented in octet string. dn:: is a ca distinguished name cert-serial: authority certificate serial number. ...
...sign a crl. authkeyid critical [key-id | dn cert-serial] where: authkeyident: identifies the name of an extension critical: value of 1 of 0. should be set to 1 if this extension is critical or 0 otherwise. key-id: key identifier represented in octet string. dn:: is a ca distinguished name cert-serial: authority certificate serial number. ...
...id: key identifier represented in octet string. dn:: is a ca distinguished name cert-serial: authority certificate serial number. * add issuer alternative name extension: the issuer alternative names extension allows additional identities to be associated with the issuer of the crl. defined options include an rfc822 name (electronic mail address), a dns name, an ip address, and a uri. issueraltnames non-critical name-list where: subjaltnames: identifies the name of an extension should be set to 0 since this is non-critical extension name-list: comma separated list of names * add crl number extension: the crl number is a non-critical crl extension which conveys a monotonically increasing sequence number for a given crl scope and crl issuer. this extension allows users to easily de...

NSS tools : pk12util
sql:]directory] [-p dbprefix] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] for example, this prints the default ascii output: # pk12util -l certs.p12 enter password for pkcs12 file: key(shrouded): friendly name: thawte freemail member's thawte consulting (pty) ltd. ...
...this allows the certificates to be fed to another application that supports .p12 files. ...
...icate is written to a sequentially-number file, beginning with file0001.der and continuing through file000n.der, incrementing the number for every certificate: # pk12util -l test.p12 -r enter password for pkcs12 file: key(shrouded): friendly name: thawte freemail member's thawte consulting (pty) ltd. id encryption algorithm: pkcs #12 v2 pbe with sha-1 and 3key triple des-cbc parameters: salt: 45:2e:6a:a0:03:4d:7b:a1:63:3c:15:ea:67:37:62:1f iteration count: 1 (0x1) certificate friendly name: thawte personal freemail issuing ca - thawte consulting certificate friendly name: thawte freemail member's thawte consulting (pty) ltd. id password encryption pkcs#12 provides for not only the protection of the private keys but also the certificate and meta-data associated with the keys. p...

NSS Tools crlutil
ign a crl. authkeyid critical [key-id | dn cert-serial] where: authkeyident: identifies the name of an extension critical: value of 1 of 0. should be set to 1 if this extension is critical or 0 otherwise. key-id: key identifier represented in octet string. dn:: is a ca distinguished name cert-serial: authority certificate serial number. ...
...key-id | dn cert-serial] where: authkeyident: identifies the name of an extension critical: value of 1 of 0. should be set to 1 if this extension is critical or 0 otherwise. key-id: key identifier represented in octet string. dn:: is a ca distinguished name cert-serial: authority certificate serial number. ...
...ifier represented in octet string. dn:: is a ca distinguished name cert-serial: authority certificate serial number. add issuer alternative name extension: the issuer alternative names extension allows additional identities to be associated with the issuer of the crl. defined options include an rfc822 name (electronic mail address), a dns name, an ip address, and a uri. issueraltnames non-critical name-list where: subjaltnames: identifies the name of an extension should be set to 0 since this is non-critical extension name-list: comma separated list of names add crl number extension: the crl number is a non-critical crl extension which conveys a monotonically increasing sequence number for a given crl scope and crl issuer. t...

NSS tools : crlutil
e private key used to sign a crl. authkeyid critical [key-id | dn cert-serial] where: authkeyident: identifies the name of an extension critical: value of 1 of 0. should be set to 1 if this extension is critical or 0 otherwise. key-id: key identifier represented in octet string. dn:: is a ca distinguished name cert-serial: authority certificate serial number. ...
...eyid critical [key-id | dn cert-serial] where: authkeyident: identifies the name of an extension critical: value of 1 of 0. should be set to 1 if this extension is critical or 0 otherwise. key-id: key identifier represented in octet string. dn:: is a ca distinguished name cert-serial: authority certificate serial number. ...
...ier represented in octet string. dn:: is a ca distinguished name cert-serial: authority certificate serial number. * add issuer alternative name extension: the issuer alternative names extension allows additional identities to be associated with the issuer of the crl. defined options include an rfc822 name (electronic mail address), a dns name, an ip address, and a uri. issueraltnames non-critical name-list where: subjaltnames: identifies the name of an extension should be set to 0 since this is non-critical extension name-list: comma separated list of names * add crl number extension: the crl number is a non-critical crl extension which conveys a monotonically increasing sequence number for a given crl scope and crl issuer. this extension allows ...

NSS tools : pk12util
slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] for example, this prints the default ascii output: # pk12util -l certs.p12 enter password for pkcs12 file: key(shrouded): friendly name: thawte freemail member's thawte consulting (pty) ltd. ...
...:62:1f iteration count: 1 (0x1) certificate: data: version: 3 (0x2) serial number: 13 (0xd) signature algorithm: pkcs #1 sha-1 with rsa encryption issuer: "e=personal-freemail@thawte.com,cn=thawte personal freemail c a,ou=certification services division,o=thawte consulting,l=cape t own,st=western cape,c=za" .... alternatively, the -r prints the certificates and then exports them into separate der binary files. this allows the certificates to be fed to another application that supports .p12 files. each certificate is written to a sequentially-number file, beginning with file0001.der and continuing through file000n.der, incrementing the number for every certificate: # pk12util -l test.p12 -r ent...
...lly-number file, beginning with file0001.der and continuing through file000n.der, incrementing the number for every certificate: # pk12util -l test.p12 -r enter password for pkcs12 file: key(shrouded): friendly name: thawte freemail member's thawte consulting (pty) ltd. id encryption algorithm: pkcs #12 v2 pbe with sha-1 and 3key triple des-cbc parameters: salt: 45:2e:6a:a0:03:4d:7b:a1:63:3c:15:ea:67:37:62:1f iteration count: 1 (0x1) certificate friendly name: thawte personal freemail issuing ca - thawte consulting certificate friendly name: thawte freemail member's thawte consulting (pty) ltd. id password encryption pkcs#12 provides for not only the protection of the private keys but also the certificate a...

JS_DumpHeap
try to avoid using it. this article covers features introduced in spidermonkey 1.8 debug only. dump the object graph of heap-allocated things. syntax bool js_dumpheap(jsruntime *rt, file *fp, void* startthing, jsgctracekind kind, void *thingtofind, size_t maxdepth, void *thingtoignore); name type description cx jscontext * pointer to a js context. every jscontext is permanently associated with a jsruntime; each jsruntime contains a gc heap. fp file * file for the dump output. ...
...ng. if this is non-null, js_dumpheap only dumps paths in the object graph leading to the specified thing. maxdepth size_t the upper bound on the number of edges to descend from the graph roots. thingtoignore void * null or a pointer to a gc thing that will be ignored during graph traversal. enum jsgctracekind { // these trace kinds have a publicly exposed, although opaque, c++ type. // note: the order here is determined by our value packing. other users // should sort alphabetically, for consistency. jstrace_object = 0x00, jstrace_string = 0x01, jstrace_symbol = 0x02, jstrace_script = 0x03, // shape details are exposed through js_traceshapecyclecollectorchildren. jstrace_shape = 0x04, // the kind associated w...
...ode = 0x1f, jstrace_lazy_script = 0x2f, jstrace_type_object = 0x3f, jstrace_last = jstrace_type_object }; description see bug 378261 for detail. when tracing a thing, the gc needs to know about the layout of the object it is looking at. there are a fixed number of different layouts that the gc knows about. the "trace kind" is a static map which tells which layout a gc thing has. although this map is public, the details are completely hidden. not all of the matching c++ types are exposed, and those that are, are opaque. see js::value::gckind() and jstracecallback in <codde>tracer.h</codde> for more details. see also bug 378261 bug 1122842 ...

Detailed XPCOM hashtable guide
are often much easier and safer to use in c++ code, as many potential casting errors are easily avoided. you must declare an entry struct type, deriving from pldhashentryhdr. this entry struct should contain whatever data you wish to store in the hashtable (any pointer or fixed-length data type). note: because of the double-hashing implementation, entries may move in memory when the hashtable is altered. if you need entry pointers to remain constant, you may want to consider using plhashtable instead. you must also initialize a pldhashtableops structure. this serves similarly to a vtable in c++, with pointers to appropriate user-defined functions that initialize, compare, and match entries. because pldhash does not know what datatype your key is, all functions that work with keys are declar...
...e pldhash, above). it also declares functions that manipulate the key. in most cases, the functions of this entry class can be entirely inline. for examples of entry classes, see the declarations at xpcom/glue/nshashkeys.h. the template parameter is the entry class. you must use the init() function to initalize the table properly. at this point, use the functions putentry/getentry/removeentry to alter the hashtable. the iterator class will do iteration, but beware that the iteration will occur in a seemingly-random order (no sorting). nsthashtables can be allocated on the stack, as class members, or on the heap. entry pointers can and do change when items are added to or removed from the hashtable. do not keep long-lasting pointers to entries. because of this, nsthashtable is not inhere...
...able stores a pointer to the object, and deletes that object when the entry is removed. the important files to read are xpcom/glue/nsbasehashtable.h and xpcom/glue/nshashkeys.h. these classes can be used on the stack, as a class member, or on the heap. initialize using the init() function; you can specify whether you need thread-safety at this time. use the put(), get(), and remove() methods to alter the table. using nsthashtable as a hash-set a hash set only tracks the existence of keys: it does not associate data with the keys. this can be done using nsthashtable<nssomehashkey>. the appropriate entries are getentry and putentry. future plans nsisimpleenumerator support the (obsolete) nshashtable has a wrapper that exposes an nsisimpleenumerator on its items. i will add this support t...

nsACString (External)
class declaration <map id="classes" name="classes"><area alt="" coords="1005,6,1096,54" href="http://developer.mozilla.org/en/nsacstring_(external)" shape="rect" title="nsacstring_(external)"> <area alt="" coords="980,102,1121,150" href="http://developer.mozilla.org/en/nscstringcontainer_(external)" shape="rect" title="nscstringcontainer_(external)"> <area alt="" coords="571,198,707,246" href="http://developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcstri...
...illa.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcstring_(external)"> <area alt="" coords="1147,198,1259,246" href="http://developer.mozilla.org/en/nscautostring_(external)" shape="rect" title="nscautostring_(external)"> <area alt="" coords="5,294,208,342" href="http://developer.mozilla.org/en/nsdependentcstring_external" shape="rect" title="nsdependentcstring_external"> <area alt="" coords="232,294,475,342" href="http://developer.mozilla.org/en/ns_convertutf16toutf8_externa...
...org/en/nscautostring_(external)" shape="rect" title="nscautostring_(external)"> <area alt="" coords="5,294,208,342" href="http://developer.mozilla.org/en/nsdependentcstring_external" shape="rect" title="nsdependentcstring_external"> <area alt="" coords="232,294,475,342" href="http://developer.mozilla.org/en/ns_convertutf16toutf8_external" shape="rect" title="ns_convertutf16toutf8_external"> <area alt="" coords="499,294,779,342" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii_external" shape="rect" title="ns_lossyconvertutf16toascii_external"> <area alt="" coords="803,294,925,342" href="http://developer.mozilla.org/en/nsliteralcstring_(external)" shape="rect" title="nsliteralcstring_(external)"></map> method overview beginreading endreading charat ...

nsIDOMMouseScrollEvent
cko 1.9.2 note prior to gecko 1.9.2, this inherited from nsisupports instead of from nsidommouseevent. method overview void initmousescrollevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget relatedtargetarg, in long axis); attributes attribute type description axis long indicates which mouse wheel axis changed; this will be either horizontal_axis or vertical_axis. read only. constants constant ...
... 2 the vertical (y) axis. methods initmousescrollevent() initializes the progress event object. void initmousescrollevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget relatedtargetarg, in long axis ); parameters typearg the type of event. must be one of "abort", "error", "load", "loadstart", or "progress". canbubblearg specifies whether or not the created event will bubble. cancelablearg specifies whether...
...ordinates. screenyarg the y coordinate at which the event occurred, in screen coordinates. clientxarg the x coordinate at which the event occurred, in client coordinates. clientyarg the y coordinate at which the event occurred, in client coordinates. ctrlkeyarg true if the control key was down when the event occurred, otherwise false. altkeyarg true if the alt key was down when the event occurred, otherwise false. shiftkeyarg true if the shift key was down when the event occurred, otherwise false. metakeyarg true if the meta key was down when the event occurred, otherwise false. buttonarg indicates which mouse button was pressed when the event occurred, if any. relatedtargeta...

nsIDOMSimpleGestureEvent
application. consumers should use event.preventdefault() to prevent default behavior when consuming events. method overview void initsimplegestureevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget relatedtargetarg, in unsigned long directionarg, in double deltaarg); attributes attribute type description delta double the delta value indicating how far the gesture moved. for update events, this indicates the movement since the previous update; for...
...clockwise 2 clockwise rotation. methods initsimplegestureevent() initializes the gesture event. ...
... deltaarg the value to assign to the delta attribute. ...

nsIDOMWindowUtils
ly. audiomuted boolean with this it's possible to mute all the mediaelements in this window. we have audiomuted and audiovolume to preserve the volume across mute/umute. audiovolume float range: greater or equal to 0. the real volume level is affected by the volume of all ancestor windows. constants constant value description modifier_alt 0x0001 getmodifierstate("alt") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event(). modifier_control 0x0002 getmodifierstate("control") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event(). modifier_shift 0x0004 getmodifierstate("shift") of...
...except sendnative*event(). modifier_shift 0x0004 getmodifierstate("shift") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event(). modifier_meta 0x0008 getmodifierstate("meta") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event(). modifier_altgraph 0x0010 getmodifierstate("altgraph") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event(). modifier_capslock 0x0020 getmodifierstate("capslock") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event(). modifier_fn 0x0040 getmodifierstate("f...
...tscrollframe optional ); parameters atype ax ay abutton aclickcount amodifiers modifiers pressed. using constants defined in nsidomnsevent. obsolete since gecko 15.0 using constants defined as modifier_*. aignorerootscrollframe optional sendmousescrollevent() obsolete since gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. synthesize a mouse scroll event for a window. the event types supported are: dommousescroll mozmousepixelscroll. events are sent in coordinates offset by ax and ay from the window. cannot be accessed from unprivileged context (not content-accessible) will throw a dom se...

nsINavHistoryResultViewer
inavhistoryresultobserver interface, which is similar but allows multiple clients to observe the result at once. 1.0 66 introduced gecko 1.9 obsolete gecko 2.0 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. note: most methods in this interface were renamed in gecko 1.9.2, and others have slightly different parameter lists. method overview void containerclosed(in nsinavhistorycontainerresultnode acontainernode); void containeropened(in nsinavhistoryconta...
...avhistoryresultnode newitem, in unsigned long index); void nodeinserted(in nsinavhistorycontainerresultnode aparent, in nsinavhistoryresultnode anode , in unsigned long anewindex); void sortingchanged(in unsigned short sortingmode); attributes attribute type description result nsinavhistoryresult the nsinavhistoryresult this viewer monitors. although this attribute is read-write, you should not alter it directly; instead, use the nsinavhistoryresult.viewer attribute to set the viewer. methods containerclosed() called when a container node's state changes from closed to opened. void containerclosed( in nsinavhistorycontainerresultnode acontainernode ); parameters acontainernode the container node whose state changed. ...
...the node to insert into the container; it may be either a leaf or another container. anewindex the index at which to insert the item. remarks the item previously at the specified index (if any) as well as everything below it, is shifted down by one. sortingchanged() called when the sorting order is changed to a particular mode. for trees, this would update the column headers to reflect the altered sorting. void sortingchanged( in unsigned short sortingmode ); parameters sortingmode one of the nsinavhistoryqueryoptions.sort_by_* constants, indicating the softing mode. remarks this method is only called to update the sorting user interface. invalidateall() is called as well if the sorting changes, in order to cause the contents to update properly. see also nsinavhistoryr...

nsIPluginHost
y. native code only! methods native code only!createtempfiletopost to create temp file with content len header in, it will use by http post. nsifile createtempfiletopost( in string apostdataurl ); parameters apostdataurl return value native code only!createtmpfiletopost obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. to create temp file with content len header in, it will use by http post. void createtmpfiletopost( in string apostdataurl, out string atmpfilename ); parameters apostdataurl atmpfilename native code only!deletepluginnativewindow deletes plugin nativ...
...imetype ); parameters amimetype return value getplugincount() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void getplugincount( out unsigned long aplugincount ); parameters aplugincount native code only!getpluginfactory obsolete since gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. nsiplugin getpluginfactory( in string amimetype ); parameters amimetype return value native code only!getpluginname get the plugin name for the plugin instance. void getpluginname( in nsiplugininstance ainstance, [shared] out string apluginname ); ...
...f aoutpostdata. reloadplugins() causes the plugins directory to be searched again for new plugin libraries. void reloadplugins( in boolean reloadpages ); parameters reloadpages indicates whether currently visible pages should also be reloaded. native code only!setisscriptableinstance obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. to notify the plugin manager that the plugin created a script object. void setisscriptableinstance( in nsiplugininstance ainstance, in boolean ascriptable ); parameters ainstance ascriptable native code only!setupplugininstance void setupplugininstance...

nsIXULBrowserWindow
xpfe/appshell/public/nsixulbrowserwindow.idlscriptable provides methods that may be called from the internals of the browser area to tell the containing xul window to update its user interface. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) the xulbrowserwindow attribute exists on the nsixulwindow interface although both firefox and seamonkey also store their nsixulbrowserwindow reference in the global xulbrowserwindow object accessible from javascript code. note: the xulbrowserwindow object offered to javascript code provides a great many more methods and attributes than those listed here, which are only the ones available to c++ code. see the documentation for xulbrowserwindow for details. method overview astring onbefore...
...lbrowserwindow reference in the global xulbrowserwindow object accessible from javascript code. note: the xulbrowserwindow object offered to javascript code provides a great many more methods and attributes than those listed here, which are only the ones available to c++ code. see the documentation for xulbrowserwindow for details. method overview astring onbeforelinktraversal(in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); void setjsdefaultstatus(in astring status); void setjsstatus(in astring status); void setoverlink(in astring link, in nsidomelement element); methods onbeforelinktraversal() called before traversing a link to determine the appropriate target into which to load the link. this may be used, for example, to redirect links...
... in nsidomelement element); methods onbeforelinktraversal() called before traversing a link to determine the appropriate target into which to load the link. this may be used, for example, to redirect links into new tabs or windows when it's not desirable to replace the content in the current tab (such as when the link is clicked in an app tab). astring onbeforelinktraversal( in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters originaltarget the specified target for the link. linkuri the uri of the link that is about to be traversed. linknode the nsidomnode representing the dom node in which the link is located. isapptab whether or not the link being clicked is in an app tab. return value a string indicating the revised target fo...

nsIZipWriter
the operations in the order they were added to the queue. operations performed on the queue throw any errors that occur out to the observer. attempting to perform a synchronous operation on the interface while the background queue is in progress will throw an ns_error_in_progress exception. file and directory names should use slashes ("/") as separators and should not begin with a slash. note: although it is not necessary to add directory entries in order to add file entries within them, some zip utilities may have problems with that, so it may be best to add the directory entries explicitly first. implemented by: @mozilla.org/zipwriter;1. to create an instance, use: var zipwriter = components.classes["@mozilla.org/zipwriter;1"] .createinstance(components.interfaces.nsizi...
...ormed when processqueue() is called. exceptions thrown ns_error_not_initialized no zip file is open. ns_error_file_already_exists the specified path already exists in the zip file. ns_error_in_progress the zip writer is already performing another operation. addentrydirectory() adds a new directory entry to the zip file. if azipentry does not end with "/" then it will be added. note: although it is not necessary to add directory entries in order to add file entries within them, some zip utilities may have problems with that, so it may be best to add the directory entries explicitly first. void addentrydirectory( in autf8string azipentry, in prtime amodtime, in boolean aqueue ); parameters azipentry the path of the directory entry to add to the zip file.note: you must...
...failing to open the file, such as if the file is corrupt or in an unsupported format. processqueue() processes all queued items until the entire queue has been processed or an error occurs. the observer is notified when the first operation begins and when the last operation completes. any failures are passed to the observer. the zip writer will be busy until the queue is complete or an error halts processing of the queue early. in the event of an early failure, the remaining items stay in the queue; calling processqueue() again will continue where operations left off. void processqueue( in nsirequestobserver aobserver, in nsisupports acontext ); parameters aobserver the observer to receive notifications from the queue. acontext the context to pass to the observer. exception...

Mozilla
file that describes the search engine, its url, and the parameters that need to be passed to that url. creating reftest-based unit tests the reftest harness compares the display of two web pages. if the bitmaps resulting from displaying the two files in an 800x1000 window are identical, the test passes. if they differ, the test fails. or, alternatively, the conditions can be reversed (a != test rather than an == test). the power of the tool comes from the fact that there is more than one way to achieve any given visual effect in a browser. so, if the effect of complex markup is being tested, put that complex markup into a page and create another page that uses simple markup to achieve the same visual effect. re...
... if you file a bug report in bugzilla about a crash you should include a stacktrace (call stack) in your report. a stacktrace will tell mozilla developers what crashed and provide a starting point for investigating its cause. this article describes how to use the mozilla crash reporter (breakpad) to get a crash id, which our engineers can use to get a stacktrace, and alternative ways to get a stacktrace if you can't get a crash id. how to get a stacktrace with windbg sometimes you need to get a stacktrace (call stack) for a crash or hang but breakpad fails because it's a special crasher or a hang. this article describes how to get a stacktrace in those cases with windbg on windows. (to get a stacktrace fo...
... the style system is the module of mozilla's code responsible for the loading and parsing of css style sheets, and the computation of computed values for all css properties. the handling of those computed values is the responsibility of other parts of the code. mozilla style system documentation see also the style techtalk for more complete although less detailed documentation. mozilla svg project since you have come this far, you probably already know that svg stands for scalable vector graphics, and that it is an xml language for sophisticated 2-dimensional graphics. svg is to graphics what xhtml is to text, mathml is to mathematical equations and cml is to the description of chemical molecul...

Examine and edit HTML - Firefox Developer Tools
ches all <a> elements but not the letter "a" within the text content. furthermore it allows for some more advanced searches like finding elements that start with a specific text, for example. html tree the rest of the pane shows you the page's html as a tree (this ui is also called the markup view). just to the left of each node is an arrow: click the arrow to expand the node. if you hold the alt key while clicking the arrow, it expands the node and all the nodes underneath it. moving the mouse over a node in the tree highlights that element in the page. nodes that are not visible are shown faded/desaturated. this can happen for different reasons such as using display: none or that the element doesn't have any dimensions. there is an ellipsis shown between the opening and closing tag o...
...devtools-examples/whitespace-only-demo/index.html. shadow roots any shadow roots present in the dom are exposed in the html page in the same manner as the regular dom. the shadow root is signified by a node named #shadow-root — you can click its expansion arrow to see the full contents of the shadow dom, and then manipulate the contained nodes in a similar way to other part of the page's dom (although with a limited featureset — you can't, for example, drag and drop or delete shadow dom nodes). if a shadow dom contains a "slotted" element (an element with a slot attribute after it has been inserted inside a <slot> element — see adding flexibility with slots for an explanation of how these are used), the "slotted" element will be shown inside its corresponding <slot> element, with a...
...y selected element. use in console assigns the currently selected node to a variable named temp0 (or temp1 if temp0 is already taken, and so on), then opens the split console, enabling you to interact with that node using the console's command line. expand all in the tree view, expand the current element and all the elements underneath it. this is equivalent to holding the alt key and clicking the disclosure triangle next to an element. collapse in the tree view, collapse the current element. this is equivalent to clicking the disclosure arrow next to an element that's expanded. (paste) inner html paste the clipboard contents into the node as its innerhtml. (paste) outer html paste the clipboard contents into the node as its outerhtm...

Using the CSS Painting API - Web APIs
s registerpaint() function. .fancy { background-image: paint(headerhighlight); } putting it together we can then add the fancy class to any element on the page to add a yellow box as a background: <h1 class="fancy">my cool header</h1> the following example will look like the image above in browsers supporting the css painting api. while you can't play with the worklet's script, you can alter the background-size and background-position to change the size and location of the background image. paintsize in the example above, we created a 20x200 unit box, painted 15 units from the top of the element it is the same regardless of the size of the element. if the text is small, the yellow box looks like a huge underline. if the text is huge, the box might look like an bar above the firs...
...ding to it's size. css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/02parttwo/header-highlight.js'); .fancy { background-image: paint(headerhighlight); } .half { width: 50%; } <h1 class="fancy">largest header</h1> <h6 class="fancy">smallest header</h6> <h3 class="fancy half">50% width header</h3> while you can't play with the worklet's script, you can alter the element's font-size and width to change the size of the background image. in browsers that support the css paint api, the example below should appear like the image above. custom properties in addition to accessing the size of the element, the worklet can also have access to css custom properties and regular css properties. registerpaint('csspaintfunctionname', class { static get...
...n element that has boxbg applied to it and then used those within our paint() function. the inputproperties() method can return all properties affecting the element, not just custom properties. in our <script> we register the worklet: css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklet/boxbg.js'); while you can't play with the worklet's script, you can alter the custom property values to change the colors and width of the background image. adding complexity the above examples might not seem very exciting, as you could recreate them in a few different ways with existing css properties, e.g. by positioning some decorative generated content with ::before, or including background: linear-gradient(yellow, yellow) 0 15px / 200px 20px no-repeat; what ma...

Basic usage of canvas - Web APIs
s start this tutorial by looking at the <canvas> html element itself. at the end of this page, you will know how to set up a canvas 2d context and have drawn a first example in your browser. the <canvas> element <canvas id="tutorial" width="150" height="150"></canvas> at first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes. indeed, the <canvas> element has only two attributes, width and height. these are both optional and can also be set using dom properties. when no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. the element can be sized arbitrarily by css, but during rendering the image is scaled to fit its layout size: if the css sizing does...
...from an <img> tag in that, like for <video>, <audio>, or <picture> elements, it is easy to define some fallback content, to be displayed in older browsers not supporting it, like versions of internet explorer earlier than version 9 or textual browsers. you should always provide fallback content to be displayed by those browsers. providing fallback content is very straightforward: just insert the alternate content inside the <canvas> element. browsers that don't support <canvas> will ignore the container and render the fallback content inside it. browsers that do support <canvas> will ignore the content inside the container, and just render the canvas normally. for example, we could provide a text description of the canvas content or provide a static image of the dynamically rendered content...
...ust render the canvas normally. for example, we could provide a text description of the canvas content or provide a static image of the dynamically rendered content. this can look something like this: <canvas id="stockgraph" width="150" height="150"> current stock price: $3.15 + 0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas> telling the user to use a different browser that supports canvas does not help users who can't read the canvas at all, for example. providing a useful fallback text or sub dom helps to make the canvas more accessible. required </canvas> tag as a consequence of the way fallback is provided, unlike the <img> element, the <canvas> element requires the closing tag (</canvas>). if t...

Document.linkColor - Web APIs
syntax color = document.linkcolor document.linkcolor = color parameters color is a string representing the color as a word (e.g., red) or hexadecimal value (e.g., #ff0000). ...
... syntax color = document.linkcolor document.linkcolor = color parameters color is a string representing the color as a word (e.g., red) or hexadecimal value (e.g., #ff0000). ...
... syntax color = document.linkcolor document.linkcolor = color parameters color is a string representing the color as a word (e.g., red) or hexadecimal value (e.g., #ff0000). ...

Examples of web and XML development using the DOM - Web APIs
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 style properties of an html paragraph element are accessed using the style object on the e...
...ox is displayed to confirm this. <!doctype html> <html lang="en"> <head> <title>event propagation</title> <style> #t-daddy { border: 1px solid red } #c1 { background-color: pink; } </style> <script> function stopevent(ev) { c2 = document.getelementbyid("c2"); c2.innerhtml = "hello"; // this ought to keep t-daddy from getting the click. ...
... if dom core methods document.createelement and node.appendchild are used to create rows and cells, ie requires that they are appended to a tbody element, whereas other browsers will allow appending to a table element (the rows will be added to the last tbody element). there are a number of other convenience methods belonging...

FileSystem - Web APIs
ge is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...ta, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemchrome full support 7alternate name full support 7alternate name alternate name uses the non-standard name: domfilesystemedge full support ≤18prefixed notes full support ≤18prefixed notes prefixed implemented with the vendor prefix: webkitnotes edge only supports this api in drag-and-drop scenarios using the the datatransferitem.webkitgetasentry() method. ...
... no support noopera full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix: webkitsafari full support 11.1webview android full support ≤37alternate name full support ≤37alternate name alternate name uses the non-standard name: domfilesystemchrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: domfilesystemfirefox android ...

GeolocationCoordinates - Web APIs
the geolocationcoordinates interface represents the position and altitude of the device on earth, as well as the accuracy with which these properties are calculated. properties the geolocationcoordinates interface doesn't inherit any properties. geolocationcoordinates.latitude read only secure context returns a double representing the position's latitude in decimal degrees. geolocationcoordinates.longitude read only secure context returns a double representing the position's longitude in decimal degrees. geolocationcoordinates.altitude read only secure context returns a double representing the position's altitude in meters, relative to sea level. this value can be null if the implementation cannot provide the data. geolocationcoordinates.accuracy read only secure con...
...this value can be null. geolocationcoordinates.heading read only secure context returns a double representing the direction towards which the device is facing. this value, specified in degrees, indicates how far off from heading true north the device is. ...
...this value can be null. geolocationcoordinates.heading read only secure context returns a double representing the direction towards which the device is facing. this value, specified in degrees, indicates how far off from heading true north the device is. ...

HTMLMarqueeElement - Web APIs
nt-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmarqueeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlmarqueeelement.behavior sets how the text is scrolled within the marquee. possible values are scroll, slide and alternate. if no value is specified, the default value is scroll. htmlmarqueeelement.bgcolor sets the background color through color name or hexadecimal value. htmlmarqueeelement.direction sets the direction of the scrolling within the marquee. possible values are left, right, up and down. if no value is specified, the default value is left. htmlmarqueeelement.height sets the height in pixels o...
...crolldelay values lower than 60 are ignored. if truespeed is true, then those values are not ignored. htmlmarqueeelement.vspace sets the vertical margin. htmlmarqueeelement.width sets the width in pixels or percentage value. event handlers htmlmarqueeelement.onbounce fires when the marquee has reached the end of its scroll position. it can only fire when the behavior attribute is set to alternate. htmlmarqueeelement.onfinish fires when the marquee has finished the amount of scrolling that is set by the loop attribute. it can only fire when the loop attribute is set to some number that is greater than 0. htmlmarqueeelement.onstart fires when the marquee starts scrolling. methods inherits methods from its parent, htmlelement. htmlmarqueeelement.start() starts scrolling of t...
...olling. methods inherits methods from its parent, htmlelement. htmlmarqueeelement.start() starts scrolling of the marquee. htmlmarqueeelement.stop() stops scrolling of the marquee. examples <marquee>this text will scroll from right to left</marquee> <marquee direction="up">this text will scroll from bottom to top</marquee> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> this text will bounce </marquee> </marquee> specifications specification status comment html living standardthe definition of 'htmlmarqueeelement' in that specification. living standard made obsolete in favor of css but define its expected behavior for backward compatibility. html 5.2the...

Timing element visibility with the Intersection Observer API - Web APIs
of interest become more or less obscured by a shared ancestor node or element, including the document itself. in this article, we'll build a mock blog which has a number of ads interspersed among the contents of the page, then use the intersection observer api to track how much time each ad is visible to the user. when an ad exceeds one minute of visible time, it will be replaced with a new one. although many aspects of this example will not match real world usage (in particular, the articles all have the same text and aren't loaded from a database, and there are just a handful of simple text-only ads that are selected from an array), this should provide enough understanding of the api to quickly learn how to apply the intersection observer api to your own site. there's a good reason why th...
...: aside { grid-column: 1; grid-row: 2; background-color: cornsilk; padding: 5px 10px; } aside ul { padding-left: 0; } aside ul li { list-style: none; } aside ul li a { text-decoration: none; } the most important thing to note here is that the grid-column is set to 1, to place the sidebar on the left-hand side of the screen. if you change this to -1, it will appear on the right (although some other elements will need some adjustments made to their margins to get the spacing just right). the grid-row is set to 2, to place it alongside the site body. the content body speaking of the site's body: the main content of the site is kept in a <main> element. the following style is applied to that: main { grid-column: 2; grid-row: 2; margin: 0; margin-left: 16px; font-si...
...t visible as of the last time it was checked. totalviewtime the total number of milliseconds the ad has been visible. these are accessed through each ad's htmlelement.dataset attribute, which provides a domstringmap mapping each custom attribute's name to its value. the values are strings, but we can convert those to numbers easily enough—in fact, javascript generally does it automatically, although we'll have one instance where we have to do it ourselves. we start by fetching the time at which the ad's previous visibility status check time (adbox.dataset.lastviewstarted) into a local variable named laststarted. we also get the current time-since-creation value using performance.now() into currenttime. if laststarted is non-zero—meaning the timer is currently running, we compute the...

KeyboardEvent.initKeyEvent() - Web APIs
vel 2 events specification and is implemented in gecko-based browsers; other browsers implemented keyboardevent.initkeyboardevent based on early drafts of document object model (dom) level 3 events specification. favor the modern constructor structure as the only cross-browser way of building events. syntax event.initkeyevent (type, bubbles, cancelable, viewarg, ctrlkeyarg, altkeyarg, shiftkeyarg, metakeyarg, keycodearg, charcodearg) parameters type is a domstring representing the type of event. bubbles is a boolean indicating whether the event should bubble up through the event chain or not (see bubbles). cancelable is a boolean i indicating whether the event can be canceled (see cancelable). viewarg specifies the uievent.view; this valu...
...event. bubbles is a boolean indicating whether the event should bubble up through the event chain or not (see bubbles). cancelable is a boolean i indicating whether the event can be canceled (see cancelable). viewarg specifies the uievent.view; this value may be null. ctrlkeyarg is a boolean that is true if the virtual key to be generated is a combination of keys containing the ctrl key. altkeyarg is a boolean that is true if the virtual key to be generated is a combination of keys containing the alt key. shiftkeyarg a boolean that is true if the virtual key to be generated is a combination of keys containing the shift key. metakeyarg is a boolean that is true if the virtual key to be generated is a combination of keys containing the meta key. keycodearg is a unsigned long rep...
...devent'); // create a key event // define the event event.initkeyevent("keypress", // typearg, true, // canbubblearg, true, // cancelablearg, null, // viewarg, specifies uievent.view. this value may be null. ...

KeyboardEvent.shiftKey - Web APIs
(false) when the event occurred. ...
... occurred. ...
... obsolete initial definition. ...

Sensor APIs - Web APIs
the sensor apis are a set of interfaces built to a common design that expose device sensors in a consistent way to the web platform. sensor apis concepts and usage although the generic sensor api specification defines a sensor interface, as a web developer you will never use it. instead you'll use one of its subclasses to retrieve specific kinds of sensor data. for example, the accelerometer interface returns the acceleration of the device along all three axes at the time it is read. sensors may or may not correspond exactly to a physical device sensor. for example, the gyroscope interface corresponds exactly to a physical device interface. alternatively, the absoluteorientationsensor interface provides information that is algorithmically agregated from two or more device sensors. these...
... feature detection sensor interfaces are only proxies for the underlying device sensors. consequently, feature detection is more complicated for sensors than it is for other apis. ...
...the user grants permission to a specific sensor type. do this using the permissions api. a brief example, shown below, requests permission before attempting to use the sensor. navigator.permissions.query({ name: 'accelerometer' }) .then(result => { if (result.state === 'denied') { console.log('permission to use accelerometer sensor is denied.'); return; } // use the sensor. }); an alternative approach is to attempt to use the error and listen for the securityerror. const sensor = new absoluteorientationsensor(); sensor.start(); sensor.onerror = event => { if (event.error.name === 'securityerror') console.log("no permissions to use absoluteorientationsensor."); }; the following table describes for each sensor type, the name required for the permissions api, the <iframe>...

SpeechRecognitionEvent - Web APIs
esult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. ...
...ains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects that contain individual results. // these also have getters so they can be accessed like arrays. // the second [0] returns the speechrecognitionalternative at position 0. ...
... // the first [0] returns the speechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects that contain individual results. // these also have getters so they can be accessed like arrays. // the second [0] returns the speechrecognitionalternative at position 0. // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'speechrecognitionevent' in that specification. draft ...

SpeechRecognitionResult.isFinal - Web APIs
esult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. ...
...ains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects that contain individual results. // these also have getters so they can be accessed like arrays. // the second [0] returns the speechrecognitionalternative at position 0. ...
... // the first [0] returns the speechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects that contain individual results. // these also have getters so they can be accessed like arrays. // the second [0] returns the speechrecognitionalternative at position 0. // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.results[0].isfinal); } specifications specification status comment web speech apithe definition of 'isfinal' in that specification. draft ...

SpeechRecognitionResult.item() - Web APIs
the item getter of the speechrecognitionresult interface is a standard getter that allows speechrecognitionalternative objects within the result to be accessed via array syntax. syntax var myalternative = speechrecognitionresultinstance[0]; returns a speechrecognitionalternative object. examples this code is excerpted from our speech color changer example. recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects. ...
...esult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. ...
...ains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects that contain individual results. // these also have getters so they can be accessed like arrays. // the second [0] returns the speechrecognitionalternative at position 0. // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'item()' in that specification. draft ...

SpeechRecognitionResultList.length - Web APIs
esult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. ...
...ains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects that contain individual results. // these also have getters so they can be accessed like arrays. // the second [0] returns the speechrecognitionalternative at position 0. ...
... // the first [0] returns the speechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects that contain individual results. // these also have getters so they can be accessed like arrays. // the second [0] returns the speechrecognitionalternative at position 0. // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.results.length); } specifications specification status comment web speech apithe definition of 'length' in that specification. draft ...

SpeechRecognitionResultList - Web APIs
esult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. ...
...ains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects that contain individual results. // these also have getters so they can be accessed like arrays. // the second [0] returns the speechrecognitionalternative at position 0. ...
... // the first [0] returns the speechrecognitionresult at position 0. // each speechrecognitionresult object contains speechrecognitionalternative objects that contain individual results. // these also have getters so they can be accessed like arrays. // the second [0] returns the speechrecognitionalternative at position 0. // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'speechrecognitionresultlist' in that specification. draft ...

SubtleCrypto.deriveKey() - Web APIs
operation. it's not designed to derive keys from relatively low-entropy inputs such as passwords. for that, use pbkdf2. hkdf is specified in rfc 5869. pbkdf2 pbkdf2 is also a key derivation function. it's designed to derive key material from some relatively low-entropy input, such as a password. it derives key material by applying a function such as hmac to the input password along with some salt, and repeating this process many times. the more times the process is repeated, the more computationally expensive key derivation is: this makes it harder for an attacker to use brute-force to discover the key using a dictionary attack. pbkdf2 is specified in rfc 2898. examples note: you can try the working examples on github. ecdh in this example alice and bob each generate an ecdh key pa...
...y material to use as input to the derivekey method. the key material is a password supplied by the user. ...
...password = window.prompt("enter your password"); let enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), "pbkdf2", false, ["derivebits", "derivekey"] ); } async function encrypt(plaintext, salt, iv) { let keymaterial = await getkeymaterial(); let key = await window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-gcm", "length": 256}, true, [ "encrypt", "decrypt" ] ); return window.crypto.subtle.encrypt( { name: "aes-gcm", iv: iv }, key, plaintext ); } specifications specification status comment web cryptography apithe definition of 'su...

USBInterface - Web APIs
interface.usbinterface creates a new usbinterface object which will be populated with information about the interface on the provided usbconfiguration with the given interface number. properties usbinterface.interfacenumberread only returns the interface number of this interface. this is equal to the binterfacenumber field of the interface descriptor defining this interface. ...
...bject which will be populated with information about the interface on the provided usbconfiguration with the given interface number. properties usbinterface.interfacenumberread only returns the interface number of this interface. this is equal to the binterfacenumber field of the interface descriptor defining this interface. usbinterface.alternateread only returns the currently selected alternative configuration of this interface. ...
...he provided usbconfiguration with the given interface number. properties usbinterface.interfacenumberread only returns the interface number of this interface. this is equal to the binterfacenumber field of the interface descriptor defining this interface. usbinterface.alternateread only returns the currently selected alternative configuration of this interface. by default this is the usbalternateinterface from alternates with alternatesetting equal to 0. it can be changed by calling usbdevice.selectalternateinterface() with any other value found in alternates. usbinterface.alternatesread only returns an array containing instances of the usbalternateinterface interface describing each of the alternative configurations possible for this interface. usbinterface.claimedread only r...

Signaling and video calling - Web APIs
ling process actually work? first we need the signaling server itself. webrtc doesn't specify a transport mechanism for the signaling information. you can use anything you like, from websocket to xmlhttprequest to carrier pigeons to exchange the signaling information between the two peers. it's important to note that the server doesn't need to understand or interpret the signaling data content. although it's sdp, even this doesn't matter so much: the content of the message going through the signaling server is, in effect, a black box. what does matter is when the ice subsystem instructs you to send signaling data to the other peer, you do so, and the other peer knows how to receive this information and deliver it to its own ice subsystem. all you have to do is channel the information back a...
...media, media begins to flow. each peer continues to send candidates until it runs out of options, even after the media has already begun to flow. this is done in hopes of identifying even better options than the one initially selected. if conditions change—for example the network connection deteriorates—one or both peers might suggest switching to a lower-bandwidth media resolution, or to an alternative codec. this triggers a new exchange of candidates, after which a another media format and/or codec change may take place. you can learn more about the codecs which webrtc requires browsers to support, which additional codecs are supported by which browsers, and how to choose the best codecs to use in the guide codecs used by webrtc. optionally, see rfc 8445: interactive connectivity esta...
...atch these events for debugging purposes, as well as to detect when candidate collection has finished. function handleicegatheringstatechangeevent(event) { // our sample just logs information to console here, // but you can do whatever you need. } next steps you can now try out this example on glitch to see it in action. open the web console on both devices and look at the logged output—although you don't see it in the code as shown above, the code on the server (and on github) has a lot of console output so you can see the signaling and connection processes at work. another obvious improvement would be to add a "ringing" feature, so that instead of just asking the user for permission to use the camera and microphone, a "user x is calling. would you like to answer?" prompt appears ...

Writing WebSocket servers - Web APIs
led for you automatically. for example, let's assume that your server is listening on example.com, port 8000, and your socket server responds to get requests at example.com/chat. warning: the server may listen on any port it chooses, but if it chooses any port other than 80 or 443, it may have problems with firewalls and/or proxies. browsers generally require a secure connection for websockets, although they may offer an exception for local devices. the handshake is the "web" in websockets. it's the bridge from http to websockets. in the handshake, details of the connection are negotiated, and either party can back out before completion if the terms are unfavorable. the server must be careful to understand everything the client asks for, otherwise security issues can occur. tip: the req...
...sbub25jzq== sec-websocket-version: 13 the client can solicit extensions and/or subprotocols here; see miscellaneous for details. also, common headers like user-agent, referer, cookie, or authentication headers might be there as well. do whatever you want with those; they don't directly pertain to the websocket. it's also safe to ignore them. in many common setups, a reverse proxy has already dealt with them. tip: all browsers send an origin header. you can use this header for security (checking for same origin, automatically allowing or denying, etc.) and send a 403 forbidden if you don't like what you see. however, be warned that non-browser agents can send a faked origin. most applications reject requests without this header. if any header is not understood or has an incorrect value,...
...r example, you might keep a table of usernames or id numbers along with the corresponding websocket and other data that you need to associate with that connection. exchanging data frames either the client or the server can choose to send a message at any time — that's the magic of websockets. however, extracting information from these so-called "frames" of data is a not-so-magical experience. although all frames follow the same specific format, data going from the client to the server is masked using xor encryption (with a 32-bit key). section 5 of the specification describes this in detail. format each data frame (from the client to the server or vice-versa) follows this same format: frame format: ​​ 0 1 2 3 0 1 2 3...

Fundamentals of WebXR - Web APIs
eld of view? the field of view is, at its essence, the extent of the environment you are able to see at any one time. the width of the field of view is measured as the angle defining the arc from the far left edge of your field of view to the far right edge, and is specified in either degrees or radians. a human eye is typically able to take in a fov of around 135°. assuming a person has two healthy eyes, their total field of view is about 200° to 220° wide. why is the fov wider with two eyes, but not double the single-eye fov? it's because the two eyes fovs overlap a lot. that overlap is what gives us depth perception; within the overlap area — which is around 115° across — we have depth perception. outside that overlap area, our vision is monocular and lacks good depth perception.
...e with 3 degree of freedom hardware: yaw, roll, and pitch. freedom of rotational movement the first three degrees of freedom are rotational. the rotational degrees of freedom are: pitch: looking up and down yaw: looking left and right roll: tilting left and right in all of these cases, the viewer remains in the same location in space while pivoting on one or more of the three axes to alter the direction in which they're looking. a system with two degrees of freedom can sense when the user looks left and right or up and down, but can't report any other kind of movement. a typical baseline headset offers three degrees of freedom, recognizing rotation around all three axes. this is often referred to by the shorthand 3dof. freedom of translational movement the other three degrees ...
...the user, or, increasingly commonly, using infrared cameras that detect the user's movements. speakers placed around the chamber provide immersive sound as well. these are not common among everyday users; they're mostly either experimental, used for demonstration purposes, or used by larger organizations. one drawback is that the cave can't simulate anything closer than the wall. important health and safety reminders because the entire act of creating a virtual 3d world is, in essence, a trick which takes advantage of our understanding of how eyes collect light and how the brain interprets the collected data, it is important to keep in mind that as such, software designers and developers have a responsibility to be even more careful than usual to ensure that the results are correct. vi...

Inputs and input sources - Web APIs
in order to make an experience that's fulfilling and engaging, the user needs to be able to interact with it. to that end, webxr provides support for a variety of kinds of input devices. in this guide, we'll look at how to use webxr's input device management features to determine what input sources are available and how to then monitor those sources for inputs in order to handle user interactivity with your virtual or augmented environment. ...
...directionality of the axes, the coordinates of the grip space can be expressed in world coordinates as (x, y, -z); z is negative since the grip space is farther away along the z axis, and is thus in the negative direction. if the controller were instead positioned to the left of and closer to the user than the world space origin (or possibly behind the user, if the user is located at the origin, although that's an uncomfortable way to hold a controller), the coordinates would have a negative value for x, but a positive value for z. the value of y would still be positive unless the controller was moved below the world space origin. this is shown in the diagram below, in which the controller is located down and to the left of the world space's origin, with the controller also moved to be clos...
...naged by the gamepad api, so you must not attempt to use any gamepad api methods with it. the object type is reused as a convenience. if the value of gamepad is null, the input source doesn't define any controls using the gamepad record, either because it doesn't support it or because it simply doesn't have any added controls on it. this gamepad object is not only used to obtain access to specialty buttons, trackpads, and so forth, but also provides a way to more directly access and monitor the controls that serve as the primary select and squeeze inputs, since these are included in its buttons list. because this use of the gamepad interface is a convenience rather than a true application of the gamepad api, there are several differences between how it's used with webxr and how it's used ...

Using XMLHttpRequest - Web APIs
a document fragment via fragment.body.innerhtml and traverse the dom of the fragment. regexp can be used if you always know the content of the html responsetext beforehand. you might want to remove line breaks, if you use regexp to scan with regard to linebreaks. however, this method is a "last resort" since if the html code changes slightly, the method will likely fail. handling binary data although xmlhttprequest is most commonly used to send and receive textual data, it can be used to send and receive binary content. there are several well tested methods for coercing the response of an xmlhttprequest into sending binary data. these involve utilizing the overridemimetype() method on the xmlhttprequest object and is a workable solution. var oreq = new xmlhttprequest(); oreq.open("get",...
...ching the "progress" event. note: as of gecko 12.0, if your progress event is called with a responsetype of "moz-blob", the value of response is a blob containing the data received so far. one can also detect all three load-ending conditions (abort, load, or error) using the loadend event: req.addeventlistener("loadend", loadend); function loadend(e) { console.log("the transfer finished (although we don't know if it succeeded or not)."); } note there is no way to be certain, from the information received by the loadend event, as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios. submitting forms and uploading files instances of xmlhttprequest can be used to submit forms in two...
...a car</label> </p> <p> describe yourself:<br /> <textarea name="description" cols="50" rows="8"></textarea> </p> <p> <input type="submit" value="submit" /> </p> </fieldset> </form> </body> </html> note: as we said, formdata objects are not stringifiable objects. if you want to stringify a submitted data, use the previous pure-ajax example. note also that, although in this example there are some file <input> fields, when you submit a form through the formdata api you do not need to use the filereader api also: files are automatically loaded and uploaded. get last modified date function getheadertime () { console.log(this.getresponseheader("last-modified")); /* a valid gmtstring date or null */ } var oreq = new xmlhttprequest(); oreq.open("head" /...

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

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

Accessibility documentation index - Accessibility
utton or progressbar. if the current value is not known, the author should not set the aria-valuenow attribute. if the aria-valuenow has a known minimum and maximum value, authors should set the aria-valuemin and aria-valuemax attributes. 29 using the aria-valuetext attribute aria, accessibility, attribute the aria-valuetext attribute is used to define the human readable text alternative of aria-valuenow for a range widget such as progressbar, spinbutton or slider. 30 using the article role aria, accessible, needscontent the article role is used to identify a section of a page that forms an independent part of a document, page or site. examples of an article include web log posts, newspaper or magazine articles and use-submitted comments. it is indepe...
...ribes the effect it has on browsers and assistive technology. 39 using the toolbar role needscontent this technique demonstrates how to use the toolbar role and describes the effect it has on browsers and assistive technology. 40 x-ms-aria-flowfrom aria, microsoft, non-standard the x-ms-aria-flowfrom property specifies the id of the previous element in an alternative reading order, allowing assistive technology to override the general default of reading in document source order. the property serves to define element relationships utilizing aria relationship attributes and the aria-flowto property. 41 wai-aria roles aria, aria roles, accessibility, reference, rôles this page lists reference pages covering all the wai-aria roles di...
...ce on how to write your web content so that it conforms to the success criteria outlined in the operable principle of the web content accessibility guidelines (wcag) 2.0 and 2.1. operable states that user interface components and navigation must be operable. 98 perceivable accessibility, principle 1, wcag, web content accessibility guidelines, contrast, different presentation, text alternatives, time-based media this article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the perceivable principle of the web content accessibility guidelines (wcag) 2.0 and 2.1. perceivable states that users must be able to perceive it in some way, using one or more of their senses. 99 color contrast accessibi...

Understandable - Accessibility
ronym expansion and explanation, or at the very least include them in the surrounding text in context. see abbreviations. ...
...w3c specs). 3.1.6 pronunciation (aaa) a mechanism should be provided to give users access to pronounciation of words where they are is needed to understand the content fully. ...
...anation is required, you can always include explanatory paragraphs too, or maybe you need to try to make your forms more intuitive. meaningful text labels how to structure an html form text labels and names 3.3.3 error suggestion (aa) when an error is detected and suggestions for correction are known, provide these to the user (e.g. suggesting alternatives when the user is choosing a user name and has selected one that is already taken), unless doing so would cause a security issue (e.g. when entering a password) or context problem (e.g. they are trying to answer a question in a quiz app). in such cases, when this is appropriate, you'll probably use a combination of javascript and server-side functionality to check if the entry is cor...

-moz-force-broken-image-icon - CSS: Cascading Style Sheets
the -moz-force-broken-image-icon extended css property can be used to force the broken image icon to be shown even when a broken image has an alt attribute. syntax values <integer> a value of 1 means that the broken image icon is shown even if the image has an alt attribute. when the value 0 is used the image will act as usual and only display the alt attribute. note: even if the value is set to 1 the alt attribute will still be displayed, alongside the broken image icon. ...
...ttribute. when the value 0 is used the image will act as usual and only display the alt attribute. note: even if the value is set to 1 the alt attribute will still be displayed, alongside the broken image icon. formal definition initial value0applies toimagesinheritednocomputed valueas specifiedanimation typediscrete formal syntax <integer> examples html <img src='/broken/image/link.png' alt='broken image link'> css img { -moz-force-broken-image-icon: 1; height: 100px; width: 100px; } result screenshotlive sample note: unless the image has a specified height and width the broken image icon will not be displayed but the alt attribute will also be hidden if -moz-force-broken-image-icon is set to 1. notes this property will only work in gecko-based browsers. the use of t...
...orce-broken-image-icon: 1; height: 100px; width: 100px; } result screenshotlive sample note: unless the image has a specified height and width the broken image icon will not be displayed but the alt attribute will also be hidden if -moz-force-broken-image-icon is set to 1. notes this property will only work in gecko-based browsers. the use of this property is not recommended. a proper alt attribute should be used instead. specifications not part of any standard. ...

Consistent list indentation - CSS: Cascading Style Sheets
t works in one browser often doesn't have the same effect in another. for example, if you declare that lists have no left margin, they move over in internet explorer, but sit stubbornly in place in gecko-based browsers.this article will help you understand the problems that can occur and how to avoid them. in order to understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction. making a list first, we consider a single, pure list item. this list item has no marker (otherwise known as a "bullet") and is not yet part of a list itself. it hangs alone in the void, simple and unadorned, as shown in figure 1. that dotted red border represents outer edges of the content-area of the list item. remember tha...
...he difference is entirely in how the <ul> is styled. we can only see the difference if we try to set a background or border on the <ul> element. finding consistency boil it all down, and what we're left with is this: if you want consistent rendering of lists between gecko, internet explorer, and opera, you need to set both the left margin and left padding of the <ul> element. we can ignore <li> altogether for these purposes. if you want to reproduce the default display in netscape 6.x, you write: ul {margin-left: 0; padding-left: 40px;} if you're more interested in following the internet explorer/opera model, then: ul {margin-left: 40px; padding-left: 0;} of course, you can fill in your own preferred values. set both to 1.25em, if you like -- there's no reason why you have to stick with...
... be visible. conclusion in the end, we can see that none of the browsers mentioned in this article is right or wrong about how they lay out lists. they use different default styles, and that's where the problems creep in. by making sure you style both the left padding and left margin of lists, you can find much greater cross-browser consistency in your list indentation. recommendations when altering the indentation of lists, make sure to set both the padding and margin. original document information author(s): eric a. meyer, netscape communications last updated date: published 30 aug 2002 copyright information: copyright © 2001-2003 netscape. all rights reserved. note: this reprinted article was originally part of the devedge site. ...

Introducing the CSS Cascade - CSS: Cascading Style Sheets
his work, the cascade algorithm defines how they interact. user-agent stylesheets the browser has a basic style sheet that gives a default style to any document. these style sheets are named user-agent stylesheets. some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same. some browsers let users modify the user-agent stylesheet. ...
... author stylesheets author stylesheets are the most common type of style sheet. these are style sheets that define styles as part of the design of a given web page or site. the author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme. ...
... 3 author normal 4 animations 5 author !important 6 user !important 7 user agent !important 8 transitions in case of equality, the specificity of a value is considered to choose one or the other. resetting styles after your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. this may happen in cases of animations, theme changes, and so forth. the css property all lets you quickly set (almost) everything in css back to a known state. all lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level o...

animation - CSS: Cascading Style Sheets
tion> = <time> | <timing-function> | <time> | <single-animation-iteration-count> | <single-animation-direction> | <single-animation-fill-mode> | <single-animation-play-state> | [ none | <keyframes-name> ]where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function><single-animation-iteration-count> = infinite | <number><single-animation-direction> = normal | reverse | alternate | alternate-reverse<single-animation-fill-mode> = none | forwards | backwards | both<single-animation-play-state> = running | paused<keyframes-name> = <custom-ident> | <string>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and mu...
... specifications specification status comment css animationst...
... specifications specification status comment css animationsthe definition of 'animation' in that specification. working ...

contain - CSS: Cascading Style Sheets
omputed 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 would also interfer...
... 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 with contain if we give each ...
...ide 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 inside it's containing element's...

font-feature-settings - CSS: Cascading Style Sheets
these lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an opentype font feature. in particular, font-feature-settings shouldn't be used to enable small caps. values normal text is laid out us...
...sable font features. the tag is always a <string> of 4 ascii characters. if it has more or less characters, or if it contains characters outside the u+20 – u+7e codepoint range, the whole property is invalid. the value is a positive integer. the two keywords on and off are synonyms for 1 and 0 respectively. if no value is set, the default is 1. for non-boolean opentype features (e.g. stylistic alternates), the value implies a particular glyph to be selected; for boolean values, it is a switch. formal definition initial valuenormalapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | <feature-tag-value>#where <feature-tag-value> = <string> [ <integer> | on | off ]? examples enabli...
...yph to be selected; for boolean values, it is a switch. formal definition initial valuenormalapplies toall elements. ...

font-variant-position - CSS: Cascading Style Sheets
the font-variant-position css property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript. the glyphs are positioned relative to the baseline of the font, which remains unchanged. these glyphs are typically used in <sub> and <sup> elements. ...
...e glyphs are positioned relative to the baseline of the font, which remains unchanged. these glyphs are typically used in <sub> and <sup> elements. /* keyword values */ font-variant-position: normal; font-variant-position: sub; font-variant-position: super; /* global values */ font-variant-position: inherit; font-variant-position: initial; font-variant-position: unset; when the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs. these alternate glyphs share the same em-box and the same baseline as the rest of the font. they are merely graphically enhanced, and have no effect on the line-height and other box charac...
...run is rendered using a fallback method, synthesizing these glyphs. these alternate glyphs share the same em-box and the same baseline as the rest of the font. they are merely graphically enhanced, and have no effect on the line-height and other box characteristics. syntax the font-variant-position property is specified as one of the keyword values listed below. values normal deactivates alternate superscript and subscript glyphs. sub activates subscript alternate glyphs. if, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs. super activates superscript alternate glyphs. if, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized...

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

Live streaming web audio and video - Developer guides
dia stream delivery. using rtp with rtcp allows for adaptive streaming. this is not yet supported natively in most browsers, but be aware that firefox os 1.3 supports rtsp. note: some vendors implement propriety transport protocols, such as realnetworks and their real data transport (rdt). rtsp 2.0 rtsp 2.0 is currently in development and is not backward compatible with rtsp 1.0. important: although the <audio> and <video> tags are protocol agnostic, no browser currently supports anything other than http without requiring plugins, although this looks set to change. protocols other than http may also be subject to blocking from firewalls or proxy servers. using streaming protocols the process of using the various protocols is reassuringly familiar if you are used to working with media...
...hls we can cover a significant portion of modern browsers but we still need a fallback if we want to support the rest. one popular approach is to use a flash fallback that supports rtmp. of course, we then have the issue that we need to encode in three different formats. audio streaming file formats there are also some audio formats beginning to see support across browsers. opus opus is a royalty-free and open format that manages to optimize quality at various bit-rates for different types of audio. music and speech can be optimized in different ways and opus uses the silk and celt codecs to achieve this. currently, opus is supported by firefox desktop and mobile as well as the latest versions of desktop chrome and opera. note: opus is a mandatory format for webrtc browser implementat...
...olon to be appended to them. icecast the icecast server is an open source technology for streaming media. maintained by the xiph.org foundation, it streams ogg vorbis/theora as well as mp3 and aac format via the shoutcast protocol. note: shoutcast and icecast are among the most established and popular technologies, but there are many more streaming media systems available. streaming services although you can install software like gstreamer, shoutcast and icecast you will also find a lot of third-party streaming services that will do much of the work for you. see also http live streaming hls browser support http live streaming javascript player the basics of http live streaming dash adaptive streaming for html 5 video dynamic adaptive streaming over http (mpeg-dash) mpeg-dash me...

Overview of events and handlers - Developer guides
this code relies on the agreement that there is a kind of event called 'click' which will call any listener (or 'handler') function with an event object argument (actually, in this case a derivative mouseevent object) and which will be fired by html button elements after user interaction. the code has no visible effect un...
... html alert dialog. note that the handler has access to the ev object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred. as a second example, much modern javascript integrated into web pages is wrapped into an event function call to ensure that the code is only executed when the html has been processed and is available for alteration or decoration. for example, code might be attached as: var funcinit = function(){ // user code goes here and can safely address all the html elements from the page // since the document has successfully been 'loaded' } document.addeventlistener('domcontentloaded', funcinit); so that this code will only be executed after the document object emits the 'domcontentloaded' event beca...
..., such as due to changes in device orientation, the document object, including the loading, modification, user interaction, and unloading of the page, the objects in the dom (document object model) tree including user interactions or modifications, the xmlhttprequest objects used for network requests, and the media objects such as audio and video, when the media stream players change state. although this list is currently incomplete. some notable events are: note: this list of events will need work to make relevant; that work is awaiting some global reorganization work on the documents. this will also need finding a good explanation of the events involved during page loading, such as discussed partially in this web page or in this stack overflow question. the global object windo...

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

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
operties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. as you may have seen from the list under things that can have color, there are plenty of things you can color with css. let's look at this from two sides: using color within a stylesheet, and adding and changing color using javascript code to alter the styles of elements. specifying colors in stylesheets the easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the css that's used when rendering elements. while we won't use every single property mentioned previously, we'll look at a couple of examples. the concept is the same anywhere you use color. let's take a look at an example, s...
...-shadow. its color parameter is set to black. letting the user pick a color there are many situations in which your website may need to let the user select a color. perhaps you have a customizable user interface, or you're implementing a drawing app. maybe you have editable text and need to let the user choose the text color. or perhaps your app lets the user assign colors to folders or items. although historically it's been necessary to implement your own color picker, html now provides support for browsers to provide one for your use through the <input> element, by using "color" as the value of its type attribute. the <input> element represents a color only in the hexadecimal string notation covered above. example: picking a color let's look at a simple example, in which the user can ...
... the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. instead, perhaps use both text and color together, so that everyone can understand what's happening. for more information about color blindness, see the following articles: medline plus: color blindness (united states national institute of health) american academy of ophthamology: what is color blindness? color blindness & web design (usability.gov: united states department of health and human services) palette design example let's consider a quick example of selecting an appropriate color palette for a site. imagine that you're building a website for a new game that takes place on the planet mars. so let's do a google search for ph...

HTML attribute reference - HTML: Hypertext Markup Language
d focus to the element. action <form> the uri of a program that processes the information submitted via the form. align <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> specifies the horizontal alignment of the element. allow <iframe> specifies a feature-policy for the iframe. alt <applet>, <area>, <img>, <input> alternative text in case an image can't be displayed. async <script> executes the script asynchronously. autocapitalize global attribute sets whether input is automatically capitalized when entered by user autocomplete <form>, <input>, <select>, <textarea> indicates whether controls in this form can by default hav...
...efault have their values automatically completed by the browser. autofocus <button>, <input>, <keygen>, <select>, <textarea> the element should be automatically focused after the page loaded. autoplay <audio>, <video> the audio or video should play as soon as possible. background <body>, <table>, <td>, <th> specifies the url of an image file. note: although browsers and email clients may still support this attribute, it is obsolete. use css background-image instead. bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> background color of the element. note: this is a legacy attribute. please use the css background-color property instead. border <img>, <ob...
...ut invalid xml. </div> <div itemscope=itemscope> this is also valid html but invalid xml. </div> <div itemscope=""> this is valid html and also valid xml. </div> <div itemscope="itemscope"> this is also valid html and xml, but perhaps a bit verbose. </div> to be clear, the values "true" and "false" are not allowed on boolean attributes. to represent a false value, the attribute has to be omitted altogether. this restriction clears up some common misunderstandings: with checked="false" for example, the element’s checked attribute would be interpreted as true because the attribute is present. ...

<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
ls. defaults to 150. moz-opaque lets the canvas know whether or not translucency will be a factor. if the canvas knows there's no translucency, painting performance can be optimized. this is only supported by mozilla-based browsers; use the standardized canvas.getcontext('2d', { alpha: false }) instead. width the width of the coordinate space in css pixels. defaults to 300. usage notes alternative content you may (and should) provide alternate content inside the <canvas> block. that content will be rendered both on older browsers that don't support canvas and in browsers with javascript disabled. providing a useful fallback text or sub dom helps to make the the canvas more accessible. required </canvas> tag unlike the <img> element, the <canvas> element requires the closing tag ...
... x 16,384) ie 8,192 pixels 8,192 pixels ? note: exceeding the maximum dimensions or area renders the canvas unusable — drawing commands will not work. examples html this code snippet adds a canvas element to your html document. a fallback text is provided if a browser is unable to render the canvas, or if can't read a canvas. ...
...canvas content is not exposed to accessibility tools as semantic html is. in general, you should avoid using canvas in an accessible website or app. the following guides can help to make it more accessible. ...

<marquee>: The Marquee element (Obsolete) - HTML: Hypertext Markup Language
if no value is specified, the default value is scroll. ...
...ed. truespeed by default, scrolldelay values lower than 60 are ignored. if truespeed is present, those values are not ignored. vspace sets the vertical margin in pixels or percentage value. width sets the width in pixels or percentage value. event handlers onbounce fires when the marquee has reached the end of its scroll position. it can only fire when the behavior attribute is set to alternate. onfinish fires when the marquee has finished the amount of scrolling that is set by the loop attribute. it can only fire when the loop attribute is set to some number that is greater than 0. onstart fires when the marquee starts scrolling. methods start() starts scrolling of the marquee. stop() stops scrolling of the marquee. examples <marquee>this text will scroll from righ...
...set to some number that is greater than 0. onstart fires when the marquee starts scrolling. methods start() starts scrolling of the marquee. stop() stops scrolling of the marquee. examples <marquee>this text will scroll from right to left</marquee> <marquee direction="up">this text will scroll from bottom to top</marquee> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> this text will bounce </marquee> </marquee> specifications specification status comment html living standardthe definition of '<marquee>' in that specification. living standard make it obsolete in favor of css but define its expected behavior, for backward compatibility. however, the developm...

<noembed>: The Embed Fallback element (Obsolete) - HTML: Hypertext Markup Language
the <noembed> element is an obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the <embed> element or do not support the type of embedded content an author wishes to use. this element was deprecated in html 4.01 and above in favor of placing fallback content between the opening and closing tags of an <object> element. while this element currently still works in many browsers, it is obsolete and should not be used. use <object> instead, with fallback content between the opening and closing tags of the element. examples the message inside <noembed> tag will appear only when your browser does not support <embed> tag. ...
...acing fallback content between the opening and closing tags of an <object> element. ...
...ks in many browsers, it is obsolete and should not be used. use <object> instead, with fallback content between the opening and closing tags of the element. ...

<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
ffect, use css width instead. wrap is a hint indicating how the overflow must happen. in modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use css white-space instead. example html <p>using css to change the font color is easy.</p> <pre> body { color: red; } </pre> result accessibility concerns it is important to provide an alternate description for any images or diagrams created using preformatted text. the alternate description should clearly and concisely describe the image or diagram's content. people experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence...
...ssistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence. a combination of the <figure> and <figcaption> elements, supplemented by a combination of an id and the aria role and aria-labelledby attributes allow the preformatted text to be announced as an image, with the figcaption serving as the image's alternate description. example <figure role="img" aria-labelledby="cow-caption"> <pre> ___________________________ < i'm an expert in my field. > --------------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || </pre> <figcaption id="cow-caption"> a cow saying, "i'm an expert in my field." the c...
...---------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || </pre> <figcaption id="cow-caption"> a cow saying, "i'm an expert in my field." the cow is illustrated using preformatted text characters. </figcaption> </figure> mdn understanding wcag, guideline 1.1 explanations h86: providing text alternatives for ascii art, emoticons, and leetspeak | w3c techniques for wcag 2.0 specifications specification status comment html living standardthe definition of '<pre>' in that specification. living standard no significant change from html5 html5the definition of '<pre>' in that specification. recommendation no significant change from html 4.01 ...

HTML elements reference - HTML: Hypertext Markup Language
e. <object> the html <object> element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin. <param> the html <param> element defines parameters for an <object> element. <picture> 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. <source> the html <source> element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. scripting in order to create dynamic content and web applications, html supports the use of scripting languages, most prominently javascript. certain elements support this c...
...es a section of html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser. <script> the html <script> element is used to embed executable code or data; this is typically used to embed or refer to javascript code. demarcating edits these elements let you provide indications that specific parts of the text have been altered. element description <del> the html <del> element represents a range of text that has been deleted from a document. <ins> the html <ins> element represents a range of text that has been added to a document. table content the elements here are used to create and handle tabular data. element description <caption...
...ing tool to generate automatic name labels for its anchors. <nobr> the non-standard, obsolete html <nobr> element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text. <noembed> the <noembed> element is an obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the <embed> element or do not support the type of embedded content an author wishes to use. <noframes> the obsolete html no frames or frame fallback element, <noframes>, provides content to be presented in browsers that don't support (or have disabled support for) the <frame> element. <plaintext> the html...

Identifying resources on the Web - HTTP
a document, a photo, or anything else. each resource is identified by a uniform resource identifier (uri) used throughout http for identifying resources. the identity and the location of resources on the web are mostly given by a single url (uniform resource locator, a kind of uri). there are sometimes reasons identity and location are not given by the same uri: http uses a specific http header, alt-svc when the resource requested wants the client to access it at another location. urls and urns urls the most common form of uri is the uniform resource locator (url), which is known as the web address. https://developer.mozilla.org https://developer.mozilla.org/docs/learn/ https://developer.mozilla.org/search?q=url any of those urls can be typed into your browser's address bar to tell it t...
...ript code mailto electronic mail address ssh secure shell tel telephone urn uniform resource names view-source source code of the resource ws/wss (encrypted) websocket connections authority www.example.com is the domain name or authority that governs the namespace. it indicates which web server is being requested. alternatively, it is possible to directly use an ip address, but because it is less convenient, it is not often used on the web. port :80 is the port in this instance. it indicates the technical "gate" used to access the resources on the web server. it is usually omitted if the web server uses the standard ports of the http protocol (80 for http and 443 for https) to grant access to its resour...
...ew of these url schemes. when referring to subresources — that is, files that are being loaded as part of a larger document — you should only use the http and https schemes. increasingly, browsers are removing support for using ftp to load subresources, for security reasons. ftp is still acceptable at the top level (such as typed directly into the browser's url bar, or the target of a link), although some browsers may delegate loading ftp content to another application. examples https://developer.mozilla.org/docs/learn tel:+1-816-555-1212 git@github.com:mdn/browser-compat-data.git ftp://example.org/resource.txt urn:isbn:9780141036144 mailto:help@supercyberhelpdesk.info specifications specification title rfc 7230, section 2.7: uniform resource identifiers hype...

Content negotiation - HTTP
n http, content negotiation is the mechanism that is used for serving different representations of a resource at the same uri, so that the user agent can specify which is best suited for the user (for example, which language of a document, which image format, or which content encoding). note: some disadvantages of http content negotiation are explained in a wiki page from whatwg. html5 provides alternatives to content negotiation via, for example, the <source> element. principles of content negotiation a specific document is called a resource. when a client wants to obtain a resource, the client requests it using its url. the server uses this url to choose one of the variants it provides – each variant being called a representation – and returns a specific representation to the clien...
...(server-driven negotiation or proactive negotiation), which is the standard way of negotiating a specific kind of resource. the 300 (multiple choices) or 406 (not acceptable) http response codes by the server (agent-driven negotiation or reactive negotiation), that are used as fallback mechanisms. over the years, other content negotiation proposals, like transparent content negotiation and the alternates header, have been proposed. they failed to get traction and got abandoned. server-driven content negotiation in server-driven content negotiation, or proactive content negotiation, the browser (or any other kind of user-agent) sends several http headers along with the url. these headers describe the preferred choice of the user. the server uses them as hints and an internal algorithm cho...
...ease in performance. the more precise headers are sent, the more entropy is sent, allowing for more http fingerprinting and corresponding privacy concern. from the beginnings of http, the protocol allowed another negotiation type: agent-driven negotiation or reactive negotiation. in this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. the user is presented the resources and choose the one to use. unfortunately, the http standard does not specify the format of the page allowing to choose between the available resource, which prevents to easily automatize the process. besides falling back to the server-driven negotiation, this method is almost always used in conjunction with scripting, especially with javas...

X-Frame-Options - HTTP
long as the site including it in a frame is the same as the one serving the page. deny the page cannot be displayed in a frame, regardless of the site attempting to do so. sameorigin the page can only be displayed in a frame on the same origin as the page itself. the spec leaves it up to browser vendors to decide whether this option applies to the top level, the parent, or the whole chain, although it is argued that the option is not very useful unless all ancestors are also in the same origin (see bug 725490). also see browser compatibility for support details. allow-from uri this is an obsolete directive that no longer works in modern browsers. don't use it. in supporting legacy browsers, a page can be displayed in a frame only on the specified origin uri. note that in the legacy...
... name="x-frame-options" value="sameorigin" /> </customheaders> </httpprotocol> ... </system.webserver> or see this microsoft support article on setting this configuration using the iis manager user interface. ...
...ions:\ sameorigin alternatively, in newer versions: http-response set-header x-frame-options sameorigin configuring express to configure express to send the x-frame-options header, you can use helmet which uses frameguard to set the header. ...

Grammar and types - JavaScript
a top-level property whose value is not defined. number. an integer or floating point number. for example: 42 or 3.14159. bigint. an integer with arbitrary precision. for example: 9007199254740992n. string. a sequence of characters that represent a text value. for example: "howdy" symbol (new in ecmascript 2015). a data type whose instances are unique and immutable. and object although these data types are relatively few, they enable you to perform useful functions with your applications. objects and functions are the other fundamental elements in the language. you can think of objects as named containers for values, and functions as procedures that your script can perform. data type conversion javascript is a dynamically typed language. this means you don't have to spec...
...case that a value representing a number is in memory as a string, there are methods for conversion. parseint() parsefloat() parseint only returns whole numbers, so its use is diminished for decimals. additionally, a best practice for parseint is to always include the radix parameter. the radix parameter is used to specify which numerical system is to be used. parseint('101', 2) // 5 an alternative method of retrieving a number from a string is with the + (unary plus) operator: '1.1' + '1.1' // '1.11.1' (+'1.1') + (+'1.1') // 2.2 // note: the parentheses are added for clarity, not required. literals literals represent values in javascript. these are fixed values—not variables—that you literally provide in your script. this section describes the following types of literals: ...
...backslash character. for example, to assign the file path c:\temp to a string, use the following: var home = 'c:\\temp'; you can also escape line breaks by preceding them with backslash. the backslash and line break are both removed from the value of the string. var str = 'this string \ is broken \ across multiple \ lines.' console.log(str); // this string is broken across multiple lines. although javascript does not have "heredoc" syntax, you can get close by adding a line break escape and an escaped line break at the end of each line: var poem = 'roses are red,\n\ violets are blue.\n\ sugar is sweet,\n\ and so is foo.' ecmascript 2015 introduces a new type of literal, namely template literals. this allows for many new features, including multiline strings! var poem = `roses are ...

Introduction - JavaScript
l objects and statements. what is javascript? javascript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g., having complex animations, clickable buttons, popup menus, etc.). there are also more advanced server side versions of javascript such as node.js, which allow you to add more functionality to a website than simply downloading files (such as realtime collaboration between multiple computers). inside a host environment (for example, a web browser), javascript can be connected to the objects of its environment to provide programmatic control over them. javascript contains a standard library of objects, such as array, date, and math, and a core set of language elements such as operators, control structures, and statements. core javascript ca...
...ant to implement standards-compliant language features in your ecmascript implementation or engine (such as spidermonkey in firefox, or v8 in chrome). the ecmascript document is not intended to help script programmers. use the javascript documentation for information when writing scripts. the ecmascript specification uses terminology and syntax that may be unfamiliar to a javascript programmer. although the description of the language may differ in ecmascript, the language itself remains the same. javascript supports all functionality outlined in the ecmascript specification. the javascript documentation describes aspects of the language that are appropriate for a javascript programmer. getting started with javascript getting started with javascript is easy: all you need is a modern web ...
...ed. for the sake of simplicity, it can be imagined that every time something is entered into the console, it is actually surrounded by console.log around eval, like so: function greetme(yourname) { alert("hello " + yourname) } console.log(eval('3 + 5')) multi-line input in the web console the single-line input mode of the web console is great for quick testing of javascript expressions, but although you can execute multiple lines, it's not very convenient for that. for more complex javascript, you can use the multi-line line input mode. hello world to get started with writing javascript, open the web console in multi-line mode, and write your first "hello world" javascript code: (function(){ "use strict"; /* start of your code */ function greetme(yourname) { alert('hello ' ...

Warning: Date.prototype.toLocaleFormat is deprecated - JavaScript
the javascript warning "date.prototype.tolocaleformat is deprecated; consider using intl.datetimeformat instead" occurs when the non-standard date.prototype.tolocaleformat method is used. message warning: date.prototype.tolocaleformat is deprecated; consider using intl.datetimeformat instead error type warning. javascript execution won't be halted. what went wrong? the non-standard date.prototype.tolocaleformat method is deprecated and shouldn't be used anymore. it uses a format string in the same format expected by the strftime() function in c. the function is no longer available in firefox 58+. examples deprecated syntax the date.prototype.tolocaleformat method is deprecated and will be removed (no cross-browser support, available in firefox only). var today = new date(); var da...
... expected by the strftime() function in c. the function is no longer available in firefox 58+. examples deprecated syntax the date.prototype.tolocaleformat method is deprecated and will be removed (no cross-browser support, available in firefox only). var today = new date(); var date = today.tolocaleformat('%a, %e. %b %y'); console.log(date); // in german locale // "freitag, 10. märz 2017" alternative standard syntax using the ecmascript intl api the ecma-402 (ecmascript intl api) standard specifies standard objects and methods that enable language sensitive date and time formatting (available in chrome 24+, firefox 29+, ie11+, safari10+). you can now either use the date.prototype.tolocaledatestring method if you just want to format one date. var today = new date(); var options = { ...
...tes to format. var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; var dateformatter = new intl.datetimeformat('de-de', options) var dates = [date.utc(2012, 11, 20, 3, 0, 0), date.utc(2014, 04, 12, 8, 0, 0)]; dates.foreach(date => console.log(dateformatter.format(date))); // "donnerstag, 20. dezember 2012" // "montag, 12. mai 2014" alternative standard syntax using date methods the date object offers several methods to build a custom date string. (new date()).tolocaleformat("%y%m%d"); // "20170310" can be converted to: let now = new date(); let date = now.getfullyear() * 10000 + (now.getmonth() + 1) * 100 + now.getdate(); console.log(date); // "20170310" ...

TypeError: invalid assignment to const "x" - JavaScript
it cannot change through re-assignment, and it can't be redeclared. in javascript, constants are declared using the const keyword. ...
...it cannot change through re-assignment, and it can't be redeclared. in javascript, constants are declared using the const keyword. examples invalid redeclaration assigning a value to the same constant name in the same block-scope will throw. const columns = 80; // ... ...
... in a function, for example? const columns = 80; function setupbigscreenenvironment() { const columns = 120; } const and immutability the const declaration creates a read-only reference to a value. it does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. for instance, in case the content is an object, this means the object itself can still be altered. this means that you can't mutate the value stored in a variable: const obj = {foo: 'bar'}; obj = {foo: 'baz'}; // typeerror: invalid assignment to const `obj' but you can mutate the properties in a variable: obj.foo = 'baz'; obj; // object { foo: "baz" } ...

Array.prototype.reduce() - JavaScript
e; } }); } caution: if you need to support truly obsolete javascript engines that do not support object.defineproperty(), it is best not to polyfill array.prototype methods at all, as you cannot make them non-enumerable. examples sum all the values of an array let sum = [0, 1, 2, 3].reduce(function (accumulator, currentvalue) { return accumulator + currentvalue }, 0) // sum is 6 alternatively written with an arrow function: let total = [ 0, 1, 2, 3 ].reduce( ( accumulator, currentvalue ) => accumulator + currentvalue, 0 ) sum of values in an object array to sum up, the values contained in an array of objects, you must supply an initialvalue, so that each item passes through your function. let initialvalue = 0 let sum = [{x: 1}, {x: 2}, {x: 3}].reduce(function (accumu...
... => accumulator + currentvalue, 0 ) sum of values in an object array to sum up, the values contained in an array of objects, you must supply an initialvalue, so that each item passes through your function. ...
... function: let initialvalue = 0 let sum = [{x: 1}, {x: 2}, {x: 3}].reduce( (accumulator, currentvalue) => accumulator + currentvalue.x , initialvalue ) console.log(sum) // logs 6 flatten an array of arrays let flattened = [[0, 1], [2, 3], [4, 5]].reduce( function(accumulator, currentvalue) { return accumulator.concat(currentvalue) }, [] ) // flattened is [0, 1, 2, 3, 4, 5] alternatively written with an arrow function: let flattened = [[0, 1], [2, 3], [4, 5]].reduce( ( accumulator, currentvalue ) => accumulator.concat(currentvalue), [] ) counting instances of values in an object let names = ['alice', 'bob', 'tiff', 'bruce', 'alice'] let countednames = names.reduce(function (allnames, name) { if (name in allnames) { allnames[name]++ } else { allnam...

Object.prototype.__proto__ - JavaScript
if you care about performance you should avoid setting the [[prototype]] of an object. ...
...if you care about performance you should avoid setting the [[prototype]] of an object. instead, create a new object with the desired [[prototype]] using object.create(). ...
...upported into the future. it is deprecated in favor of object.getprototypeof/reflect.getprototypeof and object.setprototypeof/reflect.setprototypeof (though still, setting the [[prototype]] of an object is a slow operation that should be avoided if performance is a concern). the __proto__ property can also be used in an object literal definition to set the object [[prototype]] on creation, as an alternative to object.create(). see: object initializer / literal syntax. description the __proto__ getter function exposes the value of the internal [[prototype]] of an object. for objects created using an object literal, this value is object.prototype. for objects created using array literals, this value is array.prototype. for functions, this value is function.prototype. for objects created usin...

Object - JavaScript
the object class represents one of javascript's data types. it is used to store various keyed collections and more complex entities. objects can be created using the object() constructor or the object initializer / literal syntax. description nearly all objects in javascript are instances of object; a typical object inherits properties (including methods) from object.prototype, although these properties may be shadowed (a.k.a. overridden). however, an object may be deliberately created for which this is not true (e.g. by object.create(null)), or it may be altered so that this is no longer true (e.g. with object.setprototypeof). changes to the object prototype object are seen by all objects through prototype chaining, unless the properties and methods subject to those changes are overridde...
... the object constructor creates an object wrapper for the given value. if the value is null or undefined, it will create and return an empty object. ...
...for example, this (untested) code will pre-conditionally execute custom logic before the built-in logic or someone else's extension is executed. when a function is called, the arguments to the call are held in the array-like "variable" arguments. for exam...

eval() - JavaScript
er. if you run eval() with a string that could be affected by a malicious party, you may end up running malicious code on the user's machine with the permissions of your webpage / extension. more importantly, a third-party code can see the scope in which eval() was invoked, which can lead to possible attacks in ways to which the similar function is not susceptible. eval() is also slower than the alternatives, since it has to invoke the javascript interpreter, while many other constructs are optimized by modern js engines. additionally, modern javascript interpreters convert javascript to machine code. this means that any concept of variable naming gets obliterated. thus, any use of eval() will force the browser to do long expensive variable name lookups to figure out where the variable exis...
... any use of eval() will force the browser to do long expensive variable name lookups to figure out where the variable exists in the machine code and set its value. additonally, new things can be introduced to that variable through eval() such as changing the type of that variable, forcing the browser to re-evaluate all of the generated machine code to compensate. fortunately, there's a very good alternative to eval(): simply using window.function(). see this example of how to convert code using a dangerous eval() to using function(), see below. bad code with eval(): function loosejsonparse(obj){ return eval("(" + obj + ")"); } console.log(loosejsonparse( "{a:(4-1), b:function(){}, c:new date()}" )) better code without eval(): function loosejsonparse(obj){ return function('"us...
...u can minify the code string passed to runcodewithdatefunction() far more efficiently because the function arguments names can be minified too as seen in the minified code below. console.log(function('"use strict";return(function(a){return a(5)})')()(function(a){ return"monday tuesday wednesday thursday friday saturday sunday".split(" ")[a%7||0]})); there are also additional safer (and faster!) alternatives to eval() or function() for common use-cases. accessing member properties you should not use eval() to convert property names into properties. consider the following example where the property of the object to be accessed is not known until the code is executed. this can be done with eval(): var obj = { a: 20, b: 30 }; var propname = getpropname(); // returns "a" or "b" eval( 'var r...

undefined - JavaScript
ined) { // these statements execute } else { // these statements do not execute } note: the strict equality operator (as opposed to the standard equality operator) must be used here, because x == undefined also checks whether x is null, while strict equality doesn't. this is because null is not equivalent to undefined. see comparison operators for details. typeof operator and undefined alternatively, typeof can be used: var x; if (typeof x === 'undefined') { // these statements execute } one reason to use typeof is that it does not throw an error if the variable has not been declared. // x has not been declared before if (typeof x === 'undefined') { // evaluates to true without errors // these statements execute } if (x === undefined) { // throws a referenceerror } ...
...ed: var x; if (typeof x === 'undefined') { // these statements execute } one reason to use typeof is that it does not throw an error if the variable has not been declared. // x has not been declared before if (typeof x === 'undefined') { // evaluates to true without errors // these statements execute } if (x === undefined) { // throws a referenceerror } however, there is another alternative. javascript is a statically scoped language, so knowing if a variable is declared can be read by seeing whether it is declared in an enclosing context. the global scope is bound to the global object, so checking the existence of a variable in the global context can be done by checking the existence of a property on the global object, using the in operator, for instance: if ('x' in windo...
...declared in an enclosing context. the global scope is bound to the global object, so checking the existence of a variable in the global context can be done by checking the existence of a property on the global object, using the in operator, for instance: if ('x' in window) { // these statements execute only if x is defined globally } void operator and undefined the void operator is a third alternative. var x; if (x === void 0) { // these statements execute } // y has not been declared before if (y === void 0) { // throws uncaught referenceerror: y is not defined } specifications specification ecmascript (ecma-262)the definition of 'undefined' in that specification. ...

var - JavaScript
rties on the global object. the property created on the global object for global variables, is set to be non-configurable because the identifier is to be treated as a variable, rather than a straightforward property of the global object. javascript has automatic memory management, and it would make no sense to be able to use the delete operator on a global variable. 'use strict'; var x = 1; globalthis.hasownproperty('x'); // true delete globalthis.x; // typeerror in strict mode. fails silently otherwise. delete x; // syntaxerror in strict mode. fails silently otherwise. note that in both nodejs commonjs modules and native ecmascript modules, top-level variable declarations are scoped to the module, and are not, therefore added as properties to the global object. unqualified identifier a...
...ations are scoped to the module, and are not, therefore added as properties to the global object. unqualified identifier assignments the global object sits at the top of the scope chain. when attempting to resolve a name to a value, the scope chain is searched. this means that properties on the global object are conveniently visible from every scope, without having to qualify the names with globalthis. or window. or global.. so you can just type: function foo() { string('s') // note the function `string` is implicitly visible } ...because globalthis.hasownproperty('string') // true so the global object will ultimately be searched for unqualified identifiers. you don't have to type globalthis.string, you can just type the unqualified string. the corollary, in non-strict mode, is that ...
...assignment to an unqualified identifier in strict mode will result in a referenceerror, to avoid the accidental creation of properties on the global object. ...

Strict mode - JavaScript
ometimes this fixes the immediate problem, but sometimes this creates worse problems in the future. strict mode treats these mistakes as errors so that they're discovered and promptly fixed. first, strict mode makes it impossible to accidentally create global variables. in normal javascript mistyping a variable in an assignment creates a new property on the global object and continues to "work" (although future failure is possible: likely, in modern javascript). assignments, which would accidentally create global variables, instead throw an error in strict mode: 'use strict'; // assuming no global variable mistypedvariable exists mistypevariable = 17; // this line throws a referenceerror due to the // misspelling of variable second, strict mo...
.... strict mode makes with a syntax error, so there's no chance for a name in a with to refer to an unknown location at runtime: 'use strict'; var x = 17; with (obj) { // !!! syntax error // if this weren't strict mode, would this be var x, or // would it instead be obj.x? it's impossible in general // to say without running the code, so the name can't be // optimized. x; } the simple alternative of assigning the object to a short name variable, then accessing the corresponding property on that variable, stands ready to replace with. second, eval of strict mode code does not introduce new variables into the surrounding scope. in normal code eval("var x;") introduces a variable x into the surrounding function or the global scope. this means that, in general, in a function containi...
...;'); // !!! syntax error making eval and arguments simpler strict mode makes arguments and eval less bizarrely magical. both involve a considerable amount of magical behavior in normal code: eval to add or remove bindings and to change binding values, and arguments by its indexed properties aliasing named arguments. strict mode makes great strides toward treating eval and arguments as keywords, although full fixes will not come until a future edition of ecmascript. first, the names eval and arguments can't be bound or assigned in language syntax. all these attempts to do so are syntax errors: 'use strict'; eval = 17; arguments++; ++eval; var obj = { set p(arguments) { } }; var eval; try { } catch (arguments) { } function x(eval) { } function arguments() { } var y = function eval() { }; va...

Media container formats (file types) - Web media technologies
e as of early 2016, and should not be used, as there are known security concerns. however, windows media player now has integrated support for quicktime version 2.0 and earlier files; support for later versions of quicktime requires third-party additions. on mac os, the quicktime framework not only supported quicktime format movie files and codecs, but supported a vast array of popular and specialty audio and video codecs, as well as still image formats. through quicktime, mac applications (including web browsers, through the quicktime plugin or direct quicktime integration) were able to read and write audio formats including aac, aiff, mp3, pcm, and qualcomm purevoice; and video formats including avi, dv, pixlet, prores, flac, cinepak, 3gp, h.261 through h.265, mjpeg, mpeg-1 and mpeg-4 par...
... lpcm (linear pulse code modulation) yes mpeg-1 audio layer iii (mp3) no µ-law (u-law) no webm webm (web media) is a format based on matroska which is designed specifically for use in modern web environments. it's based entirely on free and open technologies and primarily uses codecs that are in turn free and open, although some products support other codecs in webm containers as well. webm was first introduced in 2010 and is now widely supported. compliant implementations of webm are required to support the vp8 and vp8 video codecs and the theora and opus audio codecs. the webm container format and its required codecs are all available under open licenses. any other codecs may require a license to use. web...
...ormat compressed files for general-purpose playback mp3 (mpeg-1 audio layer iii) losslessly compressed files flac with alac fallback uncompressed files wav now that mp3's patents have all expired, the choice of audio file format has become much easier to make. it's no longer necessary to choose between mp3's broad compatibility and the need to pay royalties when using it. video files if you need... consider using this container format general purpose video, preferably in an open format webm (ideally with mp4 fallback) general purpose video mp4 (ideally with webm or ogg fallback) high compression optimized for slow connections 3gp (ideally with mp4 fallback) compatibility with older device...

Paths - SVG: Scalable Vector Graphics
red"/> <circle cx="90" cy="90" r="2" fill="red"/> <circle cx="90" cy="10" r="2" fill="red"/> <circle cx="10" cy="90" r="2" fill="red"/> </svg> we can shorten the above path declaration a little bit by using the "close path" command, called with z. this command draws a straight line from the current position back to the first point of the path. it is often placed at the end of a path node, although not always. there is no difference between the uppercase and lowercase command. z (or) z so our path above could be shortened to: <path d="m 10 10 h 90 v 90 h 10 z" fill="transparent" stroke="black"/> the relative forms of these commands can also be used to draw the same picture. relative commands are called by using lowercase letters, and rather than moving the cursor to an exact ...
... the path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start. in these examples, it would probably be simpler to use the <polygon> or <polyline> elements. however, paths are used so often in drawing svg that developers may be more comfortable using them instead. there is no real performance penalty or bonus for using one or the other. curve commands there are three different commands that can be used to create smooth curves. two of those curves are bézier curves, and the third is an "arc" or part of a circle. you might have already gained practical experience with bézier curves using path tools in inkscape, illustrator or photoshop. for a complete description of the math behind bézier...
... specifying only end points. this only works if the previous command was a q or a t command. if not, then the control point is assumed to be the same as the previous point, and only lines will be drawn. <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 80 q 52.5 10, 95 80 t 180 80" stroke="black" fill="transparent"/> </svg> both curves produce similar results, although the cubic one allows greater freedom in exactly what the curve looks like. deciding which curve to use is situational and depends on the amount of symmetry the line has. arcs the other type of curved line that can be created using svg is the arc, called with the a command. arcs are sections of circles or ellipses. for a given x-radius and y-radius, there are two ellipses that can connect ...

Index - XSLT: Extensible Stylesheet Language Transformations
those usually tell the mime type. 3 index index, reference, xslt found 54 pages: 4 pi parameters xslt no summary! 5 the xslt/javascript interface in gecko xslt no summary! 6 advanced example xslt this advanced example sorts several divs based on their content. the example allows sorting the content multiple times, alternating between ascending and descending order. the javascript loads the .xsl file only on the first sort and sets the xslloaded variable to true once it has finished loading the file. using the xsltprocessor.getparameter() method, the code can figure whether to sort in ascending or descending order. it defaults to ascending if the parameter is empty (the first time the sorting happens, as there ...
...ia xmlhttprequest or xmldocument.load(). 11 resources xslt no summary! 12 setting parameters xslt while running transformations using precoded .xsl and .xml files is quite useful, configuring the .xsl file from javascript may be even more useful. for example, javascript and xslt could be used to sort xml data and then display it. the sorting would have to alternate between ascending and descending sorting. 13 transforming xml with xslt needsmigration, transforming_xml_with_xslt, xml, xslt the separation of content and presentation is a key design feature of xml. the structure of an xml document is designed to reflect and clarify important relationships among the individual aspects of the content itself, unhindered by a need to pro...
...ues. but it may be after or inside elements that won't be part of the output (like <xsl:choose> or <xsl:apply-templates> etc.). 24 <xsl:call-template> element, reference, xslt, call-template the <xsl:call-template> element invokes a named template. 25 <xsl:choose> element, reference, xslt, choose the <xsl:choose> element defines a choice among a number of alternatives. it behaves like a switch statement in procedural languages. 26 <xsl:comment> comment, element, reference, xslt the <xsl:comment> element writes a comment to the output document. it must include only text. 27 <xsl:copy-of> element, reference, xslt, copy-of the <xsl:copy-of> element makes a deep copy (including descendant nodes) of whatever the se...

Communicating using "postMessage" - Archive of obsolete content
in most cases port is preferable to message events. however, the context-menu module does not support port, so to send messages from a content script to the add-on via a context menu object, you must use message events. handling message events in the content script to send a message from a content script, you use the postmessage function of the global self object: self.postmessage(contentscriptmessage); this takes a single parameter, the message payload, which may be any json-serializable value. ...
...} }); to receive messages from a content script, use the worker's on function. ...

hotkeys - Archive of obsolete content
nction to be called when the user presses that combination. for example, this add-on defines two hotkey combinations, to show and hide a panel: // define keyboard shortcuts for showing and hiding a custom panel. var { hotkey } = require("sdk/hotkeys"); var showhotkey = hotkey({ combo: "accel-shift-o", onpress: function() { showmypanel(); } }); var hidehotkey = hotkey({ combo: "accel-alt-shift-o", onpress: function() { hidemypanel(); } }); choosing hotkeys hotkeys should be chosen with care. it's very easy to use combinations that clash with hotkeys defined for firefox or for other add-ons. the following commonly used hotkey combinations will not pass amo review: accel-z, accel-c, accel-x, accel-v or accel-q if you choose to use a key combination that's already defi...
...nation defined by hotkey is pressed. if more than one hotkey is created for the same key combination, the listener is executed only on the last one created. parameters options : object required options: name type combo string any function key: "f1, f2, ..., f24" or key combination in the format of 'modifier-key': "accel-s" "meta-shift-i" "control-alt-d" all hotkeys require at least one modifier as well as the key. these are the possible modifiers you can supply: shift: the shift key. alt: the alt key. on the macintosh, this is the option key. on macintosh this can only be used in conjunction with another modifier, since alt-letter combinations are reserved for entering special characters in text. meta: the meta key. ...

core/promise - Archive of obsolete content
ject that contains a promise and two resolve, reject functions that can be used to resolve / reject that promise. note: a promise can be rejected or resolved only once. all subsequent attempts to either reject it or resolve it will be ignored. ...
...in fact some other promise frameworks do that. such use cases are also supported. earlier described defer may be passed optional prototype argument, in order to make the returned promise and all the subsequent promises decendents of that prototype: let { promise, resolve } = defer...

ui/button/toggle - Archive of obsolete content
ked by direct assignment to the button, this will be overridden by the user clicking the button. if you want to change this default behavior, you can delete the window-specific state in your button's onchange handler. ...
...pecific label" console.log(button.state(tabs[0]).label); // access the second tab's label -> "tab-specific label" console.log(button.state(tabs[1]).label); // reset the tab-specific state button.state(tab, null); // access the second tab's label -> "window-specific label" console.log(button.state(tabs[1]).label); } finally, you can pass the button itself into state(). this is an alternative way to set or get the global state. the reason for using this, rather than setting state properties individually, is that you can define an object with the properties to set in one place, then apply it to the global state with a single line: const defaultstate = { "label": "default label", "icon": "./default.png", } const differentstate = { "label": "different label", "icon": ".

Localization - Archive of obsolete content
t html using a statement like: # does not work. html tags are inserted as text. ...
... plural forms in the sdk in the code, you supply an extra parameter alongside the identifier, describing how many items there are: var _ = require("sdk/l10n").get; console.log(_("tomato_id")); console.log(_("tomato_id", 1)); console.log(_("tomato_id", 2)); console.log(_("tomato_id", 5)); console.log(_("tomato_id", .5)); in the .p...

Finding window handles - Archive of obsolete content
when working on windows platforms, many apis and frameworks require a window handle (hwnd type). since mozilla tries to be as cross-platform as possible, it can be difficult to get the handle you need. note: starting in gecko 2.0, only the top level browser window has an hwnd. web content windows (in tabs) do not have their own hwnds. typically the top level browser window hwnd has no children, although if there are windowed plugins (such as flash) visible in the window, they will have hwnds whose parent is the top level browser window hwnd. here is some simple code that can get access to mozilla window handles. this code can be used from external application or from an xpcom component within an extension. finding the content window handle hwnd hcontent = 0; // first we need to find ...
...notice that by using only the c++ part of this code will get the the parent window handle of the nsibasewindow you give as a param. that means if you use the top level nsibasewindow as a param, null will be returned in the chain and cause crash of firefox, that's a bug of firefox.(https://bugzilla.mozilla.org/show_bug.cgi?id=4...

Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
all of these documents currently assume, however, that you are developing your extension using xul and javascript only. for complex extensions, it may be necessary to create components in c++ that provide additional functionality. reasons why you might want to include c++ components in your extension include: need for high-performance beyond what can be delivered by javascript code. use of third-party libraries written in c or c++. use of mozilla interfaces that are not exposed via xpcom (e.g. nspr). note: with the modern jit javascript engine in gecko and js-ctypes more extension code can be written only in javascript than ever before. ...
...er c++ components or from javascript. the process of creating a component is actually relatively straightforward when the mozilla build system is used. in the simplest case, a component will consist of a single main directory with two subdirectories, public/ and src/. the main directory and each subdirectory must contain a makefile.in (from now on i'll just refer to this file as a makefile although we know that it is actually used to generate the real makefile). this makefile says two things. first of all, it lists the subdirectories that make up the extension, so the build system knows where to look for additional makefiles. secondly, it instructs the build system to create a new extension, rather than copying the components directly into firefox's binary directory. the main advantage...

Extension Versioning, Update and Compatibility - Archive of obsolete content
udes an updatekey in its install.rdf. ...
...trieved must currently be totally valid xhtml, including being delivered with the mime type application/xhtml+xml (important: see problems section) you may include %app_locale% in your updateinfourl if you want to have locale information included in the url -- this allows you to customize the text based on the user's locale. you may also use the other substitution strings supported by updateurl, although those may be less useful. formatting prior to firefox 4 prior to firefox 4 you could only use the following tags, any other tags have themselves and their contents completely stripped: h1, h2 and h3 for general headings p for paragraphs ul and ol for lists. within lists use the usual li tag for each list item. within h1, h2, h3, p and li tags you may use: b or strong for bolder ...

Appendix: What you should know about open-source software licenses - Archive of obsolete content
copying a piece of software distribution: passing a piece of software to another person modification: modifying the software a typical software license will grant these permissions in return for a fee, and will still restrict some normally unrestricted uses. the software that microsoft sells, such as windows, comes with a license that permits only limited duplication in exchange for a fee, so, although customers can install it on their computers, they cannot modify it. and essential freedoms, such as reverse-engineering, are also restricted. this use permit is displayed when you install the software. when the user clicks “i agree,” the installation process finishes. software range of uses restricted to author unrestricted software license >> ...
...g on which license you choose english version is the official text nearly all oss licenses take english as their official texts. japanese versions, for example, are mentioned only as reference translations. thanks to the internet, published source code can be used all over the world, so the language that the most people will be able to understand is chosen as the language for the license (although this may reflect a western bias). applying an oss license in this section, i will explain practical details of applying a license when you are using oss source code, and participating in open-source projects. circumstances of application first i’ll explain what kind of license to use depending on whether you are modifying existing oss source code or writing original software. check th...

Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
to open it in source-code view (figure 2). fixme: figure 2: selecting source code inserting breakpoints now you’ll want to set some breakpoints. try inserting one within the quicknote_savenote function, around line 345 (figure 3). fixme: figure 3: inserting a breakpoint start debugger type in some text into the quicknote screen, and then select save current tab from the menu. this should halt the program at the spot where you inserted the breakpoint with venkman, and start the debugger. the local variables screen should always display variables and objects during step-by-step execution. with functions that include a lot of variables, this will be hard to read, so you can point out specific variables that you want to watch (figure 4). watched variables appear under the watches tab, a...
...hat include a lot of variables, this will be hard to read, so you can point out specific variables that you want to watch (figure 4). watched variables appear under the watches tab, and are updated every time they are evaluated. you can then continue with stepwise execution and watch the changes in the program and variables. once you’ve finished your inspection, you can continue and let the halted program resume execution. the author has done almost no work developing extensions, but has used this to investigate how extensions were implemented. in the quicknote example, we first set one breakpoint and then stepped through it. use step over to avoid a function, and step into to always call it; once you are done investigating a function, use step out, and then you can step into the next ...

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
toolbar. this is done in the overlay as well. <window id="main-window"> <toolbox id="navigator-toolbox"> <toolbar id="xulschoolhello-toolbar" toolbarname="&xulschoolhello.toolbarname.label;" accesskey="&xulschoolhello.toolbar.accesskey;" customizable="true" mode="icons" context="toolbar-context-menu" defaultset="xulschoolhello-hello-world-button" insertbefore="personaltoolbar" /> </toolbox> </window> (note for mac os x: <window id="main-window"> and </window> are not required) our toolbar is added as a child of the toolbox element in the main browser window. the toolbox is the collection of toolbars in firefox, including the main menu bar. let's look at the attributes we used: the toolbarname is the name that will appear on the view > toolbars menulist.
...ase where you just want to add one button to the main toolbar. in this case you still need to add the button to the palette using an overlay. in order to add your button to the main toolbar on first run, you'll have to use javascript code. keep in mind that you shouldn't assume anything about the location (or presence!) of any specific buttons; remember users could have moved them or removed them altogether. the toolbar code snippets page has a code sample you can use to do this. remember to validate if your button is already present, to prevent duplicates. it's also a good idea to set a preference that indicates that you added your button already, so that it can be removed permanently if the user chooses to. another option is to use fuel's firstrun property, which also relies on a preferenc...

Adding sidebars - Archive of obsolete content
ation and clean up . another, more important difference to take into account is that users can resize the sidebar to their liking, and in most cases, the sidebar is going to be fairly narrow. you should design the content of your sidebar carefully, so that it is usable and appealing regardless of width. there are ways to limit the size boundaries of your sidebar with css or even disable resizing altogether, but none of those are good practices. forcing sidebars to have a fixed size can cause accessibility and usability problems. you can still have plenty of content available in your sidebar, you just need to organize it in a way that doesn't take too much space. for this purpose we'll also look at some handy xul elements in this section. they allow you to stack content on top of other conte...
...t circumstances. for instance, you could have a window that is used for two different purposes, and the only difference between the two cases is a label that has a value in one case and something else in another. using a .properties file and a string bundle is a viable option, but it involves a lot of code for something so simple, specially if that's the only case where you need dynamic text. the alternative is to use a deck with the two labels, and change the selected index depending on the purpose of the window. this way you can still use dtd, and the code remains simple. a stack is like a deck, except that all of its children are always on display, one of top of the other. it allows you to decompose complex ui into individual layers, broadening the layout possibilities. one common use for...

Appendix D: Loading Scripts - Archive of obsolete content
this method: there is currently no way to load code into sandboxes from a cache. this means that code must be compiled and executed anew each time it is loaded, which has a significant overhead for large code bases. in addition to compile time, reading files synchronously from disk has its own overhead, and xmlhttprequests have significantly more overhead than native loading methods. although wary authors can choose to cache instances of their modules so that modules are loaded only once globally, this method can be easily misused to re-load scripts for each new window where they would be better loaded only once globally per session. because sandbox objects are evaluated in their own javascript compartment, they are separated by a membrane from other javascript code. this mean...
...still suffer performance and memory disadvantages over that method. when loading into a sandbox object, the same advantages apply as above. disadvantages performance: prior to gecko 8.0, scripts loaded via mozijssubscriptloader.loadsubscript() are not loaded from a cache, and therefore must be read and compiled each time they are loaded which has a significant overhead for large code bases. although wary authors can choose to cache instances of their modules so that modules are loaded only once globally, this method can be easily misused to re-load scripts for each new window where they would be better loaded only once globally per session. non-chrome files loaded in this manner will have the current filename prefixed to the filename in their debugging information. for instance, the fi...

Handling Preferences - Archive of obsolete content
the preferences window should be as easy to use as possible. to access all other preferences, enter "about:config" into the location bar. this xul page lists all the preferences defined in the firefox installation, allowing you to change them as you please. as the warning message states, you should be very careful when changing preferences. incorrect values can make firefox behave oddly or break altogether. you can type on the "filter" textbox to search for specific preferences. if you type the word "homepage", it will filter all the preferences and display only the ones which include the word "homepage" in its name or value. right-clicking on the list reveals several options that allow you to modify preference values and add new ones. preferences with non-default values are highlighted in ...
...eate and manage their own. the preferences system provides a simple, unified storage facility for name / value mappings. when your storage needs are more complicated than this, you'll need more advanced apis that will be discussed in a section further ahead. to add preferences to your extension you should first create a js preferences file that describes the preferences and their default values, although setting defaults is not required. as mentioned earlier, a preference with no default value can be set later on. note: we recommend that you include all of your extension preferences in the js defaults file. it makes it easier to compile a list of the preferences your extensions handle, and to document what they do. the preferences file you need to create should be defaults/preferences/...

Setting Up a Development Environment - Archive of obsolete content
. just like in the provided project, you need the add-on id and profile location set in the file makefile. we use this information to locate the installation path of the extension and overwrite the installed files. if firefox is open at the time you run "make install", you'll have to restart it in order to see the changes. it's still better than installing the xpi all over again. you may need to alter the profile location in your makefile. in order to set the profile location to the right value, you should read the support article on profiles, at the mozilla support site. we'll also delve deeper in this topic later on in this section. to make "make install" work on non-windows systems, you need an extra step. the install process requires using an environment variable called ostype, which is...
... introduction to dom inspector is a good guide on how to get started using it. the dom inspector is particularly useful in finding out how to overlay a window, and how to replace default css style rules. you can see the names of the files involved, which gives you a good starting point when looking into the mozilla source. you can even change styles, attributes and execute javascript code in it, although that's not completely reliable. javascript debugger the name says it all. the venkman javascript debugger is a great way to trace execution of your javascript code. to debug extension and browser code, right-click on the loaded scripts panel and uncheck exclude browser files. the list of loaded scripts will grow long to include all of the scripts in firefox. having our file naming convent...

The Essentials of an Extension - Archive of obsolete content
. we then call the window.alert function with the message, just like we would do in an html document. locale there are two types of locale files: dtd and properties, and in this example we use them both. dtd is the most efficient way of showing text in xul, so you should use it whenever possible. it is somewhat inflexible so it can't be used for dynamically generated text, hence the need for an alternate way of getting localized strings. looking back at the menu code, you probably noticed some attributes such as this: label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" these attributes define the text that you see on the menus, and they are string keys that are defined in our dtd file, browseroverlay.dtd. the dtd file was included in the xul file wit...
... the string key. ...

User Notifications and Alerts - Archive of obsolete content
tant events, often requiring some response. using modal dialogs and alerts is usually a bad idea. they interrupt the user's workflow, demanding immediate action before anything else can be done. users will find them annoying and probably will learn to dismiss them as quickly as possible without even reading what they have to say. or they will just get rid of your add-on. this section lists a few alternatives that give you the possibility of notifying the user and requesting action without being too annoying. the notificationbox element you have probably seen these before. the "remember password" prompt is the one that shows up the most often. they are thin boxes that appear from beneath the tab list and above the page content, with some text and maybe a few buttons. this kind of notificati...
...support and temporary nature of these alerts, we don't recommend using this service to show information the user needs to know and can't get in any other way. custom alerts creating custom solutions for alerting the user is not complicated, given the advantages of xul overlays and css positioning. however, these solutions are prone to be buggy and have accessibility issues. you should use the 2 alternatives mentioned above whenever possible. if none of those fit your needs then this is an acceptable solution. an easy way to display alerts is to include a hidden box in your overlay, which you can fill with any content you need before removing the hidden attribute so that it is displayed to the user. the best locations for this kind of box are above and below the tab browser. below is prefer...

XPCOM Objects - Archive of obsolete content
directly from the interface: // these are equivalent. max = ci.xsihellocounter.max_count; max = counterreference.max_count; the implementation file, xshellocounter.js, is much longer. we'll analyze it piece by piece. const cc = components.classes; const ci = components.interfaces; const cr = components.results; const ce = components.exception; you should be familiar with this already, although there are a couple of additions, components.results and components.exception. they'll be used further ahead. const class_id = components.id("{37ed5d2a-e223-4386-9854-b64fd38932bf}"); const class_name = "hello world counter"; const contract_id = "@xulschool.com/counter;1"; these constants are used at the bottom, in the component registration code. they specify the details of the compone...
...nent registration code. they specify the details of the component, such as a unique uuid (you have to generate it too and it must be different from the idl uuid), a descriptive name (this isn't used anywhere that we know of), and the contract id, which is the string you use to get a reference to the component. the ";1" at the end of the string is supposed to indicate the version of the component, although it shouldn't change much. it can be useful if there are multiple incompatible versions of the component installed at the same time. the implementation object itself should be easy to understand. the only aspects to take into account are that methods and attributes must have the same names as their idl counterparts, and that the queryinterface method is implemented: queryinterface : funct...

Session store API - Archive of obsolete content
ting when the tab is restored. the session store api is implemented using the nsisessionstore interface. knowing when to restore each time firefox is about to restore a tab, an event of type sstabrestoring is sent. ...
...lly, the sstabrestored event is sent. if you want to set permissions or otherwise manipulate a restored tab before the page is loaded into it, you should watch sstabrestoring. if you want to do something after the page is loaded, you should watch sstabrestored. both events are always sent for each tab being restored. you can determine which tab is being restored by looking at the event's originaltarget field. there's not really a way to determine when the last tab has been restored unless you determine how many tabs need to be restored then count the sstabrestored events. this section provides a few simple examples of how to make use of the session store api. saving a value with a tab the following code will attach a key/value pair to a tab, so that when the tab is restored, that pai...

Signing an XPI - Archive of obsolete content
file for signing create a new folder just for signing, copy your existing xpi into it, unzip* it (maintaining paths), delete the xpi and return to the certificate-database folder. *assumes you have a zip utility available on your system path. this example is using the cygwin bin/zip.exe tool. you can use a graphical zip tool provided it manages the internal sub-directory structure properly. an alternative is to use winrar. the 7-zip tool doesn't work when creating mozilla xpi signed archives because it sorts the directory entries alphabetically, and mozilla requires the first entry to be meta-inf/zigbert.rsa. c:\projects\codesigning\> md signed c:\projects\codesigning\> copy c:\projects\fsb\fsb.xpi signed 1 file(s) copied. c:\projects\codesigning\> cd signed c:\projects\codesi...
... -k "code signing (certum)" -p "password" build/ >> %x%\build.log cd build zip "%x%.xpi" meta-inf/zigbert.rsa >> %x%\build.log zip -r -d "%x%.xpi" * -x meta-inf/zigbert.rsa >> %x%\build.log rem copy "%x%.xpi" ..\..\..\http\fsb.xpi >> %x%\build.log move "%x%.xpi" ..\ >> %x%\build.log cd .. rd build /s/q echo done. make sure to replace password with your nss certificate database password. alternatives to nss/signtool there are several alternatives to using signtool that might suit your needs better, however please note that these alternatives are unofficial third party products. key manager xul extension wladimir palant's python script (blog post) xpisign.py python script xpisigner java tool references the nss tools documentation ...

Adding preferences to an extension - Archive of obsolete content
ng the preference branch for our extension, we call the nsisupports.queryinterface() method on it to be able to use the methods of the nsiprefbranch2 interface. the next step is to register a preference observer by calling the addobserver() method to establish that whenever any events occur on the preferences, our object (this) receives notification. when events occur, such as a preference being altered, our observe() method will be called automatically. now that we're monitoring the preferences, we can set up to watch the stock information and display it in the status bar panel. the first thing we need to do is get the currently configured stock symbol to watch from the preferences. to do so, we call the nsiprefbranch.getcharpref() method, specifying that we want the preference named "sym...
...window. our dialog has two widgets in it. the first is a label describing the textbox. the second is the textbox itself, in which the user enters the symbol. the preference property ties the textbox to the "pref_symbol" <preference> element and to the "extensions.stockwatcher2.symbol" preference. this lets the preference value automatically be updated to reflect the content of the textbox. alternative method: inline options requires gecko 7(firefox 7 / thunderbird 7 / seamonkey 2.4) you could use inline options for this preference. you must set em:optionstype to 2 in your install.rdf. your options.xul file would look like this: <?xml version="1.0" ?> <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <setting pref="extensions.stockwatcher2.symbol" ty...

Images, Tables, and Mysterious Gaps - Archive of obsolete content
table rows instead of the images. thus you might have: tr.decoration img {display: block;} ...along with the following change in the markup: <tr class="decoration"><td style="background: red;"> <img src="smallred.gif" height="1" width="1"> </td></tr> the result is that of only making the spacer gif block-level, thus leaving the other images alone. this leads to the result seen in figure 9. alternatively, you could class table cells instead of rows, if that's a better choice for you. in any of these cases, though, making images block-level could have unintended side effects if your table cells have more than just a single image in them, as in figure 8. of course, while we have a single-pixel spacer cell in figure 9, there is still unwanted space underneath the navigation buttons across...
...ingle-pixel spacer cell in figure 9, there is still unwanted space underneath the navigation buttons across the top. getting rid of this space could be as easy as putting each image in its own cell and making them all block-level, but let's leave them all together in a single cell so we can illustrate another approach. using vertical alignment the other main choice is leave the image inline and alter the vertical alignment of the image with respect to the line box. for example, you could try the following: td img {vertical-align: bottom;} this will cause the bottom edges of the images to be aligned with the bottom of the line box, instead of the baseline. as we can see in figure 10, this has the intended effect: the space underneath our navbar images is gone. however, the decorative cell ...

Source code directories overview - Archive of obsolete content
tion: common subdirectories a common naming scheme is used throughout the mozilla source trees. at the top level is the name of the product (e.g. seamonkey). at the second level is the name of the module (e.g. the editor directory in seamonkey). the third level is where the common naming scheme usually takes over. many third level directories contain the base, the public and the idl directories. although not required, these common names are typically used for a common purpose. if files can be grouped into submodules, they are usually put in their own third level directory and given a unique name (e.g. txmgr in the editor directory in seamonkey). beneath this third level directory, there may be fourth level base, public and idl directories. thus, the scheme is recursive; it can apply to submo...
...ents (which stands for "cross platform component object model"). xpcom is the mechanism that allows mozilla to export interfaces and have them automatically available to javascript scripts, to microsoft com and to regular mozilla c code. some low-level xpcom classes and interfaces are also defined here (e.g. the event loop for all platforms). xpcom is compatible and very similar to microsoft com (although xpcom is cross-platform). xpfe contains the c interfaces, c code and xul for implementing the "cross platform front end." essentially, this is where the mozilla program starts and manages other components to accomplish tasks. this code contains very little platform dependent code; it relies on other components to provide platform independent interfaces to platform specific functionality. x...

Making a Mozilla installation modifiable - Archive of obsolete content
files are all in text format and can be edited in a standard text editor, while image files are in binary gif, jpg, or png format and must be edited with an image editing program. the files are then collected into a series of jar archives, which are just zip files that contain a specially formatted "manifest" file which describes the contents of the archive so mozilla knows what to do with them. ...
...with them. although jar archives are binary files, mozilla's ui is not compiled into machine code; mozilla instead builds its ui from the non-compiled files in the archive each time it starts up. because of this, we can modify the files in the archive and see our changes to the ui merely by restarting the application. this makes modifying mozilla's ui much easier than for many other applications. although mozilla stores the ui files in jar archives, it can also access them in their original, unarchived form, which is useful for the extensions developer because it makes it unnecessary to extract the files from the archive before changing the code and then re-add them to the archive afterwards. instead, you only have to extract them once and can then make as many modifications as you like. to m...

Installing Dehydra - Archive of obsolete content
dehydra is not supported on mac os x. building spidermonkey it is recommended that you use spidermonkey revision aurora_base_20110705 when building dehydra. ...
...13 is really needed: it does not work with e.g. v2.68. there is no need for some installation after make. you can skip the next section "building gcc 4.5" if you are using gcc 4.6 or above. building gcc 4.5 for treehydra's process_tree_decl to work, when compiling with g++, you must use a patched gcc 4.5 before building dehydra. cd $home # obtain gcc 4.5.3 (see http://gcc.gnu.org/mirrors.html for alternate mirrors) wget http://www.netgull.com/gcc/releases/gcc-4.5.3/gcc-4.5.3.tar.bz2 tar -jxvf gcc-4.5.3.tar.bz2 # apply plugin_finish_decl patch wget https://bug559964.bugzilla.mozilla.o....cgi?id=457606 -o finish_decl.diff cd gcc-4.5.3 patch -p0 < ../finish_decl.diff # build gcc cd .. mkdir gcc-objdir mkdir gcc-dist cd gcc-objdir ../gcc-4.5.3/configure --disable-bootstrap --enable-languages=c...

Microsummary XML grammar reference - Archive of obsolete content
ment the <template> element contains the xslt stylesheet which transforms web pages into their microsummaries. attributes: none. child elements: <stylesheet> or <transform> (required) the xslt stylesheet which performs the transformation. per xslt, you may specify the stylesheet child element using either the <stylesheet> or the <transform> tag, which are interchangeable. note: although the <template> element must be in the microsummaries namespace (http://www.mozilla.org/microsummaries/0.1), its <stylesheet>/<transform> child element must be in the xslt namespace (http://www.w3.org/1999/xsl/transform). the <pages> element the <pages> element identifies the set of pages that the generator is able to summarize. attributes: none. child elements: <include> (optional) ...
...se between updates. child elements: <condition> (optional) an xpath boolean expression along with a conditional interval of time, in minutes, that must elapse between updates if the expression evaluates to true. the interval attribute defines an absolute interval in minutes. its value must be a number greater than or equal to 1. fractional values (e.g. 5.5 minutes) are permitted, although they probably aren't useful. the <update> element may contain any number of <condition> child elements. firefox determines which interval to apply to a microsummary generated by a generator according to the following rules: firefox processes each <condition> child element in document order. for each one, firefox evaluates the element's xpath boolean expression against the page being summa...

Modularization techniques - Archive of obsolete content
ounting logs. use them wherever possible. /* * the nsisupports interface */ class nsisupports { public: ns_imethod queryinterface(const nsiid &aiid, void **aresult) = 0; ns_imethod_(nsrefcnt) addref(void) = 0; ns_imethod_(nsrefcnt) release(void) = 0; }; the ns_imethod and ns_imethod_(type) macros are basically shorthand for virtual nsresult and virtualtype. on windows they expand to virtual nsresult __stdcall and virtual type __stdcall for com compatibility reasons. you don't have to use them in your interfaces unless you're concerned with com compatibility. all mozilla interfaces inherit from nsisupports. inheriting from nsisupports allows any interface to be interrogated about other interfaces that its instance may support, and insures that r...
...objects, maintaining these behaviors is easy. aggregation, as we will see later, can complicate things. on the other hand, objects are allowed a certain degree of flexibility in their implementations of addref() and release(). they can maintain a single reference count for the entire object, or individual reference counts for each interface. a static object would chose to ignore reference counts altogether. however, a poor implementation of these functions can have negative results, such as memory leaks or inadvertent access of freed objects. factories factories are special classes dedicated to creating instances of classes. a foo class will typically have a foofactory associated with it. the nsifactory interface is the equivalent of com's iclassfactory. /* * the nsifactory interface */...

Monitoring downloads - Archive of obsolete content
firefox 3 introduces new api that allows any number of listeners to observe downloads. this article demonstrates how to monitor downloads in firefox 3, using the download manager. as a nice bonus, it also demonstrates how to use the storage api to issue sqlite commands on a database. ...
...firefox 3 introduces new api that allows any number of listeners to observe downloads. this article demonstrates how to monitor downloads in firefox 3, using the download manager. as a nice bonus, it also demonstrates how to use the storage api to issue sqlite commands on a database. ...

New Security Model for Web Services - Archive of obsolete content
this should especially be implemented for soap calls by untrusted scripts. when an attempt is made to access a resource at a previously-unknown uri, the sandbox reads a file at that domain with declarations to determine whether access is permitted to the script. if the file is not there, access is denied. the problem external untrusted scripts loaded behind a firewall are executed in a sandbox. ...
...nto the root directory of the web server to allow access. delegation with mixed ownership independent owners of subdirectories cannot grant web script access to these subdirectories without getting the owner of the root directory to post a delegating access file. normally a server will be either inside or outside of a firewall, so this is not a problem. where a server spans multiple owners, the alternative would be to scan all directories in the path looking for a web scripts access file, which seems undesirable. on the other hand, perhaps it is not so bad, since it permits independent management in domains where the top level owner may not care about providing access to web services. adjustments as this new model is applied to soap, and potentially document.load or xml-request, it may be...

New Skin Notes - Archive of obsolete content
t's just sloppy coding. i cannot think of any reason for writers or editors to add "clear:both" brs to their document. under what situations does this seem like something that should be embedded directly into the wiki content? --dria when using floated divs - images and such. if you don't use it they overlap with headings, which is something we seldom want. see for example the venkman tutorials (although the clears are down the page) or mdc:frequently asked questions. i'm not saying this can't be worked around, just that it would be better if the skin coped with that fine. --nickolay 05:46, 25 aug 2005 (pdt) ok, i'll see what i can do. thanks for pointing it out. --dria external link icons missing on ie version of skin. --dria edit/preferences/diff pages end up being too wide at ti...
... webwatch are not currently being localised so shall remain as they are, with link to english wiki. --dria further notes and ideas (future) skin designed more for the editorial crowd, with the editor tools more prominently placed in the skin. the core format would be the same as "default", however. skin designed with simplicity in mind -- minimal header, nav, footer -- plausibly good for alternate or small screen display, or people who prefer more straight-up formatting for on-screen docs. skin designed specifically with accessibility in mind. might want to consult with aaronlev to see what would be best. also see about improving accessibility of default skin. we definitly need to add some ui to multipage stuff like tutorials. things like toc and back/forward and "page x of y" ar...

RDF Datasource How-To - Archive of obsolete content
ble to selectively implement methods of the nsirdfdatasource interface; instead, all of the methods will be "forwarded" to the in-memory datasource. this can be useful if your datasource is "read-only", and you aren't worried about modification using assert(), etc. implement the interface yourself. if you choose this route, you'll need to implement each of the nsirdfdatastore methods "by hand". ...
...you may also need to choose this implementation if the data set which your datasource is modeling is too large to fit in to memory (e.g., the entire file system structure). ...

Frequently Asked Questions - Archive of obsolete content
ox 1.5. what can i do to help the svg project? okay so maybe this isn't such a frequently asked question, but if it was, just think how much further on with our svg implementation we could be! we're always looking for help from anyone willing to lend a hand. if you're a c++ programmer interested in working on the svg implementation, please contact us and we'll be happy to help you get involved. alternatively, if you're an svg user you can help by testing the svg enabled nightlies and filing bugs with minimal testcases whenever you encounter a problem. if you can't do either of these things you should still feel free to ask us friendly questions and give us constructive feedback. who's currently working on what? other than reviewing patches and fixing the occassional bug, alex is currently...
...rver. this is where most of us hang out to discuss issues relating to the svg implementation. if you don't have an irc client then install chatzilla into mozilla/mozilla firefox (note it may already be built in). clicking on the link above should then take you straight there. if you'd prefer to contact us by email you can send an email to our newsgroup mozilla.dev.tech.svg which is archived here. alternatively you can email any of us directly of course (see the preceeding question for our email addresses). original document information author(s): jonathan watt last updated date: november 6, 2006 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...

Using cross commit - Archive of obsolete content
it on all the branches at once # make sure to use -m "commit message" when doing so tools/cross-commit --moz18 --branch mozilla_1_8_0_branch -m "fix some sort of security bug" layout/base/nscaret.h notes note that you must use a -m option with a cvs checkin message. otherwise cross-commit will end up waiting forever for you to type a cvs checkin message in an editor that it never shows you! (although it works without specifying -m on the command line if you are using x-enabled emacs on linux.) also note that if you don't specify any branches to commit on, cross-commit will commit to the trunk and the mozilla_1_8_branch by default. details cross-commit accepts the following options: all cvs options (those to the left of the specific cvs command) and cvs commit options (those to the ...
...fying -m on the command line if you are using x-enabled emacs on linux.) also note that if you don't specify any branches to commit on, cross-commit will commit to the trunk and the mozilla_1_8_branch by default. details cross-commit accepts the following options: all cvs options (those to the left of the specific cvs command) and cvs commit options (those to the right of a commit command), although the -r and -f cvs options need to be specified as --cvs-r and --cvs-f to avoid conflict with the similarly named (but different in meaning) cvs commit options. you can list the files/directories you want it to commit on the command line or leave them out and let it recursively troll the current directory. --verbose=[0|1] makes the script output more text as it runs. this defaults to 1. --t...

Venkman Introduction - Archive of obsolete content
or-0.03 121 in the debugger. the console command /break is used to set and list breakpoints. the first parameter is the file name that contains the javascript you want to break at. the second parameter is the line number. you don't need to specify the entire file name. in this example, we are setting a breakpoint in the pause function called when the browser starts the dhtml fishcam window. alternately, you can select animator-0.03.js from the loaded scripts view, locate the pause function at line 119, and click in the left margin. setting breakpoints in this manner is equivalent to using the /break command in the console. in either case, a red breakpoint icon appears in the source code view. type /break in the debugger. if you don't provide arguments to the /break command, all...
... in the articles that follow this one. the best way to get to know venkman, of course, is to play around with it — to set it up in the way that makes the most sense to you, to try loading scripts and setting breakpoints, evaluating expressions in the interactive session view, watching the values of variables as they change when scripts are executed, getting profile data. debugging extensions although at first glance it might seem that venkman cannot debug extensions, doing so is in fact fully supported; it's just disabled by default. to debug your extension with venkman (xul files and their attached js files), you'll have to load browser and extension files into venkman by unchecking debug > exclude browser files. resources using breakpoints in venkman — next article about venkman...

Writing textual data - Archive of obsolete content
.org/intl/converter-output-stream;1"] .createinstance(components.interfaces.nsiconverteroutputstream); // this assumes that fos is the nsioutputstream you want to write to os.init(fos, charset, 0, 0x0000); os.writestring("umlaute: \u00fc \u00e4\n"); os.writestring("hebrew: \u05d0 \u05d1\n"); // etc. os.close(); you can also write character arrays using the write function, although using writestring is simpler from javascript code. the example above passes 0 as the third argument, which disables buffering (note: the implementation of the converter stream might not support buffering). passing 0 ensures that data will be immediately written to the underlying stream; however, for better perfomance you should pass a value like 4096 instead. unsupported characters you ca...
... any other character. you can also specify any unicode character u+abcd directly as 0xabcd. note: if the replacement character is not a supported character in the chosen character encoding, attempts to write unsupported characters will fail with ns_error_loss_of_significant_data. versions before gecko 1.8 firefox 1.0.x, mozilla 1.7.x and older versions do not support nsiconverteroutputstream. alternative ways usable from javascript do not support character encodings that use embedded nulls (such as utf-16 and utf-32). they work by manually converting the string you want to write to a byte sequence using nsiscriptableunicodeconverter, and writing that to the stream. here's an example: // first, get and initialize the converter var converter = components.classes["@mozilla.org/intl/scripta...

Anonymous Content - Archive of obsolete content
the bound element itself, one of two actions occurs. either the event is retargeted so that the bound element becomes the target, or the event is stopped and flow proceeds to the next phase. whenever an event is retargeted, the target field of the event is set to the bound element. the original anonymous content responsible for the event can be obtained from a new field of the event object: originaltarget. the action taken (retarget vs. stop) is specific to the event type. in general, ui events are retargeted and mutation events are stopped. exceptions to the rule are noted below. focus and blur events when a focus or blur event crosses a scope boundary, the bound element is checked to see if it is focusable (i.e., if the user agent would normally fire a focus or blur event on the element)...
..., descendant, and sibling selectors will match on any path of anonymous and explicit elements. as far as css is concerned, anonymous content nodes are children (or descendants) of the bound element, they are ancestors of explicit content, and they are siblings of the explicit content. style rules using the child, descendant, or sibling selectors transparently cross bind scopes and operate on the altered and original content models. the final modified content tree determines how css properties (e.g., fonts and colors) are inherited. an element either ends up underneath its explicit parent (just as in the content model), or it ends up being nested through a series of insertion points. when nested, it inherits from the innermost anonymous parent. binding stylesheets a binding file can load s...

Binding Attachment and Detachment - Archive of obsolete content
e document) bindings attached through the dom are detached when the following conditions are met: mozbinding style rule is removed the element is destroyed (e.g., by closing the document) when a binding is detached, the following events occur: anonymous content generated by the binding is destroyed. methods and properties with getters/setters are no longer accessible from the binding, although properties with raw values remain. any specified event handlers are unhooked from their respective targets. a binding can specify a <destructor> block within <implementation> section that executes prior to the binding detachment. using a <destructor> block, a binding can perform any necessary cleanup before it is torn down. bindings in an inheritance chain are always detached from the mo...
...y of the binding document that is unique to the bound document. the bindings in the binding document can be modified using standard dom apis. any subsequent binding attachments that occur on elements in the bound document for bindings in the binding document use the modified copy. therefore new binding definitions can be generated dynamically or the anonymous content templates for bindings can be altered and used by the bound document. ...

Binding Implementations - Archive of obsolete content
ked when the property is either retrieved or set. these functions are called getters and setters in xbl. for properties with raw values, an initial value can be specified as a child of the property tag. the script is evaluated at the time of binding attachment and the resulting value is stored on the element. it can be assumed that the anonymous content of the binding has been fully constructed, although the bindingattached event will not have fired. property initialization always takes place after content generation but before the firing of a binding attachment event, since the bindingattached handler needs to be able to assume that all properties will be accessible on the binding. properties with getters and setters can define them using onget and onset attributes, or using the more verbo...
...er, then the element form is ignored. a getter contains script whose return value is handed back when the property is requested. a setter contains a script that is invoked when a new value is assigned to the property. in script, the word val is used to represent the new value. properties can be designated as constant using the readonly attribute. when set to true, the property's value cannot be altered. if a property is readonly and a setter is defined, then the setter is ignored. properties also support a shorthand syntax for defining getters and setters that forward requests or assignments to an anonymous content element. the element attribute specifies the id of anonymous content underneath the bound element that should be used when obtained the property or setting the property. on the...

modifiers - Archive of obsolete content
« xul reference home modifiers type: space-separated list of the values below a list of modifier keys that should be pressed to invoke the keyboard shortcut. multiple keys may be separated by spaces or commas. keys will map to other keys on platforms that do not have them. shift: the shift key. alt: the alt key. on the macintosh, this is the option key. on macintosh this can only be used in conjunction with another modifier, since alt+letter combinations are reserved for entering special characters in text. meta: the meta key. on the macintosh, this is the command key. control: the control key. os: windows logo key on windows, super or hyper key on linux. this shouldn't be specified directly because it may conflict with system wide shortcut key. accel: the key used for...
...y on windows, super or hyper key on linux. this shouldn't be specified directly because it may conflict with system wide shortcut key. accel: the key used for keyboard shortcuts on the user's platform, which is control on windows and linux, and command on mac. usually, this would be the value you would use. access: the access key for activating menus and other elements. on windows, this is the alt key, used in conjuction with an element's accesskey. any: indicates that all modifiers preceding it are optional. ...

XUL Events - Archive of obsolete content
can also check for triple-clicks in a similar manner. you should not use this event in xul to respond to user actions; the command event should be used instead. attribute: onclick dblclick this event is like the click event except it is only sent when the user double clicks with the mouse. this is an alternative to checking the detail property in the click event. attribute: ondblclick dommousescroll this event is sent when the mouse wheel is moved, whether it results in content being scrolled or not. the target of this event is the element that was under the mouse pointer when the mouse w...
...d of document changes warning: it should be noted that the addition of any mutation event listeners to a document degrades the performance of subsequent dom operations in that document, and that removing the listeners later does not mitigate or reverse the effect. see mutation events for more details and mutation observers for a more efficient alternative. common xul events event description broadcast the event handler should be placed on an observer. the broadcast event is sent when the attributes of the element (such as a broadcaster) being listened to are changed. attribute: onbroadcast ...

Reading from Files - Archive of obsolete content
e: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. reading data from a file involves getting a reference to a file and then cre...
... readstring method may be used to read a certain number of bytes into a string. this example will keep reading 20 byte blocks from a file and append them to a string. note that binary streams do not interpret characters within the stream, so the returned string will only have characters below 256, if you expect to use the data as text. while(stream.available()) output += stream.readstring(20); although this can be a suitable means of reading binary data, usually you will want to retrieve the data with some additional methods that are more useful. the following methods are available: readboolean will read a single byte from a stream and return false if the byte is zero and true if the byte has a non-zero value. read8 will read a single byte and return it. the 8 in the method name indicates...

Introduction to XUL - Archive of obsolete content
ndividual attributes. rare exceptions to this rule are bugs. xul file preamble xul is xml, and a good xul file begins with the standard xml version and doctype statements. since xml has no implicit display semantics, there must always be associated stylesheets. mozilla includes a standard stylesheet, "xul.css". you can load as many style sheets as you wish using repeated processing directives, although you should always make sure to load the xul.css file initially. and finally, any namespaces used in the document must be declared. so a xul file will begin <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!doctype window> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> t...
...pe window> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ... </window> we would like to head more toward the "package" implementation in the future. internationalization for practical reasons, the locale-specific attributes of a ui description would be most happily developed (and possibly distributed) in separate files, where localization can be performed by altering only a subset of the ui description devoted expressly to localization issues. that is, a separate file of localized strings. internationalization is discussed more completely in the xul coding style guidelines document. in brief, mozilla has settled on xml entities as the mechanism. entities are a feature of the language and therefore outside the scope of this paper. a xul file can be made ...

ContextMenus - Archive of obsolete content
e opened by pressing the menu key on the keyboard (the key on many keyboards next to control with a menu image) or by pressing shift+f10. you should not assume that a user has used the mouse to open a context menu. when using the mouse to open a context menu, the context is the element that was clicked. when using the keyboard, the context is the element in the window that is currently focused. although there are several ways to open a context menu, a single event may be used to listen for any of these situations; the 'contextmenu' event is fired in any case. <hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the event listener attached using...
...n this example, the showhidedeleteitem function is called when the popupshowing event is fired. this function checks if the element with the id 'rows' has no children and, if so, hides the 'delete' menu item by adjusting the item's hidden property. when the user attempts to open the context menu, the delete menu item will either be shown or hidden depending on the the number of children. another alternative is to disable the menuitem instead of hiding it, by setting the item's disabled property. deleteitem.disabled = (rows.childnodes.length == 0); for this example, using the disabled property is more suitable. items should be disabled when they don't apply in certain circumstances, but should be hidden when they would never apply to the element that was clicked on. determining what was c...

MenuItems - Archive of obsolete content
in the same document. the result is that the items will display the shortcut key next to their labels. for the "open" item in this example, this command can be invoked by using the "accel" modifier key and pressing 'o'. the "accel" modifier key varies on each platform, but is the key typically used for shortcut keys. for instance, if the "accel" key is control, the menu might display "ctrl + o". although there isn't usually a need to do so, you can also set a custom label for the keyboard shortcut on the menu using the acceltext attribute. you might do this if the key associated with the item changes, for instance a list of open windows displayed on a window menu. <menuitem label="first window" acceltext="1"/> here the keyboard shortcut label will be '1', however you will need to write co...
...ng the image attribute. the icon will appear to the left of the menuitem label. in addition to the image, a special class "menuitem-iconic" must be used on the menuitem to indicate that an icon is expected. <menuitem id="add-bookmark" class="menuitem-iconic" label="add bookmark" image="addbookmark.png"/> as the image appears on a menu item, you will want to ensure you use a fairly small image. although the exact size will vary depending on the theme being used, the size of menu item images should generally be around 16 by 16 pixels. instead of specifying the icon with the image attribute, you can also reference the image in a style sheet with the 'list-style-image' property. #add-bookmark { list-style-image: url('addbookmark.png'); } this technique can also be used to apply an image f...

Menus - Archive of obsolete content
ess key will underline a letter in the menu label indicating the key to press. for this reason, the access key should always correspond to a character that appears in the menu label. to set an access key for a menu, use the accesskey attribute, as in the example below. ...
...for instance, an access key of 'w' will match the first letter in a menu label of 'window', but the access key of 'w' will match the last letter. it is good practise to always use the same case when setting access keys. ...

Introduction - Archive of obsolete content
generated. if not, nothing gets generated again. an interesting thing to note is that due to the nature of the rdf parsing process, the builder generates results and builds content incrementally while the data arrives. of course, since the data arrives so quickly from the network, you really don't notice this. if the datasource is already loaded, the builder can construct content all in one step, although even this isn't completely true as we'll see later. for xml datasources, use a querytype of xml. the datasources attribute should be the url of an xml file, which can be either the location of a web site or a file on the local file system, using its file or chrome url. this file will be loaded and the resulting xml document will be used as the datasource when the template builder generates r...
...ng its file or chrome url. this file will be loaded and the resulting xml document will be used as the datasource when the template builder generates results and creates content. for example: <listbox datasources="http://www.xulplanet.com/ds/sample.xml" querytype="xml"> <template> <listitem label="?name"/> </template> </listbox> this template uses an xml datasource to generate a listbox. although we'll look at the details of this later, the simple result here is that a listitem will be generated for each child node in the xml data, setting the label to the name attribute for each xml node. for sqlite datasources, the datasources attribute specifies the uri of a database file. only local files are supported, so a file url should be used. if the datasource type supports it, the templat...

Simple Query Syntax - Archive of obsolete content
« previousnext » when iterating over the children of an rdf container, there is a simpler query syntax which may used. it may also be used when iterating over only one predicate. simple rdf graph navigation such as this is common, so the simpler syntax is usually used in this situation since it avoids extra tags, although the simple syntax is not more or less efficient, at least when a single query is involved. a simple query is equivalent to a query with only the content tag and a member tag, as well as optionally a set of triples from the child node. at its simplest, the simple query syntax is equivalent to the following: <query> <content uri="?start"/> <member container="?start" child="?photo"/> </query> the template builder uses the simple query syntax whenever a t...
...simplest, the simple query syntax is equivalent to the following: <query> <content uri="?start"/> <member container="?start" child="?photo"/> </query> the template builder uses the simple query syntax whenever a template does not have a <query> element. if a <query> element is present, the full syntax is used instead. in the simple syntax, the builder will use the default query shown above, although the variable names are randomly generated. since the photos list iterates over the children of a container, we can use the simple syntax. here is what it might look like: <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </template> there is no <query> or <action> element used. instead, the b...

Template Builder Interface - Archive of obsolete content
s attribute has been placed on an html element. this is also allowed. however, one thing to watch out for is that non-xul elements do not have their content generated lazily so all of the content will be generated at once. be careful that your templates do not recurse to deep levels. the builder property is a property of the nsidomxulelement interface, so all xul elements will have this property, although, as mentioned earlier, is will be set to null for most elements. for non-xul elements, the template builder will be assigned to a builder property on the element using a custom javascript property instead. rebuilding and refreshing a template the main purpose of accessing the builder for an element is to call its 'rebuild' method. this method removes any existing generated content and delete...
...template without reloading existing data. if you do want to reload the data, you can call the builder's refresh method: tree.builder.refresh(); this will reload the datasource attached to the template. if there is more than one datasource, as above, all of them will be reloaded. due to the nature of the way templates are updated, you don't usually need to rebuild a template after a refresh call, although there may situtations where this will be necessary. if you do plan on determining the datasources dynamically, it is common to start with an empty datasource using the special uri 'rdf:null'. <tree datasources="rdf:null" ref="http://www.xulplanet.com/rdf/myphotos"> this will create a composite datasource with no datasources in it. this syntax is necessary as otherwise you wouldn't be able t...

Tree Widget Changes - Archive of obsolete content
instead of identifying columns by id, a new column object is used. this object implements the nsitreecolumn interface and holds information about a single column in the tree. a tree will have one of these objects for each column (each treecol element) in the tree. ...
... work. this is shown in the example above. sometimes, you might have a particular row or cell which you do not want to be editable. in this case, disable editing for that cell by setting editable to false for that cell, as in the following: <treecell value="true" editable="false"/> or, for custom views, return false from the iseditable method. currently, only checkbox columns support editing, although the content-based tree handles the nsitreeview.setcellvalue() and nsitreeview.setcelltext() functions to change the tree content with a script for other types of cells. for instance: var col = tree.columns.getprimarycolumn(); treecell.setcelltext(5, col, "banana"); this will change the label of the cell in row 5 and the primary column to banana. however, this paves the way in the future f...

Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
ck box is changed when the space bar is pressed. <handlers> <handler event="keypress" key=" " action="this.checked=!checked"/> </handlers> you can also use the keycode attribute to check for non-printable keys. the section on keyboard shortcuts provides more information. the modifier keys can be checked by adding a modifiers attribute. this should be set to one of the values set below: alt the user must press the alt key. control the user must press the control key. meta the user must press the meta key. shift the user must press the shift key. accel the user must press the special modifier key that is usually used for keyboard shortcuts on their platform. if set, the handler is only called when the modifier is...
...l key. meta the user must press the meta key. shift the user must press the shift key. accel the user must press the special modifier key that is usually used for keyboard shortcuts on their platform. if set, the handler is only called when the modifier is pressed. you can require multiple modifier keys by separating them with spaces. ...

Advanced Rules - Archive of obsolete content
ule syntax the rule syntax described so far is useful for some datasources but sometimes you will need to display data in more complicated ways. the simple rule syntax is really just a shortcut for the full rule syntax which is described below. like the simple rules, full rules are placed within the rule tag. full rules contain three child tags, a conditions tag, a bindings tag and an action tag, although the bindings tag is not always needed. the conditions element is used to specify the criteria for matching a given resource. you can specify a number of conditions, all of which must match. in the simple rule syntax, the conditions are placed directly on the rule element itself. if the conditions match for a resource, the content placed within the actions tag is generated. in the simple synt...
...ows: <content uri="?var"/> the question mark indicates that the text following it is a variable. you can then use the variable 'var' within the remainder of the conditions. of course, you can name the variable whatever you want. member element the next element is the member element, which is used to iterate through a set of child resources. in rdf terms, that means a container such a seq, bag or alt. let's say you have a list of cities described in the following rdf/xml fragment: <rdf:seq about="http://www.xulplanet.com/rdf/weather/cities"> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/paris"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/manchester"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/melbourne"/> <rdf:li resource="http://www.xu...

Anonymous Content - Archive of obsolete content
ng element. the id attribute should be set to the identifier of the binding. this way it can be referred to through the css -moz-binding property. the content tag is used to declare anonymous content that will be added to the scroll bar. all of the elements inside the content tag will be added inside the element that the binding is bound to. presumably this binding would be bound to a scroll bar, although it doesn't have to be. any element that has its css -moz-binding property set to the uri of the binding will use it. the result of using the above binding is that the line of xul below will be expanded as follows, assuming that the scrollbar is bound to the xbl above: <scrollbar/> expands to: <scrollbar> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/>...
... binding is that the line of xul below will be expanded as follows, assuming that the scrollbar is bound to the xbl above: <scrollbar/> expands to: <scrollbar> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </scrollbar> the elements within the content tag are added to the scroll bar anonymously. although anonymous content is displayed on screen, you cannot get to it through a script in the normal way. to the xul, it's as if there was only one single element, even though it is really made up of a number of elements. if you look at a scroll bar in a mozilla window, you will see that it is made up of an arrow button, a slider, a thumb inside it and a second arrow button at the end, which are th...

Content Panels - Archive of obsolete content
of the window. a good example is a step-by-step wizard that guides you through a number of screens, asking a set of questions. each time the user clicks the next button, the next screen of the wizard is displayed. you could create a wizard interface by opening a different window for each screen. there are three problems with this approach. first, each window could appear in a different location (although there are ways around this). second, the elements such the back and next buttons are the same throughout the interface. it would be much better if just the content area of the wizard changed. third, it would be difficult to co-ordinate scripts when running in different windows. note that xul does have a wizard element which may be used to create wizard interfaces. this will be described in a...
...is will be described in a later section. another approach is to use the iframe element, which works much like the html element of the same name. it creates a separate document within the window. it has the advantage that it can be placed anywhere and the contents can be loaded from a different file. set the url to appear in the frame with the src attribute. this url may point to any kind of file, although it will usually point to an html file or another xul file. you can use a script to change the contents of the iframe without affecting the main window. in the mozilla browser window, the area where the web page is displayed is created by using an iframe. when the user enters a url or clicks on a link in a document, the source of the frame is changed. iframe example example 1 : source vi...

Document Object Model - Archive of obsolete content
xul file is loaded, the tags are parsed and converted into a hierarchical document structure of nodes, one for each tag and block of text. the dom structure may be examined and modified using various methods provided for this purpose. specific xul elements also provide additional functions which may be used. each xul file that is loaded will have its own document displayed in a window or frame. although there is only ever one document associated with a window at a time, you may load additional documents using various methods. in mozilla, the dom may be accessed and manipulated using javascript. the various dom objects have functions which may be accessed in script, however, it is important to note that the dom is an api that is accessible by javascript. javascript itself is just a scriptin...
... global object has a 'name' property, you can change the name with the code 'name = 7', without having to specify any object to use. in a browser context, the window is the global object, and the same is also true for xul. naturally, this global object will be different for each window. each frame will also have a separate window object. the window is often referred to using the window property, although this is optional. sometimes, this is done just to clarify the scope of the method you are referring to. for example, the following two lines which open a new window are functionally equivalent: window.open("test.xul","_new"); open("test.xul","_new"); when you declare a function or a variable at the top level of a script, that is outside another function, you are actually declaring a prope...

Groupboxes - Archive of obsolete content
much like the html fieldset element is used to group html elements. the groupbox is a type of box, and the elements it contains are aligned according to the xul box rules. however, there are several differences between groupboxes and regular boxes: the groupbox can be labeled using the caption element. the groupbox is displayed in a special way—usually with a beveled border and a caption, although you can change the appearance using css. you can create a caption for your groupbox by inserting a caption element as the first child. groupboxes are box elements, so you can use the box attributes, such as orient and flex. a simple groupbox example the example below shows a simple groupbox: example 1 : source view <groupbox> <caption label="answer"/> <description value="banana"/> ...
...ces of text to be displayed surrounded by a box with the label answer. note that the groupbox has a vertical orientation by default which is necessary to have the text elements stack in a single column. more complex captions you can also add child elements inside the caption element to create a more complex caption. for example, mozilla's font preferences panel uses a drop-down menu as a caption. although any content can be used, usually you would use a checkbox or dropdown menu. example 2 : source view <groupbox flex="1"> <caption> <checkbox label="enable backups"/> </caption> <hbox> <label control="dir" value="directory:"/> <textbox id="dir" flex="1"/> </hbox> <checkbox label="compress archived files"/> </groupbox> in this example, a checkbox has been used as a...

Introduction to RDF - Archive of obsolete content
set of data, such as bookmarks or mail messages. however, it would be inconvenient to do so by entering the data directly into the xul file. it would make it very difficult to modify the bookmarks if they were directly in the xul file. the way to solve this is by using rdf datasources. rdf (resource description framework) is a format that can be used to store resources such as bookmarks or mail. alternatively, data in other formats can be used and code written that will read the file and create rdf data from it. this is how mozilla works when it reads data such as bookmarks, the history or mail messages. mozilla provides datasources for this common data so that you can easily use them. you can use any of the provided rdf datasources to populate trees with data or you can point to an rdf file...
...omething else. the namespace feature is useful because the class field might conflict with that used for styles. the seq and li elements are used to specify that the records are in a list. this is much like how html lists are declared. the seq element is used to indicate that the elements are ordered, or in sequence. instead of the seq element, you can also use bag to indicate unordered data, and alt to indicate data where each record specifies alternative values (such as mirror urls). the resources can be referred to in a xul file by combining the namespace url followed by the field name. in the example above, the following uris are generated which can be used to refer to the specific fields: name http://www.some-fictitious-zoo.com/rdf#name species ...

RDF Datasources - Archive of obsolete content
the history list the history datasource provides access to the user's history list which is the list of urls the user has visited recently. ...
...e.com/nc-rdf#shortcuturl custom keywords field url http://home.netscape.com/nc-rdf#url the url to link to possible bookmarks roots nc:bookmarksroot the top level of the bookmarks hierarchy nc:iefavoritesroot the bookmark folder that corresponds to the user's ie favorites. nc:personaltoolbarfolder the bookmark folder that corresponds to the personal toolbar folder. files (rdf:files) a view of the user's files. resources name http://home.netscape.com/nc-rdf#name name of the file url http://home.netscape.com/nc-rdf#url url of the file content-length http://h...

Styling a Tree - Archive of obsolete content
r name you want. you can set multiple properties by separating them with spaces. set the property on a row or cell, as in the following example: <treerow properties="makeitblue"> css selectors for the tree the style sheet can take this property and use it to change the appearance of the row for unread messages or labels. you can think of the properties as functioning much like style classes, although they require a somewhat more complex syntax to use in a style sheet. this is because you can specify the style for a number of parts of the cell individually. you can style not only the cell and its text, but the twisty and indentation. the following is the syntax that needs to be used: treechildren::-moz-tree-row(makeitblue) { background-color: blue; } this style which has a complex se...
...which are expanded. closed this property is set for rows or cells which are collapsed. primary this property is set for cells in the primary column. sorted this property is set for cells in the current sorted column. even this property is set for even numbered rows. odd this property is set for odd numbered rows. this property, along with the even property allow you to set, for example, alternating colors for each row. dragsession this property is set if something is currently being dragged. dropon if a drag is occuring over the tree, this property is set for the row currently being dragged over, as long as the mouse pointer is hovering over the row. dropbefore this property is set if the mouse pointer is hovering before the row currently being dragged over. dropafter this p...

Tabboxes - Archive of obsolete content
ks on the mail tab, the contents of the first tab page will be displayed below the tabs. in this case, the page with the check box labeled 'automatically check for mail' will appear. when the second tab is clicked, the page containing the button labeled 'clear news buffer' will appear instead. the currently selected tab element is given an additional selected attribute which is set to true. this alters the appearance of the currently selected tab to make it look selected. only one tab will have a true value for this attribute at a time. position of the tabs finally, you can change the position of the tabs so that they appear on any side of the tab pages. there is no special syntax to do this. you simply set the orient and dir attributes as necessary. remember that the tab elements are much...
...acked. next, adjust the tabbox so it has horizontal orientation. this will make the tabs appear to the left of, not above, the tab pages. note that changing the orientation of the tabpanels element will have no effect, since the tabbed pages are layered on top of each other. you can place the tabs on the right or bottom side by moving the tabs element to after the tabpanels element in your code. alternatively, you could set the dir attribute to reverse on the tabbox. however, you should probably leave the tabs on top, otherwise they might not look very good under particular themes. adding tabs to our find files dialog let's add a second panel to the find files dialog. we'll create an options tab (and select it by default) that will contain some options for searching. this may not be the b...

Trees and Templates - Archive of obsolete content
the treeitem elements. effectively, the elements outside (or above) the element with the uri attribute are not duplicated whereas the element with the uri attribute and the elements inside it are duplicated for each resource. as the tree builder is used and not the content builder, the structure of the elements in the above example must be as shown, with the treechildren element inside the rule. although the tree builder doesn't build these elements, it does require this structure in order to determine what to generate correctly. note in the image that additional child elements below the top-level elements have been added automatically. xul knows how to add child elements when the templates or rules contain tree elements or menu elements. it will generate tree elements as nested as neces...
...columns if you try the previous example, you might note that the list of files is not sorted. trees which generate their data from a datasource have the optional ability to sort their data. you can sort either ascending or descending on any column. the user may change the sort column and direction by clicking the column headers. this sorting feature is not available for trees with static content, although you can write a script to sort the data. sorting involves three attributes, which should be placed on the columns. the first attribute, sort, should be set to an rdf property that is used as the sort key. usually, this would be the same as that used in the label of the cell in that column. if you set this on a column, the data will be sorted in that column. the user can change the sort direc...

XUL Questions and Answers - Archive of obsolete content
in toolbar there may be a few ways to implement this: by building your menupopup from an rdf datasource, which could be generated on the server. by getting data (e.g. json string) from the server, parsing it on client, and building the menupopup using dom methods (such as document.createelementns). by getting data as xml from the server. (server can just send the xul code to use for popup - alternatively it can send generic xml describing the attributes of the items in the menu and you generate the xul on client by applying an xslt transform.) can i change a xul tree cell/row/item background color with javascript? to set the background color you need to set the property for the cell/row and not for the item. an example of this is: var tree = document.getelementbyid('treeid'); sele...
... control, just like a regular window. some of them can be tied to a preference so that the preference is automatically updated as the control is manipulated. others, like <listbox>, cannot be so tied, but one can always write a script that updates preferences explicitly, via nsiprefbranch interface. can a xul template be used for rss? you should be able to use a xul template to display feeds, although you may have to write the feed data to an rdf datasource first. specifying window.onload function to specify a function to run when the window is loaded,add the following code between the script tags in the xul file: window.addeventlistener("load", function(e) { startup(); }, false); similarly, for onunload use the code: window.addeventlistener("unload", function(e) { shutdown(); }, f...

Accessibility/XUL Accessibility Reference - Archive of obsolete content
how to expose text properly for various xul element types. sections in bold are to draw attention to pieces that are often overlooked for visual layouts. underlined text may be read by the screen reader. element enabled usage comments description <description value="<!-- text -->" /> <description><!--label text--></description> use for non-label text. although tutorials claim label and description have the same underlying implementation, description elements appear to not associate correctly with controls whereas labels do. label <label control="controlid" value="<!--label text-->" /> <label control="controlid"><!--label text--></label> either syntax is fine. button <button label="<!--button text-->" /> ...
..."standard" /> colorpicker appears to read color values out if the colorpicker can get focus in the first place. column see grid columns see grid command see keyboard shortcut tutorial commandset see keyboard shortcut tutorial deck only the currently selected deck layer can be focused. grid although text in the grid can be read, jaws does not recognize grids as tables for table reading mode. groupbox <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 o...

XUL accessibility tool - Archive of obsolete content
sion will be available from addons.mozilla.org. the version currently on xulplanet is compatible with the following xul applications: firefox 1.5+ thunderbird 3.0a+ recent sunbird builds recent songbird builds. it probably also works on seamonkey, but i haven't verified this. use to launch the tool after installation, look for an entry in the tools menu of the host application, or hit ctrl+alt+shift+f12. once the tool window has loaded, select either a local file, web url, or currently open window from the file menu to generate a xul report for that document. be aware that the report might take a little while to be ready depending on the complexity of the application being analyzed and the speed of your machine. future work the following things have been suggested or are planned for ...
... new features: (aaronlev) automatically test any new windows as they are opened. (aaronandy) highlight or blink source element in original xul app upon click of referencing line in report. (aaronlev) compatibility with more xul applications. (aaronandy) maybe an online tool to automatically generate a xul a11y tool compatible with a user-specified xul app. (aaronandy) link report...

The Implementation of the Application Object Model - Archive of obsolete content
this is what would be used by default to hold the tree for a remote xul file. this nsxmlelement implements a whole slew of interfaces, since raptor has multiple apis for referring to these objects. examples of these interfaces include nsidomelement, nsidomnode, nsixmlcontent, and nsicontent. what is rdf? rdf (pronounced r-d-f) has never been a ravening demon intent upon taking over the earth, although that does depend on who you ask. rdf stands for resource description framework, a rather intimidating name that doesn't do much to help the layman understand exactly what it does. rdf provides a very general mechanism for representing relationships between different disparate types of data. the relationships between data are represented as a directed labeled graph structure. the data itself ...
...ds, the traditional relationship of "containment" is not the only kind of relationship expressible in rdf. in html or xul, when you put one tag inside another tag, a relationship of containment can safely be assumed. not so with rdf. for rdf, an extra tag has to be inserted between two other tags to indicate exactly what kind of relationship should exist between the two nodes. the resultant file, although still relatively easy to manipulate, is bloated needlessly with extra syntax that is not strictly necessary. rdf is not a markup language. rdf can be serialized as an xml file, but it isn't a parallel to html. it's something different. it makes more sense to describe a content tree structure according to the accepted standards (that is accessible and manipulable via standard dom apis) using...

tabpanels - Archive of obsolete content
by clicking the first tab, the first panel will be displayed. by clicking the second tab, the second panel will be displayed and so on. ...
...by clicking the first tab, the first panel will be displayed. by clicking the second tab, the second panel will be displayed and so on. ...

tree - Archive of obsolete content
of rows. custom tree view nsitreeview no for this tree you implement the nsitreeview interface yourself. the tree's data is retrieved from this custom view. the custom view should be attached to the tree by setting its view property. more information is available in the xul tutorial. also tree widget changes. relevant accessbility guidelines provide alternative access (for example, via menus) to column picker and for header behaviors like sorting (these have no default keyboard access). attributes disablekeynavigation, disabled, editable, enablecolumndrag, flags, hidecolumnpicker, onselect, rows, seltype, statedatasource, tabindex, treelines properties accessibletype, builderview, columns, contentview, currentindex, dis...
...ited value (the tree view's nsitreeview.setcelltext() method is called to change the cell contents). otherwise the cell label is reverted to the value it had prior to editing. related elements treecols, treecol, treechildren, treeitem, treerow, treecell and treeseparator.. ...

treecol - Archive of obsolete content
be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } cycler type: boolean if true, then the column is a cycler column. in the case, clicking on a cell in the column will alternate its state between on and off. this is used, for example, in a mail window, for a column that indicates that the message is read or unread with a small mark in the cell. if the cycler attribute is not set, the cell is a regular text cell. dragging type: boolean this attribute will be set to true if the column is being dragged. this attribute is set automatically; you shouldn't adjust...
...ars. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. primary type: boolean if set to true, the treecol will have indentation and twisties drawn to the left of it to indicate the hierarchy level of the rows. if no column has the primary attribute set to true, the tree may still contain nested rows, although no indication will be given to the user. the attribute also controls whether the column picker allows the user to deselect this column. sort type: uri or xml attribute set this to a rdf property or xml attribute to have the data in the column sorted based on that property. the property will usually be the same as that of the cell label. sortactive type: boolean this should b...

Building XULRunner with Python - Archive of obsolete content
n also be created in python. currently (mar 07) python is not enabled by default so a custom build of mozilla is needed. this page provides instructions in the hope of eliminating much trial and error. you should also read the the developer documentation on source code and building as wells as pyxpcom xulrunner with python promises to be a good platform for accessibility projects and both jambu alternative input and the iaccessible2 test tool are using it. of particular interested is access to msaa and iaccessible2 via the python comtypes package. development machine setup first a word of warning that zonealarm has exhibited memory leaks that cause build machines to crash with rather spurious errors. you may want to uninstall it if you suspect this to be a problem. you will also want to...
...uired and whilst the current free version is visual studio 8 express (msvc8) you will almost certainly want to use visual studio .net 2003 (msvc71) which is not longer officially available. the issue is that xulrunner must be built with the same version of c as python and with python 2.5 that is msvc71. both must use the same version of the c runtime library msvcrt?.dll or crashes will ensue. the alternative is to build python with msvc8 as well asmozilla, but that may be problematic. it might also be possible to use the open source mingw compiler with the correct msvc run time but that is apparently not recommended. apply any service packs and for msvc71 sp 1 is available. the matching platform sdk is also needed and for msvc71 that is .net framework sdk 1.1. the latest mozilla build syste...

Mozilla release FAQ - Archive of obsolete content
e best, at least until the problems with 2.8.1 are ironed out) where can i get the sources to netscape 4.x or lower? these sources are not available. much of the old code cannot be released due to legal concerns, and at the time of mozilla's initial release, that code was removed from the tree. the 'classic' branch of the current cvs tree is as close to the 4.x source as the public will ever see, although that branch has been abandoned in the move to the modern codebase. how do i tweak the interface (replace the logo, etc)? the xptoolkit docs might help in writing the needed xul. you can find replacement themes in preferences, under appearance->themes, using the 'get new themes' link there. where can i get patches? there is not currently a central repository of patches. however, via cvs, you ...
... web version. some of these have more (or less) information than this faq includes. does the author mind if i make my own version, htmlify it, or whatever? nope. go for it. i would suggest you try to keep looking at mine occasionally, so you can add new things that i do, but you can do whatever you want to with it. the faq is wrong on section x.x! what can i do about it? drop a note to pat gunn . alternatively, post a bug on the faq to bugzilla. help! i'm getting spam from mozilla you probably arn't really getting spam from mozilla. if you think you're getting it from mozilla because the x-mailer field mentions mozilla, then you're misinterpreting the meaning of the x-mailer field -- it indicates that the sender is *using* netscape communicator to deliver the mail. if you're getting mail cont...

NPN_SetValue - Archive of obsolete content
no_error. if unsuccessful, the function should return the most relevant npapi error code. for possible values, see error codes. description a good place to set plugin operation mode such as windowless mode is npp_new, so the browser knows right away what mode the plugin is designed to operate in. nppvpluginwindowbool (windows and unix) specifies that the plugin operates in windowed mode. the alternative is windowless where no window messages are sent to the plugin as there is no window associated with it. in windowless mode all the browser to plugin communications related to drawing, mouse, and keyboard input are accomplished via npp_handleevent. to set windowless operation, call npn_setvalue with nppvpluginwindowbool as the variable parameter and false as the value parameter. by default...
...uct the browser not to unload the dll and not to call np_shutdown when the page is left. in such a case all this will be done on the browser shutdown. the plugin calls npn_setvalue any time with nppvpluginkeeplibraryinmemory as variable parameter and value set to true. by default, the dll will be unloaded from memory preceded by an np_shutdown call. remarks all four variable values are boolean. although the function prototype has type of value void *, the actual boolean should be placed there, not a pointer to a boolean. the browser code reads this parameter as follows (nppvpluginwindowbool as an example): nperror np_export _setvalue(npp npp, nppvariable variable, void *value) { ... bool bwindowless = (value == null); ... } so the proper way to call this function from a plug-in would ...

Confidentiality, Integrity, and Availability - Archive of obsolete content
t be erased from their minds, papers, computers, and other places. nearly all the major security incidents reported in the media today involve major losses of confidentiality. so, in summary, a breach of confidentiality means that someone gains access to information who shouldn't have access to it. integrity integrity refers to ensuring the authenticity of information—that information is not altered, and that the source of the information is genuine. imagine that you have a website and you sell products on that site. now imagine that an attacker can shop on your web site and maliciously alter the prices of your products, so that they can buy anything for whatever price they choose. that would be a failure of integrity, because your information—in this case, the price of a product—has...
...and that the source of the information is genuine. imagine that you have a website and you sell products on that site. now imagine that an attacker can shop on your web site and maliciously alter the prices of your products, so that they can buy anything for whatever price they choose. that would be a failure of integrity, because your information—in this case, the price of a product—has been altered and you didn't authorize this alteration. another example of a failure of integrity is when you try to connect to a website and a malicious attacker between you and the website redirects your traffic to a different website. in this case, the site you are directed to is not genuine. availability availability means that information is accessible by authorized users. if an attacker is not able...

Digital Signatures - Archive of obsolete content
section describes how public-key cryptography addresses the problem of tampering. tamper detection and related authentication techniques rely on a mathematical function called a one-way hash (also called a message digest). a one-way hash is a number of fixed length with the following characteristics: the value of the hash is unique for the hashed data. any change in the data, even deleting or altering a single character, results in a different value. the content of the hashed data cannot, for all practical purposes, be deduced from the hash-which is why it is called "one-way." similarly, in public key encryption, a key pair is generated for digital signing. the key pair consists of a private signing key and a public verification key. the public key is widely distributed, while the priv...
...(of the original data) that has been encrypted with the signer's private key. to validate the integrity of the data, the receiving software first uses the signer's public key to decrypt the hash. it then uses the same hashing algorithm that generated the original hash to generate a new one-way hash of the same data. (information about the hashing algorithm used is sent with the digital signature, although this isn't shown in the figure.) finally, the receiving software compares the new hash against the original hash. if the two hashes match, the data has not changed since it was signed. if they don't match, the data may have been tampered with since it was signed, or the signature may have been created with a private key that doesn't correspond to the public key presented by the signer. if t...

Vulnerabilities - Archive of obsolete content
tware. an example is an input validation error, such as user-provided input not being properly evaluated for malicious character strings and overly long values associated with known attacks. another example is a race condition error that allows the attacker to perform a specific action with elevated privileges. a security configuration setting is an element of a software’s security that can be altered through the software itself. examples of settings are an operating system offering access to control lists that set the privileges that users have for files, and an application offering a setting to enable or disable the encryption of sensitive data stored by the application. a security configuration issue vulnerability involves the use of security configuration settings that negatively affe...
... feature misuse vulnerabilities occur as a result of providing additional features. there may also be confusion regarding misuse vulnerabilities for features that can be enabled or disabled—in a way, configured—versus security configuration issues. the key difference is that for a misuse vulnerability, the configuration setting enables or disables the entire feature and does not specifically alter just its security; for a security configuration issue vulnerability, the configuration setting alters only the software’s security. for example, a setting that disables all use of html in emails has a significant impact on both security and functionality, so a vulnerability related to this setting would be a misuse vulnerability. a setting that disables the use of an antiphishing feature in ...

Theme changes in Firefox 4 - Archive of obsolete content
palette. default values of the iconsize attribute on browser toolbars if the theme doesn't override the value of the iconsize attribute, the following defaults are used: toolbar element id default iconsize value menu bar #toolbar-menubar small navigation bar #nav-bar small or large depending on user preference. bookmarks toolbar #personaltoolbar small tab bar #tabstoolbar small add-on bar #addon-bar small custom toolbars some other value small or large depending on user preference. overriding the default values themes can override the value of the iconsize attribute on each toolbar by specifying a special value for the counter-reset css property on the toolbar itself. ...
...ar regardless of the user preference. examples the default windows theme wants to force small icons on the navigation bar regardless of the user preference. thus, it includes this rule in browser.css: #nav-bar { counter-reset: smallicons; } to use large icons for add-on buttons in the bookmarks toolbar when the related user preference is set: #navigator-toolbox[iconsize="large"] > #personaltoolbar { counter-reset: largeicons; } to use large icons everywhere, including the menu bar, regardless of the user preference: #navigator-toolbox > toolbar, #addon-bar { counter-reset: largeicons; } creating a theme that works for firefox 4 on mac os x create a new directory (for example, my_theme). inside that, create another new directory chrome. now copy all of the directories from o...

Scratchpad - Archive of obsolete content
scratchpad provides an environment for experimenting with javascript code. you can write, run, and examine the results of code that interacts with the web page. unlike the web console, which is designed for interpreting a single line of code at a time, scratchpad lets you edit larger chunks of javascript code, then execute it in various ways depending on how you want to use the output. ...
...md + x ctrl + x copy ctrl + c cmd + c ctrl + c paste ctrl + v cmd + v ctrl + v undo ctrl + z cmd + z ctrl + z redo ctrl + shift + z / ctrl + y cmd + shift + z / cmd + y ctrl + shift + z / ctrl + y indent tab tab tab unindent shift + tab shift + tab shift + tab move line(s) up alt + up alt + up alt + up move line(s) down alt + down alt + down alt + down comment/uncomment line(s) ctrl + / cmd + / ctrl + / ...

-ms-accelerator - Archive of obsolete content
keyboard shortcut */ -ms-accelerator: true values false the object is not a keyboard shortcut. true the object is a keyboard shortcut. formal syntax false | true examples this example uses the -ms-accelerator attribute in a <u> element to specify that the "n" in the <label> element is a keyboard shortcut. when the option to "hide keyboard navigation indicators until i use the alt key" is enabled in the user's display properties, the "n" is not underlined until the user presses the alt key. when alt + n is pressed, the <input> element that defines an accesskey attribute value of "n" receives the focus. <!doctype html> <html> <head> <title>accelerator</title> </head> <body> <label for="oname"><u style="-ms-accelerator: true; accelerator: true">n</u>ame: </la...
...ame"><u style="-ms-accelerator: true; accelerator: true">n</u>ame: </label> <input type="text" id="oname" size="25" accesskey="n" value="your name here" /> </body> </html> specifications not part of any specification. remarks this property is supported by windows 2000 and later. it enables users to hide navigation indicators for menu items and controls until the alt key is pressed. an access key is a single character used as a keyboard shortcut for selecting an object. the user presses the alt key and holds it while pressing the character to move input focus to the object, and to invoke the default event associated with the object. in internet explorer 8 (ie8) the -ms-accelerator attribute is an extension to css, and can be used as a synonym for accelerato...

CSS - Archive of obsolete content
ider control is one possible representation of <input type="range">.::-ms-fill-upperthe ::-ms-fill-upper css pseudo-element is a microsoft extension that represents the upper portion of the track of a slider control; that is, the portion corresponding to values greater than the value currently selected by the thumb. a slider control is one possible representation of <input type="range">.::-ms-revealthe ::-ms-reveal css pseudo-element is a microsoft extension that is used to display a password reveal button for use with a password field created by <input type="password">. the user presses the button to reveal the actual field value rather than asterisks.::-ms-thumbthe ::-ms-thumb css pseudo-element is a microsoft extension that represents the thumb that the user moves within the track of a sli...
... css pseudo-element is a microsoft extension that is used to display a password reveal button for use with a password field created by <input type="password">. the user presses the button to reveal the actual field value rather than asterisks.::-ms-thumbthe ::-ms-thumb css pseudo-element is a microsoft extension that represents the thumb that the user moves within the track of a slider control to alter its numerical value. a slider control is one possible representation of <input type="range">.::-ms-ticks-afterthe ::-ms-ticks-after css pseudo-element is a microsoft extension that applies one or more styles to the tick marks that appear after the track of a slider control. a slider control is one possible representation of <input type="range">.::-ms-ticks-beforethe ::-ms-ticks-before css pseud...

E4X - Archive of obsolete content
obsoletethis feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. warning: e4x is obsolete. it has been disabled by default for webpages (content) in firefox 17, disabled by default for chrome in firefox 20, and has been removed in firefox 21. use domparser/domserializer or a non-native jxon algorithm instead. ecmascript for xml (e4x) is a programming language extension that adds native xml support to javascript. it does this by providing access to the xml document in a form that feels natural for ecmascript programmers. the goal is to provide an alternative, simpler syntax for accessing xml documents than via dom interfaces. ...
...use domparser/domserializer or a non-native jxon algorithm instead. ecmascript for xml (e4x) is a programming language extension that adds native xml support to javascript. it does this by providing access to the xml document in a form that feels natural for ecmascript programmers. the goal is to provide an alternative, simpler syntax for accessing xml documents than via dom interfaces. a valid alternative to e4x is a non-native jxon algorithm. e4x is standardized by ecma international in ecma-357 standard (currently in its second edition, december 2005). e4x is implemented (at least partially) in spidermonkey (gecko's javascript engine) and in rhino (javascript engine written in java). note: in gecko 1.8 based browsers such as firefox 1.5, e4x is already partially enabled for web page a...

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
he fish cam page as agile as the fish themselves, it was necessary to strip out all of the tables, font tags, and other non-validating stuff. at the end of it, there were a series of div elements that contained a picture of the fish, the name of the fish, and one or more paragraphs of text about the fish. here's a typical (and short) example. ...
... giving the fish some style with the markup all set, it was time to style. the idea was to have the fish listed in a side-by-side arrangement, sort of like a two-column table, only without the table. this was most easily accomplished by floating the div elements themselves. ...

Writing JavaScript for XHTML - Archive of obsolete content
ections: <script type="text/javascript"> <![cdata[ // is the variable a non-negative integer less than 10? if (variable < 10 && variable >= 0) action(); ]]> </script> note that the cdata section is only necessary because of the < in the code; otherwise you could have ignored it. a third solution is to use only external scripts, neatly sidestepping the special-character problem. alternatively, the cdata section can be couched within comments so as to be able to work in either application/xhtml+xml or text/html: <script type="text/javascript"> //<![cdata[ ... //]]> </script> <!-- (for styles, it is different) --> <style type="text/css"> /*<![cdata[*/ ... /*]]>*/ </style> and if you really need compatibility with very old browsers that do not recognize the ...
... different from the ones in html files. now we take a look at one widly used property that is missing in xml files. in xml documents there is no document.cookie. that is, you can write something like document.cookie = "key=value"; in xml as well, but nothing is saved in cookie storage. solution: use the storage object with firefox 2 there was a new feature enabled, the html 5 storage object. although this feature is not free of critics, you can use it to bypass the non-existing cookie, if your document is of type xml. again, you will have to write your own wrapper to respect any given combination of mime type and browser. problem: i can't use document.write() this problem has the same cause as the one above. this method does not exist in xmldocuments anymore. there are reasons why this...

XForms Repeat Element - Archive of obsolete content
the repeat element's appearance attribute has a value of compact. behaviour focusing a generated control may change the current index of the containing repeat element. the index is equal to the index of the control set that the focused control belongs to. actions you can use xforms action module elements to modify the nodeset that the repeat element is bound to. the most useful actions for altering the contents of a repeat are the insert (see the spec), delete (see the spec) and setindex (see the spec) elements. example <model> <instance> <my:lines> <my:line name="a"> <my:price>3.00</my:price> </my:line> <my:line name="b"> <my:price>32.25</my:price> </my:line> </my:lines> </instance> </model> <repeat id="lineset" nodeset="/my:line...
...reate repeating structures within constructs such as html:table. thus, one might wish to use element repeat within a table to create the rows of a table, where each row of the table binds to a distinct member of a homogeneous collection. since html:table doesn't (and probably never will) allow xforms:repeat elements as children, another syntax is needed. to accommodate this, xforms 1.0 defines an alternative syntax that is functionally equivalent to the repeat element, using the following attributes: repeat-model repeat-bind repeat-nodeset repeat-startindex repeat-number additionally, when using xforms action setindex, its repeat attribute (which contains an idref) can point to any element carrying these repeat attributes. similarly, the index function can be used with the repeating structu...

Issues Arising From Arbitrary-Element hover - Archive of obsolete content
elements section 5.11.3 of css2 defines the three dynamic pseudo-classes (:hover, :active, and :focus) and then goes on to say: css doesn't define which elements may be in the above states, or how the states are entered and left. scripting may change whether elements react to user events or not, and different devices and uas may have different ways of pointing to, or activating elements. thus, although authors are used to thinking of these states as applying exclusively to hyperlinks, they are not so restricted by css2. any element can, in theory, be in any of the three states, and thus can be styled based on those states. this has not traditionally been the case. bare pseudo-classes the second piece of the problem comes when we consider the effects of a "bare" pseudo-class in a selector...
...the document. this generally means that the rest of the document will take hover styles. consider the effects of the following rule: a:hover {color: red;} in a document with an unclosed named anchor, any text that follows the anchor's open tag will be colored red (unless another css rule intervenes). this brings up the second common problem, which is that named anchors can accept hover styles. although authors may intend the selector a:hover to apply only to hyperlinks, it will also apply to named anchors, since the selector merely states that any a element which is in a hover state will be styled. in order to avoid this problem, authors should use the combined pseudo-class syntax described by css2: a:link:hover {color: red;} a:visited:hover {color: maroon;} note that, with this syntax, ...

The Business Benefits of Web Standards - Archive of obsolete content
may be a journalist, a music producer, or may come from any one of a number of disciplines; need not become involved in the actual process of publishing that content at all. and the person applying the markup need not necessarily, know (or care) how it is going to be styled. that has been the real impact of the zen garden, in helping to demonstrate the stunning results which are possible without altering the markup, and indeed keeping the amount of presentational markup to an acceptable minimum. the content - markup - style; model also lends itself very neatly to linear methods of production. no web development activity need or indeed - should take place until the content has been produced. conversely once the content is to hand the development/publishing process should be lighteningly fast...
... such an increasingly heterogeneous environment, testing each web page in every configuration is impossible. coding to standards is then the only practical solution. in a ground breaking development microsoft have announced a new meta tag that can be used in sites to trigger ie 8 into web standards mode. at the same time in non standards mode existing legacy sites will still be seen as intended. although in some ways a controversial move - the announcement has attracted widespread support from leading developers and standards advocates, led by jeffrey zeldman. legacy user agents: netscape 4 and ie4 the only drawback in using css is that older browsers (specifically ie4 and ns4) will not be able to render as intended. in some cases, where a significant portion of the audience is running net...

Windows Media in Netscape - Archive of obsolete content
windows xp, netscape 7.1's user agent string may be: mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.4) gecko/20030624 netscape/7.1 (ax) if the client was customized by a third party, additional information may be present in the "vendor comment" area of the user agent string. for example: mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.4) gecko/20030624 netscape/7.1 (ax; promostring) although geckoactivexobject is currently available only in netscape 7.1 on windows, it may be the case in the future that it will be available in other gecko-based browsers on other operating systems. detecting the presence of the strings gecko/ and (ax should provide for the ability to detect any gecko-based browsers which supports geckoactivexobject which may be introduced in the future. for exampl...
... name="autostart" value="true" /> <param name="url" value="preludesteel.wma" /> your browser does not support the activex windows media player </object> the classid attribute references the clsid of windows media player 7 and above -- windows media player versions before 7 used a different clsid. examples in this article all assume that the user is running windows media player 7 and later, although netscape 7.1 supports the clsids of windows media player 6x and later. it is important to note that in netscape 7.1, only the classid for windows media player is supported, and no other control can be created. the various param elements that can be used and the functionalities behind them is best described by the windows media 9 series sdk. in netscape 7.1, the codebase attribute of the obje...

Bounding volume collision detection with THREE.js - Game development
1), new meshnormalmaterial({})); knot.geometry.computeboundingbox(); var knotbbox = new box3( knot.geometry.boundingbox.min, knot.geometry.boundingbox.max); note: the boundingbox property takes the geometry itself as reference, and not the mesh. so any transformations such as scale, position, etc. applied to the mesh will be ignored while computing the calculating box. a more simple alternative that fixes the previous issue is to set those boundaries later on with box3.setfromobject, which will compute the dimensions taking into account a 3d entity's transformations and any child meshes as well. var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new meshnormalmaterial({})); var knotbbox = new box3(new three.vector3(), new three.vector3()); knotbbox.setfromob...
...nter.z); three.sphere.__closest.clamp(box.min, box.max); var distance = this.center.distancetosquared(three.sphere.__closest); return distance < (this.radius * this.radius); }; demos we have prepared some live demos to demonstrate these techniques, with source code to examine. point vs. box and sphere box vs. box and sphere sphere vs. box and sphere using boxhelper as an alternative to using raw box3 and sphere objects, three.js has a useful object to make handling bounding boxes easier: boxhelper (previously boundingboxhelper, which has been deprecated). this helper takes a mesh and calculates a bounding box volume for it (including its child meshes). this results in a new box mesh representing the bounding box, which shows the bounding box's shape, and can passed t...

Desktop gamepad controls - Game development
api gives you the ability to connect a gamepad to your computer and detect pressed buttons directly from the javascript code thanks to the browsers implementing such feature. an api exposes all the information you need to hook up your game's logic and successfully control the user interface and gameplay. api status, browser and hardware support the gamepad api is still in working draft status, although browser support is already quite good — around 63% global coverage, according to caniuse.com. the list of supported devices is also quite extensive — most popular gamepads (e.g. xbox 360 or ps3) should be suitable for web implementations. pure javascript approach let's think about implementing pure javascript gamepad controls in our little controls demo first to see how it would work. ...
...'; shoottext = 'x or space\nto shoot'; } } else { movetext = 'tap and hold to move'; shoottext = 'tap to shoot'; } } when on desktop, we can check if the controller is active and show the gamepad controls — if not, then the keyboard controls will be shown. ...

Tiles and tilemaps overview - Game development
game development, consisting of building the game world or level map out of small, regular-shaped images called tiles. this results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times. this set of articles covers the basics of creating tile maps using javascript and canvas (although the same high level techniques could be used in any programming language.) besides the performance gains, tilemaps can also be mapped to a logical grid, which can be used in other ways inside the game logic (for example creating a path-finding graph, or handling collisions) or to create a level editor. some popular games that use this technique are super mario bros, pacman, zelda: link's a...
...is a scrolling, that technique is not very efficient. a better way would be to create a canvas that is 2x2 tiles bigger than the visible area, so there is one tile of "bleeding" around the edges. that means that the map only needs to be redrawn on canvas when the scrolling has advanced one full tile — instead of every frame — while scrolling. in fast games that might still not be enough. an alternative method would be to split the tilemap into big sections (like a full map split into 10 x 10 chunks of tiles), pre-render each one off-canvas and then treat each rendered section as a "big tile" in combination with one of the algorithms discussed above. ...

Plug-in Development Overview - Gecko Plugin API Reference
mimedescription entry point, and will use the information returned by this function. note: the resource method described below is deprecated. plugins should use the info.plist approach, and only use the following method as a supplement to support older browsers. if neither is present, gecko will check the plugins resources. 'str#' 128 should contain a list of mime types and file extensions in alternating strings. for example: str 128 mime type string 1 video/quicktime string 2 mov, moov string 3 audio/aiff string 4 aiff string 5 image/jpeg string 6 jpg several other optional strings may contain useful information about the plug-in. plug-ins must support 'str#' 128 but are not required to support an...
...ee() when you're done with it. getting version and ui information the netscape group of plug-in api methods provides some basic services to the plug-in. you can use these netscape methods: to identify the browser in which your plug-in is displayed: use the npn_useragent method to read this information. to determine whether plug-in and the browser versions are compatible and possibly provide alternative processing for different versions: use the npn_version method to check for changes in major and minor version numbers. for information about using these methods, see version, ui, and status information. displaying messages on the status line functionally, your plug-in is seamlessly integrated into the browser and operates as an addition to current browser capabilities. to make the use...

JSON - MDN Web Docs Glossary: Definitions of Web-related terms
though many programming languages support json, json is especially useful for javascript-based apps, including websites and browser extensions. json can represent numbers, booleans, strings, null, arrays (ordered sequences of values), and objects (string-value mappings) made up of these values (or of other arrays and objects). json does not natively represent more complex data types like functions, regular expressions, dates, and so on. ...
... learn more general knowledge json on wikipedia technical reference json on mdn ...

Primitive - MDN Web Docs Glossary: Definitions of Web-related terms
data types: string, number, bigint, boolean, undefined, and symbol. there also is null, which is seemingly primitive, but indeed is a special case for every object: and any structured type is derived from null by the prototype chain. most of the time, a primitive value is represented directly at the lowest level of the language implementation. all primitives are immutable, i.e., they cannot be altered. it is important not to confuse a primitive itself with a variable assigned a primitive value. the variable may be reassigned a new value, but the existing value can not be changed in the ways that objects, arrays, and functions can be altered. example this example will help you understand that primitive values are immutable. javascript // using a string method doesn't mutate the string v...
... another example [ step-by-step ] the following example will help you go through how javascript deals with primitives. javascript // the primitive let foo = 5; // defining a function that should change the primitive value function addtwo(num) { num += 2; } // another function trying to do the same thing function addtwo_v2(foo) { foo += 2; } // calling our first function while pass...

Assessment: Accessibility troubleshooting - Learn web development
basic understanding of html, css, and javascript, an understanding of the previous articles in the course. objective: to test basic knowledge of accessibility fundamentals. starting point to get this assessment started, you should go and grab the zip containing the files that comprise the example. decompress the contents into a new directory somewhere on your local computer. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html, css, and javascript into one of these online editors. if the online editor you are using doesn't have a separate css/js panel, feel free to put them in appropriate <style> / <script> elements. the finished assessment site should look like so: you will see some differences/issues with the disp...
... the css rule selectors that style the tags to their proper equivalents for the semantic headings. once you add paragraph elements, you'll notice the styling looking better. the images the images are currently inaccessible to screenreader users. can you fix this? the audio player the <audio> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users? the <audio> player isn't accessible to those using older browsers that don't support html5 audio. how can you allow them to still access the audio? the forms the <input> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. how can y...

Mobile accessibility - Learn web development
accessibility on mobile devices, and how to overcome them. accessibility on mobile devices the state of accessibility — and support for web standards in general — is good in modern mobile devices. long gone are the days when mobile devices ran completely different web technologies to desktop browsers, forcing developers to use browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain). these days, mobile devices can usually handle fully-featured websites, and the main platforms even have screenreaders built in to enable visually impaired users to use them successfully. modern mobile browsers tend to have good support for wai-aria, too. to make a website accessible and usa...
...se other control mechanisms can't activate the associated functionality. as an example, the click event is good in terms of accessibility — an associated event handler can be invoked by clicking the element the handler is set on, tabbing to it and pressing enter/return, or tapping it on a touchscreen device. try our simple-button-example.html example (see it running live) to see what we mean. alternatively, mouse-specific events such as mousedown and mouseup create problems — their event handlers cannot be invoked using non-mouse controls. if you try to control our simple-box-drag.html (see example live) example with a keyboard or touch, you'll see the problem. this occurs because we are using code such as the following: div.onmousedown = function() { initialboxx = div.offsetleft; ...

Cascade and inheritance - Learn web development
s applied. this is because that earlier rule has a higher specificity — it is more specific, and therefore is being chosen by the browser as the one that should style the element. as we saw earlier in this lesson, a class selector has more weight than an element selector, so the properties defined on the class will override those applied directly to the element. something to note here is that although we are thinking about selectors, and the rules that are applied to the thing they select, it isn't the entire rule which is overwritten, only the properties which are the same. this behavior helps avoid repetition in your css. a common practice is to define generic styles for the basic elements, and then create classes for those which are different. for example, in the stylesheet below we h...
...omment before each one. the first two selectors are competing over the styling of the link's background color — the second one wins and makes the background color blue because it has an extra id selector in the chain: its specificity is 201 vs. 101. the third and fourth selectors are competing over the styling of the link's text color — the second one wins and makes the text white because although it has one less element selector, the missing selector is swapped out for a class selector, which is worth ten rather than one. so the winning specificity is 113 vs. 104. selectors 5–7 are competing over the styling of the link's border when hovered. selector six clearly loses to five with a specificity of 23 vs. 24 — it has one fewer element selectors in the chain. selector seven, howe...

Fundamental CSS comprehension - Learn web development
file for the exercise, and the associated image file, and save them in a new directory on your local computer. if you want to use your own image file and fill your own name in, you are welcome to — just make sure the image is square. grab the css resources text file — this contains a set of raw selectors and rulesets that you'll need to study and combine to answer part of this assessment. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html and fill in the css into one of these online editors, and use this url to point the <img> element to the image file. if the online editor you are using doesn't have a separate css panel, feel free to put it in a <style> element in the head of the document. note: if you get stuck, then ask us for...
...t the second ruleset sets font-size: 10px; on the <html> element — this means that for any descendants of <html>, an em will be equal to 10px rather than 16px as it is by default. (this is of course, provided the descendants in question don't have any ancestors sitting in between them and <html> in the hierarchy that have a different font-size set on them. this could affect the values you need, although in this simple example this is not an issue.) other things to think about: you'll get bonus marks if you write your css for maximum readability, with a separate declaration on each line. you should include .card at the start of the selector chain in all your rules, so that these rules wouldn't interfere with the styling of any other elements if the business card were to be put on a pag...

Floats - Learn web development
elp with this box clearing problem, where you want the bottom of the box to wrap the floated item and wrapping content even if the content is shorter. there are three potential ways to deal with this, two of which work in all browsers — yet are slightly hacky — and a third new way that deals with this situation properly. the clearfix hack the way that this situation has traditionally been dealt with is to use something known as a "clearfix hack". this involves inserting some generated content after the box which contains the float and wrapping content, and setting that to clear both. add the following css to our example: .wrapper::after { content: ""; clear: both; display: block; } now reload the page and the box should clear. this is essentially the same as if you had added an...
... remove the clearfix css you added in the last section, and instead add overflow: auto to the rules for wrapper. once again, the box should clear. .wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; overflow: auto; } float example 6 <h1>simple float example</h1> <div cla...

Introduction to CSS layout - Learn web development
such as english, which has a horizontal writing mode. it would run horizontally in any language with a vertical writing mode, such as japanese. the corresponding inline direction is the direction in which inline contents (such as a sentence) would run. for many of the elements on your page the normal flow will create exactly the layout you need, however for more complex layouts you will need to alter this default behavior using some of the tools available to you in css. starting with a well-structured html document is very important, as you can then work with the way things are laid out by default rather than fighting against it. the methods that can change how elements are laid out in css are as follows: the display property — standard values such as block, inline or inline-block can...
... out in css are as follows: the display property — standard values such as block, inline or inline-block can change how elements behave in normal flow, for example making a block-level element behave like an inline element (see types of css boxes for more information). we also have entire layout methods that are switched on via specific display values, for example css grid and flexbox, which alter how elements inside the element they are set on are laid out. floats — applying a float value such as left can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts. the position property — allows you to precisely control the placement of boxes inside other boxes. static positioning is the defa...

Learn to style HTML using CSS - Learn web development
looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. ...
...tely necessary as much of what is covered in the css basics article is also covered in our css first steps module, albeit in a lot more detail. modules this topic contains the following modules, in a suggested order for working through them. you should definitely start with the first one. css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. css building blocks this module carries on where css first steps left o...

What is a Domain Name? - Learn web development
ce to be provided in a given language or hosted in a certain country — they are supposed to indicate a resource in a particular language or country. tlds containing .gov are only allowed to be used by government departments. the .edu tld is only for use by educational and academic institutions. tlds can contain special as well as latin characters. a tld's maximum length is 63 characters, although most are around 2–3. the full list of tlds is maintained by icann. label (or component) the labels are what follow the tld. a label is a case-insensitive character sequence anywhere from one to sixty-three characters in length, containing only the letters a through z, digits 0 through 9, and the - character (which may not be the first or last character in the label). a, 97, and hello-...
...in name. note : for some domain name, it might not be a registrar which is in charge of keeping track. for instance, every domain name under .fire is managed by amazon. finding an available domain name to find out whether a given domain name is available, go to a domain name registrar's website. most of them provide a “whois” service that tells you whether a domain name is available. alternatively, if you use a system with a built-in shell, type a whois command into it, as shown here for mozilla.org: $ whois mozilla.org domain name:mozilla.org domain id: d1409563-lror creation date: 1998-01-24t05:00:00z updated date: 2013-12-08t01:16:57z registry expiry date: 2015-01-23t05:00:00z sponsoring registrar:markmonitor inc. (r37-lror) sponsoring registrar iana id: 292 whois server: re...

How do you set up a local testing server? - Learn web development
fault, this will run the contents of the directory on a local web server, on port 8000. you can go to this server by going to the url localhost:8000 in your web browser. here you'll see the contents of the directory listed — click the html file you want to run. note: if you already have something running on port 8000, you can choose another port by running the server command followed by an alternative port number, e.g. python3 -m http.server 7800 (python 3.x) or python -m simplehttpserver 7800 (python 2.x). you can then access your content at localhost:7800. running server-side languages locally python's simplehttpserver (python 2.0) http.server (python 3.0) module is useful, but it doesn't know how to run code written in languages such as python, php or javascript. to handle that y...
...on 3.0) module is useful, but it doesn't know how to run code written in languages such as python, php or javascript. to handle that you'll need something more — exactly what you'll need depends on the server-side language you are trying to run. here are a few examples: to run python server-side code, you'll need to use a python web framework. flask is also a good (slightly less heavyweight) alternative to django. to run this you'll need to install python/pip, then install flask using pip3 install flask. at this point you should be able to run the python flask examples using for example python3 python-example.py, then navigating to localhost:5000 in your browser. to run node.js (javascript) server-side code, you'll need to use raw node or a framework built on top of it. express is a goo...

Advanced form styling - Learn web development
rowser rendering firefox 71 (macos) firefox 57 (windows 10) chrome 77 (macos), safari 13, opera chrome 63 (windows 10) internet explorer 11 (windows 10) edge 16 (windows 10) using appearence: none on radios/checkboxes as we showed before, you can remove the default appearance of a checkbox or radio button altogether with appearance:none; let's take this example html: <form> <fieldset> <legend>fruit preferences</legend> <p> <label> <input type="checkbox" name="fruit-1" value="cherry"> i like cherry </label> </p> <p> <label> <input type="checkbox" name="fruit-2" value="banana" disabled> i can't like banana </label> </p> ...
...input type="text"> anyway, so we knew this wouldn't be a problem. two things are slightly more problematic. first of all, the select's "arrow" icon that indicates it is a dropdown differs across browsers. it also tends to change if you increase the size of the select box, or resize in an ugly fashion. to fix this in our example we first used our old friend appearance: none to get rid of the icon altogether: select { -webkit-appearance: none; appearance: none; } we then created our own icon using generated content. we put an extra wrapper around the control, because ::before/::after don't work on <select> elements (this is because generated content is placed relative to an element's formatting box, but form inputs work more like replaced elements — their display is generated by the br...

Basic native form controls - Learn web development
ng on its type attribute value. it is used for creating most types of form widgets including single line text fields, time and date controls, controls without text input like checkboxes, radio buttons, and color pickers, and buttons. single line text fields a single line text field is created using an <input> element whose type attribute value is set to text, or by omitting the type attribute altogether (text is the default value). the value text for this attribute is also the fallback value if the value you specify for the type attribute is unknown by the browser (for example if you specify type="color" and the browser doesn't support native color pickers). note: you can find examples of all the single line text field types on github at single-line-text-fields.html (see it live also). ...
... the image button control is rendered exactly like an <img> element, except that when the user clicks on it, it behaves like a submit button. an image button is created using an <input> element with its type attribute set to the value image. this element supports exactly the same set of attributes as the <img> element, plus all the attributes supported by other form buttons. <input type="image" alt="click me!" src="my-img.png" width="80" height="30"> if the image button is used to submit the form, this control doesn't submit its value — instead, the x and y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate (0, 0)). the coordinates are sent as two key/value pairs: the...

Client-side form validation - Learn web development
ives the user an error message explaining what needs to be corrected, and lets them try again. we want to make filling out web forms as easy as possible. so why do we insist on validating our forms? there are three main reasons: we want to get the right data, in the right format. our applications won't work properly if our users' data is stored in the wrong format, is incorrect, or is omitted altogether. we want to protect our users' data. forcing our users to enter secure passwords makes it easier to protect their account information. we want to protect ourselves. there are many ways that malicious users can misuse unprotected forms to damage the application (see website security). warning: never trust data passed to your server from the client. even if your form is validating c...
...ds makes it easier to protect their account information. we want to protect ourselves. there are many ways that malicious users can misuse unprotected forms to damage the application (see website security). warning: never trust data passed to your server from the client. even if your form is validating correctly and preventing malformed input on the client-side, a malicious user can still alter the network request. different types of client-side validation there are two different types of client-side validation that you'll encounter on the web: built-in form validation uses html5 form validation features, which we've discussed in many places throughout this module. this validation generally doesn't require much javascript. built-in form validation has better performance than ja...

UI pseudo-classes - Learn web development
know when a radio button or checkbox they encounter is checked/selected, so you don't want them to read out another dom element that indicates selection — that could be confusing. having a purely visual indicator solves this problem. note: this also shows how you can combine a pseudo-class and pseudo-element if required. back to our required/optional example from before, this time we'll not alter the appearance of the input itself — we'll use generated content to add an indicating label (see it live here, and see the source code here). first of all, we'll add a paragraph to the top of the form to say what you are looking for: <p>required fields are labelled with "required".</p> screenreader users will get "required" read out as an extra bit of information when they get to each requ...
...on github at radios-checked-default.html (also see the source code.) for the :indeterminate example, we've got no default selected radio button — this is important — if there was, then there would be no indeterminate state to style. ...

The web and web standards - Learn web development
avascript html, css, and javascript are the main three technologies you'll use to build a website: hypertext markup language, or html, is a markup language consisting of different elements you can wrap (mark up) content in to give it meaning (semantics) and structure. simple html looks like this: <h1>this is a top-level heading</h1> <p>this is a paragraph of text.</p> <img src="cat.jpg" alt="a picture of my cat"> if we adopted a house-building analogy, html would be like the foundations and walls of the house, which give it structure and hold it together. cascading style sheets (css) is a rule-based language used to apply styles to your html, for example setting text and background colors, adding borders, animating things, or laying out a page in a certain way. as a simple ex...
...or physical disabilities. it also goes beyond people with disabilities — how about young or old people, people from different cultures, people using mobile devices, or people with unreliable or slow network connections? internationalization means making websites usable by people from different cultures, who speak different languages to your own. there are technical considerations here (such as altering your layout so that it still works ok for right-to-left, or even vertical languages), and human ones (such as using simple, non-slang language so that people who have your language as their second or third language are more likely to understand your text). privacy & security. these two concepts are related but different. privacy refers to allowing people to go about their business privately...

Mozilla splash page - Learn web development
index.html on your local drive, in a new directory. then save pattern.png in the same directory (right click on the image to get an option to save it.) access the different images in the originals directory and save them in the same way; you'll want to save them in a different directory for now, as you'll need to manipulate (some of) them using a graphics editor before they're ready to be used. alternatively, you could use an online tool such as glitch to create your example. this would also be useful if you want to get it assessed, or ask for help — see the assessment or further help section at the bottom of this page. note: the example html file contains quite a lot of css, to style the page. you don't need to touch the css, just the html inside the <body> element — as long as you i...
...vb1olg, using the appropriate youtube tools to generate the code. the video should be 400px wide. adding responsive images to the further info links inside the <div> with the class of further-info you will find four <a> elements — each one linking to an interesting mozilla-related page. to complete this section you'll need to insert an <img> element inside each one containing appropriate src, alt, srcset and sizes attributes. in each case (except one — which one is inherently responsive?) we want the browser to serve the 120px wide version when the viewport width is 500px wide or less, or the 400px wide version otherwise. make sure you match the correct images with the correct links! note: to properly test the srcset/sizes examples, you'll need to upload your site to a server (using...

Build your own function - Learn web development
here you will get some practice building your own, custom function. along the way, we'll also explain some useful details of dealing with functions. prerequisites: basic computer literacy, a basic understanding of html and css, javascript first steps, functions — reusable blocks of code. objective: to provide some practice in building a custom function, and explain a few more useful associated details. ...
...cement for a browser's built-in alert() function. we've seen this before, but let's just refresh our memories. type the following in your browser's javascript console, on any page you like: alert('this is a message'); the alert function takes a single argument — the string that is displayed in the alert box. try varying the string to change the message. the alert function is limited: you can alter the message, but you can't easily vary anything else, such as the color, icon, or anything else. we'll build one that will prove to be more fun. note: this example should work in all modern browsers fine, but the styling might look a bit funny in slightly older browsers. we'd recommend you doing this exercise in a modern browser like firefox, opera, or chrome. the basic function to begin w...

Image gallery - Learn web development
before attempting this assessment you should have already worked through all the articles in this module. objective: to test comprehension of javascript loops, functions, conditionals, and events. starting point to get this assessment started, you should go and grab the zip file for the example, unzip it somewhere on your computer, and do the exercise locally to begin with. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html, css and javascript into one of these online editors. if the online editor you are using doesn't have separate javascript/css panels, feel free to put them inline <script>/<style> elements inside the html page. note: if you get stuck, then ask us for help — see the assessment or further help s...
... the image is inside the images directory and its name is pic1.jpg, pic2.jpg, etc. adding an onclick handler to each thumbnail image in each loop iteration, you need to add an onclick handler to the current newimage — this handler should find the value of the src attribute of the current image. set the src attribute value of the displayed-img <img> to the src value passed in as a parameter. alternatively, you can add one event listener to the thumb bar. writing a handler that runs the darken/lighten button that just leaves our darken/lighten <button> — we've already provided a line that stores a reference to the <button> in a constant called btn. you need to add an onclick handler that: checks the current class name set on the <button> — you can again achieve this by using geta...

Function return values - Learn web development
er literacy, a basic understanding of html and css, javascript first steps, functions — reusable blocks of code. objective: to understand function return values, and how to make use of them. what are return values? return values are just what they sound like — the values that a function returns when it has completed. you've already met return values a number of times, although you may not have thought about them explicitly. let's return to a familiar example (from a previous article in this series): let mytext = 'the weather is cold'; let newstring = mytext.replace('cold', 'warm'); console.log(newstring); // should print "the weather is warm" // the replace() string function takes a string, // replaces one substring with another, and returns // a new string with...
... over to new code, or even just apply it to html pages wherever you need it. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: functions. conclusion so there we have it — functions are fun, very useful, and although there's a lot to talk about in regards to their syntax and functionality, they are fairly understandable. if there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help. ...

Introduction to web APIs - Learn web development
ding you with extra superpowers to use in your javascript code. they generally fall into two categories: browser apis are built into your web browser and are able to expose data from the browser and surrounding computer environment and do useful complex things with it. for example, the web audio api provides javascript constructs for manipulating audio in the browser — taking an audio track, altering its volume, applying effects to it, etc. in the background, the browser is actually using some complex lower-level code (e.g. c++ or rust) to do the actual audio processing. but again, this complexity is abstracted away from you by the api. third-party apis are not built into the browser by default, and you generally have to retrieve their code and information from somewhere on the web. for...
...its context object is created by getting a reference to the <canvas> element you want to draw on, and then calling its htmlcanvaselement.getcontext() method: const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); anything that we want to do to the canvas is then achieved by calling propertie...

Third-party APIs - Learn web development
ample to show how to use it, but in the end we went with mapquest for a couple of reasons: it is much easier to get started with. for google apis in general, you need to create a google account and log into the google cloud platform console to create api keys, etc., and the process is fairly complex. for the google maps api in particular, you need to provide a credit card for billing purposes (although basic usage is free), which we didn't think was acceptable for a basic tutorial. we wanted to show that there are other alternatives available. a restful api — nytimes now let's look at another api example — the new york times api. this api allows you to retrieve new york times news story information and display it on your site. this type of api is known as a restful api — instead ...
... = 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); } } } there's a lot of code here; let's explain it step by step: ...

Inheritance in JavaScript - Learn web development
previous overview: objects next with most of the gory details of oojs now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes. in addition, we present some advice on when and where you might use oojs, and look at how classes are dealt with in modern ecmascript syntax. prerequisites: basic computer literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects). objective: to understand how it is possible to implement inheritance in javascript. prototypal inheritance so far we have seen some inheritance in action — we have seen how prototype chains work, and how member...
... all together and package them neatly, an object is a good idea. objects are also very useful when you want to pass a collection of data from one place to another. both of these things can be achieved without use of constructors or inheritance. if you only need a single instance of an object, then you are probably better off just using an object literal, and you certainly don't need inheritance. alternatives for extending the prototype chain in javascript, there are several different ways to extend the prototype of an object aside from what we've shown above. to find out more about the other ways, visit our inheritance and the prototype chain article. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further te...

React resources - Learn web development
ide javascript frameworks next our final article provides you with a list of react resources that you can use to go further in your learning. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to provide further resources for learning more about react. component-level styles although this tutorial doesn't use this approach, many react applications define their styles on a per-component basis, rather than in a single, monolithic stylesheet. create-react-app makes it possible to import css files into javascript modules, so that css is only sent to your user when the corresponding component is rendered. for this app, we could have for example written a dedicated form.css f...
... for complex, deeply nested applications, however, they're not always best. react provides the context api as a way to provide data to components that need it without passing props down the component tree. there's also a usecontext hook that facilitates this. if you'd like to try this api for yourself, smashing magazine has written an introductory article about react context. class components although this tutorial doesn’t mention them, it is possible to build react components using es6 classes – these are called class components. until the arrival of hooks, es6 classes were the only way to bring state into components or manage rendering side effects. they're still the only way to handle certain other, more edge-case features, and they’re very common in legacy react projects. the of...

Starting our Svelte Todo list app - Learn web development
ccessible code "by default". being a compiler, svelte can statically analyze our html templates to provide accessibility warnings when components are being compiled. accessibility (shortened to a11y) isn't always easy to get right, but svelte will help by warning you if you write inaccessible markup. ...
...ut svelte will help by warning you if you write inaccessible markup. for example, if we add an <img> element to our todos.svelte component without its corresponding alt prop: <h1>svelte to-do list</h1> <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> the compiler will issue the following warning: (!) plugin svelte: a11y: <img> element should have an alt attribute src/components/todos.svelte 1: <h1>svelte to-do list</h1> 2: 3: <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> ^ created public/build/bundle.js in 220ms [2020-07-15 04:07:43] waiting for changes... moreover, our editor can display this warning even before calling the compiler: you can tell svelte to ignore this warning for the next blo...

Implementing feature detection - Learn web development
nd javascript. css you can write tests for css features by testing for the existence of element.style.property (e.g. paragraph.style.transform) in javascript. a classic example might be to test for flexbox support in a browser; for browsers that support the newest flexbox spec, we could use a flexible and robust flex layout. for browsers that don't, we could use a floated layout that works ok, although it is slightly more brittle and hacky, and not as cool-looking. let's implement something that demonstrates this, although we'll keep it simple for now. start by making local copies of our css-feature-detect.html, flex-layout.css, float-layout.css, and basic-styling.css files. save them in a new directory. we will add the html5 shiv to our example too so that the html5 semantic elements...
... do all of our feature detection in css, no javascript required, and we can handle all the logic in a single css file, cutting down on http requests. the problem here is browser support — @supports is not supported at all in ie, and only supported in very recent versions of safari/ios webkit (9+/9.2+), whereas the javascript version should work in much older browsers (probably back to ie8 or 9, although older versions of ie will have additional problems, such as not supporting document.queryselector, and having a messed up box model). javascript we already saw an example of a javascript feature detection test earlier on. generally, such tests are done via one of the following common patterns: summary of javascript feature detection techniques feature detection type explanati...

Client-side tooling overview - Learn web development
of web app development, and how to find help with individual tools. prerequisites: familiarity with the core html, css, and javascript languages. objective: to understand what types of client-side tooling there are, and how to find tools and get help with them. overview of modern tooling writing software for the web has become more sophisticated through the ages. although it is still entirely reasonable to write html, css, and javascript "by hand" there is now a wealth of tools that developers can use to speed up the process of building a web site, or app. there are some extremely well-established tools that have become common "household names" amongst the development community, and new tools are being written and released every day to solve specific problem...
...t that will guarantee success with tools, but as your experience increases you'll find workflows that work for you or for your team and their projects. once all the kinks in the process are flattened out, your tool chain should be something you can forget about and it should just work. how to choose and get help with a particular tool most tools tend to get written and released in isolation, so although there’s almost certainly help available it’s never in the same place or format. it can therefore be hard to find help with using a tool, or even to choose what tool to use. the knowledge about which are the best tools to use is a bit tribal, meaning that if you aren’t already in the web community, it is hard to find out exactly which ones to go for! this is one reason we wrote this ser...

Chrome Worker Modules
is to use the chrome worker module loader. this module loader should not surprise developers familiar with commonjs, as it implements a minimal commonjs require(). loading modules loading a module is simple. start by importing the module loader. you only need to do it once for each worker, from within the chrome worker itself: importscripts("resource://gre/modules/workers/require.js"); note: although you only need to do this once for each worker, it doesn't hurt if you do it more than once. this defines a global value require(), that you may now use as follows: // import the module // (here, we import the core of os.file) let core = require("resource://gre/modules/osfile/osfile_shared_allthreads.jsm"); // we may now use module core. core.declareffi(...) note that, for the moment, requi...
... or “.jsm”, and designed to be opened through require(). any value you define in that file is private by default. ...

Mozilla accessibility architecture
important to 3rd party assistive technology. accessibility apis on each operating system have built-in assumptions about what is the most important information, and how an accessibility server like mozilla should use the api's programmatic interfaces to expose this information to an accessibility client (the assistive technology). each platform's accessibility api has made different assumptions, although there are a number of common characteristics. for example, they all expose an accessible name, or text representation, of each object, and they all use an enumerated integer value from a finite list, to expose the role of an object. examples of accessible role constants are role_button, role_checkbox and role_list, although they can have slightly different names and values in each api. in ge...
... we call these objects "accessible nodes". each of these accessible nodes supports at minimum the generic cross-platform accessibility interface nsiaccessible (which provides a text name, enumerated role identifier and a set of state flags) and sometimes additional interfaces. for example, tables support nsiaccessibletable, text supports nsiaccessibletext and edit boxes support nsieditabletext., although this code has been moved into the atk specific directories because it is not currently used in windows. we will not rule out the possibility of supporting some of the rich atk interfaces on windows. the toolkit-specific classes then use these xpcom interfaces to gather information about the objects they want to expose, make any necessary changes, and then expose the information using microso...

Embedding API for Accessibility
fonts setcharpref("font.name.monospace.x-western", newfontname); setcharpref("font.name.serif.x-western", newfontname); setcharpref("font.name.sans-serif.x-western", newfontname); /* for other i18n charsets, change x-western to x-central-euro, x-cyrillic, x-unicode, x-user-def, x-baltic, el, tr, he, ar, th, ja, zh-cn or zh-tw */ setintpref("font.size.fixed.x-western", newfontsize); setintpref("font.size.variable.x-western", newfontsize); /* for other i18n charsets, change the name as explained above for font face*/ setcharpref("font.defa...
... caret will be visible in the text of the browser, allowing the user to cursor around the html content as if in a read-only editor */ moz 0.9 special content notifications the w3c uaag specifies types of content that must be optional. the intention is for a user to be notified of its existence, and at some point they can choose to load the content. this is a much better alternative than having the user go through a long series of confirm boxes for each new page, for each type of content. for each preference named "browser.accept.*", there is also an "alert.audio.*" preference, to allow configuration of sound files to go with each type of content. the audio file could be a clip of a human voice saying "you've got video" or even a simple beep. how we expose this thr...

Mozilla's Section 508 Compliance
requirement windows linux/unix mac os (a) when software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually. mostly complete. ...
...& security - images contain options for making animated images still. (i) color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. complete. caveat: normally mozilla uses a color change to indicate when a link has been visited. however, the visited link appearance can be altered via a user style sheet. (j) when a product permits a user to adjust color and contrast settings, a variety of color selections capable of producing a range of contrast levels shall be provided. complete. mozilla's appearance preferences panel contains a large number of color possibilities. (k) software shall not use flashing or blinking text...

Creating a Firefox sidebar
xtension to add a web panel is available as a starter.obsolete since gecko 57 if you'd like to have a deeper integration with the browser to offer more complex features, a traditional overlay extension can be an option. the document might be obsolete, though.obsolete since gecko 57 the social api obsolete since gecko 57 (firefox 57 / thunderbird 57 / seamonkey 2.54)this feature is obsolete. ...
...try to avoid using it. as of firefox 23, the addpanel and addpersistentpanel functions have been removed from the deprecated, netscape-derived window.sidebar object. ...

Debugging on Windows
"debug > other debugging targets > child process debugging settings", and ticking the box. if you have followed the steps in building firefox for windows and have a local debug build, you can execute ./mach run --debug from the same command line. it would open visual studio with firefox's run options configured. you can click "start" button to run firefox then, already attached in the debugger. alternatively, if you have generated the visual studio solution, via ./mach build-backend -b visualstudio, opening this solution allows you to run firefox.exe directly in the debugger. making it the startup project, by right clicking on it (it appears bold when it's the case) can be useful. breakpoints are kept across runs, this can be a good way to debug startup issues. run the program until you hi...
...} >debug.evaluatestatement ((nsgenericelement*)0x03f0e710)->list((file*)0x10311dc0, 1) <void> >debug.evaluatestatement {,,msvcr80d}fclose((file*)0x10311dc0) 0x00000000 note t...

Configuring Build Options
builds aren't really appropriate for local builds. firefox, debugging build (mac os x 64bits) thunderbird, debugging build (linux 64 bits) building multiple applications from the same source tree it is possible to build multiple applications from the same source tree, as long as you use a different objdir for each application. you can either create multiple mozconfig files, or alternatively, use the moz_build_projects make option. using moz_build_projects in a single mozconfig to use moz_build_projects, you must specify a moz_objdir and a moz_build_projects make option, containing space separated names. each name can be an arbitrary directory name. for each name, a subdirectory is created under the toplevel objdir. you then need to use the ac_add_app_options with the spe...
.../mozilla/src/obj-@config_guess@ mk_add_options moz_build_projects="browser mail" ac_add_app_options browser --enable-application=browser ac_add_app_options mail --enable-application=comm/mail if you want to build only one project using this mozconfig, use the following command line: moz_current_project=browser ./mach build this will build only the browser. using multiple mozconfig files alternatively, you may want to create separate mozconfig files. as an example, the following steps can be used to build firefox and thunderbird. you should first create three mozconfig files. mozconfig-common: # add common options here, such as making an optimized release build mk_add_options moz_make_flags="-j4" ac_add_options --enable-optimize --disable-debug mozconfig-firefox: # include the ...

Multiple Firefox profiles
the browser url search bar. the page presents a list of all of your profiles, each beginning with "profile: " followed by its name. the one being run by this firefox instance will include the bold text "this is the profile in use" for example, if you find that text beneath the entry for "profile: suzie", then you are running in a profile named suzie. launching firefox into a desired profile although it is possible in some cases to have multiple instances of firefox running in different profiles, to avoid confusion, you might want to first exit/quit/terminate all running instances of firefox, firefox developer edition or nightly. then follow the instructions below, applicable to your operating system. from profile manager inside firefox if you already have firefox instance running, you...
...bar at the bottom. type firefox --new-instance --profilemanager. windows 8/8.1/10 press "windows + r" on your keyboard. type firefox --new-instance --profilemanager. linux if firefox is already included in your linux distribution, or if you have installed firefox with the package manager of your linux distribution: open a terminal emulator or your shell’s command prompt: alt-f2 if you use gnome shell or kde plasma, consult your desktop environment documentation for other environments. run firefox --new-instance --profilemanager. macos run the terminal application, which is found in applications/utilities. type or paste in the path to firefox, followed by .app/contents/macos/firefox. for example, if firefox is installed in the recommended location, you...

Performance
key points to keep in mind scripts registered during addon startup get executed during session restore. the more expensive they are to execute the longer it will take for the browser to become responsive after startup. frame scripts also get executed on non-restored tabs. all their overhead is thus not just incurred by active tabs but by the total number of tabs in a session. ...
...d", {something: result}) } function addframe(frameglobal) { frameglobal.addmessagelistener("my-addon:request-from-parent", dosomething) } javascript modules are per-process singletons and thus all their objects are only initialized once, which makes them suitable for stateless callbacks. but care must be taken to not leak references to the frame script global when it is passed into a jsm. alternatively the frame's unload event or weak maps can be used to ensure that frames can be cleaned up when their respective tab is closed. store heavyweight state once per process bad: // addon.js var main = new myaddonservice(); main.onchange(statechange); function statechange() { services.mm.broadcastasyncmessage("my-addon:update-configuration", {newconfig: main.serialize()}) } // frames...

IME handling guide
ed editor handles a dispatched ecompositionchange event, this modifies the stored composition string and its clause information. the editor refers the stored information for creating or modifying a text node representing a composition string. and before dispatching ecomposition* events, this class removes ascii control characters from dispatching composition event's data in the default settings. although, this can be disabled with "dom.compositionevent.allow_control_characters" pref. finally, this class guarantees that requesting to commit or cancel current composition to ime is perefored synchronously. see forcibly committing composition section for the detail. editor/libeditor mozilla::editoreventlistener listens for trusted dom compositionstart, text and compositionend events and notif...
...ion synchronously. additionally, textcomposition ignores comming events which are dispatched by widget when the widget receives native ime events. in this case, using the last composition string as commit string. however, if the last composition string is only an ideographic space (fullwidth space), the composition string may be a placeholder of some old chinese ime on windows. in this case, although, we should not commit the placeholder character because it's not a character which the user wanted to input but we commit it as is. the reason is, inputting an ideographic space causes a composition. therefore, we cannot distinguish if committing composition is unexpected. if the user uses such old chinese ime, "intl.ime.remove_placeholder_character_at_commit" pref may be useful but we don't...

Implementing QueryInterface
ors when you can't really get to the desired interface. it avoids repeated uses of and assignments to *ainstanceptr, which compilers have trouble optimizing. it clears the result, *ainstanceptr, when returning an error. it generates less code than the typical implementation of queryinterface. it tests for bad input with an ns_assertion, to find logic errors immediately in debug builds. some alternatives the ns_impl_query_interface[012] macros the sample above implements two xpcom interfaces in addition to nsisupports. the ns_impl_query_interface2 macro can write this function for you (though it pains me to recommend macros), e.g., ns_impl_query_interface2(nsmyimplementation, nsix, nsiy) // implements |nsmyimplementation::queryinterface| as ...
...the macro must expand to different text in different situations, e.g., different platforms, debugging vs. non-debugging, et al. in such cases macros are indispensible. in other cases macros may help some people but often cloud the issues for others. they always make the program source more fragile. in this case the macro is for convenience only, so i don't recommend it, but i do offer it up as an alternative. // ... if ( aiid.equals(ns_get_iid(nsix)) ) foundinterface = ns_static_cast(nsix*, this); else if ( aiid.equals(ns_get_iid(nsiy)) ) foundinterface = ns_static_cast(nsiy*, this); // ...as many cases as needed... else if ( aiid.equals(ns_get_iid(nsisupports)) ) // ... thanks special thanks to heikki toivonen, chris waterson, and john bandhauer fo...

Localizing with Mozilla Translator
is not a component, but a platform. for these few files, you will have to export them individually and reimport them. if you are a ''not so good'' mt user, however, you can just create a new product (or several ones; see next recipe to know why), run file -> update on them (you'll get a list of all the strings) and then run edit -> autotranslate. most of the strings will be automatically filled, although if you do this you should review them, because for en-us strings with several possible translations, mt will choose one of them, which could not be the one you want. from cvs to mercurial in mt so, you have a firefox product in mt with a platform neutral and, inside it, several directories (''components'' in mt terminology) more or less like the second sample above, checked out from cvs.
...d you do? the first thing to do, once you have your mercurial local repository up and working, is create a new product... or more. with good oldie cvs, you could checkout just the locale content and, even more, you could checkout just ''the locale directories'' you were interested in. with mercurial, partial checkouts are not possible, so you have your own mozilla repository full copy (there are alternate solutions; read on). a bit of history on mt mt has been evolving from long ago, when l10n were done always on shipped en-us jars and when mozilla suite had five l10n jars: ab-cd.jar, ab-win.jar, ab-mac.jar, ab-unix.jar, and cd.jar. mt thus referred to ab-cd.jar contents as ''platform neutral'' platform, cd.jar as '''region''' platform (or regional files), and the other three as ''window...

Localization sign-off reviews
elease-to-release. only evaluates new l10n work. this is done by generating a diff between the new release revision being considered and the previously approved release revision. focuses on technical accuracy and completion of l10n work, not translation quality. evaluates new release revisions, not entire l10n repos. does not need to be approved before revision merge between release channels, although it is recommended. sign-off review criteria since the scope of each qa review process varies, the criteria used to evaluate a localizer's work also varies. in principle, they share basic elements, but sign-off reviews are only for evaluating the changes between your latest approved revision and the new revision you've submitted for release approval. hence, unless a localizer makes a change ...
...significantly less comprehensive than a technical review. here is some of the criteria we use to perform sign-off reviews: increased amount of untranslated strings we look for previously translated strings changing to untranslated strings in the new revision. this is a common problem with some tools. encoding some tools add bom to utf-8 encoded files, and some change the encoding altogether. mistakenly localized code we look for changes in localized code that should not have been localized or wasn't localized in the previous revision. search plugin changes this greatly impacts productization. we look for these changes and file bugs when they're found in a new revision. further indications of tool-originated corruption this is common. most bugs filed fr...

Creating localizable web content
text content check that the text is factually correct for an international audience (e.g., mentions of en-us specific product pieces like specific search engines or dictionary should be adapted) look for strings that are likely hard to translate because they are unclear, use play on words or colloquialisms. depending on context, find alternate strings or document an explanation of the string for localizers check that we don't link in new pages to sub-pages with anchors. e.g.: a new page is announced with only 100 words but it is actually content added to an existing page in english. happens for things like faq, or video pages for example. for video, use the code to display the video in an overlayed video player on the page instead of linking to a video section in english. per-loc...
...ink in new pages to sub-pages with anchors. e.g.: a new page is announced with only 100 words but it is actually content added to an existing page in english. happens for things like faq, or video pages for example. for video, use the code to display the video in an overlayed video player on the page instead of linking to a video section in english. per-locale customizations check if there are alternative links for localized pages (e.g., links to mdn, addons.mozilla.org, or other external resources, are there translated equivalents we can use). if there are alternatives, use them by adding the $lang; parameter in the urls evaluate the impact of new pages on all our web properties, especially links to community sites and redirects. sometimes you can leave some freedom of modification for ...

Fonts for Mozilla's MathML engine
xits or amiri fonts. installation without administrator privilege if you need to install fonts on a system without adminstrator privilege, the easiest option is to use math font the mathml-fonts add-on. note that using the add-on is not optimal since it forces your gecko browser to load a css stylesheet on each page you visit as well as web math fonts on all pages with mathml content. a better alternative on unix systems is to install the otf files for latin modern math and stix into some local font folder and (if necessary) to run fc-cache on it. on os x and linux, the standard paths are ~/library/fonts/ and ~/.fonts. fonts with a math table you can actually render mathml using any font with a math table and related open font format features. a list of such math fonts is provided below.
...local font folder and (if necessary) to run fc-cache on it. on os x and linux, the standard paths are ~/library/fonts/ and ~/.fonts. fonts with a math table you can actually render mathml using any font with a math table and related open font format features. a list of such math fonts is provided below. you can use the advanced font preference menu to configure the default font for mathematics. alternatively, you can try the mathml-fontsettings add-on. asana math cambria math dejavu math tex gyre garamond math (under development) latin modern math libertinus math lucida bright math minion math stix math tex gyre bonum math tex gyre pagella math tex gyre schola math tex gyre termes math xits math fira math (sans-serif typeface, under development) gfs neohellenic math (sans-...

Fonts for Mozilla 2.0's MathML engine
use of various symbols represented by specific unicode characters. mozilla can display any of these symbols provided suitable unicode fonts are installed. furthermore, in accordance with the w3c css2 recommendation on fonts, authors can specify an ordered list of particular fonts which they prefer (using the font-family property of css), with the assurance that mozilla's font engine will hunt for alternate fonts whenever their specified fonts are not found on a particular user's system. if no appropriate font is ultimately found for a given character, mozilla will instead display a box containing the hexadecimal representation of the unicode code point for the character. some mathematical operators are also drawn by using glyphs for larger variants of the character (e.g. summation symbol) or ...
...installed via your software manager. for convenience we provide a zip archive of mathml fonts. the fonts may be installed by extracting the font files (which have the .otf extension) from the zip archive, then following instructions for microsoft windows, or copying the files to a ~/library/fonts folder on mac os x, or to a ~/.fonts/ directory (which may need to be created) on unix/linux systems. alternatively, follow dafont's "how to install a font". these fonts are opentype postscript fonts, which are supported by most modern operating systems. however some operating systems may not support these fonts. on such systems, it will be necessary to convert the fonts to a supported format. for example asana math is available in truetype format and there is an unofficial truetype conversion for st...

Mozilla Development Strategies
her trees, work on smaller, easier bugs. pick bugs that won't cause conflicts with the work you're doing in your primary tree. pick bugs that should only take you a few hours or a day to fix. in theory, fixes for these bugs will be quick to review. if you have problems finding smaller, easier bugs to work on, start by looking for crashers. maybe the problem can be turned into an assert, or fixed altogether. you can use talkback queries or bugzilla queries to find crashers. look for problems in existing code. find and fix string usage problems. find and fix bad xpcom macro usage. switch some code over to nscomptrs. look for xxx or todo in the code, verify the code still needs fixing, and fix it. smaller patches get reviewed faster if you find that you spend a lot of time waiting for review...
...s to what to work on, talk to a lead sooner rather than later. most likely they will have a bug they can hand off to you, or they can help get you unblocked. since they are going to be reviewing your code later, run your plan of attack by them first. it's better to have an idea rejected, than a big patch. if you are blocked, but have something worth checking in, check in using #ifdef, prefs, or "alternative" files sometimes you'll work on something, but you can't land it because something else is blocking you. you can still land (assuming you get reviews) if the code isn't on by default. this also makes it easier to get help on the problem. it's easier to tell someone set a pref, or apply a small patch, or set a #define than to apply a monster patch. for c++, use #define, #ifdef, #else and...

mozilla::CondVar
mozilla::condvar is a bare wrapper around prcondvar. please see introduction_to_nspr for a high-level summary of its semantics. #include "condvar.h" methods constructor condvar(mutex& amutex, const char* aname) initialize the condvar with its associated mutex and a name to reference it by. wait() nsresult wait( in printervaltime interval = pr_interval_no_timeout ); wait on this condvar until it is notifyed. notify() nsresult notify(void); notify one thread waiting on this condvar. notifyall() nsresult notifyall(void); notify all threads waiting on this condvar. assertcurrentthreadownsmutex() assert that the current thread has successfully locked the mutex undergirding this condvar. does not incur a runtime penalty in optimized builds. assertnotcurrentthreadown...
...tifyall(void); notify all threads waiting on this condvar. assertcurrentthreadownsmutex() assert that the current thread has successfully locked the mutex undergirding this condvar. does not incur a runtime penalty in optimized builds. assertnotcurrentthreadownsmutex() assert that the current thread has not successfully locked the mutex undergirding this condvar. does not incur a runtime penalty in optimized builds. see also prcondvar ...

Leak-hunting strategies and tips
the base class using delete, its destructor better be virtual. (but we have many virtual destructors in the codebase that don't need to be -- don't do that.) debugging leaks that go through xpconnect many large object graphs that leak go through xpconnect. this can mean there will be xpconnect wrapper objects showing up as owning the leaked objects, but it doesn't mean it's xpconnect's fault (although that has been known to happen, it's rare). debugging leaks that go through xpconnect requires a basic understanding of what xpconnect does. xpconnect allows an xpcom object to be exposed to javascript, and it allows certain javascript objects to be exposed to c++ code as normal xpcom objects. when a c++ object is exposed to javascript (the more common of the two), an xpcwrappednative object...
...t variable _nt_symbol_path to something like symsrv*symsrv.dll*f:\localsymbols*http://msdl.microsoft.com/download/symbols as described in microsoft's article. this needs to be done when running, since we do the address to symbol mapping at runtime. linux many linux distros provide packages containing external debugging symbols for system libraries. fix_stacks.py uses this debugging information (although it does not verify that they match the library versions on the system). for example, on fedora, these are in *-debuginfo rpms (which are available in yum repositories that are disabled by default, but easily enabled by editing the system configuration). tips disabling arena allocation with many lower-level leak tools (particularly trace-malloc based ones, like leaksoup) it can be helpful...

Power profiling overview
phasis on intel processors used in desktop and laptop machines. it serves as a starting point for anybody doing power profiling for the first time. basic physics concepts in physics, power is the rate of doing work. it is equivalent to an amount of energy consumed per unit time. in si units, energy is measured in joules, and power is measured in watts, which is equivalent to joules per second. although power is an instantaneous concept, in practice measurements of it are determined in a non-instantaneous fashion, i.e. by dividing an energy amount by a non-infinitesimal time period. strictly speaking, such a computation gives the average power but this is often referred to as just the power when context makes it clear. in the context of computing, a fully-charged mobile device battery (as ...
...if the high-performance gpu is being used, which uses more power than the integrated gpu. if neither cpu usage nor wakeup frequency identifies the problem, more ingenuity may be needed. looking at other measurements (c-state residency, gpu usage, etc.) may be helpful. animations are sometimes the cause of high power consumption. the animation inspector in the firefox devtools can identify them. alternatively, here is an explanation of how one developer diagnosed two animation-related problems the hard way (which required genuine platform expertise). the approximate cause of power problems often isn't that hard to find. fixing them is often the hard part. good luck. if you do fix a problem by improving a proxy measurement, you should verify that it also improves a power measurement or esti...

Profiling with the Firefox Profiler
nificant portion of time can be spent in idle, blocking calls like waiting for events. this is ideal for a responsive application to be ready to service incoming events. there are os-specific waiting functions like ntwaitformultipleobjects seen in the example above taken on windows or mach_msg_trap on macos. tip: you can quickly go deeper into the call tree by holding down your right arrow key. alternatively, expand an entire tree segment by holding alt and clicking on the arrow to the left of the collapsed tree segment. as we progress into a more specific part of the tree, you'll notice that the 'running time' decreases. this happens when a function has 2 or more non-trivial calls: the running time will be split between its children. tip: focus on one section of the tree by clicking on...
...g or through the moz_profiler_startup_features environement variable. here are the main ones: native stacks - "stackwalk" when taking a sample the profiler will attempt to unwind the stack using platform specific code appropriate for the abi. this will provide an accurate callstack for most samples. on abis where framepointers are not available this will cause a significant performance impact. alternatively, native leaf stack ("leaf") only records the top-most frame. javascript - "js" javascript callstacks will be generated and interleaved with the c++ callstacks. this will introduce an overhead when running js. main thread file io, profiled thread file io, all file io - "mainthreadio", "fileio", "allfileio" this will interpose file i/o from a selection of threads, and report them in t...

NSPR build instructions
building nspr consists of three steps: run the configure script. ...
...uild the test programs for example, # check out the source tree from mercurial hg clone https://hg.mozilla.org/projects/nspr # create a build directory mkdir target.debug cd target.debug # run the configure script ../nspr/configure [optional configure options] # build the libraries gmake # build the test programs cd pr/tests gmake on mac os x, use make, which is gnu make. configure options although nspr uses autoconf, its configure script has two default values that are different from most open source projects. if the os vendor provides a compiler (for example, sun and hp), nspr uses that compiler instead of gcc by default. nspr build generates a debug build by default. --disable-debug --enable-optimize specify these two options to generate an optimized (release) build. these t...

PR_CWait
if you specify pr_interval_no_timeout, the function returns if and only if the object is notified. ...
...if you specify pr_interval_no_timeout, the function returns if and only if the object is notified. ...

PR_Connect
returns the function returns one of the following values: upon successful completion of connection setup, pr_success. if unsuccessful, pr_failure. ...
... returns the function returns one of the following values: upon successful completion of connection setup, pr_success. if unsuccessful, pr_failure. ...

PR_QueueJob_Timer
fn the function to be executed when the job is executed. arg a pointer to an argument passed to fn. ...
... fn the function to be executed when the job is executed. arg a pointer to an argument passed to fn. joinable if pr_true, the job is joinable. if pr_false, the job is not joinable. ...

Certificate functions
cert_createname mxr 3.2.1 and later cert_createocspcertid mxr 3.6 and later cert_createocsprequest mxr 3.6 and later cert_createrdn mxr 3.2.1 and later cert_createsubjectcertlist mxr 3.4 and later cert_createvalidity mxr 3.5 and later cert_crlcacherefreshissuer mxr 3.7 and later cert_decodealtnameextension mxr 3.10 and later cert_decodeauthinfoaccessextension mxr 3.10 and later cert_decodeauthkeyid mxr 3.10 and later cert_decodeavavalue mxr 3.4 and later cert_decodebasicconstraintvalue mxr 3.2 and later cert_decodecertfrompackage mxr 3.4 and later cert_decodecertificatepoliciesextension mxr ...
... cert_destroyocspresponse mxr 3.7 and later cert_destroyoidsequence mxr 3.9 and later cert_destroyusernotice mxr 3.10 and later cert_destroyvalidity mxr 3.5 and later cert_dupcertificate mxr 3.2 and later cert_dupcertlist mxr 3.2 and later cert_enableocspchecking mxr 3.2 and later cert_encodealtnameextension mxr 3.7 and later cert_encodeandaddbitstrextension mxr 3.5 and later cert_encodeauthkeyid mxr 3.5 and later cert_encodebasicconstraintvalue mxr 3.5 and later cert_encodecertpoliciesextension mxr 3.12 and later cert_encodecrldistributionpoints mxr 3.5 and later cert_encodegeneralname mxr 3.

NSS FAQ
rity manager ships with netscape 6 and the gateway connected touch pad with instant aol, and is also available for use with communicator 4.7x. where can i get the source? for instructions on how to check out and build the nss source code, see build instructions for nss. how much does it cost? nss source code and binaries (when they become available) are completely free. no license fees, no royalty fees, no subscription fees. developer questions what hardware accelerators are supported? nss supports the pkcs #11 interface for hardware acceleration. since leading accelerator vendors such as chrysalis-it, ncipher, and rainbow technologies also support this interface, nss-enabled applications can support a wide variety of hardware accelerators. how do i integrate smart cards into my appli...
...vides consistent cross-platform semantics for network i/o and threading models. you can use nspr throughout your application or only in the portion that calls into nss. mozilla strongly recommends that multithreaded applications use the nspr or native os threading model. (in recent nspr releases, the nspr threading model is compatible with the native threading model if the os has native threads.) alternatively, you can adapt the open-source nspr implementation to be compatible with your existing application's threading models. more information about nspr may be found at netscape portable runtime. can i use nss even if my application protocol isn't http? yes, tls is independent of application protocols. it works with common internet standard application protocols (http, pop3, ftp, smtp, etc.

NSS 3.37 release notes
added hacl* poly1305 32-bit the code to support the npn protocol, which had already been disabled in a previous release, has been fully removed. nss allows servers now to register alpn handling callbacks to select a protocol. nss supports opening sql databases in read-only mode. nss now requires the sqlite apis of version 3.5.0 or newer. starting with nss version 3.31, an alternative implementation for rng seeding on the linux/unix platform was available (bug 1346735), which performed seeding exclusively based on /dev/urandom. this alternative implementation is selected at build time by defining the seed_only_dev_urandom symbol. (the classic implementation for rng seeding on the linux/unix platform, which may use additional sources for the default seeding, is still...
...35), which performed seeding exclusively based on /dev/urandom. this alternative implementation is selected at build time by defining the seed_only_dev_urandom symbol. (the classic implementation for rng seeding on the linux/unix platform, which may use additional sources for the default seeding, is still available and will be used if seed_only_dev_urandom is undefined.) with nss 3.37, this alternative implementation for linux/unix can be selected in "make" builds by defining the environment variable nss_seed_only_dev_urandom. with nss 3.37, this alternative implementation for linux has been enhanced to use the glibc function getentropy(), instead of reading from /dev/urandom directly, if the build and runtime linux platform supports it. the ca certificates list was updated to ver...

NSS Developer Tutorial
action1(); } else { action2(); } the former style is more common. when modifying existing code, try to stay consistent. in new code, prefer the former style, as it conserves vertical space. when a block of code consists of a single statement, nss doesn’t require curly braces, so both of these examples are fine: if (condition) { action(); } or: if (condition) action(); although the use of curly braces is more common. multiple-line comments should be formatted as follows: /* * line1 * line2 */ or /* ** line 1 ** line 2 */ the following styles are also common, because they conserve vertical space: /* line1 * line2 */ or /* line1 ** line2 */ or /* line1 * line2 */ naming public functions are named foo_dooneaction. global, but unexported functions,...
...ine 2 */ the following styles are also common, because they conserve vertical space: /* line1 * line2 */ or /* line1 ** line2 */ or /* line1 * line2 */ naming public functions are named foo_dooneaction. global, but unexported functions, are usually named foo_dooneaction. variable, and function parameter names, always start with a lowercase letter. the most common style is foobarbaz, although foobarbaz and foo_bar_baz are also used. miscellaneous goto can be used, to simplify resource deallocation, before returning from a function. a data buffer is usually represented as: unsigned char *data; unsigned int len; the buffer pointer is unsigned char *, as opposed to void *, so we can perform pointer arithmetic without casting. use char * only if the data is interpreted a...

NSS Sample Code Sample1
s how to do key generation and transport between cooperating servers. this program shows the following: rsa key pair generation naming rsa key pairs looking up a previously generated key pair by name creating aes and mac keys (or encryption and mac keys in general) wrapping symmetric keys using your own rsa key pair so that they can be stored on disk or in a database. as an alternative to token symmetric keys as a way to store large numbers of symmetric keys wrapping symmetric keys using an rsa key from another server unwrapping keys using your own rsa key pair the main part of the program shows a typical sequence of events for two servers that are trying to extablish a shared key pair. we will add message protection (encryption and mac...
...ent for keys share among multiple hosts // // this example shows how to use nss functions to create and // distribute keys that need to be shared among multiple servers // or hosts. // // the management scheme assumes that one host is primary. it // generates the secret keys that will be used by all participating // hosts. the other hosts (secondary) request keys from the // primary host. as an alternative, new keys may be sent to the // current set of secondary hosts when they are generated by the // primary. in this case, the primary maintains a list of the // secondary hosts. // // the sequence of events is: // 1. the primary host generates a new symmetric key. this key // may be used for an encryption mechanism (des or aes) or for // integrity (md5_hmac or sha1_hmac). this key n...

nss tech note8
r sessions. that is, the client session lifetime was not separately settable from the server session lifetime. these two variables were private, declared in a private header file. there was no api function by which client programs could set these values. however since nss was delivered as archive libraries, client programs merely declared these two variables for themselves, and then were able to alter those variables directly. for server programs, the function for initializing the server session cache would set these two variables according to two of the arguments to that function. so, ssl protocol code that wanted to cache a sid would do these steps, whether for client or for server: for ssl2: sid->lastaccesstime = sid->creationtime = ssl_time(); sid->expirationtime = sid->creati...
...server session cache may have its own lifetimes. so, in nss 3.4, the global variables ssl3_sid_timeout and ssl_sid_timeout were intended to become the definitions for the client cache only, and each server cache had its own new pair of variables for ssl2 and ssl3 session lifetimes, i.e., cache->ssl2timeout and cache->ssl3timeout. the server cache initialization function was intended to no longer alter the variables ssl3_sid_timeout and ssl_sid_timeout, but rather to set the server cache's variables. since all the callers of the socket's cache function always initialized both their creationtime and expirationtime using the client's session lifetime variables, i changed the server's caching function to ignore the expirationtime computed by the caller, and compute its own expiration time, usin...

Python binding for NSS
nss is fips-140 certified. nss is built upon nspr because nspr provides an abstraction of common operating system services, particularly in the areas of networking and process management. ...
..._general_name_type_from_name() nss.nss.cert_general_name_type_name() nss.nss.cert_usage_flags() nss.nss.decode_der_crl() nss.nss.der_universal_secitem_fmt_lines() nss.nss.import_crl() nss.nss.make_line_pairs() nss.nss.oid_dotted_decimal() nss.nss.oid_str() nss.nss.oid_tag() nss.nss.oid_tag_name() nss.nss.read_der_from_file() nss.nss.x509_alt_name() nss.nss.x509_ext_key_usage() nss.nss.x509_key_usage() the following class methods and properties were added: note: it's a method if the name is suffixed with (), a propety otherwise socket.next() socket.readlines() socket.sendall() sslsocket.next() sslsocket.readlines() sslsocket.sendall() authkeyid.key_id authkeyid.seri...

NSS functions
cert_createname mxr 3.2.1 and later cert_createocspcertid mxr 3.6 and later cert_createocsprequest mxr 3.6 and later cert_createrdn mxr 3.2.1 and later cert_createsubjectcertlist mxr 3.4 and later cert_createvalidity mxr 3.5 and later cert_crlcacherefreshissuer mxr 3.7 and later cert_decodealtnameextension mxr 3.10 and later cert_decodeauthinfoaccessextension mxr 3.10 and later cert_decodeauthkeyid mxr 3.10 and later cert_decodeavavalue mxr 3.4 and later cert_decodebasicconstraintvalue mxr 3.2 and later cert_decodecertfrompackage mxr 3.4 and later cert_decodecertificatepoliciesextension mxr ...
... cert_destroyocspresponse mxr 3.7 and later cert_destroyoidsequence mxr 3.9 and later cert_destroyusernotice mxr 3.10 and later cert_destroyvalidity mxr 3.5 and later cert_dupcertificate mxr 3.2 and later cert_dupcertlist mxr 3.2 and later cert_enableocspchecking mxr 3.2 and later cert_encodealtnameextension mxr 3.7 and later cert_encodeandaddbitstrextension mxr 3.5 and later cert_encodeauthkeyid mxr 3.5 and later cert_encodebasicconstraintvalue mxr 3.5 and later cert_encodecertpoliciesextension mxr 3.12 and later cert_encodecrldistributionpoints mxr 3.5 and later cert_encodegeneralname mxr 3.

sslintro.html
ant applications to configure sockets for authenticated, tamper-proof, and encrypted communications. this chapter introduces some of the basic ssl functions. chapter 2, "getting started with ssl" illustrates their use in sample client and server applications. an ssl application typically includes five parts: initialization configuration communication functions used by callbacks cleanup although the details differ somewhat for client and server applications, the concepts and many of the functions are the same for both. warning: some of the ssl header files provided as part of nss 2.0 include both public apis documented in the nss 2.0 documentation set and private apis intended for internal use by the nss implementation of ssl. you should use only the ssl apis (and related certif...
...igures this out when the application calls pr_connect or pr_accept. if the socket is already connected before ssl gets involved, you must provide this extra hint. functions that can be used by both clients and servers during communication include the following: pr_send or pr_write pr_read or pr_recv pr_geterror pr_getpeername pr_sleep pr_malloc pr_free pr_poll pr_now pr_intervaltomilliseconds pr_millisecondstointerval pr_shutdown pr_close ssl_invalidatesession after establishing a connection, an application first calls pr_send, pr_recv, pr_read, pr_write, or ssl_forcehandshake to initiate the handshake. the application's protocol (for example, http) determines which end has responsibility to talk first. the end that has to talk first should call pr_send or pr_wri...

ssltyp.html
l makes a shallow copy--that is, it increments the reference count for that object rather than making a whole new copy. when you call cert_destroycertificate, the function decrements the reference count and, if the reference count reaches zero as a result, frees the memory. the use of the word "destroy" in function names or in the description of a function often implies reference counting. never alter the contents of a certificate structure. if you attempt to do so, the change affects all the shallow copies of that structure and can cause severe problems. pk11slotinfo an opaque structure representing a physical or logical pkcs #11 slot. syntax #include <pk11expt.h> typedef struct pk11slotinfostr pk11slotinfo; secitem a structure that points to other structures. syntax #inclu...
...e <keyt.h> typedef struct seckeyprivatekeystr seckeyprivatekey; description key structures are not shared objects. when an application makes a copy of a particular key structure that already exists in memory, ssl makes a deep copy--that is, it makes a whole new copy of that object. when you call seckey_destroyprivatekey, the function both frees the memory and sets all the bits to zero. never alter the contents of a key structure. treat the structure as read only. secstatus the return value for many ssl functions. syntax #include <seccomon.h> typedef enum { secwouldblock = -2, secfailure = -1, secsuccess = 0 } secstatus; enumerators the enum includes the following enumerators: secwouldblock reserved for internal use.

Rhino scopes and contexts
brary objects and in many cases it is also possible to change or delete their properties as well. such behavior may not be suitable with shared scopes since if a script by mistake adds a property to a library object from the shared scope, that object would not be garbage collected until there are no active references to the shared scope potentially leading to memory leaks. in addition if a script alters some of the standard objects, the library may not work properly for other scripts. such bugs are hard to debug and to remove a possibility for them to occur one can seal the shared scope and all its objects. a notion of a sealed object is a javascript extension supported by rhino and it means that properties can not be added/deleted to the object and the existing object properties can not be ...
...lf thus after callinginitstandardobjects, sealedsharedscope can be farther populated with application-specific objects and functions. then after a custom initialization is done, one can seal the shared scope by callingscriptableobject.sealobject(): sealedsharedscope.sealobject(); note that currently one needs to explicitly seal any additional properties he adds to the sealed shared scope since although after calling sealedsharedscope.sealobject(); it would no be possible to set the additional properties to different values, one still would be able to alter the objects themselves. note that currently in order to use java classes (liveconnect) from a sealed shared scope you need to pre-load a number of objects needed for liveconnect into the scope before it gets sealed. these objects would ...

Scripting Java
e package instead of importing using the importpackage() method. this is also acceptable, it just takes more typing. using a fully qualified name, the above example would look as follows: $ java org.mozilla.javascript.tools.shell.main js> jspackage = packages.org.mozilla.javascript; [javapackage org.mozilla.javascript] js> jspackage.context.currentcontext; org.mozilla.javascript.context@bb6ab6 alternatively, if you want to import just one class from a package you can do so using the importclass() method. the above examples could be expressed as follows: $ java org.mozilla.javascript.tools.shell.main js> importclass(packages.org.mozilla.javascript.context); js> context.currentcontext; org.mozilla.javascript.context@bb6ab6 working with java now that we can access java classes, the next l...
...ew packages.overload(); var a = [ 3, "hi", packages.overload ]; for (var i = 0; i != a.length; ++i) print(o.f(a[i])); and execute it, we get the output f(int) f(string) f(object) because rhino selects an overloaded method at runtime, it calls the more specific type that matches the argument. meanwhile java selects the overloaded method purely on the type of the argument at compile time. although this has the benefit of selecting a method that may be a better match for each call, it does have an impact on performance since more work is done at each call. in practice this performance cost hasn't been noticeable in real applications. because overload resolution occurs at runtime, it can fail at runtime. for example, if we call overload's method g with two integers we get an error beca...

Index
jsapi reference, reference, référence(2), spidermonkey js_addfinalizecallback add a callback function which the garbage collector calls at several points during garbage collection. rt is the runtime in which you specify the callback. cb is a pointer to the callback function to add. ...
... in which you specify the callback. cb is a pointer to the callback function to add. 188 js_aliaselement jsapi reference, obsolete, spidermonkey js_aliaselement assigns an alternate index number for an element or numeric property associated with a native object. obj is the object to which the element belongs. name is the element's current index in the object, and alias is the alternate index to assign to the element. 189 js_aliasproperty jsapi reference, obsolete, spidermonkey js_aliasproperty assigns an alternate name for a property associated with a native object. obj is the object to which the property belongs. name is the property's current name in the object, and alias is the alternate name to assign to the property. 190 js_alreadyhaso...

Bytecode Descriptions
-. surprisingly, it's not possible to get the right behavior using jsop::add and jsop::sub alone. for one thing, jsop::add sometimes does string concatenation, while ++ always does numeric addition. more fundamentally, the result of evaluating x-- is tonumeric(old value of x), a value that the sequence getlocal "x"; one; sub; setlocal "x" does not give us. format: jof_ic other expressions globalthis stack: ⇒ this push the global this value. not to be confused with the globalthis property on the global. this must be used only in scopes where this refers to the global this. newtarget stack: ⇒ new.target push the value of new.target. the result is a constructor or undefined. this must be used only in scripts where new.target is allowed: non-arrow function scripts and other scripts th...
...on ("x[symbol.iterator] is not a function"). the argc operand must be 0 for this variation. jsop::funapply hints to the vm that this is likely a call to the builtin method function.prototype.apply, an easy optimization target. jsop::funcall similarly hints to the vm that the callee is likely function.prototype.call. jsop::callignoresrv hints to the vm that the return value is ignored. this allows alternate faster implementations to be used that avoid unnecesary allocations. implements: evaluatecall steps 4, 5, and 7. format: jof_argc, jof_invoke, jof_typeset, jof_ic spreadcall stack: callee, this, args ⇒ rval like jsop::call, but the arguments are provided in an array rather than a span of stack slots. used to implement spread-call syntax: f(...args). args must be an array object contain...

SpiderMonkey Internals
iler, a garbage collector, code implementing the basic behavior of javascript values, a standard library implementing ecma 262-5.1 §15 with various extensions, and a few public apis. interpreter like many portable interpreters, spidermonkey's interpreter is mainly a single, tremendously long function that steps through the bytecode one instruction at a time, using a switch statement (or faster alternative, depending on the compiler) to jump to the appropriate chunk of code for the current instruction. a js-to-js function call pushes a javascript stack frame without growing the c stack. but since js-to-c-to-js call stacks are common, the interpreter is reentrant. some spidermonkey bytecode operations have many special cases, depending on the type of their arguments. common cases are inline...
...equest is made. js api users should call js_gc or js_maybegc between script executions or from the operation callback, as often as necessary. because the gc is exact, c/c++ applications must ensure that all live objects, strings, and numbers are gc-reachable. javascript values the type js::value represents a javascript value. the representation is 64 bits and uses nan-boxing on all platforms, although the exact nan-boxing format depends on the platform. nan-boxing is a technique based on the fact that in ieee-754 there are 2**53-2 different bit patterns that all represent nan. hence, we can encode any floating-point value as a c++ double (noting that javascript nan must be represented as one canonical nan format). other values are encoded as a value and a type tag: on x86, arm, and sim...

JIT Optimization Strategies
ess optimizes a polymorphic property access where there are only a few different types of objects seen, and the property on all of the different types is determinable through a shape-check. if a property access is monomorphic and the property's location is determinable from the object's shape, but the property is not definite (see: getprop_definiteproperty), then this optimization may be used. alternatively, if the property access is polymorphic, but only has a few different shapes observed at the access site, this optimization may be used. this optimization compiles down to one or more shape-guarded direct loads from the object. the following pseudocode describes the kind of machine code generated by this optimization: if obj.shape == shape1 then obj.slots[0] elif obj.shape == shape2 ...
...ccess optimizes a polymorphic property write where there are only a few different types of objects seen, and the property on all of the different types is determinable through a shape-check. if a property write is monomorphic and the property's location is determinable from the object's shape, but the property is not definite (see: getprop_definiteproperty), then this optimization may be used. alternatively, if the property write is polymorphic, but only has a few different shapes observed at the access site, this optimization may be used. this optimization compiles down to one or more shape-guarded direct stores to the object. the following pseudocode describes the kind of machine code generated by this optimization: if obj.shape == shape1 then obj.slots[0] = val elif obj.shape == sha...

JSAPI User Guide
bal functions and variables of its own. all of these functions, classes, and variables are stored as properties of the global object. a minimal example each of the three key elements described in the previous section requires a few jsapi calls: the runtime: use js_newruntime to create it and js_destroyruntime to clean it up when you're done. when your application is done with spidermonkey altogether, use js_shutdown to free any remaining cached resources. (this is a mere nicety if the process is about to exit anyway. but as that is not always the case, calling js_shutdown is a good habit to get into.) the context: use js_newcontext and js_destroycontext. for maximum ecmascript standard compliance, applications should also use js_setoptions to enable jsoption_varobjfix. to get th...
...and finally blocks are ignored. the most recent jsapi call returns false or nullptr to the application. an uncatchable error leaves the jscontext in a good state. it can be used again right away. the application does not have to do anything to “recover” from the error, as far as the jsapi is concerned. (of course, if the error is that the system is out of memory, that problem remains to be dealt with.) here is some example code that throws an uncatchable error. /* call the error reporter, if any. this part is optional. */ js_reporterror(cx, "the server room is on fire!"); js_reportpendingexception(cx); /* make sure the error is uncatchable. */ js_clearpendingexception(cx); return false; more sample code the following examples illustrate how to achieve a few ...

JSVAL_TO_GCTHING
obsolete since jsapi 32this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. cast a jsval to a raw pointer of type void *. syntax jsval_to_gcthing(v) description jsval_to_gcthing casts a jsval, v, to a raw pointer. the type of the result is void *. v must be either jsval_null or a reference to a gc thing. otherwise the resulting pointer is undefined. jsval_is_gcthing may be used to check this. this macro is exposed in jsapi.h because other jsapi macros make use of it. applications should not call it directly in most cases. when possible, it is better to use a more specific macro, such as jsval_to_object or jsval_to_string. ...
... v must be either jsval_null or a reference to a gc thing. otherwise the resulting pointer is undefined. jsval_is_gcthing may be used to check this. this macro is exposed in jsapi.h because other jsapi macros make use of it. applications should not call it directly in most cases. when possible, it is better to use a more specific macro, such as jsval_to_object or jsval_to_string. another possible alternative is to avoid casting altogether by using an api that operates on jsvals rather than raw pointers (for example, js_call_value_tracer rather than js_call_tracer). see also bug 952650 ...

JSVAL_TO_INT
the jsval encoding of the integer 4, for instance, is not ((jsval) 4) but some other pattern of bits. ...
... still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. converts an integer jsval to a c integer without any type checking or error handling. syntax jsval_to_int(v) description jsval_to_int converts a specified integer jsval, v, to the corresponding c integer value. if v is any other type of value, the result is unspecified. note that although jsval is an integer type, it must be treated as opaque. the jsval encoding of the integer 4, for instance, is not ((jsval) 4) but some other pattern of bits. to convert an integer to jsval, use int_fits_in_jsval and int_to_jsval. see also bug 952650 ...

JS_Add*Root
try to avoid using it. register a variable as a member of the garbage collector's root set, to protect anything the root points at from garbage collection. these functions are obsoleted, use js::persistentrooted instead. ...
...value or pointer to gc-thing, that value/gc-thing is protected from garbage collection. if the variable points to an object, then any memory reachable from its properties is automatically protected from garbage collection, too. js_addgcthingroot allows the caller to have a single root that may hold either strings or objects. a jsval is not a gc-thing (it has tag bits and may be a different size altogether) and thus the address of a jsval variable must not be passed to js_addgcthingroot. do not pass a pointer to a js string or object to any of these functions—rp must point to a variable, the location of the pointer itself, and not an object or string. an entry for rp is added to the garbage collector's root set for the jsruntime associated with cx (or, in js_addnamedrootrt, the runtime r...

JS_AliasElement
try to avoid using it. create an aliased index entry for an existing numeric property of a native object. syntax jsbool js_aliaselement(jscontext *cx, jsobject *obj, const char *name, jsint alias); name type description cx jscontext * the context in which to create the alias. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * the object for which to create the alias. name const char * name of the element for which to create an alias. ...
...aller must be in a request on this jscontext. obj jsobject * the object for which to create the alias. name const char * name of the element for which to create an alias. this name corresponds to a string representation of the element's current index number. alias jsint alias number to assign to the element. description js_aliaselement assigns an alternate index number for an element or numeric property associated with a native object. obj is the object to which the element belongs. name is the element's current index in the object, and alias is the alternate index to assign to the element. this feature is deprecated, meaning that it is currently supported only for backward compatibility with existing applications. future versions of the engi...

JS_AliasProperty
try to avoid using it. create an alias for a native property. syntax jsbool js_aliasproperty(jscontext *cx, jsobject *obj, const char *name, const char *alias); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * object for which to create the alias. name const char * name of the property for which to create an alias. ...
...ich to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * object for which to create the alias. name const char * name of the property for which to create an alias. alias const char * alias name to assign to the property. description js_aliasproperty assigns an alternate name for a property associated with a native object. obj is the object to which the property belongs. name is the property's current name in the object, and alias is the alternate name to assign to the property. notes this feature has been removed. an alias does not replace a property's name; it supplements it, providing a second way to reference a property. if the alias is successfully cre...

JS_ConstructObject
a less-preferred short-term solution might be to use this reimplementation of the method, but note that this reimplementation is not guaranteed to continue working across spidermonkey releases. ...
... a less-preferred short-term solution might be to use this reimplementation of the method, but note that this reimplementation is not guaranteed to continue working across spidermonkey releases. ...

Secure Development Guidelines
ter being executed; can’t be modified directly introduction: gaining control (2) eip is modified using call or jump instructions attacks usually rely on obtaining control over the eip otherwise the attacker can try to control memory pointed to by an existing function pointer a vulnerability is required to modify the eip or sensitive memory saved return addr or function pointer get altered introduction: gaining control (3) common issues used to gain control buffer overflows format string bugs integer overflows/underflows writing secure code: input validation input validation most vulnerabilities are a result of un-validated input always perform input validation could save you without knowing it examples: if it doesn’t have to be negative, ...
... bbv: stack overflow example: void foo(char *bar) { char c[12]; strcpy(c, bar); } int main(int argc, char **argv) { foo(argv[1]); } bbv: stack overflow before the stack overflow bbv: stack overflow after the ...

Handling Mozilla Security Bugs
s how the new security organizational structure will work, and how security-related mozilla bug reports will be handled. note that the focus of this new structure is restricted solely to addressing actual security vulnerabilities arising from problems in mozilla code. this work is separate from the work of developers adding new security features (cryptographically-based or otherwise) to mozilla, although obviously many of the same people will be involved in both sets of activities. background security vulnerabilities are different from other bugs, because their consequences are potentially so severe: users' private information (including financial information) could be exposed, users' data could be destroyed, and users' systems could be used as platforms for attacks on other systems. thus ...
...ticular person happens to be frequently added to the cc list for security-sensitive bugs, then they would be a good candidate to be invited to join the security bug group. (as described previously, once added to the security bug group, that person would then have automatic access to all bugs marked security-sensitive, without having to be explicitly added to the cc list for each one.) note that, although we intend to make it relatively simple for a new person to join the security bug group, and we are not limiting the size of the group to any arbitrary number, we do not want the group to expand without any limits whatsoever. we reserve the right to cap the membership at some reasonable level, either by refusing new applications or, if necessary and appropriate, by removing existing members o...

An Overview of XPCOM
it also provides much of the functionality that a development platform provides, such as: component management file abstraction object message passing memory management we will discuss the above items in detail in the coming chapters, but for now, it can be useful to think of xpcom as a platform for component development, in which features such as those listed above are provided. gecko although it is in some ways structurally similar to microsoft com, xpcom is designed to be used principally at the application level. the most important use of xpcom is within gecko, an open source, standards compliant, embeddable web browser and toolkit for creating web browsers and other applications. xpcom is the means of accessing gecko library functionality and embedding or extending gecko. thi...
...ndings), and there are efforts underway to build xpcom bindings for ruby and perl as well. writing components in other languages though you do not have access to some of the tools that xpcom provides for c++ developers (such as macros, templates, smart pointers, and others) when you create components in other languages, you may be so comfortable with the language itself that you can eschew c++ altogether and build, for example, python-based xpcom components that can be used from javascript or vice versa. see resources for more information about python and other languages for which support has been added in xpcom. all of the public interfaces in xpcom are defined using the xpidl syntax. type libraries and c++ header files are generated from these idl files, and the tool that generates th...

Preface
ian, though... creating xpcom components is meant for c++ developers. though you can create xpcom components in javascript and other languages, and though you might be able to follow along as a c programmer, the component implementation code is written in c++, and much of the discussion of how to make your codeinto an xpcom component starts from c++. you don't need to be a c++ expert, however. although basic ideas such as inheritance and encapsulation should be familar to you, wherever possible they are explained in the book as they are used. also many of the examples are in javascript, which is used in mozilla to access xpcom components as scriptable objects, and so familiarity with that language is useful as well. xpcom stands for the cross platform component object model. as this name ...
...s for the cross platform component object model. as this name implies, xpcom is similar to microsoft com. if you have any experience with this technology, much of it can be applied to xpcom. however, this book does not assume any prior knowledge of com - all of the basic com ideas will be introduced. this book provides a tutorial about building an xpcom component that controls browsing behavior. although, xpcom can be used in many environments which are unrelated to web browsing, xpcom's main client is gecko, an open source, standards compliant, embeddable web browser, where it's easiest and most practical to illustrate xpcom's functionality. a full description of the component in this tutorial can be found in the what we'll be working on section of the tutorial. despite what old documenta...

Components.utils.importGlobalProperties
g1, string2, ...]); parameters [string1, string2, ...] an array of strings. each string is the name of an object to import. example components.utils.import("resource://gre/modules/devtools/console.jsm"); components.utils.importglobalproperties(["atob", "btoa"]); var encoded = btoa("hello"); console.log(encoded); // "sgvsbg8=" console.log(atob(encoded)); // "hello" alternative methods if importglobalproperties does not support the targeted firefox version, here are some alternative methods to import these objects. import from jsm this method worked until blob and file were no longer apart of jsm modules. it is suspected this works up till firefox 35. this imports blob, file, along with the regular services. the reason this works is because js code modules a...
..., the hiddendomwindow objects cannot be accessed until it is fully loaded. therefore readystate must be checked, if it is not complete, then a load listener must be attached. once readystate is complete then the objects can be used. for example this is how to ues the file object. ...

Observer Notifications
indicate notifications you can monitor related to dom documents. topic subject data description chrome-document-global-created nsidomwindow null sent immediately after a chrome document window has been set up, but before any script code has been executed. this lets extensions inject api into chrome windows as needed (see nsidomglobalpropertyinitializer for an alternative method of doing this, which uses significantly less memory). data is intentionally left blank. content-document-global-created nsidomwindow origin sent immediately after a web content document window has been set up, but before any script code has been executed. this lets extensions inject api into content windows as needed (see nsidomglobalpropertyinitializer for an...
...rnative method of doing this, which uses significantly less memory). data is intentionally left blank. content-document-global-created nsidomwindow origin sent immediately after a web content document window has been set up, but before any script code has been executed. this lets extensions inject api into content windows as needed (see nsidomglobalpropertyinitializer for an alternative method of doing this). data is a string form of the origin (for use in security checks), eg "http://developer.mozilla.org". document-element-inserted document null sent immediately after the root element of a document has been created, but before executing any script on it. user-interaction-active nsidomwindow null sent once every 5000ms while ...

mozIRegistry
r-level services (tbd) to figure out the clsids they should use. the intent is that such services themselves be built on top of the new moziregistry interface. we are proposing a new "moziregistry" xpcom interface that provides the same level of function as is currently provided by the "netscape registry" implemented in libreg. nsrepository will be modified to use this interface, thereby enabling alternative registry implementations to be substituted at run/link time. there will be two registry interface implementations: one based solely on libreg (for "compatibility") and a fancier rdf-based one. open issues we have identified two open issues, neither of which appear to be so hard that it we won't be able to solve them in a timely fashion: if and when we remove what is currently a stati...
...implementations to be accessible. our current build/install process doesn't quite step up to these problems as of yet. there are some bootstrapping issues related to using the service manager to access the moziregistry interface. currently, nsiservicemanager requires a clsid to access a service which hardcodes the implementation of that service. this issue needs to be resolved in order to enable alternative moziregistry implementations or to permit other service implementations to be bound at runtime. i think a simple clsid "alias" mechanism (equivalent to com's "component categories" in some respects), along with the ability to "set" services (versus the service manager insisting on creating the services itself) would suffice. worst case, clients would obtain the moziregistry singleton via ...

mozIStorageService
ry as the original file. return value an nsifile object representing the newly-created backup file. opendatabase() opens a database connection to the specified file. the specified file is created if it does not already exist. if this method throws ns_error_file_corrupted, it's recommended that you call mozistorageservice.backupdatabasefile() to back up the database so that user data is not lost (although we have no way of recovering this data yet). consumers should check mozistorageconnection.connectionready to ensure that they can use the database. if this value is false, it is strongly recommended that the database be backed up with mozistorageconnection.backupdb() so user data is not lost. and then the database can be opened again with the mozistorageservice.opendatabase() method. wa...
...oviding access to the requested database. exceptions thrown ns_error_invalid_arg if astoragekey is invalid. openunshareddatabase() opens a database connection to the specified file without using a shared cache. if this method throws ns_error_file_corrupted, it's recommended that you call mozistorageservice.backupdatabasefile() to back up the database so that user data is not lost (although we have no way of recovering this data yet). each connection uses its own sqlite cache, which is inefficient, so you should use opendatabase() instead of this method unless you need a feature of sqlite that is incompatible with a shared cache, like virtual table and full text indexing support. if cache contention is expected, for instance when operating on a database from multiple threads, u...

nsIClipboardDragDropHooks
indicates to the operating system that drop is not allowed. on win32, this will change the cursor to "reject". allowstartdrag() prevents the drag from starting. boolean allowstartdrag( in nsidomevent event ); parameters event the dom event (drag gesture). return value true if the drag can proceed. otherwise, false to show the drag is canceled (does not go to operating system). oncopyordrag() alters the flavors or data presented to the os. used for drag and copy actions. because this can be called many times, it is highly recommended that the implementation be very efficient so user feedback is not negatively impacted. boolean oncopyordrag( in nsidomevent aevent, in nsitransferable trans ); parameters aevent the dom event (drag drop). null if triggered by copy. trans the transferabl...
...pyordrag( in nsidomevent aevent, in nsitransferable trans ); parameters aevent the dom event (drag drop). null if triggered by copy. trans the transferable holding the list of flavors and the data for each flavor. return value true to indicate that copy/drag can proceed. otherwise, false to indicate that the copy/drag is canceled, does not go to operating system. onpasteordrop() provide an alternative action to the built-in behavior when something is dropped on the browser or in an editor. boolean onpasteordrop( in nsidomevent event, in nsitransferable trans ); parameters event the dom event (drag drop); null if triggered by paste. trans the transferable holding the list of flavors and the data for each flavor. return value true to indicate the action was handled, do not perform...

nsIConsoleService
essage message); void logstringmessage(in wstring message); void registerlistener(in nsiconsolelistener listener); void reset(); void unregisterlistener(in nsiconsolelistener listener); methods getmessagearray() to obtain an array of all logged messages. obsolete since gecko 19 (firefox 19 / thunderbird 19 / seamonkey 2.16)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void getmessagearray( [array, size_is(count)] out nsiconsolemessage messages, out pruint32 count ); parameters messages an array of logged messages. count the number of messages in the array. if no messages are logged, this function will return a count of 0, b...
... logging a message with additional information to include other information an nsiconsolemessage object must be used. in this example nsiscripterror, which implements nsiconsolemessage, is used to include information about the source file and line number of the error. function mylogtoconsole(amessage, asourcename, asourcel...

nsIDOMMozTouchEvent
g, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget relatedtargetarg, in unsigned long streamidarg); attributes attribute type description streamid unsigned long a unique identifier for each finger, so that each finger's ...
...e corresponding moztouchdown and moztouchup events. methods initmoztouchevent() initializes the touch event. void initsimplegestureevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget relatedtargetarg, in unsigned long streamidarg ); parameters streamidarg the value to assign to the streamid attribute; this uniquely identifies the finger generating the touch events. see also mouse gesture events touch events event ...

nsIDownloadManager
ed in the past and is stored in the database. nsidownload getdownload( in unsigned long aid ); parameters aid the unique id of the download. return value the download with the specified id. exceptions thrown ns_error_not_available the download is not in the database. onclose() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. called when the download manager front end is closed. useful for third party managers to let us know when they've closed. void onclose(); parameters none. open() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) ope...
...nt end. void open( in nsidomwindow aparent, in nsidownload adownload ); parameters aparent the parent, or opener, of the front end. adownload a download to pass to the manager window. useful if, for example, you want the window to select a certain download. openprogressdialogfor() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. opens an individual progress dialog displaying progress for the download. void openprogressdialogfor( in nsidownload adownload, in nsidomwindow aparent, in boolean acanceldownloadonclose ); parameters adownload the download object to display progress for, as ...

nsIFaviconService
ill return a uri that will result in the image. in most cases, this is an annotation uri. for chrome, this will do nothing and return the input uri. no validity checking is done. if you pass an icon uri that we've never seen, you'll get back a uri that references an invalid icon. the moz-anno protocol handler's special case for "favicon" annotations will resolve invalid icons to the default icon, although without caching. for invalid chrome uris, you'll get a broken image. nsiuri getfaviconlinkforicon( in nsiuri afaviconuri ); parameters afaviconuri the uri of an icon in the favicon service. return value returns a uri that will load the desired icon. this is not the uri of the icon as set on the page, but a uri that will give you the data out of the favicon service. for a normal ...
... for a web page. for chrome, the output will be the same as the input. for chrome, the output will be the same as the input. no validity checking is done. if you pass an icon uri that we've never seen, you'll get back a uri that references an invalid icon. the moz-anno protocol handler's special case for "favicon" annotations will detect most invalid icons and it will resolve to the default icon, although without caching. for invalid chrome uris, you'll get a broken image. isfailedfavicon() this method checks to see if this favicon is in the failed favicon cache. boolean isfailedfavicon( in nsiuri afaviconuri ); parameters afaviconuri the uri of an icon in the favicon service. can be null. return value returns true if the favicon is in the failed cache, meaning you probably shoul...

nsIFile
ory at the position represented by the nsifile and create, move or copy items in the filesystem. an nsifile can be retrieved by either instantiating an nsilocalfile using a platform specific path string or by using cross-platform locations retrieved from the directory service. all methods with string parameters have two forms. the preferred form operates on utf-16 encoded characters strings. an alternate form operates on characters strings encoded in the "native" charset. a string containing characters encoded in the native charset cannot be safely passed to javascript via xpconnect. therefore, the utf-16 forms are scriptable, but the "native methods" are not. in addition, the native form cannot deal with files whose name contains characters outside the default system code page on windows. ...
...hat an attempt was made to remove a directory that is not empty. ns_error_file_access_denied indicates that an attempt was made to remove a file in a way that exceeded your permissions. details depend on your file system and how its permissions work. remarks all string-valued methods and attributes have two forms. the preferred form operates on utf-16 (unicode) encoded character strings. the alternate form operates on character strings encoded in the "native" multibyte character set. the native character encoding is defined as the single-byte character encoding used with the standard fopen function on the host system. the native character encoding is determined using platform specific methods. as of gecko 1.7, it is utf-8 on mac os x. on linux and other unix platforms, it is the value r...

nsILocalFileMac
f the followlinks attribute. if the file object is an alias and followlinks is true, returns the target of the alias. if followlinks is false, returns the unresolved alias file. fsspec getfsspec(); parameters none. return value the fsspec of the file object. native code only!inittoappwithcreatorcode obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. init this object to point to an application having the given creator code. if this app is missing, this will fail. it will first look for running application with the given creator. void inittoappwithcreatorcode( in ostype aappcreator ); parameters aappcreator the sign...
...ithcfurl( in cfurlref acfurl ); parameters acfurl the corefoundation url. native code only!initwithfsref init this object with an fsref. note: supported only for xp_macosx. void initwithfsref( [const] in fsrefptr afsref ); parameters afsref the native fsref. native code only!initwithfsspec obsolete since gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. init this object with an fsspec legacy method - leaving in place for now. void initwithfsspec( [const] in fsspecptr afilespec ); parameters afilespec the native file spec. ispackage() boolean ispackage(); parameters none. return value true if a directory is determine...

nsIProtocolProxyService
pass pr_uint32_max to specify the default timeout value, causing nsiproxyinfo::failovertimeout to be assigned the default value. afailoverproxy specifies the next proxy to try if this proxy fails. this parameter may be null. return value an nsiproxyinfo object. getfailoverforproxy() if the proxy identified by aproxyinfo is unavailable for some reason, this method may be called to access an alternate proxy that may be used instead. as a side-effect, this method may affect future result values from resolve/asyncresolve as well as from getfailoverforproxy. nsiproxyinfo getfailoverforproxy( in nsiproxyinfo aproxyinfo, in nsiuri auri, in nsresult areason ); parameters aproxyinfo the proxy that was unavailable. auri the uri that was originally passed to resolve/asyncresolve. ...
... the proxy that was unavailable. auri the uri that was originally passed to resolve/asyncresolve. areason the error code corresponding to the proxy failure. this value may be used to tune the delay before this proxy is used again. the proxy that was unavailable. return value an nsiproxyinfo object or null for a direct connection. exceptions thrown ns_error_not_available if there is no alternate proxy available. registerfilter() this method may be used to register a proxy filter instance. each proxy filter is registered with an associated position that determines the order in which the filters are applied (starting from position 0). when resolve/asyncresolve is called, it generates a list of proxies for the given uri, and then it applies the proxy filters. the filters have the o...

nsIRequest
the request when opened. this means that things like authorization tokens or cookie headers should not be added. note: this will prevent proxy authentications from working, so use this flag with caution. methods cancel() cancels the current request. this will close any open input or output streams and terminate any async requests. users should normally pass ns_binding_aborted, although other errors may also be passed. the error passed in will become the value of the status attribute. implementations must not send any notifications (for example via nsirequestobserver) synchronously from this function. similarly, removal from the load group (if any) must also happen asynchronously. requests that use nsistreamlistener must not call ondataavailable anymore after cancel has b...
.... return value true if the request has yet to reach completion. resume() resumes the current request. this may have the effect of re-opening any underlying transport and will resume the delivery of data to any open streams. void resume(); parameters none. suspend() suspends the current request. this may have the effect of closing any underlying transport (in order to free up resources), although any open streams remain logically opened and will continue delivering data when the transport is resumed. calling cancel() on a suspended request must not send any notifications (such as onstoprequest) until the request is resumed. note: some implementations are unable to immediately suspend, and may continue to deliver events already posted to an event queue. in general, callers should be...

nsISelection
collapsetoend(); void collapsetostart(); boolean containsnode(in nsidomnode node, in boolean partlycontained); void deletefromdocument(); void extend(in nsidomnode parentnode, in long offset); void extendnative(in nsidomnode parentnode, in long offset); native code only! ...
...e only!extendnative void extendnative( in nsinode parentnode, in long offset ); parameters parentnode offset getrangeat() returns the nsidomrange at the specified index. nsidomrange getrangeat( in long index ); parameters index return value the nsidomrange requested modify() modifies the selection. note that the parameters are case-insensitive. void modify( in domstring alter, in domstring direction, in domstring granularity ); parameters alter can be one of { "move", "extend()" } "move" collapses the selection to the end of the selection and applies the movement direction/granularity to the collapsed() selection. "extend()" leaves the start of the selection unchanged, and applies movement direction/granularity to the end of the selection. ...

nsISelection3
content/base/public/nsiselection3.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 2.0 obsolete gecko 8.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in gecko 8.0 this interface was merged into the nsiselection interface. ...
...om: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in gecko 8.0 this interface was merged into the nsiselection interface. method overview void modify(in domstring alter, in domstring direction, in domstring granularity); methods modify() modifies the selection. note that the parameters are case-insensitive. void modify( in domstring alter, in domstring direction, in domstring granularity ); parameters alter can be one of { "move", "extend" } "move" collapses the selection to the end of the selection and applies the movement direction/granularity to the collapsed selection. "extend" leaves the start of the selection unchanged, and applies movement direction/granularity to the end of the selection. direction ...

nsITreeView
a string of space-separated property names. example your function will not be provided with a properties array. (this is one way of detecting the version at run-time). simply return a string of space-separated property names. for example: getrowproperties: function(index) { return "dummy"; } obsolete since gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19)this feature is obsolete. ...
...ex) { return "dummy"; } obsolete since gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. ...

nsIWebBrowserChrome3
embedding/browser/webbrowser/nsiwebbrowserchrome3.idlscriptable an extension to nsiwebbrowserchrome2. 1.0 66 introduced gecko 2.0 inherits from: nsiwebbrowserchrome2 last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview astring onbeforelinktraversal(in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); methods onbeforelinktraversal() determines the appropriate target for a link. astring onbeforelinktraversal( in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters originaltarget the original link target. linkuri link destination uri. linknode link dom node. isapptab whether or not the li...
...ring onbeforelinktraversal( in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters originaltarget the original link target. linkuri link destination uri. linknode link dom node. isapptab whether or not the link is in an application tab. return value a new link target, if appropriate. otherwise returns originaltarget. see also nsiwebbrowserchrome2 ...

nsIXPCScriptable
here are no properties left to enumerate. jsenumerate_destroy this function should destroy the opaque iterator state previously allocated in statep by this function when enum_op was jsenumerate_init. statep an in/out pointer to a jsval whose meaning depends on the value of enum_op. idp an in/out pointer to a jsid whose meaning depends on the value of enum_op. return value this should (although does not need to) return pr_true to indicate success or must return pr_false to indicate failure. newresolve() this method is called when the want_newresolve flag is set. when this method is called, xpconnect is attempting to resolve a lazy property named by id on obj. the js engine will check if the property named by id is defined after this method has been called. this is very similar to...
...e or index of the property being accessed as a jsval. flags the flags that describe the access to the property named by id. see js_lookupproperty for the flags and their meaning. objp an out parameter that, on success, points to the jsobject that the property named by id has been defined on. if the property named by id was not defined, this should be set to null. return value this should (although does not need to) return pr_true to indicate success or must return pr_false to indicate failure. convert() prbool convert( in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint32 type, in jsvalptr vp ); parameters wrapper cx obj type vp return value finalize() void finalize( in nsixpconnectwrappednative wrapper, in j...

Reference Manual
c/c++ casts by-pass |nscomptr|s machinery and cause leaks... nsresult rv; nscomptr<nsifoo> foo = ...; // ... rv = getfoo( (nsifoo**)&foo ); rv = getfoo( &(nsifoo*)foo ); // sure, they compile; but now you leak. to help prevent this, we are trying to make the first form, above, illegal by making operator& private. see bug 59414. implementation details and debugging machinery although it is a class, nscomptr has no virtual methods, and therefore, no vtable or vptr. because a few key routines are factored out into a common non-template base class, the actual underlying pointer is stored as an nsisupports* (except in debug builds where nscap_feature_debug_ptr_types is turned on). it is because of these factored routines that nscomptr users must link with the xpcom library. ...
...mporary so we // don't stomp on |p| nsidomnode* temp = p; temp->getnext(&p); ns_release(temp); } // safe iterating with |nscomptr|... nscomptr<nsidomnode> p = ...; while ( p ) { // ... // introduce a temporary so we // don't stomp on |p| nscomptr<nsidomnode> temp = p; temp->getnext(getter_addrefs(p)); } although the nscomptr parallel is easy to understand, it suffers from doing one extra addref and one extra release compared to the raw pointer scheme. a slight transformation makes the code uglier, but (possibly negligibly) more efficient. // safe, efficient, iterating with |nscomptr|... nscomptr<nsidomnode> p = ...; while ( p ) { // ... nsidomnode* next; p->ge...

Using nsIDirectoryService
ion, of course, doesn't need to know who the providers are. as a caller of the service, you never deal with the providers, only the service. defined locations the nsiproperties keywords that you will use to get locations are defined in two places. os and xpcom level nsdirectoryservicedefs.h these locations are provided by xpcom, are constant with the system, and and should not need customization. although you will not customize these locations, you may need to tell xpcom where its /bin directory is. this is done by passing a directory to ns_initxpcom or, for embedding, as the first parameter to ns_initembedding. the location of the components folder and the components registry, among other things, are relative to the /bin directory. if mozilla's components directory is not in the same directo...
...serviceprovider and it provides these locations. there are some cases in embedding in which distinct user profiles are not needed; however, prefs and history and such are needed. in this case, the nsidirectoryserviceprovider implementation at mozilla/profile/dirserviceprovider/ can be used. if it is used, it is used instead of the profile service, thus saving some footprint. customizing locations although you can change locations one at a time by using the nsiproperties interface of nsdirectoryservice, you can also install your own nsidirectoryserviceprovider to control them en masse. to do this for application-level locations, create a provider based on appfilelocprovider. this object has to implement the nsisupports and nsidirectoryserviceprovider interfaces. it does not need to be a compon...

Mozilla technologies
mozilla has several technologies used as components of its projects. these are documented here. accessibility api implementation detailsthese pages contain documentation on mozilla specific implementation details of assistive technology apis.animated png graphicsapng is an extension of the portable network graphics (png) format, adding support for animated images. apng is a simpler alternative to mng, providing a spec suitable for the most common usage of animated images on the internet.docshelldocshell is the second iteration of what originally started out as webshell. at the moment, the transition from webshell to docshell is not fully completed, but the long-term goal is to remove webshell and switch over entirely to docshell.embedded dialog apifeed content access apifirefox ...
...omponent object model, similar to microsoft com. it has multiple language bindings, allowing xpcom components to be used and implemented in javascript, java, and python in addition to c++.xpidlxpidl is an interface description language used to specify xpcom interface classes.xray visiongecko runs javascript from a variety of different sources and at a variety of different privilege levels.xslt 2.0although xslt 2.0 is not natively supported in firefox, it is possible via saxon-b (java) or, more recently, saxon-ce (javascript) to perform xslt 2.0.xtfthe extensible tag framework (xtf) allows adding support for new namespaces using xpcom components to mozilla (written in javascript or c++). for example, the mozilla xforms project uses xtf to add support for the xforms namespace. ...

Index
bird this page provides some examples for using gloda. see creating a gloda message query for more examples. 31 gloda indexing this page provides a big-picture summary of what the indexer does; please see the source for nitty-gritty details or if this page seems to be wrong. glodaindexer provides the core indexing logic. glodamsgindexer has the message-specific stuff, although the actual attribute-providers are found in glodaexplicitattr and glodafundattr. glodaabindexer has the limited address book support. 32 index index found 72 pages: 33 ldap support administration, enterprise, thunderbird this document is intended to "fill in the gaps" about how enterprise customers can leverage and customize ldap support in mozilla t...
...iew of the related interfaces. 92 /common_thunderbird_extension_techniques">common thunderbird extension techniques thunderbird no summary! 93 access stringbundle from overlay thunderbird no summary! 94 access thunderbird window areas thunderbird to access particular parts of the thunderbird window you can use these helper methods. an alternative to these methods is to directly access the element by it's id as in the detect when a folder opens example. 95 access window missing, thunderbird the window object represents the window of the thunderbird application as well as the currently opened tabs. you can do many things with the window object, such as accessing the height or width of the window/tab or setting i...

The libmime module
uperclass) is to simply extract them from the superclass's object. but note that you cannot get at methods by indirecting through object->class->superclass: that will only work to one level, and will go into a loop if some subclass tries to continue on this method. the easiest way to do this is to make use of the mime_superclass macro that was defined at the top of the file, as shown below. the alternative to that involves typing the literal name of the direct superclass of the class defined in this file, which will be a maintenance headache if the class hierarchy changes. if you use the mime_superclass idiom, then a textual change is required in only one place if this class's superclass changes. static void foobar_finalize (mimeobject *object) { ((mimeobjectclass*)&m...
...wrong!! ...

Working with windows in chrome code
ing opened or pass a callback function, as described below. you can get a window object from a document using document.defaultview. content windows when a xul window contains a widget capable of displaying a page, such as <browser> or <iframe>, the document in that widget is, naturally, separate from the document of the chrome window itself. there also is a window object for each sub-document, although there's no window in a common sense for the sub-document. the same holds for chrome windows opened inside a tab of <tabbrowser>. the elements above the chrome document opened in the tab are separate from your chrome document. the following two subsections describe how to cross chrome-content boundaries in either way, i.e. accessing elements which are ancestors of your chrome document, or a...
...ress dialog. using window.opener. the opener property returns its window's opener; that is, the window object that opened it. if we're sure the window that opened the progress dialog declares the canceloperation function, we can use window.opener.canceloperation() to notify it, like this: <button label="cancel" oncommand="opener.canceloperation(); close();" /> using a callback function. alternatively, the opener window can pass a callback function to the progress dialog in the same way we passed the status string in the previous example: function oncancel() { alert("operation canceled!"); } ... window.opendialog( "chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress: 50, progress: 10}, oncancel ); the p...

Standard OS Libraries
the dll/so/etc file you make must be shipped with your add-on. standard libraries offer the advantage of not having to ship anything. they are already available on the operating system for you. you just need to supply the path to appropriate files and set up the proper types of values/arguments in the js-ctypes code. ...
...objc - objective-c js-ctypes snippets that can be copied and pasted to scratchpad android android runs on java and can be used by js-ctypes through the jni libraries. thankfully all the js-ctypes was abstracted away into jni.jsm. undrestanding js-ctypes is important as arrays and other features used in jni.jsm will require us to create arrays from the types available to the ctypes.jsm module. although jni is done completely through js-ctypes, a jsm was created to abstract away the js-ctypes so developers can focus on the jni aspect. therefore elaboration on this technique is not done in the js-ctypes section but it is done in the jni.jsm article. this article links to a fully funcitonal demo that can be copied and pasted into scratchpad, as a quick reference here is the link to that demo:...

CData
ins invalid encoded character, no exception is thrown. string readstringreplacemalformed(); parameters none. return value a new string object that is a copy of the original string contents. invalid encoded characters will be replaced by �(u+fffd). ...
... return char16_val; } if (!jschar) { try { var char8_val = stringptr.readstring(); console.info('stringptr.readstring():', char8_val); return char8_val; } catch (ex if ex.message.indexof('malformed utf-8 character sequence at offset ') == 0) { console.warn('ex of offset utf8 read error when trying to do readstring so using alternative method, ex:', ex); return readjscharstring(); } } else { return readjscharstring(); } } ...

Plug-in Basics - Plugins
n of all api functions is the same on all platforms. where this varies, the reference entry for the function in the reference section describes the difference. plug-ins and platform independence a plug-in is a dynamic code module that is native to the specific platform on which the browser is running. it is a code library, rather than an application or an applet, and runs only from the browser. although plug-ins are platform-specific, the plug-in api is designed to provide the maximum degree of flexibility and to be functionally consistent across all platforms. this guide notes platform-specific differences in coding for the ms windows, mac os x, and unix platforms. you can use the plug-in api to write plug-ins that are media type driven and provide high performance by taking advantage of ...
...and enhance the gecko core functionality by providing support for new data types. the plug-in file type depends on the platform: ms windows: .dll (dynamic link library) files unix: .so or .dso (shared objects) files mac os x: ppc/x86/universal loadable mach-o bundle windowed and windowless plug-ins you can write plug-ins that are drawn in their own native windows or frames on a web page. alternatively, you can write plug-ins that do not require a window to draw into. using windowless plug-ins extends the possibilities for web page design and functionality. note, however, that plug-ins are windowed by default, because windowed plug-ins are in general easier to develop and more stable to use. a windowed plug-in is drawn into its own native window on a web page. windowed plug-ins are...