JS_IsStopIteration
this article covers features introduced in spidermonkey 31 determine whether the value is a stopiteration exception or not. syntax // added in spidermonkey 42 bool js_isstopiteration(js::value v); // obsolete since spidermonkey 42 bool js_isstopiteration(jsval v); name type description v js::value the value to check. description js_isstopiteration returns true if v is stopiteration, otherwise false. ...
...lue is a stopiteration exception or not. syntax // added in spidermonkey 42 bool js_isstopiteration(js::value v); // obsolete since spidermonkey 42 bool js_isstopiteration(jsval v); name type description v js::value the value to check. description js_isstopiteration returns true if v is stopiteration, otherwise false. ...
...exception or not. syntax // added in spidermonkey 42 bool js_isstopiteration(js::value v); // obsolete since spidermonkey 42 bool js_isstopiteration(jsval v); name type description v js::value the value to check. description js_isstopiteration returns true if v is stopiteration, otherwise false. ...

JS_ThrowStopIteration
this article covers features introduced in spidermonkey js1.8 throw a stopiteration exception. syntax bool js_throwstopiteration(jscontext *cx); name type description cx jscontext * the context in which to throw the stopiteration object. description js_throwstopiteration throws the appropriate stopiteration object for the function currently executing in cx. in for…in and for each…in loops, the javascript engine can create an iterator object and call its .next method repeatedly, as described in new in javascript 1.7: iterators. the .next method may throw stopiteration when there are no more values left to iterate. the engine automatically catches the exception and exits the loop. jsclass.enumerate offers a simpler way to customize object...
...avascript engine can create an iterator object and call its .next method repeatedly, as described in new in javascript 1.7: iterators. the .next method may throw stopiteration when there are no more values left to iterate. the engine automatically catches the exception and exits the loop. ...
... create an iterator object and call its .next method repeatedly, as described in new in javascript 1.7: iterators. the .next method may throw stopiteration when there are no more values left to iterate. the engine automatically catches the exception and exits the loop. ...

Sensor.stop() - Web APIs
candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...

stop-color - SVG: Scalable Vector Graphics
the stop-color attribute indicates what color to use at a gradient stop. note: with respect to gradients, svg treats the transparent keyword differently than css. svg does not calculate gradients in pre-multiplied space, so transparent really means transparent black. so, specifying a stop-color with the value transparent is equivalent to specifying a stop-color with the value black and a stop-opacity with the value 0. note: as a presentation attribute, stop-color can be used as a css property. ...
...space, so transparent really means transparent black. so, specifying a stop-color with the value transparent is equivalent to specifying a stop-color with the value black and a stop-opacity with the value 0. note: as a presentation attribute, stop-color can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following element: <stop> usage notes value currentcolor | <color> <icccolor> default value black animatable yes currentcolor this keyword denotes the current fill color and can be specified in the same manner as within a <paint> specification for the fill and stroke attributes. <color> this value indicates a color value. <icccolor> this value refers to an icc color pro...
... currentcolor this keyword denotes the current fill color and can be specified in the same manner as within a <paint> specification for the fill and stroke attributes. <color> this value indicates a color value. <icccolor> this value refers to an icc color profile. specifications specification status comment scalable vector graphics (svg) 2the definition of 'stop-color' in that specification. candidate recommendation added a note that in svg the transparent keyword is treated differently than in css. scalable vector graphics (svg) 1.1 (second edition)the definition of 'stop-color' in that specification. recommendation initial definition ...

StopIteration - Archive of obsolete content
non-standard. the stopiteration object was a spidermonkey-specific feature and is removed in firefox 58+. for future-facing usages, consider using for..of loops and the iterator protocol. the stopiteration object was used to tell the end of the iteration in the legacy iterator protocol. do not use this ancient feature. syntax stopiteration description stopiteration is a part of legacy iterator protocol, and it will be removed at the same time as legacy iterator and legacy generator. examples stopiteration is thrown by iterator. var a = { x: 10, y: 20 }; var iter = iterator(a); console.log(iter.next()); // ["x", 10] console.log(iter.next()); // ["y", 20] console.log(iter.next()); // throws stopiteration throwing stopiteration. function f() { yield 1; yield 2; throw ...
...rator protocol, and it will be removed at the same time as legacy iterator and legacy generator. examples stopiteration is thrown by iterator. var a = { x: 10, y: 20 }; var iter = iterator(a); console.log(iter.next()); // ["x", 10] console.log(iter.next()); // ["y", 20] console.log(iter.next()); // throws stopiteration throwing stopiteration. function f() { yield 1; yield 2; throw stopiteration; yield 3; // this is not executed. } for (var n in f()) { console.log(n); // 1 // 2 } specifications non-standard. not part of any current standards document ...

Event.stopPropagation() - Web APIs
the stoppropagation() method of the event interface prevents further propagation of the current event in the capturing and bubbling phases. it does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. if you want to stop those behaviors, see the preventdefault() method. syntax event.stoppropagation(); parameters none. return value undefined. examples see example 5: event propagation in the examples chapter for a more detailed example of this method and event propagation in the dom. specifications specification status comment domthe definition of 'event.stoppropagation()' in that specification. living standard dom4the definition of 'event.stoppropagation()' in that specification. obso...
...e of this method and event propagation in the dom. specifications specification status comment domthe definition of 'event.stoppropagation()' in that specification. living standard dom4the definition of 'event.stoppropagation()' in that specification. obsolete document object model (dom) level 2 events specificationthe definition of 'event.stoppropagation()' in that specification. obsolete initial definition ...

MediaRecorder.stop() - Web APIs
the mediarecorder.stop() method (part of the mediarecorder api) is used to stop media capture. when the stop() method is invoked, the ua queues a task that runs the following steps: if mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps. if the mediarecorder.state is not "inactive", continue on to the next step. set the mediarecorder.state to "inactive" and stop capturing media. raise a dataavailable event containing the blob of data that has been gathered. raise a stop event. syntax mediarecorder.stop() errors an invalidstate error is raised if the stop() method is called while the mediarecorder object’s mediarecorder.state is "inactive" — it makes no sense to stop media capture if it is already stopped. example ... ...
... "inactive" and stop capturing media. raise a dataavailable event containing the blob of data that has been gathered. raise a stop event. syntax mediarecorder.stop() errors an invalidstate error is raised if the stop() method is called while the mediarecorder object’s mediarecorder.state is "inactive" — it makes no sense to stop media capture if it is already stopped. example ... stop.onclick = function() { mediarecorder.stop(); console.log("recorder stopped, data available"); } ... specifications specification status comment mediastream recordingthe definition of 'mediarecorder.stop()' in that specification. working draft initial definition ...

RTCRtpTransceiver.stopped - Web APIs
the read-only stopped property on the rtcrtptransceiver interface indicates whether or not the transceiver's associated sender and receiver have both been stopped. the transceiver is stopped if the stop() method has been called or if a change to either the local or the remote description has caused the transceiver to be stopped for some reason. syntax var isstopped = rtcrtptransceiver.stopped; value a boolean value which is true if the transceiver's sender will no longer send data, and its receiver will no longer receive data. if either or both are still at work, the result is false. usage notes this property is deprecated and will be removed in the future. instead, look at the value of currentdirection. its value is stopped if the transceiver has stopped. note: currently only fire...
...n value which is true if the transceiver's sender will no longer send data, and its receiver will no longer receive data. if either or both are still at work, the result is false. usage notes this property is deprecated and will be removed in the future. instead, look at the value of currentdirection. its value is stopped if the transceiver has stopped. note: currently only firefox implements stopped, and has not yet been updated to implement this change. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiver.stopped' in that specification. candidate recommendation ...

stop-opacity - SVG: Scalable Vector Graphics
the stop-opacity attribute defines the opacity of a given color gradient stop. the opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of the stop-color attribute. for stop-color values that donʼt include explicit opacity information, the opacity is treated as 1. note: as a presentation attribute, stop-opacity can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following element: <stop> usage notes value <opacity-value> default value 1 animatable yes <opacity-value> this value is either a <number> between 0 and 1 or a <percentage> value specifying the opacity of the color gradient stop. specifications ...
...owing element: <stop> usage notes value <opacity-value> default value 1 animatable yes <opacity-value> this value is either a <number> between 0 and 1 or a <percentage> value specifying the opacity of the color gradient stop. specifications specification status comment scalable vector graphics (svg) 2the definition of 'stop-opacity' in that specification. candidate recommendation refers to the definition in css colors 3, but allows percentage values. scalable vector graphics (svg) 1.1 (second edition)the definition of 'stop-opacity' in that specification. recommendation initial definition ...

stopEditing - Archive of obsolete content
if the shouldaccept parameter is true, the cell's label is changed to the edited 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. ...

HTMLIFrameElement.stop()
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the stop() method of the htmliframeelement interface is used to stop loading the content of the <iframe>. syntax instanceofhtmliframeelement.stop(); returns void. parameters none. examples stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); specification not part of any specification. ...

BluetoothRemoteGATTCharacteristic.stopNotifications() - Web APIs
the bluetoothremotegattcharacteristic.stopnotifications() method returns a promise to the bluetoothremotegattcharacteristic instance when there is no longer an active notification on it. syntax bluetoothremotegattcharacteristic.stopnotifications().then(function(bluetoothremotegattcharacteristic) { ... }) returns a promise. specifications specification status comment web bluetooththe definition of 'stopnotifications()' in that specification. draft initial definition. ...

Event.stopImmediatePropagation() - Web APIs
the stopimmediatepropagation() method of the event interface prevents other listeners of the same event from being called. if several listeners are attached to the same element for the same event type, they are called in the order in which they were added. if stopimmediatepropagation() is invoked during one such call, no remaining listeners will be called. syntax event.stopimmediatepropagation(); specifications specification status comment domthe definition of 'event.stopimmediatepropagation()' in that specification. living standard ...

PublicKeyCredentialRequestOptions.allowCredentials - Web APIs
allowcredentials is an optional property of the publickeycredentialrequestoptions dictionary which indicates the existing credentials acceptable for retrieval. this is an array of credential descriptors. note: publickeycredentialcreationoptions.excludecredentials may be used during the creation of the credentials in order to avoid creating new credentials for an existing user with existing public key credential. contrary to allowcredentials, it is used to filter out credentials. syntax allowcredentials = publickeycredentialrequestoptions.allowcredentials value an array whose elements are objects with the following properties: type a string describing type of public-key credential to be created. as of this writing (march 2019), only "public-key" may be used. id a buffersource ma...

PublicKeyCredentialRequestOptions.challenge - Web APIs
the challenge property of the publickeycredentialrequestoptions dictionary is a buffersource used as a cryptographic challenge. this is randomly generated then sent from the relying party's server. this value (among other client data) will be signed by the authenticator's private key and produce authenticatorassertionresponse.signature which should be sent back to the server as part of the response. note: when the credential is created with a navigator.credentials.create() call, the signature of the challenge is contained within authenticatorattestationresponse.attestationobject. note: a challenge will be at least 16 bytes long. syntax challenge = publickeycredentialrequestoptions.challenge value a buffersource which is at least 16 bytes long. contains a cryptographic challenge em...

PublicKeyCredentialRequestOptions.extensions - Web APIs
extensions, an optional property of the publickeycredentialrequestoptions dictionary, is an object providing the client extensions and their input values. extensions are values requesting additional processing by the client and by the authenticator. for instance, extensions may be used for: backward compatibility with the legacy fido js api, knowing the user verification process, etc. note: an analogous option exists for the creation operation (navigators.credentials.create()), see publickeycredentialcreationoptions.extensions. syntax extensions = publickeycredentialrequestoptions.extensions value an object with various keys and values. here is the current (as of march 2019) list of potential extensions which may be used during the registration operation. warning! as of jun...

PublicKeyCredentialRequestOptions.rpId - Web APIs
the rpid property, of the publickeycredentialrequestoptions dictionary, is an optional property which indicates the relying party's identifier as a usvstring. its value can only be a suffix of the current origin's domain. for example, if you are browsing on foo.example.com, the rpid value may be "example.com" but not "bar.org" or "baz.example.com". this property is optional. if it is not explicitely provided, the user agent will use the value of the current origin's domain. note: an analogous option exists for the creation operation (navigators.credentials.create()), see the id property of publickeycredentialcreationoptions.rp. syntax rpid = publickeycredentialrequestoptions.rpid value a usvstring for the identifier of the relying party. its value can only be a suffix of the current...

PublicKeyCredentialRequestOptions.timeout - Web APIs
the timeout property, of the publickeycredentialrequestoptions dictionary, represents an hint, given in milliseconds, for the time the script is willing to wait for the completion of the retrieval operation. this property is optional and merely is a hint which may be overridden by the browser. note: an analogous option exists for the creation operation (navigators.credentials.create()), see publickeycredentialcreationoptions.timeout. syntax timeout = publickeycredentialrequestoptions.timeout value a numerical hint, expressed in milliseconds, giving the time to wait for the creation operation to complete. examples var options = { challenge: new uint8array([/* bytes sent from the server */]), timeout: 6000 // wait a minute for the fetching operation // and mayb...

PublicKeyCredentialRequestOptions.userVerification - Web APIs
userverification is an optional property of the publickeycredentialrequestoptions. this is a string which indicates how the user verification should be part of the authentication process. note: an analogous option exists for the creation operation (navigators.credentials.create()), see the userverification property of publickeycredentialcreationoptions.authenticatorselection. syntax userverification = publickeycredentialrequestoptions.userverification value a string qualifying how the user verification should be part of the authentication process. the values may be: "required": user verification is required, the operation will fail if the response does not have the uv flag (as part of authenticatorassertionresponse.authenticatordata) "preferred": user verification is prefered, th...

Index - Web APIs
s that occur when a scriptprocessornode input buffer is ready to be processed. 181 audioscheduledsourcenode api, audio, audioscheduledsourcenode, interface, media, reference, web audio api, sound the audioscheduledsourcenode interface—part of the web audio api—is a parent interface for several types of audio source node interfaces which share the ability to be started and stopped, optionally at specified times. specifically, this interface defines the start() and stop() methods, as well as the onended event handler. 182 audioscheduledsourcenode.onended api, audio, audiobuffersourcenode, audioscheduledsourcenode, constantsourcenode, event handler, media, oscillatornode, property, web audio api, onended the onended event handler for the audioschedule...
...onstantsourcenode, event handler, media, oscillatornode, property, web audio api, onended the onended event handler for the audioscheduledsourcenode interface specifies an eventhandler to be executed when the ended event occurs on the node. ...
...de. this event is sent to the node when the concrete interface (such as audiobuffersourcenode, oscillatornode, or constantsourcenode) determines that it has stopped playing. 183 audioscheduledsourcenode.start() api, audio, audioscheduledsourcenode, media, method, needsexample, node, reference, web audio api, play, sound, start undefined 184 audioscheduledsourcenode.stop() api, audio, audioscheduledsourcenode, media, method, reference, web audio api, sound, stop the stop() method on audioscheduledsourcenode schedules a sound to cease playback at the specified time. if no time is specified, then the sound stops playing immediately. 185 audioscheduledsourcenode: ended event audio, html dom, htmlmediaelement, media, media streams api, refere...
...And 65 more matches

Gradients in SVG - SVG: Scalable Vector Graphics
e defined in a defs section as opposed to on a shape itself to promote reusability. linear gradient linear gradients change along a straight line. to insert one, you create a <lineargradient> node inside the definitions section of your svg file. ...
... a defs section as opposed to on a shape itself to promote reusability. linear gradient linear gradients change along a straight line. to insert one, you create a <lineargradient> node inside the definitions section of your svg file. ...
...on a shape itself to promote reusability. linear gradient linear gradients change along a straight line. to insert one, you create a <lineargradient> node inside the definitions section of your svg file. ...
...And 28 more matches

Using CSS gradients - CSS: Cascading Style Sheets
dients, then introduce features that are supported in all gradient types using linear gradients as the example, then move on to radial, conic and repeating gradients using linear gradients a linear gradient creates a band of colors that progress in a straight line. a basic linear gradient to create the most basic type of gradient, all you need is to specify two colors. these are called color stops. you must have at least two, but you can have as many as you want. <div class="simple-linear"></div> div { width: 120px; height: 120px; } .simple-linear { background: linear-gradient(blue, pink); } changing the direction by default, linear gradients run from top to bottom. you can change their rotation by specifying a direction. <div class="horizontal-gradient"></div> div { ...
... gradient functions: using more than two colors you don't have to limit yourself to two colors—you may use as many as you like! by default, colors are evenly spaced along the gradient. <div class="auto-spaced-linear-gradient"></div> div { width: 120px; height: 120px; } .auto-spaced-linear-gradient { background: linear-gradient(red, yellow, blue, orange); } positioning color stops you don't have to leave your color stops at their default positions. to fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values. if you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get ...
...ions, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values. if you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want. if you leave a location unspecified, the position of that particular color stop will be automatically calculated for you, with the first color stop being at 0% and the last color stop being at 100%, and any other color stops being half way between their adjacent color stops. <div class="multicolor-linear"></div> div { width: 120px; height: 120px; } .multicolor-linear { background: linear-gradient(to left, lime 28px, red 77%, cyan); } creating hard lines t...
...And 19 more matches

Applying styles and colors - Web APIs
nt. the parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2. ...
...rcles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2. for example: var lineargradient = ctx.createlineargradient(0, 0, 150, 150); var radialgradient = ctx.createradialgradient(75, 75, 0, 75, 75, 100); once we've created a canvasgradient object we can assign colors to it by using the addcolorstop() method. gradient.addcolorstop(position, color) creates a new color stop on the gradient object. the position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a css <color>, indicating the color the gradient should reach at that offset into the transition. you can add as many color stops to a gradient as you need. below is a ...
...e position of the color in the gradient, and the color argument must be a string representing a css <color>, indicating the color the gradient should reach at that offset into the transition. you can add as many color stops to a gradient as you need. below is a very simple linear gradient from white to black. var lineargradient = ctx.createlineargradient(0, 0, 150, 150); lineargradient.addcolorstop(0, 'white'); lineargradient.addcolorstop(1, 'black'); a createlineargradient example in this example, we'll create two different gradients. as you can see here, both the strokestyle and fillstyle properties can accept a canvasgradient object as valid input. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // create gradients var lingrad = ctx.createlinear...
...And 14 more matches

repeating-conic-gradient() - CSS: Cascading Style Sheets
60%) 10deg 30deg); ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction. <position> using the same length, order and keyterm values as the background-position property, the position defines center of the gradient. if omitted, the default value is center, meaing the gradient will be centered, . <angular-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (an <angle> along the gradient's circumference axis). the last color stop minus the first color-stop angle defines the size of the repeating gradient. <color-hint> th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. the length defines at which point between two c...
... description example repeating conic gradients include starbursts. ...
... first color-stop angle defines the size of the repeating gradient. <color-hint> th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. the length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. if omitted, the midpoint of the color transition is the midpoint between two color stops. note: rendering of color stops in css gradients follows the same rules as color stops in svg gradients. description example repeating conic gradients include starbursts. the result of the repeating-conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>. ...
...And 13 more matches

Video and Audio APIs - Learn web development
t...
... the <video> element contains two ...
..." data-icon="f" aria-label="fast forward"></button> </div> </div> the whole player is wrapped in a <div> element, so it can all be styled as one unit if needed. the <video> element contains two <source> elements so that different formats can be loaded depending on the browser viewing the site. the controls html is probably the most interesting: we have four <button>s — play/pause, stop, rewind, and fast forward. each <button> has a class name, a data-icon attribute for defining what icon should be shown on each button (we'll show how this works in the below section), and an aria-label attribute to provide an understandable description of each button, since we're not providing a human-readable label inside the tags. the contents of aria-label attributes are read out by screen...
...And 12 more matches

Using the Screen Capture API - Web APIs
n order to make this work, and if you're familiar with using getusermedia() to capture video from a camera, you'll find getdisplaymedia() to be very familiar. setup first, some constants are set up to reference the elements on the page to which we'll need access: the <video> into which the captured screen contents will be streamed, a box into which logged output will be drawn, and the start and stop buttons that will turn on and off capture of screen imagery. the object displaymediaoptions contains the mediastreamconstraints to pass into getdisplaymedia(); here, the cursor property is set to always, indicating that the mouse cursor should always be included in the captured media. note: some properties are not widely implemented and might not be used by the engine. cursor, for example, has...
...ns the mediastreamconstraints to pass into getdisplaymedia(); here, the cursor property is set to always, indicating that the mouse cursor should always be included in the captured media. note: some properties are not widely implemented and might not be used by the engine. cursor, for example, has limited support. ...
...aptured media. note: some properties are not widely implemented and might not be used by the engine. cursor, for example, has limited support. finally, event listeners are established to detect user clicks on the start and stop buttons. ...
...And 12 more matches

suffix - CSS: Cascading Style Sheets
criptor of the@counter-style rule specifies content that will be appended to the marker representation. syntax /* <symbol> values */ suffix: ""; suffix: ") "; suffix: url(bullet.png); values <symbol> specifies a <symbol> that is appended to the marker representation. it may be a <string>, <image>, or <custom-ident>. formal definition related at-rule@counter-styleinitial value". ...
...l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...And 11 more matches

conic-gradient() - CSS: Cascading Style Sheets
hsl(0, 100%, 50%) ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction. <position> using the same length, order and keyterm values as the background-position property, the position defines center of the gradient. if omitted, the default value is center, meaing the gradient will be centered, . <angular-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (an <angle> along the gradient's circumference axis). <color-hint> th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. the length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. if omitted, the ...
...op positions, (an <angle> along the gradient's circumference axis). <color-hint> th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. the length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. if omitted, the midpoint of the color transition is the midpoint between two color stops. note: rendering of color stops in css gradients follows the same rules as color stops in svg gradients. description as with any gradient, a conic gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to, or size of the <image> is set to something other than the element s...
...reate a conic gradient that repeats so as to fill a 360 degree rotation, use the repeating-conic-gradient() function instead. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, conic-gradient() won't work on background-color and other properties that use the <color> data type. why is it called a "conic" gradient? if the color stops are much lighter on one side than the other, it can look like a cone from above. composition of a conic gradient the conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient. with conic gradients, the colors transition as as if s...
...And 11 more matches

cross-fade() - CSS: Cascading Style Sheets
ercentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <image-tags> = ltr | rtl<image-src> = <url> | <string><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
... hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <image-tags> = ltr | rtl<image-src> = <url> | <string><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...| <string><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? ...
...And 11 more matches

linear-gradient() - CSS: Cascading Style Sheets
ribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...if specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or righ...
...de keywords does not matter. if unspecified, it defaults to to bottom. the values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg, respectively. the other values are translated into an angle. <angle> the gradient line's angle of direction. a value of 0deg is equivalent to to top; increasing values rotate clockwise from there. ...
...And 11 more matches

mask - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 11 more matches

shape-outside - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 11 more matches

additive-symbols - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 10 more matches

negative - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 10 more matches

pad - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 10 more matches

prefix - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 10 more matches

symbols - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 10 more matches

background - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 10 more matches

mask-image - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 10 more matches

repeating-linear-gradient() - CSS: Cascading Style Sheets
the repeating-linear-gradient() css function creates an image consisting of repeating linear gradients. it is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. the function's result is an object of the <gradient> data type, which is a special kind of <image>. 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 length of the gradient that repeats is the distance between the first and last color stop. if the first color does not have a color-stop-length, the color-stop-length defaults to 0. with each repetition, t...
...b 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 length of the gradient that repeats is the distance between the first and last color stop. if the first color does not have a color-stop-length, the color-stop-length defaults to 0. with each repetition, the positions of the color stops are shifted by a multiple of the length of the basic linear gradient. thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition. this can be altered with repeating the first color again as the last color. as with any gradient, a repeating linear gradient has no intrinsic dimensions; i.e., i...
...peating-linear-gradient(45deg, blue, red 33.3%); /* a repeating gradient going from the bottom right to the top left, starting blue and finishing red, repeating every 20px */ repeating-linear-gradient(to left top, blue, red 20px); /* a gradient going from the bottom to top, starting blue, turning green after 40%, and finishing red. this gradient doesn't repeat because the last color stop defaults to 100% */ repeating-linear-gradient(0deg, blue, green 40%, red); /* a gradient repeating five times, going from the left to right, starting red, turning green, and back to red */ repeating-linear-gradient(to right, red 0%, green 10%, red 20%); values <side-or-corner> the position of the gradient line's starting point. if specified, it consists of the word to and up to two keyw...
...And 10 more matches

Event reference
continuously every 350ms). drop an element is dropped on a valid drop target. media events event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed. canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. canplaythrough the browser estimates it can play the media up to its end without stopping for content buffering. complete the rendering of an offlineaudiocontext is terminated. durationchange the duration attribute has been updated. emptied the media has become empty; for example, this event is sent if the media has...
... loadeddata the first frame of the media has finished loading. loadedmetadata the metadata has been loaded. pause playback has been paused. play playback has begun. playing playback is ready to start after having been paused or delayed due to lack of data. ...
...ration completed. seeking a seek operation began. stalled the user agent is trying to fetch media data, but data is unexpectedly not forthcoming. suspend media data loading has been suspended. timeupdate the time indicated by the currenttime attribute has been updated. volumechange the volume has changed. waiting playback has stopped because of a temporary lack of data. progress events event name fired when abort progression has been terminated (not due to an error). error progression has failed. load progression has been successful. loadend progress has stopped (after "error", "abort", or "load" have been dispatched). loadstart progre...
...And 10 more matches

<feComponentTransfer> - SVG: Scalable Vector Graphics
tributes core attributes presentation attributes filter primitive attributes class style specific attributes in dom interface this element implements the svgfecomponenttransferelement interface. ...
... attributes presentation attributes filter primitive attributes class style specific attributes in dom interface this element implements the svgfecomponenttransferelement interface. ...
...on attributes filter primitive attributes class style specific attributes in dom interface this element implements the svgfecomponenttransferelement interface. ...
...And 10 more matches

nsIWebProgressListener
sage); constants state transition flags these flags indicate the various states that requests may transition through as they are being loaded. these flags are mutually exclusive. ...
...lags indicate the various states that requests may transition through as they are being loaded. these flags are mutually exclusive. for any given request, onstatechange() is called once with the state_start flag, zero or more times with the state_transferring flag or once with the state_redirecting flag, and then finally once with the state_stop flag. note: for document requests, a second state_stop is generated (see the description of state_is_window for more details). constant value description state_start 0x00000001 this flag indicates the start of a request. this flag is set when a request is initiated. the request is complete when onstatechange() is called for the same request with the state_stop flag set. state_redirecting 0x00000002 this f...
...ed for the same request with the state_stop flag set. state_redirecting 0x00000002 this flag indicates that a request is being redirected. the request passed to onstatechange() is the request that is being redirected. when a redirect occurs, a new request is generated automatically to process the new request. expect a corresponding state_start event for the new request, and a state_stop for the redirected request. state_transferring 0x00000004 this flag indicates that data for a request is being transferred to an end consumer. this flag indicates that the request has been targeted, and that the user may start seeing content corresponding to the request. state_negotiating 0x00000008 this flag is not used. ...
...And 9 more matches

Recording a media element - Web APIs
er interface to capture a mediastream generated by a hardware device, as returned by navigator.mediadevices.getusermedia(), you can also use an html media element (namely <audio> or <video>) as the source of the mediastream to be recorded. in this article, we'll look at an example that does just that. html content <p>click the "start" button to begin video recording for a few seconds. you can stop the video by clicking the creatively-named "stop" button. the "download" button will download the received data (although it's in a raw, unwrapped form that isn't very useful). </p> <br> let's start by looking at the key bits of the html. there's a little more than this, but it's just informational rather than being part of the core operation of the app. <div class="left"> <div id=...
...ent which displays the video preview; this is the video the user's camera sees. note that the autoplay attribute is used so that as soon as the stream starts to arrive from the camera, it immediately gets displayed, and the muted attribute is specified to ensure that the sound from the user's microphone isn't output to their speakers, causing an ugly feedback loop. <div class="right"> <div id="stopbutton" class="button"> stop </div> <h2>recording</h2> <video id="recording" width="160" height="120" controls></video> <a id="downloadbutton" class="button"> download </a> </div> on the right we see a stop button and the <video> element which will be used to play back the recorded video. notice that the playback panel doesn't have autoplay set (so the playback doesn't start as...
...g-top: 10px; } javascript content now let's have a look at the javascript code; this is where the majority of the action happens, after all! setting up global variables we start by establishing some global variables we'll need. let preview = document.getelementbyid("preview"); let recording = document.getelementbyid("recording"); let startbutton = document.getelementbyid("startbutton"); let stopbutton = document.getelementbyid("stopbutton"); let downloadbutton = document.getelementbyid("downloadbutton"); let logelement = document.getelementbyid("log"); let recordingtimems = 5000; most of these are references to elements we need to work with. the last, recordingtimems, is set to 5000 milliseconds (5 seconds); this specifies the length of the videos we'll record. utility functions nex...
...And 9 more matches

JavaScript Daemons Management - Archive of obsolete content
vascript timers or by a worker instantiation. here are some code snippets that simplify and abstract the management of daemons. the following daemons management framework is the major version of setinterval – a little framework. introduction sometimes a page uses dozens and dozens of animations. in such a condition it is difficult and unnatural to keep track of all events started and then to stop them when appropriate through the cleartimeout() function. a possible approach to solve this problem is to nest all the information needed by each animation to start, stop, etc. in different objects (daemons) and then to create a constructor for such a class of objects (daemon) in order to standardize and simplify the instantiation of them. note: a minimalistic version of it (minidaemon) is publ...
...*/ daemon.prototype; daemon.context.constructor = object; /* these propert...
... /* important! ...
...And 8 more matches

Looping code - Learn web development
king sure he has enough food to feed his family for the week. he might use the following loop to achieve this: a loop usually has one or more of the following features: a counter, which is initialized with a certain value — this is the starting point of the loop ("start: i have no food", above). a condition, which is a true/false test to determine whether the loop continues to run, or stops — usually when the counter reaches a certain value. this is illustrated by "have i got enough food?", above. let's say he needs 10 portions of food to feed his family. an iterator, which generally increments the counter by a small amount on each successive loop, until the condition is no longer true. we haven't explicitly illustrated this above, but we could think about the farmer being able ...
...ntil the condition is no longer true. we haven't explicitly illustrated this above, but we could think about the farmer being able to collect say 2 portions of food per hour. after each hour, the amount of food he has collected is incremented by two, and he checks whether he has enough food. if he has reached 10 portions (the point where the condition is no longer true, so the loop exits), he can stop collecting and go home. in pseudocode, this would look something like the following: loop(food = 0; foodneeded = 10) { if (food >= foodneeded) { exit loop; // we have enough food; let's go home } else { food += 2; // spend an hour collecting 2 more food // loop will then run again } } so the amount of food needed is set at 10, and the amount the farmer currently has is s...
...re we have: the keyword for, followed by some parentheses. inside the parentheses we have three items, separated by semi-colons: an initializer — this is usually a variable set to a number, which is incremented to count the number of times the loop has run. it is also sometimes referred to as a counter variable. a condition — as mentioned before, this defines when the loop should stop looping. this is generally an expression featuring a comparison operator, a test to see if the exit condition has been met. a final-expression — this is always evaluated (or run) each time the loop has gone through a full iteration. it usually serves to increment (or in some cases decrement) the counter variable, to bring it closer to the point where the condition is no longer true. so...
...And 8 more matches

Using the Browser API
content's state, interited by the htmliframeelement interface. note: an iframe enhanced by the browser api is commonly referred to as a "browser iframe". we'll be using this term throughout the current article, and other parts of the documentation. demo to demonstrate basic usage of this api, we have created a simple browser api demo that provides buttons allowing you to (re)load web pages, stop loading, move forward and back in history, and zoom in and out of the page. to run the demo, the best approach is to clone the github repo locally (or just download it directly if you don't do github), open webide, open the repo as a packaged app, then run it either on a simulator or a real device if you have one. in any case, you should at least download the repo and refer to the code as you...
...lt-in firefox os keyboard (although note that we haven't implemented anything sophisticated in this app, like autofilling the http://, etc.). when you press the keyboard's return button, the 'submit' event is fired, which we handle like this: urlform.addeventlistener('submit',function(e) { e.preventdefault(); browser.src = urlbar.value; urlbar.blur(); }); we first call preventdefault() to stop the form just submitting and reloading the page — which is really not what we want. we then set the browser iframe's src attribute to equal the value of the url bar, which causes the new url to be loaded in the iframe. finally, we call blur() on the url bar to stop focusing it, so the keyboard moves off the screen, allowing us to get our full screen view back. there's another event listener ad...
...om factor — which dictates the percentage to zoom in or out by. for example, 1.1 would mean "zoom in by 10%", and 0.9 would mean "zoom out by 10%". var zoomfactor = 1; ... ...
...And 8 more matches

imgIDecoderObserver
called when ther...
...called when there is more to paint. void ondataavailable( in imgirequest arequest, in boolean acu...
...called when there is more to paint. void ondataavailable( in imgirequest arequest, in boolean acurrentframe, [const] in nsintrect arect ); parameters arequest the request on which ...
...And 8 more matches

-webkit-box-reflect - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 8 more matches

background-image - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 8 more matches

Venkman Introduction - Archive of obsolete content
float button that lets you display the view in its own window, and a close button that puts the view away until you want to display it again, as seen in figure 2. the following section describes these views and their use within the interface as a whole. getting acquainted with venkman's user interface toolbar the toolbar is located at the top of the debugger. the toolbar contains icons for stop, continue, step over, step into, step out, profile, and pretty print commands. these commands should be self explanatory, with the possible exception of stop, which causes the debugger to stop when the next line of javascript is executed, and the profile button, which can be used to measure execution times for your scripts. when you enable profiling by clicking this button, a green checkmark appe...
...h causes the debugger to stop when the next line of javascript is executed, and the profile button, which can be used to measure execution times for your scripts. when you enable profiling by clicking this button, a green checkmark appears next to the button and profile data for every function is collected, and can be saved by choosing save profile data as... from the profile menu. figure 4. stop button waiting for execution also note that when you are currently executing javascript and click the stop button, the javascript stops immediately. if you are not running javascript and click the stop button, it will display "...", as in the figure 4, to indicate that the debugger will stop at the next instruction, but doesn't have anywhere to stop yet. ...
... menu. figure 4. stop button waiting for execution also note that when you are currently executing javascript and click the stop button, the javascript stops immediately. if you are not running javascript and click the stop button, it will display "...", as in the figure 4, to indicate that the debugger will stop at the next instruction, but doesn't have anywhere to stop yet. this quick stop mode reflects a common scenario in javascript debugging, which is to inspect and debug scripts while they are running, as on a page where elements are moved around dynamically with dhtml. you can also use commands available in the debug menu and from the console to stop at errors or at exceptions. ...
...And 7 more matches

Using Breakpoints in Venkman - Archive of obsolete content
y language is setting breakpoints. breakpoints are places in code where execution is suspended. when you set a breakpoint in a debugging application such as venkman, you can take advantage of the suspension to examine variables, objects, and other featues of the execution. this article describes breakpoints in javascript and how to use venkman to set and examine breakpoints. basic breakpoints the stop button and debugger keyword are useful features of the javascript debugger, but when you are debugging deep in code—especially code you have authored yourself and are responsible for troubleshooting—you're going to need breakpoints. types of breakpoints venkman has two types of breakpoints. the first, and most common, is called the "hard" breakpoint. a hard breakpoint represents an actual tra...
......
...included in the pseudocode of a compiled function. hard breakpoints can only exist in the context of a function currently "live" in the browser. hard breakpoints are the ones that actually stop program execution. the second type of breakpoint, the "future" breakpoint, represents a promise from venkman to set a hard breakpoint as soon as it is possible. future breakpoints are used when you want to stop in a script that has not yet been compiled. the most common use of future breakpoints is to stop in a "top level" script (script that executes outside of any function), or script that executes during the onload event of a page. when a script is loaded that matches the url of a future breakpoint, and has executable code at the specified line, venkman will automatically set a future breakpoint. exc...
...And 7 more matches

Anatomy of a video game - Game development
ns can be easily performed, even gpu-accelerated, with css animations and other tools included in the browser. there are a lot of them and they will make your life easier. building a better main loop in javascript there are two obvious issues with our previous main loop: main() pollutes the window object (where all global variables are stored) and the example code did not leave us with a way to stop the loop unless the whole tab is closed or refreshed. for the first issue, if you want the main loop to just run and you do not need easy (direct) access to it, you could create it as an immediately-invoked function expression (iife). /* * starting with the semicolon is in case whatever line of code above this example * relied on automatic semicolon insertion (asi). the browser could accidentall...
...ur main loop and immediately queue it for the next frame. it will not be attached to any object and main (or main() for methods) will be a valid unused name in the rest of the application, free to be defined as something else. note: in practice, it is more common to prevent the next requestanimationframe() with an if-statement, rather than calling cancelanimationframe(). for the second issue, stopping the main loop, you will need to cancel the call to main() with window.cancelanimationframe(). you will need to pass cancelanimationframe() the id token given by requestanimationframe() when it was last called. let us assume that your game's functions and variables are built on a namespace that you called mygame. expanding our last example, the main loop would now look like: /* * starting wit...
...whatever line of code above this example * relied on automatic semicolon insertion (asi). the browser could accidentally * think this whole example continues from the previous line. the leading semicolon * marks the beginning of our new line if the previous one was not empty or terminated. * * let us also assume that mygame is previously defined. ...
...And 7 more matches

border-image-source - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 7 more matches

content - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )<counter-style> = <counter-style-name> | symbols()where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <pe...
...And 7 more matches

mask-border-source - CSS: Cascading Style Sheets
l<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...rrentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...= <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 7 more matches

spreadMethod - SVG: Scalable Vector Graphics
y the x1, x2, y1 and y2 attributes. in the case of a radial gradient, the edges may be defined as outer and inner circles by the cx, cy and r (outer) and fx, fy and fr (inner) attributes. ...
...nd y2 attributes. in the case of a radial gradient, the edges may be defined as outer and inner circles by the cx, cy and r (outer) and fx, fy and fr (inner) attributes. ...
...of a radial gradient, the edges may be defined as outer and inner circles by the cx, cy and r (outer) and fx, fy and fr (inner) attributes. ...
...And 7 more matches

widget - Archive of obsolete content
t: if you do, you may have problems getting your add-on approved on amo. instead, keep the script in a separate file and load it using contentscriptfile. this makes your code easier to maintain, secure, debug and review. for example, suppose we want to implement a media player as an add-on. we could implement the main user interface as a widget hosting an array of buttons to control play/pause/stop functions. we can then use a content script to listen for clicks on those buttons. but because content scripts can't use the sdk's apis, we'll want the content script to send messages to the main add-on code, which can then implement the media player functions using the sdk. the widget's content is specified using html like this: <html> <body> <img src="play.png" id="play-button"> <i...
...ten for clicks on those buttons. but because content scripts can't use the sdk's apis, we'll want the content script to send messages to the main add-on code, which can then implement the media player functions using the sdk. the widget's content is specified using html like this: <html> <body> <img src="play.png" id="play-button"> <img src="pause.png" id="pause-button"> <img src="stop.png" id="stop-button"> </body> </html> we just include three icons, and assign an id to each one. this html file, and the icon files it references, are saved in the add-on's data directory. next, we write a content script that listens for click events on each icon and sends the corresponding message to the main add-on code: var play_button = document.getelementbyid("play-button"); play_butto...
...irectory. next, we write a content script that listens for click events on each icon and sends the corresponding message to the main add-on code: var play_button = document.getelementbyid("play-button"); play_button.onclick = function() { self.port.emit("play"); } var pause_button = document.getelementbyid("pause-button"); pause_button.onclick = function() { self.port.emit("pause"); } var stop_button = document.getelementbyid("stop-button"); stop_button.onclick = function() { self.port.emit("stop"); } we save this file in the add-on's data directory as "button-script.js". finally. in the add-on's "main.js" file, we create the widget, assign it the html file and the content script, and listen for events from the content script: const widgets = require("sdk/widget"); const data = req...
...And 6 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
cript fundamentals. objective: to understand asynchronous loops and intervals and what they are useful for. introduction for a long time, the web platform has offered javascript programmers a number of functions that allow them to asynchronously execute code after a certain time interval has elapsed, and to repeatedly execute a block of code asynchronously until you tell it to stop. these functions are: settimeout() execute a specified block of code once after a specified time has elapsed. setinterval() execute a specified block of code repeatedly with a fixed time delay between each call. requestanimationframe() the modern version of setinterval(). executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a...
...t mygreeting = settimeout(sayhi, 2000); that can be useful if you have a function that needs to be called both from a timeout and in response to an event, for example. but it can also just help keep your code tidy, especially if the timeout callback is more than a few lines of code. settimeout() returns an identifier value that can be used to refer to the timeout later, such as when you want to stop it. see clearing timeouts (below) to learn how to do that. passing parameters to a settimeout() function any parameters that you want to pass to the function being run inside the settimeout() must be passed to it as additional parameters at the end of the list. for example, you could refactor the previous function so that it will say hi to whatever person's name is passed to it: function sayh...
...let time = date.tolocaletimestring(); document.getelementbyid('demo').textcontent = time; } const createclock = setinterval(displaytime, 1000); just like settimeout(), setinterval() returns an identifying value you can use later when you need to clear the interval. clearing intervals setinterval() keeps running a task forever, unless you do something about it. ...
...And 6 more matches

Using the MediaStream Recording API - Web APIs
d transition smoothly into view: input[type=checkbox]:checked ~ aside { transform: translatex(0); } basic app setup to grab the media stream we want to capture, we use getusermedia(). we then use the mediarecorder api to record the stream, and output each recorded snippet into the source of a generated <audio> element so it can be played back. ...
...ia stream we want to capture, we use getusermedia(). we then use the mediarecorder api to record the stream, and output each recorded snippet into the source of a generated <audio> element so it can be played back. ...
... use getusermedia(). we then use the mediarecorder api to record the stream, and output each recorded snippet into the source of a generated <audio> element so it can be played back. ...
...And 6 more matches

fx - SVG: Scalable Vector Graphics
the fx attribute defines the x-axis coordinate of the focal point for a radial gradient. ...
... the fx attribute defines the x-axis coordinate of the focal point for a radial gradient. ...
...bute defines the x-axis coordinate of the focal point for a radial gradient. ...
...And 6 more matches

fy - SVG: Scalable Vector Graphics
the fy attribute defines the y-axis coordinate of the focal point for a radial gradient. ...
... the fy attribute defines the y-axis coordinate of the focal point for a radial gradient. ...
...bute defines the y-axis coordinate of the focal point for a radial gradient. ...
...And 6 more matches

SVG In HTML Introduction - SVG: Scalable Vector Graphics
overview this article and its associated example shows how to use inline svg to provide a background picture for a form. it shows how javascript and css can be used to manipulate the picture in the same way you would script regular html. ...
... overview this article and its associated example shows how to use inline svg to provide a background picture for a form. it shows how javascript and css can be used to manipulate the picture in the same way you would script regular html. ...
... overview this article and its associated example shows how to use inline svg to provide a background picture for a form. it shows how javascript and css can be used to manipulate the picture in the same way you would script regular html. ...
...And 6 more matches

Audio for Web games - Game development
ites, 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 and play, we have one larger audio file containing all the smaller audio snippets we need. to play a specific sound from the file, we just use the known start and stop times for each audio sprite. the advantage is that we can prime one piece of audio and have our sprites ready to go. to do this we can just play and instantly pause the larger piece of audio. you'll also reduce the number of server requests and save bandwidth. var myaudio = document.createelement("audio"); myaudio.src = "mysprite.mp3"; myaudio.play(); myaudio.pause(); you'll need to sample the...
... the advantage is that we can prime one piece of audio and have our sprites ready to go. to do this we can just play and instantly pause the larger piece of audio. you'll also reduce the number of server requests and save bandwidth. var myaudio = document.createelement("audio"); myaudio.src = "mysprite.mp3"; myaudio.play(); myaudio.pause(); you'll need to sample the current time to know when to stop. if you space your individual sounds by at least 500ms then using the timeupdate event (which fires every 250ms) should be sufficient. your files may be slightly longer than they strictly need to be, but silence compresses well. here's an example of an audio sprite player — first let's set up the user interface in html: <audio id="myaudio" src="https://udn.realityripple.com/samples/f0/2909c16...
...st 500ms then using the timeupdate event (which fires every 250ms) should be sufficient. your files may be slightly longer than they strictly need to be, but silence compresses well. ...
...And 5 more matches

repeating-radial-gradient() - CSS: Cascading Style Sheets
the repeating-radial-gradient() css function creates an image consisting of repeating gradients that radiate from an origin. it is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-gradient() . the function's result is an object of the <gradient> data type, which is a special kind of <image>. the source for this interactive example is stored in a github repository. ...
...ng-linear-gradient() . the function's result is an object of the <gradient> data type, which is a special kind of <image>. 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. with each repetition, the positions of the color stops are shifted by a multiple of the dimensions of the basic radial gradient (the distance between the last color stop and the first). thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition, which can be mitigated by repeating the first color as the last color. as with any gradient, a repeat...
... the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. note: early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively. use the standard keywords only, as some implementations have already dropped those older variants. <color-stop> a color-stop's <color> value, followed by an optional stop position (either a <percentage> or a <length> along the gradient's axis). a percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. percentage values in between are linearly positioned on the virtual gradient ray. formal sy...
...And 5 more matches

cx - SVG: Scalable Vector Graphics
the cx attribute define the x-axis coordinate of a center point. three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <radialgradient cx="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape. value <length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a geometry propert...
...css property for ellipses. radialgradient for <radialgradient>, cx defines the x-axis coordinate of the end circle for the radial gradient. ...
...lipses. radialgradient for <radialgradient>, cx defines the x-axis coordinate of the end circle for the radial gradient. ...
...And 5 more matches

cy - SVG: Scalable Vector Graphics
the cy attribute define the y-axis coordinate of a center point. three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <radialgradient cy="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape. value <length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a geometry p...
...css property for ellipses. radialgradient for <radialgradient>, cy defines the y-axis coordinate of the end circle for the radial gradient. ...
...lipses. radialgradient for <radialgradient>, cy defines the y-axis coordinate of the end circle for the radial gradient. ...
...And 5 more matches

r - SVG: Scalable Vector Graphics
the r attribute defines the radius of a circle. ...
... the r attribute defines the radius of a circle. ...
... the r attribute defines the radius of a circle. ...
...And 5 more matches

y1 - SVG: Scalable Vector Graphics
the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the top left corner of the bounding box of the sh...
...radientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the top left corner of the bounding box of the shape it is applied to. ...
...buts value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the top left corner of the bounding box of the shape it is applied to. ...
...And 5 more matches

y2 - SVG: Scalable Vector Graphics
the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the top right corner of the bounding box of the sha...
...gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the top right corner of the bounding box of the shape it is applied to. ...
...ibuts value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the top right corner of the bounding box of the shape it is applied to. ...
...And 5 more matches

Patterns - SVG: Scalable Vector Graphics
patterns patterns are arguably one of the more confusing fill types to use in svg. they're also very powerful, so they're worth talking about and getting at least a fundamental grasp on. like gradients, the <pattern> element should be put in the <defs> section of your svg file. ...
...ns are arguably one of the more confusing fill types to use in svg. they're also very powerful, so they're worth talking about and getting at least a fundamental grasp on. like gradients, the <pattern> element should be put in the <defs> section of your svg file. ...
...ore confusing fill types to use in svg. they're also very powerful, so they're worth talking about and getting at least a fundamental grasp on. like gradients, the <pattern> element should be put in the <defs> section of your svg file. ...
...And 5 more matches

nsIDOMEvent
g, out voidptr aiter); violates the xpcom interface guidelines void duplicateprivatedata(); native code only! nseventptr getinternalnsevent(); violates the xpcom interface guidelines boolean getpreventdefault(); deprecated since gecko 16.0 void initevent(in domstring eventtypearg, in boolean canbubblearg, in boolean cancelablearg); boolean isdispatchstopped(); violates the xpcom interface guidelines void preventbubble(); obsolete since gecko 24 void preventcapture(); obsolete since gecko 24 void preventdefault(); void serialize(in ipcmessageptr amsg, in boolean aserializeinterfacetype); violates the xpcom interface guidelines void settarget(in nsidomeventtarget atarget); native code only! v...
...if the event can bubble the value is true, else the value is false. read only. cancelable boolean used to indicate whether or not an event can have its default action preven...
...if the event can bubble the value is true, else the value is false. read only. cancelable boolean used to indicate whether or not an event can have its default action prevented. if the default action can be prevented...
...And 4 more matches

nsIMsgCloudFileProvider
pace available for this account in bytes. if this value is not known, returns -1. filespaceused long long readonly: the total amount of space used by this account. if this value is not known, returns -1. lasterror acstring readonly: the last error message received from the server. constants the following constants are used for the status codes passed to the onstoprequest functions of the nsirequestobserver's used by the asynchronous methods of nsimsgcloudfileprovider. constant value description offlineerr 0x80550014 returned when it appears that there is no active network connection. autherr 0x8055001e returned when authorizing has failed. uploaderr 0x8055311a returned when uploading has failed f...
...uploading has failed for an unknown reason. uploadwouldexceedquota 0x8055311b returned when uploading has failed because the user has exceeded their storage quota. uploadexceedsfilelimit 0x8055311c returned when uploading has failed because the file being uploaded is larger than the file size limit. uploadcanceled 0x8055311d returned when uploading has stopped because it was cancelled by the user. methods init() initializes an nsimsgcloudfileprovider to be associated with a particular account. this should probably be called immediately after instantiation. void init(in string aaccountkey); parameters uploadfile() starts a file upload for this account. aaccountkey the account key that this instance of the nsimsgcloudfileprovider sh...
...ccountkey); parameters uploadfile() starts a file upload for this account. aaccountkey the account key that this instance of the nsimsgcloudfileprovider should be associated with. void uploadfile(in nsilocalfile afile, in nsirequestobserver acallback); parameters afile the file to be uploaded. acallback the nsirequestobserver callback to receive request start and stop notices. urlforfile() returns the url for a file that has been uploaded. acstring urlforfile(in nsilocalfile afile); parameters afile the previously uploaded file to get the url for. return value the string representation of the url for the uploaded file. if the file was not uploaded with this instance of the nsimsgcloudfileprovider, returns undefined. cancelfileupload() cancels an...
...And 4 more matches

MailNews fakeserver
ll as append the '\r\n' to the response if not present. it will also properly queue all messages sent in pipelining mode and will present lines without any eol characters. in addition, it uses utf-8 as the transmission medium. the server presents the following api to the handler: <caption> server api </caption> name arguments returns description closesocket none nothing closes the socket and stops the test. setmultiline the new value of multiline nothing the value is a boolean, with true invoking multiline mode. it is off by default. extending a handler to provide different mechanisms is a process not defined here; please check the documentation of the corresponding handler for instructions. using fakeserver in xpcshell tests since there are three different components of fakeserver,...
...alternatively, one can wait for the timeout, which occurs after 3 minutes, so not closing connections would make the tests take unbearably long. the server provides the following api to xpcshell tests: <caption> nsmailserver xpcshell api </caption> n...
...nnections to be closed, possibly forcibly. alternatively, one can wait for the timeout, which occurs after 3 minutes, so not closing connections would make the tests take unbearably long. ...
...And 4 more matches

RTCRemoteOutboundRtpStreamStats.localId - Web APIs
tp describes statistics about the transmission(s) from the perspective of the remote peer, while inbound-rtp offers statistics about the incoming data from the local peer's perspective. you can examine, try out, and experiment with this example on glitch. example in this example, we have a pair of functions: the first, networkteststart(), captures an initial report, and the second, networkteststop(), captures a second report, then uses the two reports to output some information about the network conditions... xxx ... networkteststart() this function simply calls the rtcpeerconnection method getstats() to request an rtcstatsreport and store it in the variable startreport. let startreport; async function networkteststart(pc) { if (pc) { startreport = await pc.getstats(); } } giv...
...d getstats() to request an rtcstatsreport and store it in the variable startreport. let startreport; async function networkteststart(pc) { if (pc) { startreport = await pc.getstats(); } } given an rtcpeerconnection, pc, this calls its getstats() method to obtain a statistics report object, which it stores in startreport for use once the end-of-test data has been collected by networkteststop(). networkteststop() the networkteststop() function obtains a second report, endreport, then uses the two reports together to determine several... xxx ... finding paired statistics each statistics record of type remote-outbound-rtp (describing a remote peer's statistics about sending data to the local peer) has a corresponding record of type inbound-rtp which describes the local peer's perspe...
... return stats; } } return null; } since the rtcstatsreport is a javascript map, we can iterate over the map's values() to examine each of the rtcstats-based statistics records in the report until we find one that has the key property with the specified value. when a match is found, the statistics object is returned. if no match is found, the function returns null. the main networkteststop() function now let's look at the networkteststop() function itself. it takes as input the rtcpeerconnection being tested, calls getstats() to get a new rtcstatsreport with current statistics, then computes the results it's looking for, outputting those results as appropriate to the user by appending appropriate html to the contents of the <div> element whose class is stats-box. async function n...
...And 4 more matches

More Event Handlers - Archive of obsolete content
imilar property currenttarget holds the element that is currently having its event listeners handled. in the example below, currenttarget is always the vbox, whereas target would be the specific element, either the button or checkbox, that was activated. example 1 : source view <vbox oncommand="alert(event.currenttarget.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing. depending on how you attach the event listener to an element, there are different ways of doing this. recall that the capturing phase occurs before the bub...
...l likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing. depending on how you attach the event listener to an element, there are different ways of doing this. recall that the capturing phase occurs before the bubbling phase, so any capturing listeners will trigger before any bubbling listeners. if a capturing event stops the event propagation, none of the later capturing listeners, nor any of the bubbling listeners will ever receive notification about the events. to manually stop event propagation, call the event object's stoppropagation method, as in the following example. example 2 : source view <hbox id="outerbox"> <button id="okbutton" label="ok"/> </hbox> <script> function buttonpressed(event){ alert('...
...teners will ever receive notification about the events. to manually stop event propagation, call the event object's stoppropagation method, as in the following example. ...
...And 3 more matches

Advanced text formatting - Learn web development
= '<dl>\n <dt>bacon</dt>\n <dd>the glue that binds the world together.</dd>\n <dt>eggs</dt>\n <dd>the glue that binds the cake together.</dd>\n <dt>coffee</dt>\n <dd>the drink that gets the world running in the morning.</dd>\n <dd>a light brown color.</dd>\n</dl>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea...
... <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 150px; width: 95%"> <p>hello and welcome to my motivation page. ...
...; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<p>hello and welcome to my motivation page. ...
...And 3 more matches

HTML text fundamentals - Learn web development
} else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<h1>my short story</h1>\n<p>i am a statistician and my name is trish.</p>\n<p>my legs are made of cardboard and i am married to a fish.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value...
...'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; why do we need semantics? semantics are relied on everywhere around us—we rely on previous experience to tell us what the function of an everyday object is; when we see something, we know what its function will be. so, for example, we expect a red traffic light to mean "stop," and a green traffic light to mean "go." things can get tricky very quickly if the wrong semantics are applied. (do any countries use red to mean "go"? i hope not.) in a similar vein, we need 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 a...
...rea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value...
...And 3 more matches

nsIDOMWindowUtils
read only. exceptions thrown ns_error_not_available...
...ong long aouterwindowid ); parameters aouterwindowid the id of the outer window for which to return the window. return value an nsidomwindow object representing the outer window with the specified id; if no matching window is found, returns null. getpccountscriptcount() returns the number of scripts which profile information was constructed for. this should be used after a call to stoppccountprofiling(). long getpccountscriptcount(); parameters none. getpccountscriptsummary() returns a summary of the profile information for a script. this should be used after a call to stoppccountprofiling(). astring getpccountscriptsummary(in long ascript); parameters ascript index of the profiled script to get the profile summary for. should be less than getpccountscriptcount()...
...tscriptcount(). return value a json string summarizing the information profiled about the script. this includes counts for how often and in what ways the script executed. the structure of the json is unspecified and may vary between versions of firefox. getpccountscriptcontents() returns detailed information about the profile information for a script. this should be used after a call to stoppccountprofiling(). astring getpccountscriptcontents(in long script); parameters ascript index of the profiled script to get the profile contents for. should be less than getpccountscriptcount(). return value a json string with all profile information accumulated for the script. this includes the text of the script and details about its internal representation in spidermonkey, and count...
...And 3 more matches

nsIWebNavigation
docshell/base/nsiwebnavigation.idlscriptable defines an interface for navigating the web. it provides methods and attributes to direct an object to navigate to a new location, stop or restart an in process load, or determine where the object has previously gone. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) this interface is implemented by the following components: * @mozilla.org/browser/shistory-internal;1 * @mozilla.org/browser/shistory;1 * @mozilla.org/embedding/browser/nswebbrowser;1 * @mozilla.org/docshell;1 gecko 1.9.2 note in gecko 1.9.2 (firefox 3.6), the @mozilla.org/webshell;1 component no longer exists; you need to use @mozilla.org/docshell;1 instead. method overview void goback void goforward void gotoinde...
...bshell;1 component no longer exists; you need to use @mozilla.org/docshell;1 instead. method overview void goback void goforward void gotoindex( in long index ) void loaduri(in wstring uri , in unsigned long loadflags , in nsiuri referrer , in nsiinputstream postdata, in nsiinputstream headers) void reload(in unsigned long reloadflags) void stop(in unsigned long stopflags) constants load flags constant value description load_flags_mask 65535 this flag defines the range of bits that may be specified. load_flags_none 0 this is the default value for the load flags parameter. load_flags_is_refresh 16 this flag specifies that the load should have the semantics of an html me...
... load_flags_bypass_proxy 512 this flag specifies that any intermediate proxy caches should be bypassed (that is, that the content should be loaded from the origin server). load_flags_charset_change 1024 this flag specifies that a reload was triggered as a result of detecting an incorrect character encoding while parsing a previously loaded document. load_flags_stop_content 2048 if this flag is set, stop() will be called before the load starts and will stop both content and network activity (the default is to only stop network activity). effectively, this passes the stop_content flag to stop(), in addition to the stop_network flag. load_flags_from_external 4096 a hint this load was prompted by an external program: take care! ...
...And 3 more matches

Mail composition back end
used as a numerator and aprogressmax as a denominator for a message sent percentage) onstatus the onstatus gives the listener status updates for the current operation. ...
...aprogressmax as a denominator for a message sent percentage) onstatus the onstatus gives the listener status updates for the current operation. ...
...t operation. ns_imethod onstatus(const char *amsgid, - the message id for the message being sent const prunichar *amsg) = 0; - a message concerning the status of the send operation onstopsending the onstopsending interface is called when the sending operation has completed. this will be called in the case of both success and failure. ...
...And 3 more matches

Examples of web and XML development using the DOM - Web APIs
10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5: event propagation this example demonstrates how events fire and are handled in the dom in a very simple way. when the body of this html document loads, an event listener is registered with the top row of the table. ...
...the following: body p #lumpy example 5: event propagation this example demonstrates how events fire and are handled in the dom in a very simple way. when the body of this html document loads, an event listener is registered with the top row of the table. the event listener handles the event by executing the function stopevent, which changes the value in the bottom cell of the table. ...
...opagation this example demonstrates how events fire and are handled in the dom in a very simple way. when the body of this html document loads, an event listener is registered with the top row of the table. the event listener handles the event by executing the function stopevent, which changes the value in the bottom cell of the table. however, stopevent also calls an event object method, event.stoppropagation, which keeps the event from bubbling any further up into the dom. note that the table itself has an onclick event handler that ought to display a message when the table is clicked. but the stopevent method has stopped propagation, and so after the data in the table is updated, the event phase is effectively ended, and an alert box is displayed to confirm this. <!doctype html> <html la...
...And 3 more matches

KeyboardEvent: code values - Web APIs
"numpadenter" 0xe01d "controlright" "controlright" 0xe01e "unidentified" "launchmail" 0xe01f "unidentified" "" 0xe020 "audiovolumemute" "audiovolumemute" 0xe021 "launchapp2" "" 0xe022 "mediaplaypause" "mediaplaypause" 0xe023 "unidentified" "" 0xe024 "mediastop" "mediastop" 0xe025 ～ 0xe02b "unidentified" "" 0xe02c "unidentified" "eject" 0xe02d "unidentified" "" 0xe02e "audiovolumedown" "volumedown" (was "volumedown" until chrome 50) 0xe02f "unidentified" "" 0xe030 "audiovolumeup" "volumeup" (was "volumeup" ...
...sleft" 0xe05c "metaright" "osright" 0xe05d "contextmenu" "contextmenu" 0xe05e "power" "" 0xe05f ～ 0xe064 "unidentified" "" 0xe065 "browsersearch" "browsersearch" 0xe066 "browserfavorites" "browserfavorites" 0xe067 "browserrefresh" "browserrefresh" 0xe068 "browserstop" "browserstop" 0xe069 "browserforward" "browserforward" 0xe06a "browserback" "browserback" 0xe06b "launchapp1" "" 0xe06c "launchmail" "" 0xe06d "launchmediaplayer" ("mediaselect" prior to firefox 49) "" 0xe06e ～ 0xe0f0 "unidentified" "" 0xe0f1 (hanja key with korean keyboard layout) ...
... 0x007f "pause" "pause" 0x0080 "unidentified" "" 0x0081 "numpadcomma" "" 0x0082 "lang1" "hangulmode" 0x0083 "lang2" "hanja" 0x0084 "intlyen" "intlyen" 0x0085 "osleft" "osleft" 0x0086 "osright" "osright" 0x0087 "contextmenu" "contextmenu" 0x0088 "browserstop" "cancel" 0x0089 "again" "" 0x008a "props" "" 0x008b "undo" "undo" 0x008c "select" "" 0x008d "copy" "copy" 0x008e "open" "" 0x008f "paste" "paste" 0x0090 "find" "" 0x0091 "cut" "cut" 0x0092 "help" "help" 0x0093 "unidentified" "" ...
...And 3 more matches

LocalMediaStream - Web APIs
nting a stream of data being generated locally (such as by getusermedia(). however, getusermedia() now returns a mediastream instead, and this interface has been removed from the specification. warning: this interface is no longer available in any mainstream browser. ...
...data being generated locally (such as by getusermedia(). however, getusermedia() now returns a mediastream instead, and this interface has been removed from the specification. warning: this interface is no longer available in any mainstream browser. do not use localmediastream; you need to update any code that does use it as soon as possible or your content or application will stop working. ...
...ation. warning: this interface is no longer available in any mainstream browser. do not use localmediastream; you need to update any code that does use it as soon as possible or your content or application will stop working. see stopping a video stream in mediastreamtrack to learn how. all other functionality is found in mediastream. the primary reason for this interface to exist was to add a stop() method to its mediastream parent interface. however, control over playback of media has been moved to the individual mediastreamtrack objects, so this is no longer necessary. ...
...And 3 more matches

Simple color animation - Web APIs
« previousnext » a very basic color animation created using webgl, performed by clearing the drawing buffer with a different random color every second. color animation with clear this example provides a simple illustration of color animation with webgl, as well as user interaction. the user can start, stop and restart the animation by clicking the button. this time we put the webgl function calls within a timer event handler. a click event handler additionally enables the basic user interaction of starting and stopping the animation. the timer and the timer handler function establish the animation loop, a set of drawing commands that are executed at a regular period (typically, every frame; in this case, once per second). <p>a simple webgl program that shows color animat...
...dow.removeeventlistener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation. var timer; // click event handlers. ...
...ation, false); // a variable to hold a timer that drives the animation. var timer; // click event handlers. ...
...And 3 more matches

Advanced techniques: Creating and sequencing audio - Web APIs
o be built upon. if you are about to embark on building something more complex, tone.js would be a good place to start. however, we want to demonstrate how to build such a demo from first principles, as a learning exercise. note: you can find the source code on github as step-sequencer; see the step-sequencer running live also. the interface consists of master controls, which allow us to play/stop the sequencer, and adjust the bpm (beats per minute) to speed up or slow down the "music". there are four different sounds, or voices, which can be played. each voice has four buttons, which represent four beats in one bar of music. when they are enabled the note will sound. when the instrument plays, it will move across this set of beats and loop the bar. each voice also has local controls, wh...
...m a repository of wavetables, which can be found in the web audio api examples from google chrome labs. the oscillator now we can create an oscillatornode and set its wave to the one we've created: function playsweep() { let osc = audioctx.createoscillator(); osc.setperiodicwave(wave); osc.frequency.value = 440; osc.connect(audioctx.destination); osc.start(); osc.stop(audioctx.currenttime + 1); } controlling amplitude this is great, but wouldn't it be nice if we had an amplitude envelope to go with it? let's create a simple one so we get used to the methods we need to create an envelope with the web audio api. let's say our envelope has attack and release. we can allow the user to control these using range inputs on the interface: <label for="attack">attac...
...all you really need to know is that it returns the time we are at right now. the "pulse" — low frequency oscillator modulation great, now we've got our sweep! let's move on and take a look at that nice pulse sound. we can achieve this...
...And 3 more matches

Migrating from webkitAudioContext - Web APIs
context.creategainnode(); var delay = context.createdelaynode(); var js = context.createjavascriptnode(1024); you can simply rename the methods to look like this: // new method names var gain = context.creategain(); var delay = context.createdelay(); var js = context.createscriptprocessor(1024); the semantics of these methods remain the same in the renamed versions. ...
...s = context.createjavascriptnode(1024); you can simply rename the methods to look like this: // new method names var gain = context.creategain(); var delay = context.createdelay(); var js = context.createscriptprocessor(1024); the semantics of these methods remain the same in the renamed versions. ...
...method names var gain = context.creategain(); var delay = context.createdelay(); var js = context.createscriptprocessor(1024); the semantics of these methods remain the same in the renamed versions. changes to starting and stopping nodes in webkitaudiocontext, there are two ways to start and stop audiobuffersourcenode and oscillatornode: the noteon() and noteoff() methods, and the start() and stop() methods. ...
...And 3 more matches

WindowOrWorkerGlobalScope.setInterval() - Web APIs
: 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.getelementbyid('my_box'); oelem.style.color = oelem.style.color == 'red' ? 'blue' : 'red'; ...
...erval example</title> <script> var nintervid; function changecolor() { nintervid = setinterval(flashtext, 1000); } function flashtext() { var oelem = document.getelementbyid('my_box'); oelem.style.color = oelem.style.color == 'red' ? 'blue' : 'red'; // oelem.style.color == 'red' ? 'blue' : 'red' is a conditional or ternary operator. ...
... = document.getelementbyid('my_box'); oelem.style.color = oelem.style.color == 'red' ? 'blue' : 'red'; // oelem.style.color == 'red' ? 'blue' : 'red' is a conditional or ternary operator. } function stoptextcolor() { clearinterval(nintervid); } </script> </head> <body onload="changecolor();"> <div id="my_box"> <p>hello world</p> </div> <button onclick="stoptextcolor();">stop</button> </body> </html> example 3: typewriter simulation the following example simulates typewriter by first clearing and then slowly typing content into the nodelist that matches a specified group of selectors. <!doctype html> <html> <head> <meta charset="utf-8" /> <title>javascript typewriter - mdn example</title> <script> function typewriter (sselector, nrate) { fun...
...And 3 more matches

<input type="button"> - HTML: Hypertext Markup Language
submit and reset forms, respectively). to make buttons do anything, you have to write javascript code to do the work. ...
...addeventlistener() is then used to establish a function that will be run when click ...
.../p> const button = document.queryselector('input'); const paragraph = document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value = 'stop machine'; paragraph.textcontent = 'the machine has started!'; } else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } the script gets a reference to the htmlinputelement object representing the <input> in the dom, saving this refence in the variable button. addeventlistener() is then used to establish a function that will be run when click events occur on the button. adding keyboard shortcuts to buttons keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger ...
...And 3 more matches

fr - SVG: Scalable Vector Graphics
the fr attribute defines the radius of the focal point for the radial gradient. ...
... the fr attribute defines the radius of the focal point for the radial gradient. ...
... fr attribute defines the radius of the focal point for the radial gradient. ...
...And 3 more matches

gradientTransform - SVG: Scalable Vector Graphics
ng the implicit transformation necessary to convert from object bounding box units to user space. ...
...ransformation necessary to convert from object bounding box units to user space. ...
...vert from object bounding box units to user space. ...
...And 3 more matches

SVG and CSS - SVG: Scalable Vector Graphics
making sure that you scroll to get all of it: <svg width="600px" height="600px" viewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>svg demonstration</title> <desc>mozilla css getting started - svg demonstration</desc> <defs> <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <g id="outer-petals"> <g cl...
... </g> </g> </g> </g> </svg> make a new css file, style8.css. ...
... </g> </g> </g> </svg> make a new css file, style8.css. ...
...And 3 more matches

Communicating using "port" - Archive of obsolete content
" window.alert(message);" + "})"; tabs.on("ready", function(tab) { worker = tab.attach({ contentscript: alertcontentscript }); worker.port.emit("alert", "message from the add-on"); }); tabs.open("http://www.mozilla.org"); in total, the port object defines four functions: emit(): emit a message. on(): listen to a message. removelistener(): stop listening to a message. once(): listen to only the first occurrence of a message. accessing port accessing port in the content script note that the global self object is completely different from the self module, which provides an api for an add-on to access its data files and id. in the content script the port object is available as a property of the global self object. thus, to emit a mes...
...tion. by supplying a target for this function in the page-mod's constructor you can register to receive messages from the content script, and take a reference to the worker so as to emit messages to the content script. ...
...-on code: self.port.on("mymessage", function handlemymessage(mymessagepayload) { // handle the message }); in the main add-on code (in this case a panel instance), to listen for "mymessage" sent from a a content script: panel.port.on("mymessage", function handlemymessage(mymessagepayload) { // handle the message }); port.removelistener() you can use port.on() to listen for messages. to stop listening for a particular message, use port.removelistener(). this takes the same two parameters as port.on(): the name of the message, and the name of the listener function. this example uses the action button api, which is only available from firefox 29 onwards. for example, here's an add-on that creates a page-worker and a button. the page-worker loads http://en.wikipedia.org/wiki/chalk a...
...And 2 more matches

Index - Archive of obsolete content
mally mark where you should be inserting your own code. 303 techniques . 304 promises add-ons, examples, snippets, async no summary! 305 updating addons broken by private browsing changes add-ons, reference after reading this document, contact josh matthews with further questions or clarifications, or file a bug if your extension has stopped working due to a change described here and you are having trouble updating it. 306 using dependent libraries in extension components add-ons, extensions extensions with binary components sometimes need to depend on other shared libraries (for example, libraries provided by a third party). the firefox extension system does not provide automatic support for loading these dep...
... no summary! 683 using gdb on wimpy computers if your computer has less than 256 mb of memory, your computer will become unhappy as gdb loads mozilla's shared libraries. the solution to this is to delay loading shared libraries until they are actually needed. however, you need to make sure that the base libraries like libc and pthreads are loaded before you tell gdb to stop loading shared libraries. if you don't allow those libraries to be loaded then gdb will not be able to properly debug threads on linux. mozilla uses pthreads for its networking library so you need to be able to work in a threaded environment. the best way to do this is to set a breakpoint in main, let the program run until main and then turn off automatic library loading. from there you can allow...
...o summary! 1312 showpane xul methods, xul reference no summary! 1313 showpopup needshelp, needsrewrite, xul methods, xul reference no summary! 1314 sizeto xul methods, xul reference no summary! 1315 startediting xul methods, xul reference no summary! 1316 startfind no summary! 1317 stop xul methods, xul reference no summary! 1318 stopediting xul methods, xul reference no summary! 1319 swapdocshells xul methods, xul reference no summary! 1320 syncsessions needshelp, xul methods, xul reference no summary! 1321 timedselect xul methods, xul reference no summary! 1322 togglehighli...
...And 2 more matches

Anonymous Content - Archive of obsolete content
in the dom level 2 events specification. events flow through the final transformed content model after all elements have been repositioned through the usage of children tags. whenever events flow from an anonymous element in a bound element's scope to 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. e...
...as far as the bound element is concerned, it retains focus throughout the two events. anonymous content can receive focus when the user tabs through the document. ...
...ement 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). if the bound element is focusable, then the event is retargeted. if not, then the event is stopped. if anonymous content underneath a focusable bound element blurs and anonymous content also underneath the bound element takes focus, then the blur and focus events are both stopped. as far as the bound element is concerned, it retains focus throughout the two events. anonymous content can receive focus when the user tabs through the document. the same rules apply. if the anonymous content is focusable, it can be tabbed into, but if the bound element is not focusable, the event will be stopped before it reaches the bound element. in html4 the tabindex attribute can be u...
...And 2 more matches

Theme changes in Firefox 2 - Archive of obsolete content
ton:active #downloads-button:active #forward-button[buttondown="true"] #history-button:active #home-button:active #mail-button #mail-button:active #mail-button[disabled="true"] #mail-button[open="true"] #new-tab-button:active #new-tab-button[checked="true"] #new-window-button:active #new-window-button[checked="true"] #paste-button:active #print-button:active #reload-button:active #stop-button:active .messagebutton .messageimage .messagetext browsermessage toolbar[iconsize="small"] #bookmarks-button:active toolbar[iconsize="small"] #copy-button:active toolbar[iconsize="small"] #cut-button:active toolbar[iconsize="small"] #downloads-button:active toolbar[iconsize="small"] #history-button:active toolbar[iconsize="small"] #home-button:active toolbar[iconsize="small"] #ma...
...button:active toolbar[iconsize="small"] #mail-button[disabled="true"] toolbar[iconsize="small"] #mail-button[open="true"] toolbar[iconsize="small"] #new-tab-button:active toolbar[iconsize="small"] #new-window-button:active toolbar[iconsize="small"] #paste-button:active toolbar[iconsize="small"] #print-button:active toolbar[iconsize="small"] #reload-button:active toolbar[iconsize="small"] #stop-button:active toolbar[mode="icons"] .toolbarbutton-text toolbar[mode="text"] .toolbarbutton-1 > .toolbarbutton-text toolbar[mode="text"] .toolbarbutton-1 > stack > toolbarbutton > .toolbarbutton-text toolbar[mode="text"] .toolbarbutton-icon the following styles need to be added to your theme to be compatible with firefox 2: #back-button .toolbarbutton-menubutton-dropmarker #back-button:...
...over:active #history-button[checked="true"] #home-button:hover #home-button:hover:active #new-tab-button:hover #new-tab-button:hover:active #new-window-button:hover #new-window-button:hover:active #paste-button:hover #paste-button:hover:active #print-button:hover #print-button:hover:active #reload-button:hover #reload-button:hover:active #searchbar[empty="true"] .searchbar-textbox #stop-button:hover #stop-button:hover:active #urlbar-icons-spacer #urlbar-spacer #urlbar[level="high"] #lock-icon:active #urlbar[level="high"] #lock-icon:hover #urlbar[level="low"] #lock-icon:active #urlbar[level="low"] #lock-icon:hover .autocomplete-treebody::-moz-tree-cell(suggesthint) .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolautocompletecomment) .autocomplete-treebo...
...And 2 more matches

Accessible multimedia - Learn web development
for the video player, in the html: <section class="player"> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> <div class="controls"> <button class="playpause">play</button> <button class="stop">stop</button> <button class="rwd">rwd</button> <button class="fwd">fwd</button> <div class="time">00:00</div> </div> </section> javascript basic setup we've inserted some simple control buttons below our video. these controls of course won't do anything by default; to add functionality, we will use javascript. we will first need to store references to each of the controls — ad...
.../div> </div> </section> javascript basic setup we've inserted some simple control buttons below our video. these controls of course won't do anything by default; to add functionality, we will use javascript. ...
...pt basic setup we've inserted some simple control buttons below our video. these controls of course won't do anything by default; to add functionality, we will use javascript. ...
...And 2 more matches

Message manager overview
utes are: childcount : contains the number of children (typically, browser windows) getchildat() : get the child at the given index loadframescript() : load a frame script into every tab in the browser broadcastasyncmessage() : send a message to frame scripts addmessagelistener() : start listening to a specific message from all frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster how to access access it using components.classes: // chrome script let globalmm = cc["@mozilla.org/globalmessagemanager;1"] .getservice(ci.nsimessagelistenermanager); you can also access it as the mm property of services.j...
... childcount : contains the number of children (typically, browser tabs) getchildat() : get the child at the given index loadframescript() : load a frame script into every tab in this window broadcastasyncmessage() : send a message to all frame scripts in this window addmessagelistener() : start listening to a specific message from frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster how to access you can access it as a property of the browser window: // chrome script let windowmm = window.messagemanager; browser message manager note that in this context, "browser" refers to the xul <browser> obj...
... the script instance loaded into a specific tab by using the browser message manager. ...
...And 2 more matches

HTML parser threading
ling nshtml5parser::parse(nsiuri*, nsirequestobserver*, void*, nsdtdmode). that method call doesn't yet cause anything to be parsed, though. actual network data is passed to an nsistreamlistener. nshtml5streamparser is the nsistreamlistener implementation obtained by calling nsistreamlistener* nshtml5parser::getstreamlistener(). the nsistreamlistener methods (onstartrequest, ondataavailable and onstoprequest) are called on the main thread. onstartrequest does all sorts of initialization on the main thread. at that point, nothing has happened on the parser thread yet and the nshtml5streamparser lives fully on the main thread. passing data to the parser thread nshtml5streamparser gets some of its methods called on the main thread and some called on the parser thread. the method implementations a...
...tialization on the main thread. at that point, nothing has happened on the parser thread yet and the nshtml5streamparser lives fully on the main thread. passing data to the parser thread nshtml5streamparser gets some of its methods called on the main thread and some called on the parser thread. the method implementations assert which thread they are supposed to be called on. ondataavailable and onstoprequest on the main thread post runnables on to the parser thread. there runnables obtain mtokenizermutex and call dodataavailable and dostoprequest, repectively, on the parser thread. these two methods along with timerflush (discussed later) are the entry points from the parser thread event loop into nshtml5streamparser. the runnables hold mtokenizermutex for the entire duration of the dodataavai...
...mtokenizermutex protects most data structures on nshtml5streamparser from concurrent access. the runnables need to keep the nshtml5streamparser instance alive, so they have to addref it. ...
...And 2 more matches

Download
promise finalize([optional] boolean aremovepartialdata); properties attribute type description canceled read only boolean indicates that the download has been canceled. this property can become true, then it can be reset to false when a canceled download is restarted. this property becomes true as soon as the cancel() method is called, though the stopped property might remain false until the cancellation request has been processed. temporary files or part files may still exist even if they are expected to be deleted, until the stopped property becomes true. contenttype string the mime type of the download, for example "text/plain", or null if the mime type is not available. this property may be populated or changed...
...perty) instead. saver read only downloadsaver saver object associated with this download. source read only downloadsource source of this download. starttime read only date indicates the start time of the download. when the download starts, this property is set to a valid date object. the default value is null before the download starts. stopped read only boolean indicates that the download never started, has been completed successfully, failed, or has been canceled. this property becomes false when a download is started for the first time, or when a failed or canceled download is restarted. succeeded read only boolean this propery is true if the download has been completed successfully. target read onl...
...trytokeeppartialdata property is still true when the download is restarted, partial data will be retained during the new download attempt. promise removepartialdata(); parameters none. promise resolves to undefined when the partial data has been successfully removed. whensucceeded() returns a promise that is resolved as soon as this download finishes successfully, even if the download was stopped and restarted meanwhile. you can use this property for scheduling download completion actions in the current session, for downloads that are controlled interactively. if the download is not controlled interactively, you should use the promise returned by the start() method instead, to check for success or failure. promise whensucceeded(); parameters none. promise resolves to undefined w...
...And 2 more matches

Hacking Tips
elp(os) will give brief help on just the members of that "namespace". getting the bytecode of a function (from js shell) the shell has a small function named dis to dump the bytecode of a function with its source notes. without arguments, it will dump the bytecode of its caller. js> function f () { return 1; } js> dis(f); flags: loc op ----- -- main: 00000: one 00001: return 00002: stop source notes: ofs line pc delta desc args ---- ---- ----- ------ -------- ------ 0: 1 0 [ 0] newline 1: 2 0 [ 0] colspan 2 3: 2 2 [ 2] colspan 9 getting the bytecode of a function (from gdb) in jsopcode.cpp, a function named js::disassembleatpc can print the bytecode of a script. some variants of this function such as js::dumpscript etc are conveni...
...nable the unwinder, the current version of gdb (7.10.1) does not flush the backtrace. therefore, the jit frames do not appear until you settle on the next breakpoint. to work-around this issue you can use the recording feature of gdb, to step one instruction, and settle back to where you came from with the following set of gdb commands: (gdb) record full (gdb) si (gdb) record goto 0 (gdb) record stop if you have a core file, you can use the gdb unwinder the same way, or do everything from the command line as follow: $ gdb -ex 'enable unwinder .* spidermonkey' -ex 'bt 0' -ex 'thread apply all backtrace' -ex 'quit' out/dist/bin/js corefile the gdb unwinder is supposed to be loaded by dist/bin/js-gdb.py and load python scripts which are located in js/src/gdb/mozilla under gdb. if gdb does n...
...add an instruction which abuse the stack pointer to store an immediate value (the lir id) to a location which would never be generated by any sane compiler. thus when dumping the assembly under gdb, this kind of instructions would be easily noticeable. viewing the mirgraph of ion/odin compilations (from gdb) with gdb instrumentation, we can call iongraph program within gdb when the execution is stopped. this instrumentation adds an iongraph command when provided with an instance of a mirgenerator*, will call iongraph, graphviz and your prefered png viewer to display the mir graph at the precise time of the execution. to find mirgenetator* instances, is best is to look up into the stack for optimizemir, or codegenerator::generatebody. optimizemir function has a mir argument, and the codege...
...And 2 more matches

nsIWebSocketListener
void onacknowledge( in nsisupports acontext, in pruint32 asize ); parameters acontext user defined context. asize number of bytes placed in os send buffer. onbinarymessageavailable() c...
...context user defined context. amsg the message data. onmessageavailable() called when a text message has been received. void onmessageavailable( in nsisupports acontext, in autf8string amsg ); parameters acontext user defined context. amsg the message data, as a utf-8 string. onserverclose() called when the server sends a close message. in the case of errors, onstop() may be called without this method ever getting called. no additional messages through onmessageavailable(), onbinarymessageavailable()() or onacknowledge()() will be delievered to the listener after onserverclose() is called, but outgoing messages can still be sent through the nsiwebsocketchannel connection. void onserverclose( in nsisupports acontext, in unsigned short acode, in autf8str...
...t acode, in autf8string areason ); parameters acontext user defined context. acode the websocket closing handshake status code; see status codes for possible values. areason a text string explaining the reason for the closure of the connection. onstart() called to signify the establishment of the message stream. ...
...And 2 more matches

EventTarget.addEventListener() - Web APIs
lick', capturehandler, capture); middle.addeventlistener('click', nonecapturehandler, nonecapture); inner1.addeventlistener('click', passivehandler, passive); inner2.addeventlistener('click', nonepassivehandler, nonepassive); function oncehandler(event) { alert('outer, once'); } function noneoncehandler(event) { alert('outer, none-once, default'); } function capturehandler(event) { //event.stopimmediatepropagation(); alert('middle, capture'); } function nonecapturehandler(event) { alert('middle, none-capture, default'); } function passivehandler(event) { // unable to preventdefault inside passive event listener invocation. event.preventdefault(); alert('inner1, passive, open new page'); } function nonepassivehandler(event) { event.preventdefault(); //event.stoppropagation(...
...ables that get assigned ("store") the same object reference. when two variables reference the same object (e.g., let a = b = {aproperty: 'yeah'};), changing the data in either variable will affect the other. note: because objects are stored in variables by reference, you can return an object from a function to keep it alive (preserve it in memory so you don't lose the data) after that function stops executing. legacy internet explorer and attachevent in internet explorer versions before ie 9, you have to use attachevent(), rather than the standard addeventlistener(). for ie, we modify the preceding example to: if (el.addeventlistener) { el.addeventlistener('click', modifytext, false); } else if (el.attachevent) { el.attachevent('onclick', modifytext); } there is a drawback to att...
...d with the onresize event to detect when certain elements in a web page were resized. the proprietary mselementresize event, when paired with the addeventlistener method of registering event handlers, provides similar functionality as onresize, firing when certain 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 re...
...And 2 more matches

Using files from web applications - Web APIs
pbox.addeventlistener("dragover", dragover, false); dropbox.addeventlistener("drop", drop, false); in this example, we're turning the element with the id dropbox into our drop zone. this is done by adding listeners for the dragenter, dragover, and drop events. we don't actually need to do anything with the dragenter and dragover events in our case, so these functions are both simple. ...
...is example, we're turning the element with the id dropbox into our drop zone. this is done by adding listeners for the dragenter, dragover, and drop events. we don't actually need to do anything with the dragenter and dragover events in our case, so these functions are both simple. ...
... zone. this is done by adding listeners for the dragenter, dragover, and drop events. we don't actually need to do anything with the dragenter and dragover events in our case, so these functions are both simple. they just stop propagation of the event and prevent the default action from occurring: function dragenter(e) { e.stoppropagation(); e.preventdefault(); } function dragover(e) { e.stoppropagation(); e.preventdefault(); } the real magic happens in the drop() function: function drop(e) { e.stoppropagation(); e.preventdefault(); const dt = e.datatransfer; const files = dt.files; handlefiles(files); } here, we retrieve the datatransfer field from the event, pull the file list out of it, and then pass that to handlefiles(). from this point on, handling the files i...
...And 2 more matches

MediaRecorder - Web APIs
ob. mediarecorder.resume() resumes recording of media after having been paused. mediarecorder.start() begins recording media; this method can optionally be passed a timeslice argument with a value in milliseconds. if this is specified, the media will be captured in separate chunks of that duration, rather than the default behavior of recording the media in a single large chunk. mediarecorder.stop() stops recording, at which point a dataavailable event containing the final blob of saved data is fired. no more recording occurs. static methods mediarecorder.istypesupported() a static method which returns a boolean value indicating if the given mime media type is supported by the current user agent. event handlers mediarecorder.ondataavailable called to handle the dataavailable ...
...when the entire media has been recorded, if timeslice wasn't specified). the event, of type blobevent, contains the recorded media in its data property. you can then collect and act upon that recorded media data using this event handler. mediarecorder.onerror an eventhandler called to handle the error event, including reporting errors that arise with media recording. these are fatal errors that stop recording. the received event is based on the mediarecordererrorevent interface, whose error property contains a domexception that describes the actual error that occurred. mediarecorder.onpause an eventhandler called to handle the pause event, which occurs when media recording is paused. mediarecorder.onresume an eventhandler called to handle the resume event, which occurs when media recordi...
...occurred. mediarecorder.onpause an eventhandler called to handle the pause event, which occurs when media recording is paused. mediarecorder.onresume an eventhandler called to handle the resume event, which occurs when media recording resumes after being paused. mediarecorder.onstart an eventhandler called to handle the start event, which occurs when media recording starts. mediarecorder.onstop an eventhandler called to handle the stop event, which occurs when media recording ends, either when the mediastream ends — or after the mediarecorder.stop() method is called. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. error fired when an error occurs: for example because recording wasn't allowe...
...And 2 more matches

Reporting API - Web APIs
nsistent manner. concepts and usage there are a number of different features and problems on the web platform that generate information useful to web developers when they are trying to fix bugs or improve their websites in other ways. such information can include: content security policy violations. feature-policy violations. deprecated feature usage (when you are using something that will stop working soon in browsers). occurrence of crashes. occurrence of user-agent interventions (when the browser blocks something your code is trying to do because it is deemed a security risk for example, or just plain annoying, like auto-playing audio). the reporting api's purpose is to provide a consistent reporting mechanism that can be used to make such information available to developers in t...
...ing against failure (fallback endpoints can be specified to use if the primary ones fail). note: there is no absolute guarantee of report delivery — a report could still fail to be collected if a serious error occurs. ...
...ould bring down a web site and stop anything running, but a report could still be obtained to give the developer some clues as to why it happened. reporting observers reports can also be obtained via reportingobserver objects created via javascript inside the website you are aiming to get reports on. this method is not as failsafe as the report-to method described above — any page crash could stop you retrieving the reports — but it is easier to set up, and more flexible. a reportingobserver object is created using the reportingobserver() constructor, which is passed two parameters: a callback function that has available as parameters the reports available in the observer's report queue, and a copy of the same reportingobserver object, so observation can be controlled directly from i...
...And 2 more matches

Scissor animation - Web APIs
n in webgl is // measured from bottom to top. in here we set the initial // position of the square to be at the top left corner of the // drawing buffer. ...
...l // position of the square to be at the top left corner of the // drawing buffer. ...
...var size = [60, 60], velocity = 3.0; function drawanimation () { gl.sci...
...And 2 more matches

CSS Animations tips and tricks - CSS: Cascading Style Sheets
css animations make it possible to do incredible things with the elements that make up your documents and apps. however, there are things you might want to do that aren't obvious, or clever ways to do things that you might not come up with right away. this article is a collection of tips and tricks we've found that may make your work easier, including how to run a stopped animation again. run an animation again the css animations specification doesn't offer a way to run an animation again. there's no magic resetanimation() method on elements, and you can't even just set the element's animation-play-state to "running" again. instead, you have to use clever tricks to get a stopped animation to replay. here's one way to do it that we feel is stable and reliable enough to suggest to you. html...
...allback is run before the next repaint, which is after the style recomputation has occurred. this callback adds the "changing" class back onto the box, so that the repaint will start the animation once again. of course, we also need to add an event handler to our "run" button so it'll actually do something: document.queryselector(".runbutton").addeventlistener("click", play, false); result stopping an animation simply removing the animation-name applied to an element will make it jump or cut to its next state. if instead you'd like the animation to complete and then come to a stop you have to try a different approach. the main tricks are: make your animation as self-contained as possible. this means you should not rely on animation-direction: alternate. instead you should explicitly...
... you should explicitly write a keyframe animation that goes through the full animation in one forward repetition. use javascript and clear the animation being used when the animationiteration event fires. ...
...And 2 more matches

radial-gradient() - CSS: Cascading Style Sheets
adient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. note: early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively. use the standard keywords only, as some implementations have already dropped those older variants. <linear-color-stop> a color-stop's <color> value, followed by an one or two optional stop positions (either a <percentage> or a <length> along the gradient's axis). a percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. percentage values in between are linearly positioned on the gradient ray. includi...
...lor-stop's <color> value, followed by an one or two optional stop positions (either a <percentage> or a <length> along the gradient's axis). a percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. percentage values in between are linearly positioned on the gradient ray. including two stop positions is equivalent to declaring two color stops with the same color at the two positions. <color-hint> th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. the length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. if omitted, the midpoint of the color transition is the...
... description as with any gradient, a radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to. to create a radial gradient that repeats so as to fill its container, use the repeating-radial-gradient() function instead. ...
...And 2 more matches

Creating a cross-browser video player - Developer guides
, using the browser's default control set. the next step is to define a custom control set, also in html, which will be used to control the video. the control set most browser's default video controls have the following functionality: play/pause mute volume control progress bar skip ahead go fullscreen the custom control set will also support this functionality, with the addition of a stop button. once again the html is quite straightforward, using an unordered list with list-style-type:none set to enclose the controls, each of which is a list item with float:left. for the progress bar, the progress element is taken advantage of, with a fallback provided for browsers that don't support it (e.g. ie8 and ie9). this list is inserted after the <video> element, but inside the <figure> ...
...t is taken advantage of, with a fallback provided for browsers that don't support it (e.g. ie8 and ie9). this list is inserted after the <video> element, but inside the <figure> element (this is important for the fullscreen functionality, which is explained later on). ...
... of, with a fallback provided for browsers that don't support it (e.g. ie8 and ie9). this list is inserted after the <video> element, but inside the <figure> element (this is important for the fullscreen functionality, which is explained later on). ...
...And 2 more matches

Audio and Video Delivery - Developer guides
media source extensions (mse) media source extensions is a w3c working draft that ...
... recorder.ondataavailable = function(e) { data.push(e.data); }; recorder.start(); recorder.onerror = function(e) { throw e.error || new error(e.name); // e.name is ff non-spec } recorder.onstop = function(e) { var audio = document.createelement('audio'); audio.src = window.url.createobjecturl(new blob(data)); } settimeout(function() { rec.stop(); }, 5000); }) .catch(function onerror(error) { console.log(error.message); }); see mediarecorder api for more details. media source extensions (mse) media source extensions is a w3c working draft that plans to extend htmlmediaelement to allow javascript to generate media streams for playback. allowing javascript to generate streams facilitates a variety of use cases like adapt...
...nnerhtml = "play"; } } function checkkey(e) { if (e.keycode == 32 ) { //spacebar switchstate(); } } mycontrol.addeventlistener('click', function() { switchstate(); }, false); window.addeventlistener( "keypress", checkkey, false ); } you can try this example out here. for more information, see creating your own custom audio player. ...
...And 2 more matches

exponent - SVG: Scalable Vector Graphics
the exponent attribute defines the exponent of the gamma function. ...
... the exponent attribute defines the exponent of the gamma function. ...
...ines the exponent of the gamma function. ...
...And 2 more matches

intercept - SVG: Scalable Vector Graphics
linear function of color component transfers when the type attribute is set to linear. ...
... of color component transfers when the type attribute is set to linear. ...
...hen the type attribute is set to linear. ...
...And 2 more matches

tableValues - SVG: Scalable Vector Graphics
umbers defining a lookup table of values for a for a color component transfer function. ...
...a lookup table of values for a for a color component transfer function. ...
...for a color component transfer function. ...
...And 2 more matches

<linearGradient> - SVG: Scalable Vector Graphics
of graphical elements. don't be confused with css linear-gradient() as css gradients can only apply to html elements where svg gradient can only apply to svg elements. ...
...ents. don't be confused with css linear-gradient() as css gradients can only apply to html elements where svg gradient can only apply to svg elements. ...
...th css linear-gradient() as css gradients can only apply to html elements where svg gradient can only apply to svg elements. ...
...And 2 more matches

port - Archive of obsolete content
the port object offers a shortcut to do this: the once() method. this example rewrites the content script in the port.removelistener() example so that it uses once(): // content-script.js function getfirstparagraph() { var paras = document.getelementsbytagname('p'); console.log(paras[0].textcontent); } self.port.once("get-first-para", getfirstparagraph); removelistener() you ...
... to do this: the once() method. this example rewrites the content script in the port.removelistener() example so that it uses once(): // content-script.js function getfirstparagraph() { var paras = document.getelementsbytagname('p'); console.log(paras[0].textcontent); } self.port.once("get-first-para", getfirstparagraph); removelistener() you can use port.on() to listen for messages. to stop listening for a particular message, use port.removelistener(). this takes the same two parameters as port.on(): the name of the message, and the name of the listener function. for example, here's an add-on that creates a page-worker and a button. the page-worker loads http://en.wikipedia.org/wiki/chalk alongside a content script. the button sends the content script a message called "get-first-pa...
.../ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png", onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script listens for "get-first-para". when it receives this message, the script logs the first paragraph of the document and then calls removelistener() to stop listening. // content-script.js function getfirstparagraph() { var paras = document.getelementsbytagname('p'); console.log(paras[0].textcontent); self.port.removelistener("get-first-para", getfirstparagraph); } self.port.on("get-first-para", getfirstparagraph); the result is that the paragraph is only logged the first time the button is clicked. due to bug 816272 the page-mod's removel...
...t-para", getfirstparagraph); } self.port.on("get-first-para", getfirstparagraph); the result is that the paragraph is only logged the first time the button is clicked. due to bug 816272 the page-mod's removelistener() function does not prevent the listener from receiving messages that are already queued. this means that if "main.js" sends the message twice in successive lines, and the listener stops listening as soon as it receives the first message, then the listener will still receive the second message. json-serializable values the payload for a message can be any json-serializable value. when messages are sent their payloads are automatically serialized, and when messages are received their payloads are automatically deserialized, so you don't need to worry about serialization. howev...

StringView - Archive of obsolete content
).buffer : stringview.base64tobytes(sb64inpt), sencoding, nbyteoffset, nlength); }; /* default values */ stringview.prototype.encoding = "utf-8"; /* default encoding... ...
...6 : npart > 247 && npart < 252 && nidxend + 4 < nrawlength ? 5 : npart > 239 && npart < 248 && nidxend + 3 < nrawlength ? 4 : npart > 223 && npart < 240 && nidxend + 2 < nrawlength ? ...
... : npart > 247 && npart < 252 && nidxend + 4 < nrawlength ? 5 : npart > 239 && npart < 248 && nidxend + 3 < nrawlength ? 4 : npart > 223 && npart < 240 && nidxend + 2 < nrawlength ? 3 : npart > 191 && npart < 224 && nidxend + 1 < nrawlength ? 2 : 1; } break; case "utf-16": for (nchrend = nstartidx; nidxend < nrawlength && nchrend < nstopatchr; nchrend++) { nidxend += atarget[nidxend] > 0xd7bf /* 55231 */ && nidxend + 1 < atarget.length ? 2 : 1; } break; default: nidxend = nchrend = isfinite(nchrlength) ? nchrlength : nrawlength - 1; } if (nchrlength) { return nidxend; } return nchrend; }; stringview.prototype.tobase64 = function (bwholebuffer) { return stringview.bytestobase64( b...
....prototype.substr(characteroffset[, characterslength) (see). if you want to create a new stringview object cloning without sharing the same buffer, look at this table. arguments characteroffset optional a number expressing (in codepoints) the location at which to begin extracting characters. characterslength optional a number expressing (in codepoints) the location at which to stop extracting characters. examples var mystringview1 = new stringview("hello world!"); var mystringview2 = mystringview1.subview(3, 7); alert(mystringview2); // "lo worl" as was explained above, characteroffset is a character index. the index of the first character is 0, and the index of the last character is 1 less than the length of the stringview. subview begins extracting char...

Block and Line Layout Cheat Sheet - Archive of obsolete content
th" stuff comes in? ns_block_no_auto_margins ns_block_margin_root indicates that this is a frame from which child margins can be calculated. the absence of this flag implies that child margin calculations should ignore the frame and look further up the parent chain. used in nsblockreflowcontext::computecollapsedtopmargin(). this flag causes the nsblockreflowstate's constructor to set the brs_istopmarginroot and brs_isbottommarginroot flags. this is set by default for document, table cell inner, and absolutely positioned wrapper frames. ns_block_space_mgr this indicates that a block frame should create its own space manager. this is required by each block frame that can contain floaters: the space manager is used to reserve space for the floated frames. this is set by default for document...
......why? brs_isinlineincrreflow this flag is set in nsblockframe::reflow() if we detect that we're incrementally reflowing a linebox that contains inline frames. in this case, we can avoid some of the work that occurs during reflow. brs_nowrap this flag is set in the nsblockreflowstate constructor when the "white-space" style of the block frame is pre or nowrap. it is cleared, otherwise. brs_istopmarginroot this flag is set in the nsblockreflowstate constructor when reflowing a "block margin root" frame (i.e., a frame with the ns_block_margin_root flag set, for which margins apply by default). the flag is also set when reflowing a frame whose computed top border padding is zero. (why?) brs_isbottommarginroot this flag is set in the nsblockreflowstate constructor when reflowing a "block ...
...argin should be applied, and the flag set to cache the result. (if not, the top margin will be applied as a result of the generational margin collapsing logic in nsblockreflowcontext::computecollapsedtopmargin(). in this case, the flag won't be set, so subsequent calls to shouldapplytopmargin() will continue crawl the line list.) this flag is also set in the nsblockreflowstate constructor if brs_istopmarginroot is set; that is, if the frame being reflowed is a margin root by default. brs_computemaxelementsize this flag is set if reflow should recompute an element's maximum size. it is set in the nsblockreflowstate constructor if the "maxelementsize" member of the nshtmlreflowmetrics object has been provided by (the parent frame?). brs_computemaxwidth this flag is set if reflow should recom...
...flow, this member holds current frame in the reflow chain. nslinelayout encapsulates the transient reflow state for a nslinebox that contains inline frames. a new nslinelayout object is created for each inline linebox that is flowed. mflags ll_endsinwhitespace set to true by default when starting line layout. ...

jspage - Archive of obsolete content
pe==3){l=l.parentnode;}return true;}).create({attempt:browser.engine.gecko})()){l=false; }}}}return $extend(this,{event:a,type:j,page:i,client:c,rightclick:e,wheel:h,relatedtarget:l,target:g,code:b,key:m,shift:a.shiftkey,control:a.ctrlkey,alt:a.altkey,meta:a.metakey}); }});event.keys=new hash({enter:13,up:38,down:40,left:37,right:39,esc:27,space:32,backspace:8,tab:9,"delete":46});event.implement({stop:function(){return this.stoppropagation().preventdefault(); },stoppropagation:function(){if(this.event.stoppropagation){this.event.stoppropagation();}else{this.event.cancelbubble=true;}return this;},preventdefault:function(){if(this.event.preventdefault){this.event.preventdefault(); }else{this.event.returnvalue=false;}return this;}});function class(b){if(b instanceof function){b={initialize:b};}va...
...h[e].keys.contains(g)){return this; }h[e].keys.push(g);var f=e,a=element.events.get(e),c=g,i=this;if(a){if(a.onadd){a.onadd.call(this,g);}if(a.condition){c=function(j){if(a.condition.call(this,j)){return g.call(this,j); }return true;};}f=a.base||f;}var d=function(){return g.call(i);};var b=element.nativeevents[f];if(b){if(b==2){d=function(j){j=new event(j,i.getwindow()); if(c.call(i,j)===false){j.stop();}};}this.addlistener(f,d);}h[e].values.push(d);return this;},removeevent:function(c,b){var a=this.retrieve("events");if(!a||!a[c]){return this; }var f=a[c].keys.indexof(b);if(f==-1){return this;}a[c].keys.splice(f,1);var e=a[c].values.splice(f,1)[0];var d=element.events.get(c);if(d){if(d.onremove){d.onremove.call(this,b); }c=d.base||c;}return(element.nativeevents[c])?this.removelistener(c,e):th...
...,check:function(){if(!this.timer){return true;}switch(this.options.link){case"cancel":this.cancel();return true;case"chain":this.chain(this.caller.bind(this,arguments)); return false;}return false;},start:function(b,a){if(!this.check(b,a)){return this;}this.from=b;this.to=a;this.time=0;this.transition=this.gettransition(); this.starttimer();this.onstart();return this;},complete:function(){if(this.stoptimer()){this.oncomplete();}return this;},cancel:function(){if(this.stoptimer()){this.oncancel(); }return this;},onstart:function(){this.fireevent("start",this.subject);},oncomplete:function(){this.fireevent("complete",this.subject);if(!this.callchain()){this.fireevent("chaincomplete",this.subject); }},oncancel:function(){this.fireevent("cancel",this.subject).clearchain();},pause:function(){this.s...
...r()){this.oncancel(); }return this;},onstart:function(){this.fireevent("start",this.subject);},oncomplete:function(){this.fireevent("complete",this.subject);if(!this.callchain()){this.fireevent("chaincomplete",this.subject); }},oncancel:function(){this.fireevent("cancel",this.subject).clearchain();},pause:function(){this.stoptimer();return this;},resume:function(){this.starttimer(); return this;},stoptimer:function(){if(!this.timer){return false;}this.time=$time()-this.time;this.timer=$clear(this.timer);return true;},starttimer:function(){if(this.timer){return false; }this.time=$time()-this.time;this.timer=this.step.periodical(math.round(1000/this.options.fps),this);return true;}});fx.compute=function(c,b,a){return(b-c)*a+c; };fx.durations={"short":250,normal:500,"long":1000};fx.css=new class(...

Client-side form validation - Learn web development
a form field follows all of the rules specified by the above attributes, it is considered valid. if not, it is considered invalid. when an element is valid, the following things are true: the element matches the :valid css pseudo-class, which lets you apply a specific style to valid elements. if the user tries to send the data, the browser will submit the form, provided there is nothing else stopping it from doing so (e.g., javascript). when an element is invalid, the following things are true: the element matches the :invalid css pseudo-class, and sometimes other ui pseudo-classes (e.g., :out-of-range) depending on the error, which lets you apply a specific style to invalid elements. if the user tries to send the data, the browser will block the form and display an error message. ...
...eck these using our own code, and show a custom error message for each one. we are aiming to show the error messages inside a <span> element. the aria-live attribute is set on that <span> to make sure that our custom error message will be presented to everyone, including it being read out to screenreader users. note: a key point here is that setting the novalidate attribute on the form is what stops the form from showing its own error message bubbles, and allows us to instead display the custom error messages in the dom in some manner of our own choosing. now onto some basic css to improve the look of the form slightly, and provide some visual feedback when the input data is invalid: body { font: 1em sans-serif; width: 200px; padding: 0; margin : 0 auto; } p * { display: block...
... every time we change the value of the input, we check to see if it contains valid data. if it has then we remove any error message being shown. if the data is not valid, we run showerror() to show the appropriate error. every time we try to submit the form, we again check to see if the data is valid. if so, we let the form submit. if not, we run showerror() to show the appropriate error, and stop the form submitting with preventdefault(). the showerror() function uses various properties of the input's validity object to determine what the error is, and then displays an error message as appropriate. here is the live result: note: you can find this example live on github as detailed-custom-validation.html (see also the source code.) the constraint validation api gives you a powerfu...
...&'*+/=?^_`{|}~-]+@[a-za-z0-9-]+(?:\.[a-za-z0-9-]+)*$/; // many legacy browsers do not support the addeventlistener method. // here is a simple way to handle this; it's far from the only one. function addevent(element, event, callback) { let previouseventcallback = element["on"+event]; element["on"+event] = function (e) { const output = callback(e); // a callback that returns `false` stops the callback chain // and interrupts the execution of the event callback. if (output === false) return false; if (typeof previouseventcallback === 'function') { output = previouseventcallback(e); if(output === false) return false; } } }; // now we can rebuild our validation constraint // because we do not rely on css pseudo-class, we have to // explicitly set the ...

From object to iframe — other embedding technologies - Learn web development
!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea...
...s shown in our previous example. if absolutely required, you can add permissions 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 cs...
... case against plugins once upon a time, plugins were indispensable on the web. remember the days when you had to install adobe flash player just to watch a movie online? and then you constantly got annoying alerts about updating flash player and your java runtime environment. web technologies have since grown much more robust, and those days are over. for virtually all applications, it's time to stop delivering content that depends on plugins and start taking advantage of web technologies instead. broaden your reach to everyone. everyone has a browser, but plugins are increasingly rare, especially among mobile users. since the web is easily used without any plugins, people would rather just go to your competitors' websites than install a plugin. give yourself a break from the extra access...
...ak from the extra accessibility headaches that come with flash and other plugins. stay clear of additional security hazards. adobe flash is notoriously insecure, even after countless patches. in 2015, alex stamos, then-chief security officer at facebook, requested that adobe discontinue flash. note: due to its inherent issues and the lack of support for flash, adobe announced that they would stop supporting it at the end of 2020. as of january 2020, most browsers block flash content by default, and by december 31st of 2020, all browsers will have completly removed all flash functionality. any existing flash content will be inaccessable after that date. so what should you do? if you need interactivity, html and javascript can readily get the job done for you with no need for java applet...

Introduction to events - Learn web development
> </div> <div> <input id="submit" type="submit"> </div> </form> <p></p> div { margin-bottom: 10px; } now some javascript — here we implement a very simple check inside an onsubmit event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. ...
...the output is as follows: note: for the full source code, see preventdefault-validation.html (also see it running live here.) event bubbling and capture the final subject to cover here is something that you won't come across often, but it can be a real pain if you...
...the <html> element. along the way: it finds the video.onclick... handler and runs it, so the video first starts playing. it then finds the videobox.onclick... handler and runs it, so the video is hidden as well. note: in cases where both types of event handlers are present, bubbling and capturing, the capturing phase will run first, followed by the bubbling phase. fixing the problem with stoppropagation() this is a very annoying behavior, but there is a way to fix it! the standard event object has a function available on it called stoppropagation() which, when invoked on a handler's event object, makes it so that first handler is run but the event doesn't bubble any further up the chain, so no more handlers will be run. we can, therefore, fix our current problem by changing the seco...
... event object has a function available on it called stoppropagation() which, when invoked on a handler's event object, makes it so that first handler is run but the event doesn't bubble any further up the chain, so no more handlers will be run. we can, therefore, fix our current problem by changing the second handler function in the previous code block to this: video.onclick = function(e) { e.stoppropagation(); video.play(); }; you can try making a local copy of the show-video-box.html source code and fixing it yourself, or looking at the fixed result in show-video-box-fixed.html (also see the source code here). note: why bother with both capturing and bubbling? well, in the bad old days when browsers were much less cross-compatible than they are now, netscape only used event capturin...

Arrays - Learn web development
ut it is most commonly used to tell a loop to keep going until it has looped through all the items in an array. so for example: let sequence = [1, 1, 2, 3, 5, 8, 13]; for (let i = 0; i < sequence.length; i++) { console.log(sequence[i]); } you'll learn about loops properly later on (in our looping code article), but briefly, this code is saying: start looping at item number 0 in the array. stop looping at the item number equal to the length of the array. this works for an array of any length, but in this case it stops looping at item number 7 (this is good, as the last item — which we want the loop to include — is item 6). for each item, print it out to the browser console with console.log(). some useful array methods in this section we'll look at some rather useful array-relate...
...umber 1 comment are a number of strings, each one containing a product name and price separated by a colon. we'd like you to turn this into an array and store it in an array called products. on the same line as the // number 2 comment is the beginning of a for loop. in this line we currently have i <= 0, which is a conditional test that causes the for loop to only run once, because it is saying "stop when i is no longer less than or equal to 0", and i starts at 0. we'd like you to replace this with a conditional test that stops the loop when i is no longer less than the products array's length. just below the // number 3 comment we want you to write a line of code that splits the current array item (name:price) into two separate items, one containing just the name and one containing just the...
...= number(subarray[1]);\n total += price;\n let itemtext = name + \' — $\' + price;\n\n let listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n}\n\ntotalbox.textcontent = \'total: $\' + total.tofixed(2);'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea...
...++) {\n itemtext = myhistory[i];\n const listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n }\n\n if(myhistory.length >= 5) {\n myhistory.pop();\n }\n\n searchinput.value = \'\';\n searchinput.focus();\n }\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.

Basic math in JavaScript — numbers and operators - Learn web development
cimal is base 10 (meaning it uses 0–9 in each column), but we also have things like: binary — the lowest level language of computers; 0s and 1s. octal — base 8, uses 0–7 in each column. hexadecimal — base 16, uses 0–9 and then a–f in each column. you may have encountered these numbers before when setting colors in css. before you start to get worried about your brain melting, stop right there! for a start, we are just going to stick to decimal numbers throughout this course; you'll rarely come across a need to start thinking about other types, if ever. the second bit of good news is that unlike some other programming languages, javascript only has one data type for numbers, both integers and decimals — you guessed it, number. this means that whatever type of numbers you...
... message if a game is over or a victory message if the game has been won display the correct seasonal greeting depending what holiday season it is zoom a map in or out depending on what zoom level is selected we'll look at how to code such logic when we look at conditional statements in a future article. ...
...e such logic when we look at conditional statements in a future article. for now, let's look at a quick example: <button>start machine</button> <p>the machine is stopped.</p> const btn = document.queryselector('button'); const txt = document.queryselector('p'); btn.addeventlistener('click', updatebtn); function updatebtn() { if (btn.textcontent === 'start machine') { btn.textcontent = 'stop machine'; txt.textcontent = 'the machine has started!'; } else { btn.textcontent = 'start machine'; txt.textcontent = 'the machine is stopped.'; } } open in new window you can see the equality operator being used just inside the updatebtn() function. in this case, we are not testing if two mathematical expressions have the same value — we are testing whether the text content...
...indow you can see the equality operator being used just inside the updatebtn() function. in this case, we are not testing if two mathematical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. if the button is currently saying "start machine" when it is pressed, we change its label to "stop machine", and update the label as appropriate. if the button is currently saying "stop machine" when it is pressed, we swap the display back again. note: such a control that swaps between two states is generally referred to as a toggle. it toggles between one state and another — light on, light off, etc. test your skills! you've reached the end of this article, but can you remember the mos...

Introduction to automated testing - Learn web development
ard character — here we're saying "run these tasks when any files of these types are saved. you could also use wildcards in your main tasks, for example gulp.src('src/*.css') would grab all your css files and then run piped tasks on them. note: one problem with our watch command above is that our csslint/autoprefixer combination throws full-blown errors when a css error is encountered, which stops the watch working. you'll have to restart the watch once a css error is encountered, or find another way to do this. there's a lot more you can do with gulp. the gulp plugin directory has literally thousands of plugins to search through. other task runners there are many other task runners available. we certainly aren't trying to say that gulp is the best solution out there, but it works for...
...ick start session, a loading screen will then appear, which spins up a virtual machine running the combination you chose. when loading has finished, you can then start to remotely test the web site running in the chosen browser. from here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc. the top menu allows you to: stop the session give someone else a url so they can observe the test remotely. copy text/notes to a remote clipboard. take a screenshot. test in full screen mode. once you stop the session, you'll return to the manual tests tab, where you'll see an entry for each of the previous manual sessions you started. clicking on one of these entries shows more data for the session. in here y...
...functions. devtools — allows you to use your browser's devtools to directly debug or manipulate the page being shown in the test browser. this currently only works when testing the safari browser on ios devices. device info — displays information about the testing device. features — shows you what features the current configuration supports, e.g. copy to clipboard, gesture support, etc. stop — ends the session. note: this is already very useful, and way more convenient than having to set up all these emulators and virtual machines by yourself. other basic features if you go back to the main browserstack page, you'll find a couple of other useful basic features under the more menu option: responsive: enter a url and press generate, and browserstack will load that url on mul...
...ck start browser, a loading screen will then appear, which spins up a virtual machine running the combination you chose. when loading has finished, you can then start to remotely test the web site running in the chosen browser. from here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc. the side menu allows you to: stop the session change the screen resolution copy text/notes to a remote clipboard take, edit, and download screenshots test in full screen mode. once you stop the session, you'll return to the live web testing page, where you'll see an entry for each of the previous manual sessions you started. clicking on one of these entries shows more data for the session. here you can download...

mozbrowserloadend
standards track, but it is supported on the firefox os platform. although implementations may change in the future and it is not supported widely across browsers, it is suitable for use in code dedicated to firefox os apps. the mozbrowserloadend event is fired when the browser <iframe> has finished loading all its assets, or has failed to load. this can be used when the embedder wants to stop spinning a loading indicator, or update the ui in some other way to indicate loading is complete. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring ...
...th the following properties: backgroundcolor a domstring representing the main background color of the browser <iframe> content, expressed as an rgb value. can be used to make the theme of the surrounding ui complement the theme of the currently loaded content, for example. example in this example the mozbrowserloadstart and mozbrowserloadend events are used to change the icon shown on the stop/reload button between stop (x) and reload (r), as appropriate. in addition, the background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience. when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159). var browser = document.queryselec...
...the background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience. when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159). ...
...illa.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159). ...

mozbrowserloadstart
rget (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
... the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
...or not. cancelable read only boolean whether the event is cancellable or not. example in this example the mozbrowserloadend and mozbrowserloadstart events are used to change the icon shown on the stop/reload button between stop (x) and reload (r), as appropriate. ...
... example in this example the mozbrowserloadend and mozbrowserloadstart events are used to change the icon shown on the stop/reload button between stop (x) and reload (r), as appropriate. ...

source-editor.jsm
to place the breakpoint. acondition optional a string describing the condition under which the breakpoint should be triggered. this information is simply recorded as part of the breakpoint annotation. need link to text about handling breakpoint conditions here. addeventlistener() adds a new event listener to the editor. you can listen for any of the events listed in event name constants. to stop listening for the event, call removeeventlistener(). void addeventlistener( string aeventtype, function acallback ); parameters aeventtype the name of the event type to listen for; see event name constants for possible values. acallback the function to call when the specified event occurs. canredo() determines whether or not there are changes that can be redone. boolean canredo()...
...gth if backwards is true. findnext() finds the next occurrence of the search operation started by the last call to find(). note: this ignores the value you specified for backwards in the original search; it always searches forward. number findnext( boolean awrap }; parameters awrap if true, the search operation will wrap around to the beginning of the text. otherwise, the search stops if the end of the text is reached. return value the offset into the text at which the next occurrence of the string begins, or -1 if the string isn't found. findprevious() finds the previous occurrence of the search operation started by the last call to find(). note: this ignores the value you specified for backwards in the original search; it always searches backward. number findnext( ...
...1 if the string isn't found. findprevious() finds the previous occurrence of the search operation started by the last call to find(). note: this ignores the value you specified for backwards in the original search; it always searches backward. number findnext( boolean awrap }; parameters awrap if true, the search operation will wrap around to the end of the text. otherwise, the search stops if the beginning of the text is reached. return value the offset into the text at which the next occurrence of the string begins, or -1 if the string isn't found. focus() makes the editor the focus for user input. void focus(); parameters none. getbreakpoints returns an array of all of the breakpoints currently set on the code in the editor instance. array getbreakpoints(); paramet...
...eters alineindex the 0-based line number from which to remove the breakpoint. return value true if a breakpoint was removed, otherwise false. removeeventlistener() removes an event listener (previously established by calling addeventlistener() from the editor. void removeeventlistener( string aeventtype, function acallback ); parameters aeventtype the name of the event type to stop listening for; see event name constants for possible values. acallback the function to stop calling when the specified event occurs. resetundo resets the undo stack, removing all possible undo and redo operations from the stack. void resetundo(); parameters none. setcaretoffset() sets the current caret position (insertion point) for newly-entered text. void setcaretoffset( number ao...

Extras
ext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="15px" depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="360" to="...
... l 20 10 l 30 15 l 20 20 l 15 30 l 10 20 l 0 15 l 10 10"/> </g> </g> </g> </svg> </mtext> </mpadded> </msqrt> <mo>=</mo> <msubsup> <mo>∫</mo> <mn>0</mn> <mfrac> <mi>π</mi> <mn>2</mn> </mfrac> </msubsup> <msup> <mi>θ</mi> <mtext> <svg width="15px" height="15px"> <defs> <radialgradient id="radgrad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:.9;"/> </radialgradient> </defs> <g> <animatemotion path="m0,0 l3,0 l2,5 l5,5 l0,4 l5,2 z" begin="0s" dur="0.5s" repeatcount="indefinite"/> <circle fill="url(#radgrad2)" r="5px" cx="5px" cy="5px"/> </g> </s...
...l5,5 l0,4 l5,2 z" begin="0s" dur="0.5s" repeatcount="indefinite"/> <circle fill="url(#radgrad2)" r="5px" cx="5px" cy="5px"/> </g> </svg> </mtext> </msup> <mrow> <mo>ⅆ</mo> <mi>θ</mi> </mrow> </math> <div style="width: 300px; margin-left: auto; margin-right: auto;"> <svg width="300px" height="250px"> <defs> <lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/> </lineargradient> <lineargradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> </lineargradient> <radialgradient id="grad3" cx="...
...);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/> </lineargradient> <lineargradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> </lineargradient> <radialgradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/> </radialgradient> </defs> <rect width="300" height="250" fill="url(#grad1)"/> <g transform="translate(150,125)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="360" ...

Shell global objects
utstr([exp]) evaluate and print expression without newline. datenow() return the current time with sub-ms precision. help([name ...]) display usage and help messages. quit() quit the shell. asserteq(actual, expected[, msg]) throw if the first two arguments are not the same (both +0 or both -0, both nan, or non-zero and ===). starttimingmutator() start accounting time to mutator vs gc. stoptimingmutator() stop accounting time to mutator vs gc and dump the results. throwerror() throw an error from js_reporterror. intern(str) internalize str in the atom table. getslx(obj) get script line extent. evalcx(s[, o]) evaluate s in optional sandbox object o. if (s == '' && !o) return new o with eager standard classes, if (s == 'lazy' && !o) return new o with lazy standard classes ev...
...its return value or the exception it throws. the function is called with no arguments, and this is undefined. the specified asynccause is attached to the provided stack frame. enabletrackallocations() start capturing the js stack at every allocation. note that this sets an object metadata callback that will override any other object metadata callback that may be set. disabletrackallocations() stop capturing the js stack at every allocation. makefinalizeobserver() get a special object whose finalization increases the counter returned by the finalizecount function. finalizecount() return the current value of the finalization counter that is incremented each time an object returned by the makefinalizeobserver is finalized. resetfinalizecount() reset the value returned by finalizecount()...
...onmonkey). bailafter(number) start a counter to bail once after passing the given amount of possible bailout positions in ionmonkey. injit() returns true when called within (jit-)compiled code. when jit compilation is disabled this function returns an error string. this function returns false in all other cases. depending on truthiness, you should continue to wait for compilation to happen or stop execution. inion() returns true when called within ion. when ion is disabled or when compilation is abnormally slow to start, this function returns an error string. otherwise, this function returns false. this behaviour ensures that a falsy value means that we are not in ion, but expect a compilation to occur in the future. conversely, a truthy value means that we are either in ion or that ther...
...s nothing (the post-write barrier verifier has been remove). gcstate() report the global gc state. deterministicgc(true|false) if true, only allow determinstic gcs to run. functions available only if js_trace_logging is defined starttracelogger() start logging the mainthread. note: tracelogging starts automatically. disable it by setting environment variable tloptions=disablemainthread stoptracelogger() stop logging the mainthread. functions available only in nightly build objectaddress(obj) return the current address of the object. for debugging only--this address may change during a moving gc. sharedaddress(obj) return the address of the shared storage of a sharedarraybuffer. functions available only in debug build dumpobject() dump an internal representation of an ...

nsIAutoCompleteSearch
toolkit/components/autocomplete/nsiautocompletesearch.idlscriptable this interface is implemented by search providers to start and stop autocomplete. inherits from: nsisupports last changed in gecko 1.7 users call startsearch() and pass in an nsiautocompleteobserver when the search starts. results can be sent to the listener either synchronously or asynchronously, depending on the implementation. method overview void startsearch(in astring searchstring, in astring searchparam, in nsiautocompleteresult previousresult, in nsiautocompleteobserver listener); void stopsearch(); methods startsearch() search for a given string and notify a listener (either synchronously or asynchronously) of the result. void startsearch( in astring searchstring, in astring searchparam, i...
... ...
... ...
...iousresult, in nsiautocompleteobserver listener ); parameters searchstring the string to search for. searchparam an extra parameter. can be empty if not needed. previousresult the previous nsiautocompleteresult to use for faster searching. can be null. listener an nsiautocompleteobserver listener to notify when the search is complete. stopsearch() stop all searches that are in progress. void stopsearch(); parameters none. ...

nsICachingChannel
line". offlinecachetoken nsisupports the same as cachetoken but accessing the offline app cache token if there is any. exceptions thrown ns_error_not_available when there is not offline cache token. constants constant value description load_no_network_io 1 << 26 this load flag inhibits fetching from the net. an error of ns_error_document_not_cached will be sent to the listener's onstoprequest if network io is necessary to complete the request. this flag can be used to find out whether fetching this url would cause validation of the cache entry via the network. combining this flag with load_bypass_local_cache will cause all loads to fail. this flag differs from load_only_from_cache in that this flag fails the load if validation is required while load_only_from_cache skips valida...
...(that is, it does not affect proxy caches). load_bypass_local_cache_if_busy 1 << 29 this load flag causes the local cache to be skipped if the request would otherwise block waiting to access the cache. load_only_from_cache 1 << 30 this load flag inhibits fetching from the net if the data in the cache has been evicted. an error of ns_error_document_not_cached will be sent to the listener's onstoprequest in this case. this flag is set automatically when the application is offline. load_only_if_modified 1 << 31 this load flag controls what happens when a document would be loaded from the cache to satisfy a call to asyncopen. if this attribute is set to true, then the document will not be loaded from the cache. a stream listener can check isfromcache() to determine if the asyncopen will a...
...l to asyncopen. if this attribute is set to true, then the document will not be loaded from the cache. a stream listener can check isfromcache() to determine if the asyncopen will actually result in data being streamed. if this flag has been set, and the request can be satisfied via the cache, then the ondataavailable events will be skipped. the listener will only see onstartrequest followed by onstoprequest. methods isfromcache() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this method finds out whether or not this channel's data is being loaded from the cache. boolean isfromcache(); parameters none. return value returns true if this channel's data is being loaded from the cache, otherwise returns false. this value is undefined before th...
...see also nsicache ...

nsIHttpServer
* * @param port * the port up...
... * * @param callback * an asynchronous callback used to notify the user when this server ...
...cause the port is already in use or because the process does * not have privileges to do so) * @note * behavior is undefined if this method is called after stop() has been * called on this but before the provided callback function has been * called. */ void start(in long port); /** * shuts down this server if it is running (including the period of time after * stop() has been called but before the provided callback has been called). ...
...n * called on this but before the provided callback function has been * called. */ void start(in long port); /** * shuts down this server if it is running (including the period of time after * stop() has been called but before the provided callback has been called). * * @param callback * an asynchronous callback used to notify the user when this server is * stopped and all pending requests have been fully served * @throws ns_error_null_pointer * if callback is null * @throws ns_error_unexpected * if this server is not running */ void stop(in nsihttpserverstoppedcallback callback); /** * associates the local file represented by the string file with all requests * which match request. * * @param path * the path whic...

nsILivemarkService
long long createlivemark( in long long folder, in astring name, in nsiuri siteuri, in nsiuri feeduri, in long index ); parameters folder the id of the parent folder. name the name to show when displaying the livemark. siteuri the uri of the site from which the livemark was created. feeduri the uri ...
... see also places livemark service nsinavbookmarksservice ...
... see also places livemark service nsinavbookmarksservice ...
... or identifies a folder that isn't a livemark container; also if the siteuri argument isn't a valid nsiuri object (or null) start() this method starts the livemark refresh timer. being able to manually control this allows activity such as bookmarks import to occur without kicking off http traffic. void start(); parameters none. stopupdatelivemarks() stop the livemark refresh timer. void stopupdatelivemarks(); parameters none. see also places livemark service nsinavbookmarksservice ...

nsITraceableChannel
in order to establish a call chain to allow all interested parties a chance to act on each event. implementing nsistreamlistener the nsistreamlistener passed to setnewlistener() should implement the following methods, which are called to notify it of events that occur on the http stream: onstartrequest: an http request is beginning. ondataavailable: data is arriving on the http channel. onstoprequest: the http request is ending. note: it is critical that you pass along requests to the previous listener as soon as possible -- especially for onstartrequest. channels may restrict when you may replace the listener. in particular, listeners typically should not be replaced after onstartrequest has been called. example this example can be copied and pasted into a javascript interpreter ...
...tstream = cc('@mozilla.org/binaryinputstream;1', 'nsibinaryinputstream', 'setinputstream'); var binaryoutputstream = cc('@mozilla.org/binaryoutputstream;1', 'nsibinaryoutputstream', 'setoutputstream'); var storagestream = cc('@mozilla.org/storagestream;1', 'nsistoragestream', 'init'); function tracinglistener() { this.receivedchunks = []; // array for incoming data. ...
...); // binaryoutputstream // copy received data as they come. ...
...dataavailable(arequest, acontext, sstream.newinputstream(0), aoffset, acount); }, onstartrequest: function(arequest, acontext) { this.originallistener.onstartrequest(arequest, acontext); }, onstoprequest: function(arequest, acontext, astatuscode) { this.responsebody = this.receivedchunks.join(""); delete this.receivedchunks; this.responsestatus = astatuscode; this.originallistener.onstoprequest(arequest, acontext, astatuscode); this.deferreddone.resolve(); }, queryinterface: function(aiid) { if (aiid.equals(ci.nsistreamlistener) || aiid.equals(ci.nsisupports)) { return this; } throw cr.ns_nointerface; } }; var httpresponseobserver = { observe: function(asubject, atopic, adata) { var newlistener = new tracinglistener(); asubject.queryinterface(ci.nsitraceablec...

Migrating from Firebug - Firefox Developer Tools
ement are displayed in the events side panel in firebug. in the devtools they are shown when clicking the small 'ev' icon besides an element within the node view. both tools allow to display wrapped event listeners (e.g. listeners wrapped in jquery functions). to improve the ui of the devtools, there is also a request to add an events side panel to them like the one in firebug (see bug 1226640). stop script execution on dom mutation in firebug you can break on dom mutations, that means that when an element is changed, the script execution is stopped at the related line within the javascript file, which caused the change. this feature can globally be enabled via the break on mutate button, or individually for each element and for different types of changes like attribute changes, content chan...
... search for elements via css selectors or xpaths firebug allows to search for elements within the html panel via css selectors or xpaths. also the devtools' inspector panel allows to search for css selectors. ...
...gle breakpoints or all of them at once. they do currently only allow to set script breakpoints. xhr, dom, cookie and error breakpoints are not supported yet (see bug 821610, bug 1004678, bug 895893 and bug 1165010). while there are no breakpoints for single javascript errors, there is a setting pause on exceptions within the debugger panel options. step through code once the script execution is stopped, you can step through the code using the continue (f8), step over (f10), step into (f11) and step out (shift+f11) options. they work the same in both tools. examine call stack when the script execution is paused, firebug displays the function call stack within its stack side panel. in there the functions are listed together with their call parameters. in the devtools the function call stack ...
...firebug displays the window object (the global scope) by default. with the script execution halted it shows the different variable scopes available within the current call stack frame. furthermore, it allows you to add and manipulate watch expressions. the devtools have a variables side panel, which works basically the same. the main difference is that it is empty when the script execution is not stopped, i.e. it doesn't display the window object. though you can inspect that object either via the dom property viewer or via the web console. style editor the style editor in the firefox devtools allows you to examine and edit the different css style sheets of a page like firebug's css panel does it. in addition to that it allows to create new style sheets and to import existing style sheets and...

Web Console remoting - Firefox Developer Tools
onsoleclient lives in webconsoleclient.jsm (in toolkit/devtools/webconsole) and it is used by the web console when working with the web console actor. to see how the debugger is used in the web console code, look in browser/devtools/webconsole/webconsole.js, and search for webconsoleconnectionproxy. the new web console actors are: the webconsoleactor allows js evaluation, autocomplete, start/stop listeners, etc. the networkeventactor is used for each new network request. the client can request further network event details - like response body or request headers. to attach to the webconsoleactor, follow these steps: connecttoserver() // the usual listtabs() pickthetabyouwant() debuggerclient.attachconsole(tab.consoleactor, listeners, onattachconsole) the listeners argument is an arr...
...rs by default. the client has the option to start each listener when needed. this approach allows for lower resource usage on the server - this is a potential issue if the server runs on devices with fewer resources. the onattachconsole callback receives a new instance of the webconsoleclient object. this object provides methods that abstract away protocol packets, things like startlisteners(), stoplisteners(), etc. protocol packets look as follows: { "to": "root", "type": "listtabs" } { "from": "root", "consoleactor": "conn0.console9", "selected": 2, "tabs": [ { "actor": "conn0.tab2", "consoleactor": "conn0.console7", "title": "", "url": "https://tbpl.mozilla.org/?tree=fx-team" }, // ... ] } notice that the consoleactor is also available as ...
... 792062). when page navigation starts the following packet is sent from the tab actor: { "from": tabactor, "type": "tabnavigated", "state": "start", "url": newurl, "nativeconsoleapi": true } the nativeconsoleapi property tells if the window.console object is native or not for the top level window object for the given tab - this is always true when navigation starts. ...
...om": tabactor, "type": "tabnavigated", "state": "start", "url": newurl, "nativeconsoleapi": true } the nativeconsoleapi property tells if the window.console object is native or not for the top level window object for the given tab - this is always true when navigation starts. ...

AudioScheduledSourceNode - Web APIs
the audioscheduledsourcenode interface—part of the web audio api—is a parent interface for several types of audio source node interfaces which share the ability to be started and stopped, optionally at specified times. specifically, this interface defines the start() and stop() methods, as well as the onended event handler. you can't create an audioscheduledsourcenode object directly. instead, use the interface which extends it, such as audiobuffersourcenode, oscillatornode, and constantsourcenode. unless stated otherwise, nodes based upon audioscheduledsourcenode output silence when not playing (that is, before start() is called and after stop() is called). silence is represented, as always, by a stream of samples with the value zero (0). properties inherits properties from its par...
...nce is represented, as always, by a stream of samples with the value zero (0). properties inherits properties from its parent interface, audionode. methods inherits methods from its parent interface, audionode, and adds the following methods: start() schedules the node to begin playing the constant sound at the specified time. if no time is specified, the node begins playing immediately. ...
... by a stream of samples with the value zero (0). properties inherits properties from its parent interface, audionode. methods inherits methods from its parent interface, audionode, and adds the following methods: start() schedules the node to begin playing the constant sound at the specified time. if no time is specified, the node begins playing immediately. stop() schedules the node to stop playing at the specified time. ...
... properties from its parent interface, audionode. methods inherits methods from its parent interface, audionode, and adds the following methods: start() schedules the node to begin playing the constant sound at the specified time. if no time is specified, the node begins playing immediately. stop() schedules the node to stop playing at the specified time. if no time is specified, the node stops playing at once. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: ended fired when the source node has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played. also available using the onende...

Basic animations - Web APIs
d (document.getelementbyid("score").innertext = number(document.getelementbyid("score").innertext) + 1); this.sn.pop(), console.log(6) } this.sn.foreach((t, e, i) => { if (0 == e || i.length - 1 == e) { var n = c.createlineargradient(t.x, t.y, t.x + this.w, t.y + this.h); i.length - 1 == e ? ...
...score").innertext = number(document.getelementbyid("score").innertext) + 1); this.sn.pop(), console.log(6) } this.sn.foreach((t, e, i) => { if (0 == e || i.length - 1 == e) { var n = c.createlineargradient(t.x, t.y, t.x + this.w, t.y + this.h); i.length - 1 == e ? ...
...nt.getelementbyid("score").innertext) + 1); this.sn.pop(), console.log(6) } this.sn.foreach((t, e, i) => { if (0 == e || i.length - 1 == e) { var n = c.createlineargradient(t.x, t.y, t.x + this.w, t.y + this.h); i.length - 1 == e ? ...
...ertext) + 1); this.sn.pop(), console.log(6) } this.sn.foreach((t, e, i) => { if (0 == e || i.length - 1 == e) { var n = c.createlineargradient(t.x, t.y, t.x + this.w, t.y + this.h); i.length - 1 == e ? ...

console - Web APIs
ormation. you may use string substitution and additional arguments with this method. console.log() for general output of logging information. you may use string substitution and additional arguments with this method. console.profile() starts the browser's built-in profiler (for example, the firefox performance tool). you can specify an optional name for the profile. ...
... console.timelog() logs the value of the specified timer to the console. console.timestamp() adds a marker to the browser's timeline or waterfall tool. console.trace() outputs a stack trace. console.warn() outputs a warning message. ...
...ole.log("in the second group"); console.warn("still in the second group"); console.groupend(); console.log("back to the first group"); console.groupend(); console.debug("back to the outer level"); the output looks like this: timers you can start a timer to calculate the duration of a specific operation. to start one, call the console.time() method, giving it a name as the only parameter. to stop the timer, and to get the elapsed time in milliseconds, just call the console.timeend() method, again passing the timer's name as the parameter. up to 10,000 timers can run simultaneously on a given page. for example, given this code: console.time("answer time"); alert("click to continue"); console.timelog("answer time"); alert("do a bunch of other stuff..."); console.timeend("answer time"); ...
... note: it's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. if you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console outpu...

Event.preventDefault() - Web APIs
as noted below, calling preventdefault() for a non-cancelable event, such as one dispatched via eventtarget.dispatchevent(), without specifying cancelable: true has no effect. ...
... as noted below, calling preventdefault() for a non-cancelable event, such as one dispatched via eventtarget.dispatchevent(), without specifying cancelable: true has no effect. ...
...nowadays, you should usually use native html form validation instead. html here's the form: <div class="container"> <p>please enter your name using lowercase letters only.</p> <form> <input type="text" id="my-textbox"...
...ult()</code> won't let you check this!<br>"; event.preventdefault(); }, false); html <p>please click on the checkbox control.</p> <form> <label for="id-checkbox">checkbox:</label> <input type="checkbox" id="id-checkbox"/> </form> <div id="output-box"></div> result stopping keystrokes from reaching an edit field the following example demonstrates how invalid text input can be stopped from reaching the input field with preventdefault(). nowadays, you should usually use native html form validation instead. html here's the form: <div class="container"> <p>please enter your name using lowercase letters only.</p> <form> <input type="text" id="my-textbox"> </form> </div> css we use a little bit of css for the warning box we'll draw when the user presses an invali...

MediaRecorder: dataavailable event - Web APIs
bubbles no cancelable no interface blobevent event handler property ondataavailable for details of the all the possible reasons this event may raise, see the documentation for the event handler property: ondataavailable. examples using addeventlistener to listen for dataavailable events: ... ...
...lobevent event handler property ondataavailable for details of the all the possible reasons this event may raise, see the documentation for the event handler property: ondataavailable. examples using addeventlistener to listen for dataavailable events: ... var chunks = []; mediarecorder.addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ... the same, but using the ondata...
...rols = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ... the same, but using the ondataavailable event handler property: ... ...
...s=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ... the same, but using the ondataavailable event handler property: ... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ... specifications specification status ...

MediaRecorder.ondataavailable - Web APIs
onse to blob data being made available for use. the dataavailable event is fired when the mediarecorder delivers media data to your application for its use. the data is provided in a blob object that contains the data. this occurs in four situations: when the media stream ends, any media data not already delivered to your ondataavailable handler is passed in a single blob. when mediarecorder.stop() is called, all media data which has been captured since recording began or the last time a dataavailable event occurred is delivered in a blob; after this, capturing ends. when mediarecorder.requestdata() is called, all media data which has been captured since recording began or the last time a dataavailable event occurred is delivered; then a new blob is created and media capture continues in...
...on (except the last blob, which might be shorter, since it would be whatever is left over since the last event). so if the method call looked like this — recorder.start(1000); — the dataavailable event would fire after each second of media capture, and our event handler would be called every second with a blob of media data that's one second long. ...
...r.stop() and mediarecorder.requestdata() to produce multiple same-length blobs plus other shorter blobs as well. the blob containing the media data is available in the dataavailable event's data property. syntax mediarecorder.ondataavailable = function(event) { ... } mediarecorder.addeventlistener('dataavailable', function(event) { ... }) example ... ...
...blobs plus other shorter blobs as well. the blob containing the media data is available in the dataavailable event's data property. syntax mediarecorder.ondataavailable = function(event) { ... } mediarecorder.addeventlistener('dataavailable', function(event) { ... }) example ... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ... specifications specifi...

MediaStream Recording API - Web APIs
to record video, call mediarecorder.start() to begin recording. your dataavailable event handler gets called every time there's data ready for you to do with as you will; the event has a data attribute whose value is a blob that contains the media data. you can force a dataavailable event to occur, thereby delivering the latest sound to you so you can filter it, save it, or whatever. recording stops automatically when the source media stops playing. you can stop recording at any time by calling mediarecorder.stop(). note: individual blobs containing slices of the recorded media will not necessarily be individually playable. the media needs to be reassembled before playback. if anything goes wrong during recording, an error event is sent to the mediarecorder. you can listen for error e...
...(). note: individual blobs containing slices of the recorded media will not necessarily be individually playable. the media needs to be reassembled before playback. if anything goes wrong during recording, an error event is sent to the mediarecorder. you can listen for error events by setting up a onerror event handler. example here, we use an html canvas as source of the mediastream, and stop recording after 9 seconds. var canvas = document.queryselector("canvas"); // optional frames per second argument. var stream = canvas.capturestream(25); var recordedchunks = []; console.log(stream); var options = { mimetype: "video/webm; codecs=vp9" }; mediarecorder = new mediarecorder(stream, options); mediarecorder.ondataavailable = handledataavailable; mediarecorder.start(); function hand...
... if you need or want to check to see if a specific mime type is supported, that's possible as well. just call me...
... if you need or want to check to see if a specific mime type is supported, that's possible as well. just call mediarecorder.istypesupported(...

SpeechRecognition - Web APIs
onalternatives provided per result. the default value is 1. speechrecognition.serviceuri specifies the location of the speech recognition service used by the current speechrecognition to handle the actual recognition. the default is the user agent's default speech service. methods speechrecognition also inherits methods from its parent interface, eventtarget. ...
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. ...
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. ...
...en the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app. also available via the onresult property. soundstart fired when any sound — recognisable speech or not — has been detected. also available via the onsoundstart property. soundend fired when any sound — recognisable speech or not — has stopped being detected. also available via the onsoundend property. speechstart fired when sound that is recognised by the speech recognition service as speech has been detected. also available via the onspeechstart property. speechend fired when speech recognised by the speech recognition service has stopped being detected. also available via the onspeechend property. start fired when the sp...

Using readable streams - Web APIs
ateobjecturl(blob)) .then(url => console.log(image.src = url)) .catch(err => console.error(err)); but a custom stream is still a readablestream instance, meaning you can attach a reader to it. as an example, have a look at our simple random stream demo (see it live also), which creates a custom stream, enqueues some random strings into it, and then reads the data out of the stream again once the stop string generation button is pressed. note: in order to consume a stream using fetchevent.respondwith(), the enqueued stream contents must be of type uint8array; for example, encoded using textencoder. the custom stream constructor has a start() method that uses a windowtimers.setinterval() call to generate a random string every second. readablestreamdefaultcontroller.enqueue() is then used to...
...om stream constructor has a start() method that uses a windowtimers.setinterval() call to generate a random string every second. readablestreamdefaultcontroller.enqueue() is then used to enqueue it into the stream. when the button is pressed, the interval is cancelled, and a function called readstream() is invoked to read the data back out of the stream again. we also close the stream, as we’ve stopped enqueuing chunks to it. const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); ...
...reateelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); readstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); in the readstream() function itself, we lock a reader to the stream using readablestream.getreader(), then follow the same kind of pattern we saw earlier — reading each chunk with read(), checking whether done is true and then ending the process if so, and reading the next chunk and processing it if not, before running the read() method a...
... the browser, but also stream it to the service worker cache. since a response body cannot be consumed more than once, and a stream can't be read by more than one reader at once, you’d need two copies to do this. we provide an example of this in our simple tee example (see it live also). this example works much the same way as our simple random stream, except that when the button is pressed to stop generating random strings, the custom stream is taken and teed, and both resulting streams are then read: function teestream() { const teedoff = stream.tee(); readstream(teedoff[0], list2); readstream(teedoff[1], list3); } pipe chains one very experimental feature of streams is the ability to pipe streams into one another (called a pipe chain). this involves two methods — reada...

Vibration API - Web APIs
example: window.navigator.vibrate([200, 100, 200]); this vibrates the device for 200 ms, then pauses for 100 ms before vibrating the device again for another 200 ms. you may specify as many vibration/pause pairs as you like, and you may provide either an even or odd number of entries; it's worth noting that you don't have to provide a pause as your last entry since the vibration automatically stops at the end of each vibration period. canceling existing vibrations calling navigator.vibrate() with a value of 0, an empty array, or an array containing all zeros will cancel any currently ongoing vibration pattern. continued vibrations some basic setinterval and clearinterval action will allow you to create persistent vibration: var vibrateinterval; // starts vibration at passed in level ...
...lling navigator.vibrate() with a value of 0, an empty array, or an array containing all zeros will cancel any currently ongoing vibration pattern. ...
... with a value of 0, an empty array, or an array containing all zeros will cancel any currently ongoing vibration pattern. ...
...array containing all zeros will cancel any currently ongoing vibration pattern. ...

Signaling and video calling - Web APIs
n the process of handling this candidate is complete. each peer sends to the other peer a candidate for each possible transport configuration that it believes might be viable for the media being exchanged. at some point, the two peers agree that a given candidate is a good choice and they open the connection and begin to share media. it's important to note, however, that ice negotiation does not stop once media is flowing. instead, candidates may still keep being exchanged after the conversation has begun, either while trying to find a better connection method, or simply because they were already in transport when the peers successfully established their connection. in addition, if something happens to cause a change in the streaming scenario, negotiation will begin again, with the negotiati...
...dtoserver({ name: myusername, target: targetusername, type: "hang-up" }); } hangupcall() executes closevideocall() to shut down and reset the connection and release resources. it then builds a "hang-up" message and sends it to the other end of the call to tell the other peer to neatly shut itself down. ...
...l; mypeerconnection.onremovestream = null; mypeerconnection.onicecandidate = null; mypeerconnection.oniceconnectionstatechange = null; mypeerconnection.onsignalingstatechange = null; mypeerconnection.onicegatheringstatechange = null; mypeerconnection.onnegotiationneeded = null; if (remotevideo.srcobject) { remotevideo.srcobject.gettracks().foreach(track => track.stop()); } if (localvideo.srcobject) { localvideo.srcobject.gettracks().foreach(track => track.stop()); } mypeerconnection.close(); mypeerconnection = null; } remotevideo.removeattribute("src"); remotevideo.removeattribute("srcobject"); localvideo.removeattribute("src"); remotevideo.removeattribute("srcobject"); document.getelementbyid("hangup-button").disable...
... the two <video> elements, we check if a webrtc connection exists; if it does, we proceed to disconnect and close the call: all of the event handlers are removed. this prevents stray event handlers from being triggered while the connection is in the process of closing, potentially causing errors. for both remote and local video streams, we iterate over each track, calling the mediastreamtrack.stop() method to close each one. close the rtcpeerconnection by calling mypeerconnection.close(). set mypeerconnection to null, ensuring our code learns there's no ongoing call; this is useful when the user clicks a name in the user list. then for both the incoming and outgoing <video> elements, we remove their src and srcobject attributes using their removeattribute() methods. this completes the ...

Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
-snap-align. the scroll-snap-type property is used on the scroll container to state the type and direction of scrolling. the scroll-snap-align property must be used on child elements in order to set the position that scrolling will snap to. the below example demonstrates scroll snapping along the y axis, with scroll-snap-align used on the section element to dictate the point the scrolling should stop. using scroll-snap-type the scroll-snap-type property needs to know the direction in which scroll snapping happens. this could be x or y, or the logical mappings block or inline. you can also use the keyword both to have scroll snapping work along both axes. you can also pass in the keywords mandatory, or proximity. the mandatory keyword tells the browser whether the content has to snap to a...
...nap-align to see how this changes the scroll behavior. padding the scroll container if you do not want the content to snap right to the edge of the scroll container you can use the scroll-padding property or its equivalent longhand values to set some padding. in the below example i have set scroll-padding to 40 pixels. when we snap to the start of the second and third sections, the scrolling stops 40 pixels away from the start of the section. try changing the scroll-padding value to see how this changes the distance. this is potentially useful if you have a fixed element, for example a navigation bar, which could end up overlapping scrolled content. by using scroll-padding you can reserve a space for it as in the example below where my <h1> remains on screen as the content scrolls bene...
... heading would overlap some of the content when snapping happens. margins on scroll children the scroll-margin property can be set set on child elements, essentially defining an outset from the defined box. this allows for different amounts of space for different child elements, and can be used in conjunction with scroll-padding on the parent. try this in the example below. the scroll-snap-stop property the scroll-snap-stop property tells the browser whether it should snap to each defined snap point — meaning that in our examples above we would stop at the start of each section — or be able to skip past sections. this property has fewer browser implementations than the rest of the specification. it could be helpful in ensuring users see each section of the scroller and don't accid...
...tart of each section — or be able to skip past sections. this property has fewer browser implementations than the rest of the specification. it could be helpful in ensuring users see each section of the scroller and don't accidentally zip past them. however it could be problematic in making the scrolling experience slower if the user is looking for a particular section. note: the scroll-snap-stop property is currently marked at risk in the current candidate recommendation spec, therefore it may be removed. ...

animation-timing-function - CSS: Cascading Style Sheets
starts quickly, slowing down the animation continues. • ease-in-out equal to cubic-bezier(0.42, 0, 0.58, 1.0), with the animating properties slowly transitioning, speeding up, and then slowing down again. cubic-bezier(p1, p2, p3, p4) an author defined cubic-bezier curve, where the p1 and p3 values must be in the range of 0 to 1. ...
...ontinues. • ease-in-out equal to cubic-bezier(0.42, 0, 0.58, 1.0), with the animating properties slowly transitioning, speeding up, and then slowing down again. cubic-bezier(p1, p2, p3, p4) an author defined cubic-bezier curve, where the p1 and p3 values must be in the range of 0 to 1. steps(n, <jumpterm>) displays an animation iteration along n stops along the transition, displaying each stop for equal lengths of time. ...
...4) an author defined cubic-bezier curve, where the p1 and p3 values must be in the range of 0 to 1. steps(n, <jumpterm>) displays an animation iteration along n stops along the transition, displaying each stop for equal lengths of time. for example, if n is 5, there are 5 steps. ...
...values must be in the range of 0 to 1. steps(n, <jumpterm>) displays an animation iteration along n stops along the transition, displaying each stop for equal lengths of time. for example, if n is 5, there are 5 steps. whether the animation holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the animation, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used: jump-start denotes a left-continuous function, so that the first jump happens when the animation begins; jump-end denotes a right-continuous function, so that the last jump happens when the animation ends; jump-none there is no jump on either end. instead, hold...

transition-timing-function - CSS: Cascading Style Sheets
0.58, 1.0), starts transitioning quickly, slowing down the transition continues. • ease-in-out equal to cubic-bezier(0.42, 0, 0.58, 1.0), starts transitioning slowly, speeds up, and then slows down again. cubic-bezier(p1, p2, p3, p4) an author defined cubic-bezier curve, where the p1 and p3 values must be in the range of 0 to 1. ...
...lowing down the transition continues. • ease-in-out equal to cubic-bezier(0.42, 0, 0.58, 1.0), starts transitioning slowly, speeds up, and then slows down again. cubic-bezier(p1, p2, p3, p4) an author defined cubic-bezier curve, where the p1 and p3 values must be in the range of 0 to 1. steps( n, <jumpterm>) displays the transition along n stops along the transition, displaying each stop for equal lengths of time. ...
... p4) an author defined cubic-bezier curve, where the p1 and p3 values must be in the range of 0 to 1. steps( n, <jumpterm>) displays the transition along n stops along the transition, displaying each stop for equal lengths of time. for example, if n is 5, there are 5 steps. ...
...3 values must be in the range of 0 to 1. steps( n, <jumpterm>) displays the transition along n stops along the transition, displaying each stop for equal lengths of time. for example, if n is 5, there are 5 steps. whether the transition holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the transition, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used: jump-start denotes a left-continuous function, so that the first jump happens when the transition begins; jump-end denotes a right-continuous function, so that the last jump happens when the animation ends; jump-none there is no jump on either end. inste...

Cross-browser audio basics - Developer guides
e 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','audiofile.ogg'); } alert('play'); myaudio.play(); alert('stop'); myaudio.pause(); alert('play from 5 seconds in'); myaudio.currenttime = 5; myaudio.play(); let's explore the available properties and methods in more detail. play the play() method is used to tell the audio to play. it takes no parameters. myaudio.play(); pause the pause() method is used to tell the audio to pause. it takes no parameters. myaudio.pause(); note: there is no stop met...
...alert('play from 5 seconds in'); myaudio.currenttime = 5; myaudio.play(); let's explore the available properties and methods in more detail. play the play() method is used to tell the audio to play. it takes no parameters. myaudio.play(); pause the pause() method is used to tell the audio to pause. it takes no parameters. myaudio.pause(); note: there is no stop method — to implement a stop function, you'd have to pause the media then set the currenttime property value to 0. canplaytype the canplaytype() method asks the browser whether a certain audio file type is supported. it takes the mime type of the type to check as a parameter. if (myaudio.canplaytype('audio/mpeg')) { // it's supported. // do something here! } canplaytype() returns one of three values: probably ma...
... for example, disable custom controls until this event occurs. myaudio.addeventlistener("canplay", function() { //audio is ready to play }); canplaythrough canplaythrough is similar to canplay but it lets you know that the media is ready to be played all the way through (that is to say that the file has completely downloaded, or it is estimated that it will download in time so that buffering stops do not occur). myaudio.addeventlistener("canplaythrough", function() { //audio is ready to play all the way through }); media loading event order to recap, the order of the media loading events are: loadstart > durationchange > loadedmetadata > loadeddata > progress > canplay > canplaythrough loading interruption events we also have a few events available that will fire when there is som...
... this occurs every 250 milliseconds. 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...

Video player styling basics - Developer guides
e html markup shown in the previous article. the custom video controls and <progress> element are now contained within <div> elements, rather than residing inside unordered list items. ...
...ous article. the custom video controls and <progress> element are now contained within <div> elements, rather than residing inside unordered list items. ...
...ticle. the custom video controls and <progress> element are now contained within <div> elements, rather than residing inside unordered list items. ...
...ate', 'pause'); } } // mute button else if (type == 'mute') { mute.setattribute('data-state', video.muted ? ...

<video>: The Video Embed element - HTML: Hypertext Markup Language
want to show the browser's default video controls, etc. the content inside the opening and closing <video></video> tags is shown as a fallback in browsers that don't support the element. attributes like all other html elements, this element supports the global attributes. autoplay a boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data. note: sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. if you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). however, this can be useful when creating media elements whose source will be set at a later time, ...
...ed. width the width of the video's display area, in css pixels (absolute values only; no percentages). events event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed. canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. canplaythrough the browser estimates it can play the media up to its end without stopping for content buffering. complete the rendering of an offlineaudiocontext is terminated. durationchange the duration attribute has been updated. emptied the media has become empty; for example, this event is sent if the media has...
... loadeddata the first frame of the media has finished loading. loadedmetadata the metadata has been loaded. pause playback has been paused. play playback has begun. playing playback is ready to start after having been paused or delayed due to lack of data. ...
...ration completed. seeking a seek operation began. stalled the user agent is trying to fetch media data, but data is unexpectedly not forthcoming. suspend media data loading has been suspended. timeupdate the time indicated by the currenttime attribute has been updated. volumechange the volume has changed. waiting playback has stopped because of a temporary lack of data usage notes browsers don't all support the same video formats; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands. <video controls> <source src="myvideo.mp4" type="video/mp4"> <source src="myvideo.webm" type="video/webm"> <p>your browser doesn't support html5 video. here...

Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
rences the svg to apply. <style>p { mask: url(#my-mask); }</style> in the above example, all paragraphs are masked by an svg <mask> with the id my-mask. ...
...s the svg to apply. <style>p { mask: url(#my-mask); }</style> in the above example, all paragraphs are masked by an svg <mask> with the id my-mask. ...
...rl(#my-mask); }</style> in the above example, all paragraphs are masked by an svg <mask> with the id my-mask. ...
...y-mask); }</style> in the above example, all paragraphs are masked by an svg <mask> with the id my-mask. ...

paint-order - SVG: Scalable Vector Graphics
indicates the order in which the painting happens, from left to right. if any of the three painting components is omitted, they will be painted in their default order after the specified components. for example, using stroke is equivalent to stroke fill markers. ...
...cates the order in which the painting happens, from left to right. if any of the three painting components is omitted, they will be painted in their default order after the specified components. for example, using stroke is equivalent to stroke fill markers. ...
...the painting happens, from left to right. if any of the three painting components is omitted, they will be painted in their default order after the specified components. for example, using stroke is equivalent to stroke fill markers. ...
...ainting happens, from left to right. if any of the three painting components is omitted, they will be painted in their default order after the specified components. for example, using stroke is equivalent to stroke fill markers. ...

<defs> - SVG: Scalable Vector Graphics
the svg content and is beneficial to the overall accessibility of the document. ...
...nd is beneficial to the overall accessibility of the document. ...
...all accessibility of the document. ...
...of the document. ...

<radialGradient> - SVG: Scalable Vector Graphics
an be applied to fill or stroke of graphical elements. don't be confused with css radial-gradient() as css gradients can only apply to html elements where svg gradient can only apply to svg elements. html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="mygradient"> <stop offset="10%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient. value type: <length> ; default value: 50%; animatable: yes cy this attribute d...
...fines the x coordinate of the end circle of the radial gradient. value type: <length> ; default value: 50%; animatable: yes cy this attribute defines the y coordinate of the end circle of the radial gradient. value type: <length> ; default value: 50%; animatable: yes fr this attribute defines the radius of the start circle of the radial gradient. the gradient will be drawn such that the 0% <stop> is mapped to the perimeter of the start circle. value type: <length> ; default value: 50%; animatable: yes fx this attribute defines the x coordinate of the start circle of the radial gradient. value type: <length> ; default value: same as cx; animatable: yes fy this attribute defines the y coordinate of the start circle of the radial gradient. value type: <length> ; default value: same a...
...t coordinate system. value type: <transform-list> ; default value: identity transform; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template. value type: <url> ; default value: none; animatable: yes r this attribute defines the radius of the end circle of the radial gradient. the gradient will be drawn such that the 100% <stop> is mapped to the perimeter of the end circle. value type: <length> ; default value: 50%; animatable: yes spreadmethod this attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient. value type: pad|reflect|repeat ; default value: pad; animatable: yes xlink:href an <iri> reference to another <lineargradient> element that will b...
... candidate recommendation added fr attribute scalable vector graphics (svg) 1.1 (second edition)the definition of '<radialgradient>' in that specification. recommendation initial definition ...

<solidcolor> - SVG: Scalable Vector Graphics
this is less elegant, and unlike <solidcolor>, cannot itself be used in the definition of gradients. ...
...sentation attributes style attributes specific attributes none. dom interface this element implements the svgsolidcolorelement interface. example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 200" height="150"> <defs> <!-- solidcolor is experimental. ...
...xample svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 200" height="150"> <defs> <!-- solidcolor is experimental. --> <solidcolor id="mycolor" solid-color="gold" solid-opacity="0.8"/> <!-- lineargradient with a single color stop is a less elegant way to achieve the same effect, but it works in current browsers. ...
...g xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 200" height="150"> <defs> <!-- solidcolor is experimental. --> <solidcolor id="mycolor" solid-color="gold" solid-opacity="0.8"/> <!-- lineargradient with a single color stop is a less elegant way to achieve the same effect, but it works in current browsers. ...

SVG documentation index - SVG: Scalable Vector Graphics
as the fill-rule attribute, except that it applies to <clippath> definitions. 43 clippathunits svg, svg attribute the clippathunits attribute indicates which coordinate system to use for the contents of the <clippath> element. 44 color svg, svg attribute the color attribute is used to provide a potential indirect value, currentcolor, for the fill, stroke, stop-color, flood-color, and lighting-color attributes. 45 color-interpolation needsexample, svg, svg attribute the color-interpolation attribute specifies the color space for gradient interpolations, color animations, and alpha compositing. 46 color-interpolation-filters needsexample, svg, svg attribute the color-interpolation-filters attribute specifies the ...
... deprecated, svg, svg attribute the stemh attribute indicates the horizontal stem width of the font. 195 stemv deprecated, svg, svg attribute the stemv attribute indicates the vertical stem width of the font. 196 stitchtiles filters, svg, svg attribute the stitchtiles attribute defines how the perlin noise tiles behave at the border. 197 stop-color needsexample, svg, svg attribute the stop-color attribute indicates what color to use at a gradient stop. 198 stop-opacity needsexample, svg, svg attribute the stop-opacity attribute defines the opacity of a given color gradient stop. 199 strikethrough-position attribute, reference, référence(2), svg, font the strikethrough-position attr...
... svg, svg animation the svg <set> element provides a simple means of just setting the value of an attribute for a specified duration. 365 <solidcolor> element, experimental, reference, svg the <solidcolor> svg element lets authors define a single color for use in multiple places in an svg document. it is also useful as away of animating a palette colors. 366 <stop> element, reference, svg, svg gradient the svg <stop> element defines a color and its position to use on a gradient. this element is always a child of a <lineargradient> or <radialgradient> element. 367 <style> element, reference, svg the svg <style> element allows style sheets to be embedded directly within svg content. 368 <svg> element, reference, ...
...ted because a user created a sub-page to this page. 382 specification deviations svg there are a few places where we have consciously decided to make gecko deviate from or extend the svg specification. this page lists those deviations/extensions and our reasoning for them. 383 mimetypes.rdf corruption svg this page explains a problem that can cause svg to stop working in mozilla due to the way mozilla maps filename extensions to media types. ...

Progress Listeners - Archive of obsolete content
ks. in the examples below the progress listener is attached to the tabbrowser, which means you don't get any notifications for inactive tabs. firefox 3.5 includes a way to set up a listener for all tabs, selected and not: listening to events on all tabs. ...
... listener is attached to the tabbrowser, which means you don't get any notifications for inactive tabs. firefox 3.5 includes a way to set up a listener for all tabs, selected and not: listening to events on all tabs. ...
...if you use mylistener for more than one tab/window, // use aprogress.domwindow to obtain the tab/window which triggered the change. ...

JavaScript Client API - Archive of obsolete content
taining the mapping between guids and records. example here's the skeleton of a sample tracker class. function footracker(name) { tracker.call(this, name); // register yourself as event listener or observer for whatever // you want to track. note that this may unnecessarily slow down // things for users who don't use sync. ...
... function footracker(name) { tracker.call(this, name); // register yourself as event listener or observer for whatever // you want to track. note that this may unnecessarily slow down // things for users who don't use sync. ...
... this._enabled = false; } break; }, onevent: function onevent() { /* here is where you'd handle the event. ...

Install script template - Archive of obsolete content
} reseterror(); err = performinstall(); if (err == success) refreshplugins(true); // call refreshplugins(true) if you'd like the web page which invoked the plugin to // reload. you can also simply call refreshplugins() } else cancelinstall(errblock1); // plid solution -- write keys to the registry /** * function for secondary installation of plugin (firstinstall). * you should not stop the install process because the function failed, * you still have a chance to install the plugin for the already * installed gecko browsers. * * @param empty param list **/ function createsecondaryinstall() { // use getfolder in such a way that it creates c:\winnt\system32\myplugin secondaryfolder = getfolder("win system", company_name); // if secondaryfolder is null, then there has b...
... mimetype, suffix, suffix_description); logcomment("first install installation: registerplid("+hkey_current_user+") returned, status "+hklm_status); if (hkcu_status != 0) { logcomment("could not write to the registry. errorcode="+hkcu_status); return hkcu_status; } } return 0; } /** * function for preinstallation of plugin (firstinstall). * you should not stop the install process because the function failed, * you still have a chance to install the plugin for the already * installed gecko browsers. * * @param dirpath directory path from getfolder * @param spacerequired required space in kilobytes * **/ function verifydiskspace(dirpath, spacerequired) { var spaceavailable; // get the available disk space on the given path spaceavaila...
...ilable = parseint(spaceavailable / 1024); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" available: " + spaceavailable + " k"); return(false); } return(true); } /** * function for writing keys to the win32 system registry. * you should not stop the install process because the function failed. * you still have a chance to install the plugin for the * current gecko browser. * * @param rootkey must be one of these two string values hkey_local_machine or hkey_current_user * @param plidid plid for plugins * @param dllabsolutepath the fully qualified path to the dll * @param xptabsolutepath the fully qualified path to the xpt *...

tabbrowser - Archive of obsolete content
autocompletepopup type: id the id of a popup element used to hold autocomplete results for the element. autoscroll type: boolean set to false to disable autoscroll for this browser. if this attribute is set to true or omitted, autoscroll will be enabled ...
...erty may also be optionally used to set the referrer page. this method returns an array of the session history objects for the tabs that were removed. selecttabatindex( index, event ) return type: no return value selects the tab at the given index. index values may be positive or negative. ...
...event argument is supplied, the default event handling will be prevented and propagation stopped. seticon( atab, auri ) return type: no return value sets the specified tab's favicon to the image specified by auri. see geticon to get the current icon. showonlythesetabs( atabs ) return type: no return value makes all tabs in the atabs array visible, and all other tabs hidden. stop() return type: no return value equivalent to pressing the stop button, this method stops the currently loading document. unpintab( tabelement ) return type: no return value unpins the specified tab element, making it no longer an app tab. related code snippets: tabbed browser ...

2006-10-20 - Archive of obsolete content
marcus claims that when he builds firefox using centos he encounters crashes (segmentation faults) under linux distributions such as gentoo, suse and fedora. he also points out that when he performs a local build any of those platforms (gentoo, suse and fedora) he doesn't encounter any problems on the same machine. ...
... he doesn't encounter any problems on the same machine. adding extension to extensions/ folder originally posted on oct 19th: christopher finke is currently learning how to compile firefox. though he has succeeded in building firefox he has so far failed to compile firefox with his own extensions of choice so that his custom build would have those extensions enabled in the end product. christopher finke is asking the community members for tutorials or any tips on how to get started. on october 20th christopher finke responded to his original post. ...
...so that his custom build would have those extensions enabled in the end product. christopher finke is asking the community members for tutorials or any tips on how to get started. on october 20th christopher finke responded to his original post. he stated that he was able to pre-package the extensions that he wanted by following this walkthrough and a little bit of help from this post. christopher would not like to learn how to create a build of firefox with custom extensions and not have those extensions appear in the addons window. on october 20th jeff walden responded christopher finke's question. jeff provided this link as an answer to christopher finkes' question. nsis and my extension jan vávra is wondering how he could create a win32 installer of thunderbird that whe...

Mobile touch controls - Game development
andlecancel); this way, touching the game's <canvas> on the mobile screen would emit events, and thus we could manipulate the game in any way we want (for example, moving the space ship around). the events are as follows: touchstart is fired when the user puts a finger on the screen. touchmove is fired when they move the finger on the screen while touching it touchend is fired when the user stops touching the screen touchcancel is fired when a touch is cancelled, for example when the user moves their finger outside of the screen. note: the touch events reference article provides more examples and information. pure javascript demo let's implement the mobile support in a little demo available on github, so we can move the player's ship by touching the screen on a mobile device. we ...
... will be executed when the ondown event is dispatched by touching the screen. the pointer variable will contain the information about the pointer that activated the event. this approach uses the generally available this.game.input object, but you can also detect the actions on any game objects like sprites or buttons by using oninputover, oninputout, oninputdown, oninputup, ondragstart, or ondragstop: this.button.events.oninputover.add(itemtouched, this); function itemtouched(button, pointer) { // do something } that way you'll be able to attach an event to any object in the game, like the player's ship, and react to the actions performed by the user. an additional advantage of using phaser is that the buttons you create will take any type of input, whether it's a touch on mobile or a...
...the bullets to the right — this is all we need in this case. moving the player could be managed by creating the four directional buttons, but we can take the advantage of touch screens and drag the player's ship around: var player = this.game.add.sprite(30, 30, 'ship'); player.inputenabled = true; player.input.enabledrag(); player.events.ondragstart.add(ondragstart, this); player.events.ondragstop.add(ondragstop, this); function ondragstart(sprite, pointer) { // do something when dragging } we can pull the ship around and do something in the meantime, and react when the drag is stopped. hauling in phaser, if enabled, will work out of the box — you don't have to set the position of the sprite yourself manually, so you could leave the ondragstart() function empty, or place some debug...

CSS and JavaScript accessibility best practices - Learn web development
lso 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. on the other hand, you shouldn't use visibility:hidden or display:none, because they do hide content from screen readers. unless of course, there is a good reason why you want this content to be hidden from screen readers. note: invisible content just for screen reader users has a lot more useful detail surrounding this topic. accept that users can override...
...ually looks like a name, the entered age is actually a number and is realistic (e.g. nonnegative and less than 4 digits). here we've just implemented a simple check that a value has been filled in to each input field (if(testitem.input.value === '')). when the validation has been performed, if the tests pass then the form is submitted. if there are errors (if(errorlist.innerhtml !== '')) then we stop the form submitting (using preventdefault()), and display any error messages that have been created (see below). this mechanism means that the errors will only be shown if there are errors, which is better for usability. for each input that doesn't have a value filled in when the form is submitted, we create a list item with a link and insert it in the errorlist. function createlink(testitem) {...
... mouse-and-keyboard-events.html (see also the source code). the code features two functions that show and hide the zoomed-in image; these are run by the following lines that set them as event handlers: imgthumb.onmouseover = showimg; imgthumb.onmouseout = hideimg; imgthumb.onfocus = showimg; imgthumb.onblur = hideimg; the first two lines run the functions when the mouse pointer hovers over and stops hovering over the thumbnail, respectively. this won't allow us to access the zoomed view by keyboard though — to allow that, we've included the last two lines, which run the functions when the image is focused and blurred (when focus stops). this can be done by tabbing over the image, because we've included tabindex="0" on it. the click event is interesting — it sounds mouse-dependent, but ...

Getting started with HTML - Learn web development
f(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<em>this is my text.</em>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value...
... 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<p>a link to my <a href="https://www.mozilla.org/" title="the mozilla homepage" target="_blank">favorite website</a>.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value...
..."https://en.wikipedia.org/wiki/rush_%28band%29" title="rush wikipedia article">rush</a>.\ my favourite rush album is currently <a href="http://www.deezer.com/album/942295">moving pictures</a>.</p>\ <img src="https://udn.realityripple.com/samples/4b/9bb5edda5d.jpg">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value...

Images in HTML - Learn web development
olution = '<img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="a t-rex on display in the manchester university museum">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value...
...olution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; annotating images with figures and figure captions speaking of captions, there are a number of ways that you could add a caption to go with your image. for example, there would be nothing to stop you from doing this: <div class="figure"> <img src="images/dinosaur.jpg" alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" height="341"> <p>a t-rex on display in the manchester university museum.</p> </div> this is ok. it contains the content you need, and is nicely stylable using css. but there is a prob...
.../udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>a t-rex on display in the manchester university museum</figcaption>\n</figure>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value...

Making decisions in your code — conditionals - Learn web development
n this code } here we've got: the keyword switch, followed by a set of parentheses. an expression or value inside the parentheses. the keyword case, followed by a choice that the expression/value could be, followed by a colon. some code to run if the choice matches the expression. a break statement, followed by a semi-colon. if the previous choice matches the expression/value, the browser stops executing the code block here, and moves on to any code that appears below the switch statement. as many other cases (bullets 3–5) as you like. the keyword default, followed by exactly the same code pattern as one of the cases (bullets 3–5), except that default does not have a choice after it, and you don't need to break statement as there is nothing to run after this in the block anyway. ...
...eatecalendar(days, choice) {\n list.innerhtml = \'\';\n h1.textcontent = choice;\n for(let i = 1; i <= days; i++) {\n const listitem = document.createelement(\'li\');\n listitem.textcontent = i;\n list.appendchild(listitem);\n }\n }\n\ncreatecalendar(31,\'january\');'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.
...hite\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgcolor, textcolor) {\n html.style.backgroundcolor = bgcolor;\n html.style.color = textcolor;\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.

Introduction to web APIs - Learn web development
see it live also), you'll first see the following html: <audio src="outfoxing.mp3"></audio> <button class="paused">play</button> <br> <input type="range" min="0" max="1" step="0.01" value="1" class="volume"> we, first of all, include an <audio> element with which we embed an mp3 into the page. we don't include any default browser controls. next, we include a <button> that we'll use to play and stop the music, and an <input> element of type range, which we'll use to adjust the volume of the track while it's playing. next, let's look at the javascript for this example. we start by creating an audiocontext instance inside which to manipulate our track: const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); next, we create constants that ...
...ouple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing: // play/pause audio playbtn.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } // if track is stopped, play it if (this.getattribute('class') === 'paused') { audioelement.play(); this.setattribute('class', 'playing'); this.textcontent = 'pause' // if track is playing, stop it } else if (this.getattribute('class') === 'playing') { audioelement.pause(); this.setattribute('class', 'paused'); this.textcontent = 'play'; } }); // if track ...
...lled autoplay policy — this basically means that you can't automatically play audio when a page loads — you've got to allow your users to initiate audio play through a control like a button. this is done because autoplaying audio is usually really annoying and we really shouldn't be subjecting our users to it. note: depending on how strict the browser is, such security mechanisms might even stop the example from working locally, i.e. if you load the local example file in your browser instead of running it from a web server. at the time of writing, our web audio api example wouldn't work locally on google chrome — we had to upload it to github before it would work. summary at this point, you should have a good idea of what apis are, how they work, and what you can do with them in you...

Third-party APIs - Learn web development
the pattern is relatively similar for most of them. requiring a key enables the api provider to hold users of the api accountable for their actions. when the developer has registered for a key, they are then known to the api provider, and action can be taken if they start to do anything malicious with the api (such as tracking people's location or trying to spam the api with loads of requests to stop it working, for example). the easiest action would be to just revoke their api privileges. extending the mapquest example let's add some more functionality to the mapquest example to show how to use some other features of the api. to start this section, make yourself a copy of the mapquest starter file, in a new directory. if you've already cloned the examples repository, you'll already h...
...functionality" comment. this runs a function called submitsearch() when the form is submitted (the button is pressed). ...
...ey + '&page=' + pagenumber + '&q=' + searchterm.value + '&fq=document_type:("article")'; if(startdate.value !== '') { url += '&begin_date=' + startdate.value; }; if(enddate.value !== '') { url += '&end_date=' + enddate.value; }; } submitsearch() sets the page number back to 0 to begin with, then calls fetchresults(). this first calls preventdefault() on the event object, to stop the form actually submitting (which would break the example). next, we use some string manipulation to assemble the full url that we will make the request to. we start off by assembling the parts we deem as mandatory for this demo: the base url (taken from the baseurl variable). the api key, which has to be specified in the api-key url parameter (the value is taken from the key variable). th...

Useful string methods - Learn web development
et input = greetings[i];' + '\n if (greetings[i].indexof(\'christmas\') !== -1) {' + '\n let result = input;' + '\n let listitem = document.createelement(\'li\');' + '\n listitem.textcontent = result;' + '\n list.appendchild(listitem);' + '\n }' + '\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.
...e(0,1);' + '\n let capitalized = lower.replace(firstletter,firstletter.touppercase());' + '\n let result = capitalized;' + '\n let listitem = document.createelement(\'li\');' + '\n listitem.textcontent = result;' + '\n list.appendchild(listitem);' + '\n' + '\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.
...' + '\n let semic = input.indexof(\';\');' + '\n let name = input.slice(semic + 1);' + '\n let result = code + \': \' + name;' + '\n let listitem = document.createelement(\'li\');' + '\n listitem.textcontent = result;' + '\n list.appendchild(listitem);' + '\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.

Adding a new todo form: Vue events, methods, and models - Learn web development
here for consistency. add the submit handler to your <form> element like so: <form @submit="onsubmit"> when you run this, the app still posts the data to the server, causing a refresh. since we're doing all of our processing on the client, there's no server to handle the postback. we also lose all local state on page refresh. to prevent the browser from posting to the server, we need to stop the event’s default action from bubbling up through the page (event.preventdefault(), in vanilla javascript). vue has a special syntax called event modifiers that can handle this for us right in our template. modifiers are appended to the end of an event with a dot like so: @event.modifier. here is a list of event modifiers: .stop: stops the event from propagating. equivalent to event...
...the event’s default action from bubbling up through the page (event.preventdefault(), in vanilla javascript). vue has a special syntax called event modifiers that can handle this for us right in our template. modifiers are appended to the end of an event with a dot like so: @event.modifier. here is a list of event modifiers: .stop: stops the event from propagating. equivalent to event.stoppropagation() in regular javascript events. .prevent: prevents the event's default behavior. equivalent to event.preventdefault(). .self: triggers the handler only if the event was dispatched from this exact element. {.key}: triggers the event handler only via the specified key. mdn has a list of valid key values; multi-word keys just need to be converted to kebab case (e.g. page-down). ...
...iggers the handler via the left mouse button event. .right: only triggers the handler via the right mouse button event. .middle: only triggers the handler via the middle mouse button event. .passive: equivalent to using the { passive: true } parameter when creating an event listener in vanilla javascript using addeventlistener(). in this case, we need to use the .prevent handler to stop the browser’s default submit action. add .prevent to the @submit handler in your template like so: <form @submit.prevent="onsubmit"> if you try submitting the form now, you'll notice that the page doesn't reload. if you open the console, you can see the results of the console.log() we added inside our onsubmit() method. binding data to inputs with v-model next up, we need a way to get ...

Handling common JavaScript problems - Learn web development
you can select the script you want to debug (in this case we have only one). the center panel shows the code in the selected script. the right-hand panel shows useful details pertaining to the current environment — breakpoints, callstack and currently active scopes. the main feature of such tools is the ability to add breakpoints to code — these are points where the execution of the code stops, and at that point you can examine the environment in its current state and see what is going on. let's get to work. the error is now being thrown at line 51. click on line number 51 in the center panel to add a breakpoint to it (you'll see a blue arrow appear over the top of it). now refresh the page (cmd/ctrl + r) — the browser will pause execution of the code at line 51. at this point, the...
...ction we are currently in, and second we have onload, which stores the event handler function containing the call to showheroes(). under scopes, you'll see the currently active scope for the function we are looking at. we only have three — showheroes, block, and window (the global scope). each scope can be expanded to show the values of variables inside the scope when execution of the code was stopped. we can find out some very useful information in here. expand the showheroes scope — you can see from this that the heroes variable is undefined, indicating that accessing the members property of jsonobj (first line of the function) didn't work. you can also see that the jsonobj variable is storing a text string, not a json object. exploring further down the call stack, click onload i...
...re's also an online version — see jscompress.com) when using apis, make sure you turn off the api features when they are not being used; some api calls can be really expensive on processing power. for example, when showing a video stream, make sure it is turned off when you can't see it. when tracking a device's location using repeated geolocation calls, make sure you turn it off when the user stops using it. animations can be really costly for performance. a lot of javascript libraries provide animation capabilities programmed by javascript, but it is much more cost effective to do the animations via native browser features like css animations (or the nascent web animations api) than javascript. read brian birtles' animating like you just don’t care with element.animate for some really ...

Debugging on Mac OS X
"close" to close the scheme editor. at this point you can run the application from xcode, and when you pause or hit breakpoints it should show open the correct source file at the correct line. setting up lldb lldb is the debugger xcode provides/uses. one important issue that the mozilla .lldbinit file fixes is that by default some breakpoints will be listed as "pending", and xcode will not stop at them. if you don't include the mozilla's .lldbinit, you must at least put settings set target.inline-breakpoint-strategy always in your $home/.lldbinit as recommended on debugging mozilla with lldb. the .lldbinit file in the source tree imports many useful mozilla specific lldb settings, commands and formatters into lldb, but you may need to take one of the following steps to make sure this ...
...ting a breakpoint is easy. just open the source file you want to debug in xcode, and click in the margin to the left of the line of code where you want to break. during the debugging session, each time that line is executed, the debugger will break there, and you will be able to debug it. note that with the default configuration, some breakpoints will be listed as "pending", and xcode will not stop at them. if you don't include the mozilla's .lldbinit, you must at least put settings set target.inline-breakpoint-strategy always in your $home/.lldbinit as recommended on debugging mozilla with lldb. using mozilla-specific lldb commands if you included the .lldbinit when setting up lldb, you can use mozilla-specific lldb commands in the console, located in the debug area of xcode. for exampl...
...tton. the information area at the top of the window will show "waiting for plugin-container to launch" from a command line, run your build of firefox. when that launches a child process (for example, when you start to load a webpage), xcode will notice and attach to that child process. you can then debug the child process like you would any other process. when you are done debugging, click the "stop" button and quit the instance of firefox that you were debugging in the normal way. for some help on using lldb see debugging mozilla with lldb. other resources apple has an extensive list of debugging tips and techniques. questions? problems? try asking in our irc channels #developers or #macdev. ...

Browser API
by the htmliframeelement interface. browser api interfaces to support the requirement of a browser <iframe>, the htmliframeelement dom interface has been extended with new methods that give the <iframe> some super powers. navigation methods the following navigation methods allow navigation through the browsing history of the <iframe>. they are necessary to be able to implement back, forward, stop, and reload buttons. htmliframeelement.reload() allows reloading of the <iframe> element content. htmliframeelement.stop() allows stopping of the <iframe>'s content loading. htmliframeelement.getcangoback() indicates whether it's possible to navigate backwards. htmliframeelement.goback() changes the location of the <iframe> for the previous location in its browsing history. htmliframee...
...w events can be listened for: mozbrowseractivitydone sent when something inside the browser <iframe> triggers a web activity, and that web activity's message is consumed by the receiving app. mozbrowserasyncscroll sent when the browser <iframe> content scrolls (the apcz version.) see also mozbrowserscroll. note that this is obsolete. mozbrowseraudioplaybackchange sent when audio starts or stops playing within the browser <iframe> content. mozbrowsercaretstatechanged sent when the text selected inside the browser <iframe> content changes. mozbrowserclose sent when window.close() is called within a browser <iframe>. mozbrowsercontextmenu sent when a browser <iframe> tries to open a context menu. this allows handling of the <menuitem> element available within the browser <iframe>'s...
...ze sent when the browser <iframe>'s window size has changed. mozbrowserscroll sent when the browser <iframe> content scrolls. mozbrowserscrollareachanged sent when the available scrolling area in the browser <iframe> changes. this can occur on resize and when the page size changes (while loading for example.) mozbrowserscrollviewchange sent when asynchronous scrolling (i.e. apcz) starts or stops. mozbrowsersecuritychange sent when the ssl state changes within a browser <iframe>. mozbrowserselectionstatechanged sent when the text selected inside the browser <iframe> content changes. note that this is obsolete, and newer implementations use mozbrowsercaretstatechanged instead. mozbrowsershowmodalprompt sent when alert(), confirm(), or prompt() are called within a browser <iframe>. ...

How to implement a custom autocomplete search component
to do so put the following declaration in your chrom...
...to do so put the following declaration in your chrome.manifest file: component {x753d830-ba1e-11e0-962b-08002...
...results.push(searchresults[i].value); if (searchresults[i].comment) comments.push(searchresults[i].comment); else comments.push(null); } } var newresult = new simpleautocompleteresult(searchstring, ci.nsiautocompleteresult.result_success, 0, "", results, comments); listener.onsearchresult(this, newresult); } }, /* * stop an asynchronous search that is in progress */ stopsearch: function() { }, queryinterface: function(aiid) { if (!aiid.equals(ci.nsiautocompletesearch) && !aiid.equals(ci.nsisupports)) throw components.results.ns_error_no_interface; return this; } }; // factory var simpleautocompletesearchfactory = { singleton: null, createinstance: function (aouter, aiid) { if ...

Profiling with Xperf
pted for this, then something isn't configured right in your symbol path. (again, make sure that the directories exist; if they don't, it's a silent error.) quick start all these tools will live, by default, in c:\program files\microsoft windows performance toolkit. either run these commands from there, or add the directory to your path. you will need to use an elevated command prompt to start or stop profiling. start recording data: xperf -on latency -stackwalk profile "latency" is a special provider name that turns on a few predefined kernel providers; run "xperf -providers k" to view a full list of providers and groups. you can combine providers, e.g., "xperf -on diageasy+file_io". "-stackwalk profile" tells xperf to capture a stack for each profile event; you could also do "-stackwalk prof...
...l provider name that turns on a few predefined kernel providers; run "xperf -providers k" to view a full list of providers and groups. you can combine providers, e.g., "xperf -on diageasy+file_io". "-stackwalk profile" tells xperf to capture a stack for each profile event; you could also do "-stackwalk profile+file_io" to capture a stack on each cpu profile tick and each file io completion event. stop: xperf -d out.etl view: xperfview out.etl the msdn "quickstart" page goes over this in more detail, and also has good explanations of how to use xperfview. i'm not going to repeat it here, because i'd be using essentially the same screenshots, so go look there. the 'stack' view will give results similar to shark. heap profiling xperf has good tools for heap allocation profiling, but they have one...
...ace is often missing module information (i believe this is a bug in xperf). it's possible to get around that by doing a simultaneous capture of non-heap data. to start a trace session, launching a new firefox instance: xperf -on base xperf -start heapsession -heap -pidnewprocess "./firefox.exe -p test -no-remote" -stackwalk heapalloc+heaprealloc -buffersize 512 -minbuffers 128 -maxbuffers 512 to stop a session and merge the resulting files: xperf -stop heapsession -d heap.etl xperf -d main.etl xperf -merge main.etl heap.etl result.etl "result.etl" will contain your merged data; you can delete main.etl and heap.etl. note that it's possible to capture even more data for the non-heap profile; for example, you might want to be able to correlate heap events with performance data, so you can do "...

AsyncTestUtils extended framework
-level event loop). mozmill is an example of a testing framework that uses a nested event loop. in the future we will probably move the asynctestutils framework to a nested event loop in a backwards-compatible fashion. how does this affect my tests? thanks to javascript enhancements available on the mozilla platform, it is possible for a function to yield control in such a way that the function stops running at the line where you use a yield statement and resumes execution on the next line when resumed. this allows you to write reasonably normal looking functions instead of having to chain together a whole bunch of functions and callbacks. your test functions need to agree to the following contract: the asynchronous function contract a function should yield false or return false when som...
...r return false when something asynchronous is going on. when the asynchronous operation is complete, something needs to call async_driver(). returning false tells the asynchronous driver that it should yield control up to the top-level. calling async_driver() lets it know to start up again. a function should yield true or return true when the asynchronous driver should continue executing without stopping. a function that does not return anything (or returns undefined) and is not a generator is treated like a function that returned true. most of the things you will want to do already have helper functions that take care of all of this, so all you need to do is pass their return values through. for example, you would do "yield async_move_messages(...);" and be done with it. helpers for the ...
...ot junk (false). this does not involves the bayesian classifier and does not do anything like moving the message to the junk folder. it does, however, send a junkstatuschanged notification via the nsimsgfoldernotificationservice's itemevent mechanism. set manipulation union(aotherset) take the union of this set and the provided other set and return the (new, not modified) result. you should stop using both the message set that you called this on and the other set that you passed in unless you are very careful. namely, if you use async_move_messages / async_trash_messages on the resulting set, the original sets won't know the messages moved and will get confused if you try and access headers via them again. slice(...) uses the js array.slice semantics to slice the set. same warnings as ...

NSS Sample Code sample3
"part 1 -- simple hashing" << endl; /* initialize data */ memset(data, 0xbc, sizeof data); /* create a context for hashing (digesting) */ context = pk11_createdigestcontext(sec_oid_md5); if (!context) { cout << "createdigestcontext failed" << endl; goto done; } s = pk11_digestbegin(context); if (s != secsuccess) { cout << "digestbegin failed" << endl; goto done; } s = pk11_digestop(context, data, sizeof data); if (s != secsuccess) { cout << "digestupdate failed" << endl; goto done; } s = pk11_digestfinal(context, digest, &len, sizeof digest); if (s != secsuccess) { cout << "digestfinal failed" << endl; goto done; } /* print digest */ printdigest(digest, len); pk11_destroycontext(context, pr_true); context = 0; /* * part 2 - hashing with included secr...
...id_md5); context = pk11_createcontextbysymkey(ckm_md5, cka_digest, key, &noparams); if (!context) { cout << "createdigestcontext failed" << endl; goto done; } s = pk11_digestbegin(context); if (s != secsuccess) { cout << "digestbegin failed" << endl; goto done; } s = pk11_digestkey(context, key); if (s != secsuccess) { cout << "digestkey failed" << endl; goto done; } s = pk11_digestop(context, data, sizeof data); if (s != secsuccess) { cout << "digestupdate failed" << endl; goto done; } s = pk11_digestfinal(context, digest, &len, sizeof digest); if (s != secsuccess) { cout << "digestfinal failed" << endl; goto done; } /* print digest */ printdigest(digest, len); pk11_destroycontext(context, pr_true); context = 0; /* * part 3 - mac (with secret key) *...
... cout << "part 3 -- mac (with secret key)" << endl; /* initialize data */ memset(data, 0xbc, sizeof data); context = pk11_createcontextbysymkey(ckm_md5_hmac, cka_sign, key, &noparams); if (!context) { cout << "createcontextbysymkey failed" << endl; goto done; } s = pk11_digestbegin(context); if (s != secsuccess) { cout << "digestbegin failed" << endl; goto done; } s = pk11_digestop(context, data, sizeof data); if (s != secsuccess) { cout << "digestop failed" << endl; goto done; } s = pk11_digestfinal(context, digest, &len, sizeof digest); if (s != secsuccess) { cout << "digestfinal failed" << endl; goto done; } /* print digest */ printdigest(digest, len); pk11_destroycontext(context, pr_true); context = 0; done: if (context) pk11_destroycontext(context, ...

nss tech note5
unction, in case you don't need a nss database is nss_nodb_init(".") <big>create digest context</big>. some of the digest algorithm identifiers are (without the sec_oid_ prefix) : md2, md5, sha1, sha256, sha384, sha512. ...
...t</big> pk11context* digestcontext = pk11_createcontextbysymkey(digestmech, cka_digest, symkey, &param); <big>digest the data</big>, providing the key <big>secstatus s = pk11_digestbegin(digestcontext); s = pk11_digestkey(digestcontext, symkey); s = pk11_digestop(digestcontext, data, sizeof data); s = pk11_digestfinal(digestcontext, digest, &len, sizeof digest); /* now, digest contains the 'digest', and len contains the length of the digest */</big> clean up pk11_destroycontext(digestcontext, pr_true); pk11_freesymkey(symkey); pk11_freeslot(slot); you can also look at a sample program illustrating this hmac include headers ...
...aram.data = null; param.len = 0;</big> <big>create crypto context</big> pk11context* digestcontext = pk11_createcontextbysymkey(hmacmech, cka_sign, symkey, &param); <big>digest the data</big> <big>secstatus s = pk11_digestbegin(digestcontext); s = pk11_digestop(digestcontext, data, sizeof data); s = pk11_digestfinal(digestcontext, digest, &len, sizeof digest); /* now, digest contains the 'signed digest', and len contains the length of the digest */</big> clean up pk11_destroycontext(digestcontext, pr_true); pk11_freesymkey(symkey); pk11_freeslot(slot); you can also look at a sample program illustrating this symmetric key w...

Necko walkthrough
to ... nsdocshell::internalload nsdocshell::douriload opens the nsichannel for the uri (ns_newchannel) if "http:", it will be an nsihttpchannel nsdocshell::dochannelload nsuriloader::openuri passes an nsistreamlistener pointer, 'loader' to nsuriloader::openchannel - it creates an nsdocumentopeninfo object, which implements nsistreamlistener, i.e. has onstartrequest, onstoprequest, ondataavailable, the three functions in which channel responses are received asynchronously. nshttpchannel::asyncopen called from openuri; openchannel isn't named the best, since the opening happens in the context of openuri, its calling function. this is where it hits necko code. but the interface for clients of necko is important to consider: send request uri h...
...r clients of necko is important to consider: send request uri helps creates channel setup channel (headers, request data, response callback...) channel->asyncopen. receive response get a callback to each of these: nsistreamlistener::onstartrequest (header info) nsistreamlistener::ondataavailable (data in single or multiple chunks) nsistreamlistener::onstoprequest (no more data from http) this all happens on the main thread, in a non-blocking fashion: make your request on the main thread, then carry on and get the async response later, also on the main thread. there is an option to receive ondataavailable specifically on a non-main thread, but all other calls happen on the main thread. then in necko http code (still on the main threa...
... was initially created and posted to the connection manager on the socket thread. and in that function it created a proxy callback because it wished to have oninputstreamready called on the main thread. back on the main thread: nsinputstreampump::oninputstreamready this function in turn calls nsinputstreampump::onstatestart, nsinputstreampump::onstatetransfer and nsinputstreampump::onstatestop. these functions call nsistreamlistener::onstartrequest, nsistreamlistener::ondataavailable and nsistreamlistener::onstoprequest respectively. and that brings us back to the nshttpchannel api and nsdocshell gets its data. ...

Web Replay
ools settings and select "enable webreplay". web replay's features can only be used in a tab that is recording or replaying. there are a few ways to start recording a tab: record current tab open the developer tools and click the button indicated below. this will refresh the tab and start recording. the button will be colored blue when the tab is being recorded. it can be clicked again to stop recording. open a new tab in recording mode click the 'tools -> web developer -> web replay -> reload and record tab' menu item. this has the same effect as above but can be used when the developer tools are not open. open a saved recording in a new tab click the 'tools -> web developer -> web replay -> open new recording tab' menu item to open a new blank tab that is recorded. live re...
...er tools that use time travel to help debug a recording/replaying tab. step back when paused, the reverse step button in the debugger developer tool will step to the previous line executed and allow inspecting program state there. it is the opposite of the normal forward step button. rewind to breakpoint when paused, if there are any breakpoints set then the rewind button will run back and stop at the last time a breakpoint was set. it is the opposite of the normal button for playing forward. seek to console messages errors and logged messages in the console developer tool can be clicked on to cause the tab to seek to the point in the recording where the error was generated or the message was logged. the tab will pause at this point and allow state to be inspected, forward/reverse s...
...executions run into fundamental limits of the approach and cannot be replayed: executions which throw overrecursion js exceptions can't be reliably replayed; overrecursion happens at different times depending on how scripts are compiled, which can vary between recording and replaying. similarly, executions which run out of memory at some point can't be reliably replayed. executions which are stopped at some point by the slow script dialog can't be reliably replayed. keeping track of the exact point where an interrupt occurred would require quite a bit of recording overhead, and it doesn't seem worth it to try to do this. the following executions are unlikely to be supported by the initial release, but should be able to be handled at some point in the future: on x64, asm.js code reli...

Index
ervice interfaces, interfaces:scriptable, private browsing, xpcom, xpcom api reference, xpcom interface reference the nsiprivatebrowsingservice interface provides access to information about the state of the private browsing feature offered in firefox 3.5 and later. when firefox is in private browsing mode, firefox shouldn't save any potentially private information. the browser itself stops caching, and also doesn't record history information. in addition, temporary, databases are created to be used for cookies and local storage; these databases are thrown away when private browsing mode is turned off, and the regular databases are re-activated. the temporary cookie and local storage databases start out empty. 837 nsiprocess interfaces, interfaces:scriptable, xpcom, ...
... nsirandomgenerator interfaces, interfaces:scriptable, xpcom, xpcom interface reference generates the specified amount of random bytes. 867 nsirequest interfaces, interfaces:scriptable, xpcom, xpcom interface reference for example nsichannel typically passes itself as the nsirequest argument to the nsistreamlistener on each onstartrequest, ondataavaliable, and onstoprequest invocation. 868 nsirequestobserver interfaces, interfaces:scriptable, xpcom, xpcom interface reference called to signify the beginning of an asynchronous request. 869 nsiresumablechannel channels, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference open this channel, and read starting at the specified offset. ...
...o use your conversion logic using a standard api. 923 nsistreamlistener interfaces, interfaces:scriptable, xpcom, xpcom interface reference classes which want to consume data from a nsichannel need to implement this interface. nsirequestobserver contains two methods. so, in all the three methods - ondataavailable(), nsirequestobserver.onstartrequest() and nsirequestobserver.onstoprequest() have to be implemented. 924 nsistringbundle interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference this interface is used by xul:stringbundle to retrieve strings. it is recommended that you use the methods of xul:stringbundle to access these functions unless necessary. alternatively, a string bundle can be created within a javascript...

Observer Notifications
le-before-change to allow everything inside profile-before-change to continue using it. profile-before-change-telemetry called to shut down telemetry, again separated to allow everything before this event to continue using it. xpcom-will-shutdown called just before xpcom-shutdown. observer must not spin event loop. xpcom-shutdown assortment of critical services stop operating. many things will not be available here. web-workers-shutdown called inside xpcom-shutdown. this shuts down all web workers. xpcom-shutdown-threads shuts down the thread manager, causing all nsthreads to finish processing any events already queued and stop accepting new events. browser these topics indicate interesting things that happen that the browser ...
...alization. inspector-ruleview-ready - sent when the inspector's css rule view is opened and initialized. inspector-state-restored - sent when the inspector is re-opened after a tab switch. inspector-treepanel-ready - sent when the inspector's tree panel is opened and initialized. inspector-unhighlighting - sent every time the highlighter stops highlighting a node. remote-listening string sent after when the remote agent is listening for incoming connections after remoteagent.listen() is called. the data is a string containing a fully qualified url to the main target’s websocket endpoint. telemetry topic data description gather-telemetry - note: this is obsolete ...
...emanager null this notification is sent when a message manager disconnects. the subject of the notification is the message manager that disconnected. if you're using a message manager to communicate with a script that may be running in a different process, you might need to know when the message manager has disconnected from the other end of the conversation, so you can stop sending it messages or expecting to receive messages. for example, suppose you've loaded a frame script into a tab using a browser message manager, and the user closes the tab. the frame script is unloaded and the browser message manager disconnects from it. by listening for message-manager-disconnect you will be informed when this happens. permission manager topic subject data ...

nsIChannel
this means that: the stream listener this channel will be notifying was initially passed to the asyncopen() method of some other channel this channel's uri is a better identifier of the resource being accessed than this channel's originaluri. this flag can be set, for example, for redirects or for cases when a single channel has multiple parts to it (and thus can follow onstoprequest with another onstartrequest/onstoprequest pair, each pair for a different request). load_initial_document_uri 19 set (for example by the docshell) to indicate whether or not the channel corresponds to an initial document uri load (for example link click). load_targeted 20 set (for example by the uriloader) to indicate whether or not the end consumer for this l...
...ce to check the uri when opening the channel. methods asyncopen() asynchronously open this channel. data is fed to the specified stream listener as it becomes available. the stream listener's methods are called on the thread that calls asyncopen and are not called until after asyncopen returns. if asyncopen returns successfully, the channel promises to call at least onstartrequest and onstoprequest. if the nsirequest object passed to the stream listener's methods is not this channel, an appropriate onchannelredirect notification needs to be sent to the notification callbacks before onstartrequest is called. once onstartrequest is called, all following method calls on alistener will get the request that was passed to onstartrequest. if the channel's and loadgroup's notification call...
...led, all following method calls on alistener will get the request that was passed to onstartrequest. if the channel's and loadgroup's notification callbacks do not provide an nsichanneleventsink when onchannelredirect would be called, that's equivalent to having called onchannelredirect. if asyncopen returns successfully, the channel is responsible for keeping itself alive until it has called onstoprequest on alistener or called onchannelredirect. implementations are allowed to synchronously add themselves to the associated load group (if any). void asyncopen( in nsistreamlistener alistener, in nsisupports acontext ); parameters alistener the nsistreamlistener implementation. acontext an opaque parameter forwarded to alistener's methods. exceptions thrown ns_error_already_...

nsIContentViewer
can return null. read onl...
... unload() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void unload(); parameters none. ...
... unload() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void unload(); parameters none. ...

nsIDocumentLoader
documentchannel nsichannel read only. loadgroup nsiloadgroup read only. methods clearparentdocloader() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void clearparentdocloader(); parameters none. ...
... ...
... ...

nsIMsgWindow
create an instance, use: msgwindow = components.classes["@mozilla.org/messenger/msgwindow;1"] .createinstance(components.interfaces.nsimsgwindow); in thunderbird the default message window is stored in the global variable msgwindow. method overview void displayhtmlinmessagepane(in astring title, in astring body, in boolean clearmsghdr); void stopurls(); void closewindow(); attributes attribute type description windowcommands nsimsgwindowcommands this allows the backend code to send commands to the ui, such as clearmsgpane. statusfeedback nsimsgstatusfeedback this allows the backend code to send status feedback to the ui. ...
...nt of calling getinterface on the rootdocshell object. mailcharacterset acstring this is used to track the character set of the currently displayed message. if set to an alias, the actual character set is returned. charsetoverride boolean remember the message's charset was overridden, so it can be inherited (e.g for quoting). stopped boolean check if a running url been stopped. if you are checking this flag, you need to clear it before you start your operation since there's no convenient place to clear it. domwindow nsidomwindow the message window's global chrome window object. set this to initialize the rootdocshell. methods displayhtmlinmessagepane() loads the specified ht...
...e, in astring body, in boolean clearmsghdr); parameters title not used. body the html to display in the message pane. note that the html is wrapped in <html> and <body> tags for you. clearmsghdr whether or not the existing message pane and header should be cleared before the html is displayed. stopurls() this is equivalent to calling stop(nsiwebnavigation::stop_network) on the nsiwebnavigation object. void stopurls(); closewindow() when the msg window is being unloaded from the content window, this notification can be used to force a flush on anything the message window hangs on. for some reason xpconnect is still hanging onto the message window even though all of our objects have let go ...

nsIRadioInterfaceLayer
obsolete since gecko 13.0 microphonemuted bool radiostate jsval read only. speakerenabled bool constants call state constants constant value description call_state_un...
...exceptions thrown missing exception missing description unregistercallback() void unregistercallback( in nsiriltelephonycallback callback ); parameters callback missing description exceptions thrown missing exception missing description unregisterdatacallcallback() void unregisterdatacallcallback( in nsirildatacallback callback ); parameters c...
...exceptions thrown missing exception missing description unregistercallback() void unregistercallback( in nsiriltelephonycallback callback ); parameters callback missing description exceptions thrown missing exception missing description unregisterdatacallcallback() void unregisterdatacallcallback( in nsirildatacallback callback ); parameters callback missing ...

nsIRequestObserver
netwerk/base/public/nsirequestobserver.idlscriptable this interface is used by various streams (such as nsichannel ) to indicate the start and end of a request. inherits from: nsisupports last changed in gecko 1.0 method overview void onstartrequest(in nsirequest arequest, in nsisupports acontext); void onstoprequest(in nsirequest arequest, in nsisupports acontext, in nsresult astatuscode); methods onstartrequest() called to signify the beginning of an asynchronous request. note: an exception thrown from onstartrequest has the side-effect of causing the request to be canceled. void onstartrequest( in nsirequest arequest, in nsisupports acontext ); parameters arequest request being observed. acontext user def...
...lt astatuscode); methods onstartrequest() called to signify the beginning of an asynchronous request. note: an exception thrown from onstartrequest has the side-effect of causing the request to be canceled. void onstartrequest( in nsirequest arequest, in nsisupports acontext ); parameters arequest request being observed. acontext user defined context. onstoprequest() called to signify the end of an asynchronous request. this call is always preceded by a call to onstartrequest(). note: an exception thrown from onstoprequest is generally ignored. void onstoprequest( in nsirequest arequest, in nsisupports acontext, in nsresult astatuscode ); parameters arequest request being observed. acontext user defined context. ...
... of an asynchronous request. this call is always preceded by a call to onstartrequest(). note: an exception thrown from onstoprequest is generally ignored. void onstoprequest( in nsirequest arequest, in nsisupports acontext, in nsresult astatuscode ); parameters arequest request being observed. acontext user defined context. ...

nsIUpdateChecker
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes an object that knows how to check for software updates. ...
...eck for software updates. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void checkforupdates(in nsiupdatechecklistener listener, in boolean force); void stopchecking(in unsigned short duration); constants constant value description current_check 1 constant for the stopchecking() method indicating that only the current update check should be stopped. current_session 2 constant for the stopchecking() method indicating that all update checks during the current session should be stopped. any_checks 3 constant for the stopchecking() method indicating that all update checking should be stopped. this disables the update checking preferences. methods checkforupd...
...siupdatechecklistener to be notified of the results of an update check. force if true, the update checker checks for updates, regardless of the current value of the user's update settings. this is used by any user interface that offers the user the opportunity to check for updates immediately. the force option doesn't work if the system administrator has locked the app.update.enabled preference. stopchecking() ends any pending update check. void stopchecking( in unsigned short duration ); parameters duration one of the constants indicating the set of updates to stop. see also nsiupdatepatch nsiupdate nsiupdatechecklistener nsiapplicationupdateservice nsiupdatemanager nsiupdateprompt nsiupdatetimermanager ...

Streams - Plugins
pstream *stream, nperror reason); the instance parameter is the current plug-in instance; the stream parameter specifies the stream to be deleted. the reason parameter specifies why the stream was destroyed. it can have one of these values: npres_done (most common): normal completion; all data was sent to the instance. npres_user_break: the user canceled the stream directly by clicking the stop button or indirectly by some action, such as by deleting the instance or initiating higher-priority network operations. npres_network_err: the stream failed because of problems with the network, disk i/o error, lack of memory, or some other problem. finding out how much data the plug-in can accept after a call to npp_newstream and before writing data to the plug-in, the browser calls npp_writ...
... and that the browser is in the process of pushing data to the plug-in. if the user now requests a specific page of the document, the plug-in calls npn_requestread with a list of byte ranges. the open stream is converted from normal mode to seek mode in an effort to pass the plug-in data that was already on the way, rather than just discarding it. all npp_write calls for streaming data eventually stop, and npp_write calls will be completed only for data requested with npn_requestread. the browser does not create a new stream for each byte range it requests. instead, additional npp_writeready and npp_write calls occur on the same stream. an individual call to npn_requestread can request discontiguous ranges, and you can have many outstanding npn_requestread calls. there is no guarantee that np...
...elete it. this applies to streams the plug-in creates with npn_newstream or streams created by the browser with npp_newstream. nperror npn_destroystream(npp instance, npstream* stream, nperror reason); the instance parameter is the current plug-in; the stream parameter specifies the stream, created by either the browser or the plug-in. the reason parameter represents the reason the stream was stopped, as follows: npres_done (most common): the stream completed normally; the plug-in sent all data to the browser. npres_user_break: the plug-in terminated the stream because of a user request. npres_network_err: the stream failed because of network problems. for the complete list of codes, see "result codes." for an example that demonstrates using this function with npn_newstream and npn...

AudioContext.close() - Web APIs
ve new nodes created, but can decode audio data, create buffers, etc. this function does not automatically release all audiocontext-created objects, unless other references have been released as well; however, it will forcibly release any system audio resources that might prevent additional audiocontexts from being created and used, suspend the progression of audio time in the audio context, and stop processing audio data. the returned promise resolves when all audiocontext-creation-blocking resources have been released. this method throws an invalid_state_err exception if called on an offlineaudiocontext. syntax var audioctx = new audiocontext(); audioctx.close().then(function() { ... }); await audioctx.close(); returns a promise that resolves with void. example the following snippet ...
...-creation-blocking resources have been released. this method throws an invalid_state_err exception if called on an offlineaudiocontext. syntax var audioctx = new audiocontext(); audioctx.close().then(function() { ... }); await audioctx.close(); returns a promise that resolves with void. ...
...fflineaudiocontext. syntax var audioctx = new audiocontext(); audioctx.close().then(function() { ... }); await audioctx.close(); returns a promise that resolves with void. example the following snippet is taken from our audiocontext states demo (see it running live.) when the stop button is clicked, close() is called. when the promise resolves, the example is reset to its beginning state. stopbtn.onclick = function() { audioctx.close().then(function() { startbtn.removeattribute('disabled'); susresbtn.setattribute('disabled', 'disabled'); stopbtn.setattribute('disabled', 'disabled'); }); } specifications specification status comment web audio apithe definition of 'close()' in that specification. working draft ...

BaseAudioContext.decodeAudioData() - Web APIs
the audiodata variable . we then pass this buffer into a decodeaudiodata() function; the success callback takes the successfully decoded pcm data, puts it into an audiobuffersourcenode created using audiocontext.createbuffersource(), connects the source to the audiocontext.destination and sets it to loop. the buttons in the example simply run getdata() to load the track and start it playing, and stop it playing, respectively. when the stop() method is called on the source, the source is cleared out. note: you can run the example live (or view the source.) // define variables var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var source; var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); var play = document.queryselector('.play...
...ing, respectively. when the stop() method is called on the source, the source is cleared out. note: you can run the example live (or view the source.) // define variables var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var source; var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); // use xhr to load an audio track, and // decodeaudiodata to decode it and stick it in a buffer. // then we put the buffer into the source function getdata() { source = audioctx.createbuffersource(); var request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { ...
...setype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { source.buffer = buffer; source.connect(audioctx.destination); source.loop = true; }, function(e){ console.log("error with decoding audio data" + e.err); }); } request.send(); } // wire up buttons to stop and play audio play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; new promise-based syntax ctx.decodeaudiodata(audiodata).then(function(decodeddata) { // use the decoded data here }); ...

CustomEvent - Web APIs
his feature is available in web workers. constructor customevent() creates a customevent. properties customevent.detail read only any data passed when initializing the event. this interface inherits properties from its parent, event: event.bubbles read only a boolean indicating whether or not the event bubbles up through the dom. event.cancelbubble a historical alias to event.stoppropagation(). setting its value to true before returning from an event handler prevents propagation of the event. event.cancelable read only a boolean indicating whether the event is cancelable. event.composed read only a boolean indicating whether or not the event can bubble across the boundary between the shadow dom and the regular dom. event.currenttarget read only a reference to the ...
...edpath() returns the event’s path (objects on which listeners will be invoked). this does not include nodes in shadow trees if the shadow root was created with its shadowroot.mode closed. event.initevent() initializes the value of an event created. if the event has already been dispatched, this method does nothing. event.preventdefault() cancels the event (if it is cancelable). event.stopimmediatepropagation() for this particular event, prevent all other listeners from being called. this includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance). event.stoppropagation() stops the propagation of events further along in the dom. obsolete methods event.getpreventdefault() non-s...
...those attached to elements that will be traversed later (during the capture phase, for instance). event.stoppropagation() stops the propagation of events further along in the dom. obsolete methods event.getpreventdefault() non-standard; use event.defaultprevented instead. (returns the value of event.defaultprevented.) event.preventbubble() obsolete since gecko 24 obsolete; use event.stoppropagation instead. (prevents the event from bubbling.) event.preventcapture() obsolete since gecko 24 obsolete; use event.stoppropagation instead. specifications specification status comment domthe definition of 'customevent' in that specification. living standard initial definition. ...

Element.releasePointerCapture() - Web APIs
see the element.setpointercapture() method for a description of pointer capture and how to set it for a particular element. syntax targetelement.releasepointercapture(pointerid); parameters pointerid the pointerid of a pointerevent object. return value this method returns undefined. exceptions exception explanation invalidpointerid pointerid does not match any of the active pointers. example this example sets pointer capture on a <div> when you press down on it. ...
.... this lets you slide the element horizontally, even when you pointer moves outside of its boundaries. ...
... recommendation non-stable version. ...

Event - Web APIs
vent storageevent svgevent svgzoomevent timeevent touchevent trackevent transitionevent uievent userproximityevent webglcontextevent wheelevent constructor event() creates an event object, returning it to the caller. properties event.bubbles read only a boolean indicating whether or not the event bubbles up through the dom. event.cancelbubble a historical alias to event.stoppropagation(). setting its value to true before returning from an event handler prevents propagation of the event. event.cancelable read only a boolean indicating whether the event is cancelable. event.composed read only a boolean indicating whether or not the event can bubble across the boundary between the shadow dom and the regular dom. event.currenttarget read only a reference to the ...
...her the given event will bubble across through the shadow root into the standard dom. use composed instead. methods event.composedpath() returns the event’s path (objects on which listeners will be invoked). this does not include nodes in shadow trees if the shadow root was created with its shadowroot.mode closed. event.preventdefault() cancels the event (if it is cancelable). event.stopimmediatepropagation() for this particular event, prevent all other listeners from being called. this includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance). event.stoppropagation() stops the propagation of events further along in the dom. deprecated methods event.createevent() creates a...
...hods event.createevent() creates a new event, which must then be initialized by calling its initevent() method. event.initevent() initializes the value of an event created. if the event has already been dispatched, this method does nothing. event.getpreventdefault() returns the value of event.defaultprevented. event.preventbubble() prevents the event from bubbling. use event.stoppropagation instead. event.preventcapture() prevents the event from bubbling. use event.stoppropagation instead. specifications specification status comment domthe definition of 'event' in that specification. living standard ...

ExtendableEvent - Web APIs
es. it maps a shorthand identifier for a cache to a specific, versioned cache name. note: in chrome, logging statements are visible via the "inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals. ...
...-internals. var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.addeventlistener('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1302286216006/config/customlogo.gif' ]; console.log('handling install event. ...
...er('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1302286216006/config/customlogo.gif' ]; console.log('handling install event. ...

HTMLMediaElement: canplaythrough event - Web APIs
the canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.oncanplaythrough specification html5 media examples these examples add an event listener for the htmlmediaelement's canplaythrough event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('canplaythrough', (event) => { console.log('i think i can play th...
... examples these examples add an event listener for the htmlmediaelement's canplaythrough event, then post a message when that event handler has reacted to the event firing. ...
... living standard html5the definition of 'canplaythrough media event' in that specification. recommendation ...

HTMLMediaElement: ended event - Web APIs
this event occurs based upon htmlmediaelement (<audio> and <video>) fire ended when playback of the media reaches the end of the media. ...
... media this event is also defined in media capture and streams and web audio api examples these examples add an event listener for the htmlmediaelement's ended event, then post a message when that event handler has reacted to the event firing. ...
...d to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('ended', (event) => { console.log('video stopped either because 1) it was over, ' + 'or 2) no further data is available.'); }); using the onended event handler property: const video = document.queryselector('video'); video.onended = (event) => { console.log('video stopped either because 1) it was over, ' + 'or 2) no further data is available.'); }; specifications specification status html living standardthe definition of 'ended media event' in that specification. living standard html5the definition of 'ended media event' in that specification. recommendation ...

HTMLMediaElement - Web APIs
aleventhandlers mixin. listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. abort fired when the resource was not fully loaded, but not as the result of an error. canplay fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content canplaythrough fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content. durationchange fired when the duration attribute has been updated. emptied fired when the media has become empty; for example, when the media has already been load...
... error fired when the resource could not be loaded due to an error. loadeddata fired when the first frame of the media has finished loading. ...
...ompletes seeking fired when a seek operation begins stalled fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming. suspend fired when the media data loading has been suspended. timeupdate fired when the time indicated by the currenttime attribute has been updated volumechange fired when the volume has changed. waiting fired when playback has stopped because of a temporary lack of data specifications specification status comment encrypted media extensionsthe definition of 'encrypted media extensions' in that specification. recommendation adds mediakeys, mediaencryptedevent, setmediakeys, onencrypted, and onwaitingforkey. html living standardthe definition of 'htmlmediaelement' in that specifica...

Dragging and Dropping Multiple Items - Web APIs
method. this allows a drop to occur on that element. the dodrop event hander...
...method. this allows a drop to occur on that element. the dodrop event hander is called when dropping an item. it checks the mozitemcount proper...
...method. this allows a drop to occur on that element. the dodrop event hander is called when dropping an item. it checks the mozitemcount property to check how many items have been dropped and iterates over ...

InstallEvent - Web APIs
maps a shorthand identifier for a cache to a specific, versioned cache name. note: logging statements are visible in google chrome via the "inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals. ...
...er-internals. var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.addeventlistener('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1302286216006/config/customlogo.gif' ]; console.log('handling install event. ...
...ener('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1302286216006/config/customlogo.gif' ]; console.log('handling install event. ...

Key Values - Web APIs
resumes recording media. appcommand_media_record gdk_key_audiorecord (0x1008ff1c) qt::key_mediarecord (0x01000084) keycode_media_record (130) "mediarewind" starts, continues, or increases the speed of rewinding the media. appcommand_media_rewind gdk_key_audiorewind (0x1008ff3e) qt::key_audiorewind (0x010000c5) keycode_media_rewind (89) "mediastop" stops the current media activity (such as playing, recording, pausing, forwarding, or rewinding). has no effect if the media is currently stopped already. vk_media_stop (0xb2) appcommand_media_stop gdk_key_audiostop (0x1008ff15) qt::key_mediastop (0x01000081) keycode_media_stop (86) "mediatracknext" [1] seeks to the next media or program track. vk_media_nex...
...ing speeds. vk_record_speed_next "rfbypass" toggles radio frequency (rf) input bypass mode on and off. rf bypass mode passes rf input directly to the rf output without any processing or filtering. vk_rf_bypass "scanchannelstoggle" toggles the channel scan mode on and off. this is a mode which flips through channels automatically until the user stops the scan. vk_scan_channels_toggle "screenmodenext" cycles through the available screen display modes. vk_screen_mode_next "settings" toggles display of the device's settings screen on and off. vk_settings qt::key_settings (0x0100011c) keycode_settings "splitscreentoggle" toggles split screen display mode on and off. ...
...fresh (0xa8) appcommand_browser_refresh gdk_key_refresh (0x1008ff29) gdk_key_reload (0x1008ff73) "browsersearch" activates the user's preferred search engine or the search interface within their browser. vk_browser_search (0xaa) appcommand_browser_search gdk_key_search (0x1008ff1b) qt::key_search (0x01000092) keycode_search (84) "browserstop" stops loading the currently displayed web view or content. vk_browser_stop (0xa9) appcommand_browser_stop gdk_key_stop (0x1008ff28) qt::key_search (0x01000063) [1] prior to firefox 37, this key's value was reported as "unidentified". numeric keypad keys these keys are found on the keyboard's numeric keypad. however, not all are present on every keyboard. althoug...

RTCRtpTransceiver - Web APIs
dentified using its mid property, which is the same as the media id (mid) of its corresponding m-line. an rtcrtptransceiver is associated with an m-line if its mid is non-null; otherwise it's considered disassociated. properties currentdirection read only a string from the enum rtcrtptransceiverdirection which indicates the transceiver's current directionality, or null if the transceiver is stopped or has never participated in an exchange of offers and answers. direction a string from the enum rtcrtptransceiverdirection which is used to set the transceiver's desired direction. mid read only the media id of the m-line associated with this transceiver. this association is established, when possible, whenever either a local or remote description is applied. this field is null if neithe...
... or remote description is applied. this field is null if neither a local or remote description has been applied, or if its associated m-line is rejected by either a remote offer or any answer. receiver read only the rtcrtpreceiver object that handles receiving and decoding incoming media. sender read only the rtcrtpsender object responsible for encoding and sending data to the remote peer. ...
...wer. receiver read only the rtcrtpreceiver object that handles receiving and decoding incoming media. sender read only the rtcrtpsender object responsible for encoding and sending data to the remote peer. stopped indicates whether or not sending and receiving using the paired rtcrtpsender and rtcrtpreceiver has been permanently disabled, either due to sdp offer/answer, or due to a call to stop(). methods setcodecpreferences() a list of rtcrtpcodecparameters objects which override the default preferences used by the user agent for the transceiver's codecs. stop() permanently stops the rtcrtptransceiver. the associated sender stops sending data, and the associated receiver likewise stops receiving and decoding incoming data. specifications specification status c...

SpeechRecognition.abort() - Web APIs
syntax myspeechrecognition.abort(); returns void. parameters none. ...
... draft ...
... draft ...

Controlling multiple parameters with ConstantSourceNode - Web APIs
of type range to control the volume of two of the three oscillators. ...
...s see how the action plays out. toggling the oscillators on and off because oscillatornode doesn't support the notion of being in a paused state, we have to simulate it by terminating the oscillators and starting them again when the play button is clicked again to toggle them back on. let's look at the code. function toggleplay(event) { if (playing) { playbutton.innerhtml = "▶️"; stoposcillators(); } else { playbutton.innerhtml = "⏸"; startoscillators(); } } if the playing variable indicates we're already playing the oscillators, we change the playbutton's content to be the unicode character "right-pointing triangle" (▶️) and call stoposcillators() to shut down the oscillators. see stopping the oscillators below for that code. if playing is false, indicatin...
... to the desired value; in this case, oscnode1 is set to a middle c, while oscnode2 and oscnode3 round out the chord by playing the e and g notes. connect the new oscillator to the corresponding gain node. once all three oscillators have been created, they're started by calling each one's constantsourcenode.start() method in turn, and playing is set to true to track that the tones are playing. stopping the oscillators stopping the oscillators when the user toggles the play state to pause the tones is as simple as stopping each node. function stoposcillators() { oscnode1.stop(); oscnode2.stop(); oscnode3.stop(); playing = false; } each node is stopped by calling its constantsourcenode.stop() method, then playing is set to false. result ...

Color picker tool - CSS: Cascading Style Sheets
function getelembyid(id) { return document.getelementbyid(id); } function allowdropevent(e) { e.preventdefault(); } /*========== make an element resizable relative to it's parent ==========*/ var uicomponent = (function uicomponent() { function makeresizable(elem, axis) { var valuex = 0; var valuey = 0; var action = 0; var resizestart = function resizestart(e) { e.stoppropagation(); e.preventdefault(); if (e.button !== 0) return; valuex = e.clientx - elem.clientwidth; valuey = e.clienty - elem.clientheight; document.body.setattribute('data-resize', axis); document.addeventlistener('mousemove', mousemove); document.addeventlistener('mouseup', resizeend); }; var mousemove = function mousemove(e) { if (action >= 0) ...
...is); handle.addeventlistener('mousedown', resizestart); elem.appendchild(handle); }; /*========== make an element draggable relative to it's parent ==========*/ var makedraggable = function makedraggable(elem, endfunction) { var offsettop; var offsetleft; elem.setattribute('data-draggable', 'true'); var dragstart = function dragstart(e) { e.preventdefault(); e.stoppropagation(); if (e.target.getattribute('data-draggable') !== 'true' || e.target !== elem || e.button !== 0) return; offsetleft = e.clientx - elem.offsetleft; offsettop = e.clienty - elem.offsettop; document.addeventlistener('mousemove', mousedrag); document.addeventlistener('mouseup', dragend); }; var dragend = function dragend(e) { if (e.button !== 0)...
...this.node.setattribute('data-active', 'true'); }; colorsample.prototype.deactivate = function deactivate() { this.node.removeattribute('data-active'); }; colorsample.prototype.dragstart = function dragstart(e) { e.datatransfer.setdata('sampleid', this.uid); e.datatransfer.setdata('location', 'picker-samples'); }; colorsample.prototype.dragdrop = function dragdrop(e) { e.stoppropagation(); this.color = tool.getsamplecolorfrom(e); this.updatebgcolor(); }; colorsample.prototype.deletesample = function deletesample() { container.removechild(this.node); samples[this.uid] = null; nr_samples--; }; var updateui = function updateui() { updatecontainerprop(); var index = 0; var nr = samples.length; for (var i=0; i < nr; i++) if (sample...

Grid template areas - CSS: Cascading Style Sheets
d to specify anything at all on the individual grid items, everything happens on our grid container. we can see the layout described as the value of the grid-template-areas property. leaving a grid cell empty we have completely filled our grid with areas in this example, leaving no white space. however you can leave grid cells empty with this method of layout. to leave a cell empty use the full stop character, '.'. if i want to only display the footer directly under the main content i would need to leave the three cells underneath the sidebar empty. .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-colo...
... "sd sd sd main main main main main main" ". . . ft ft ft ft ft ft"; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> in order to make the layout neater i can use multiple . characters. as long as there is no white space between the full stops it will be counted as one cell. for a complex layout there is a benefit to having the rows and columns neatly aligned. it means that you can actually see, right there in the css, what this layout looks like. spanning multiple cells in our example each of the areas spans multiple grid cells and we achieve this by repeating the name of that grid area multiple times with white space between. you ...
...ft"; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> the value of grid-template-areas must show a complete grid, otherwise it is invalid (and the property is ignored). this means that you must have the same number of cells for each row, if empty with a full stop character demonstrating that the cell is to be left empty. you will also create an invalid grid if your areas are not rectangular. redefining the grid using media queries as our layout is now contained in one part of the css, this makes it very easy to make changes at different breakpoints. you can do this by redefining the grid, the position of items on the grid, or both at once. when doing t...

CSS data types - CSS: Cascading Style Sheets
e typical values (including keywords and units) accepted by css properties and functions. they are a special kind of component value type. in formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">". ...
...nt value type. in formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">". ...
... in formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">". ...

Linear-gradient Generator - CSS: Cascading Style Sheets
n(e) {}; elem.addeventlistener('mousedown', function(e) { e.preventdefault(); startfunc(e); document.addeventlistener('mousemove', callback); document.addeventlistener('mouseup', function up(e) { document.removeeventlistener('mousemove', callback); document.removeeventlistener('mouseup', up); endfunc(e); }); }); elem.addeventlistener('click', function(e) { e.stoppropagation(); }); } var slider = function(node) { var topic = node.getattribute('data-topic'); var info = node.getattribute('data-info'); var unit = node.getattribute('data-unit'); var min = node.getattribute('data-min') | 0; var max = node.getattribute('data-max') | 0; var step = node.getattribute('data-step') | 0; var value = node.getattribute('data-value') | 0; var snap = ...
...callback : null; endfunc = endfunc || function(e) {}; var resizestart = function...
... var color = uicolorpicker.color; var hsvcolor = uicolorpicker.hsvcolor; var uicomponent = (function uicomponent() { function makeresizable(elem, axis, callback, endfunc) { var valuex = 0; var valuey = 0; var action = 0; var callback = typeof callback === "function" ? ...

<easing-function> - CSS: Cascading Style Sheets
ubic-bezier easing functions ease the animation starts slowly, accelerates sharply, and then slows gradually towards the end. this keyword represents the easing function cubic-bezier(0.25, 0.1, 0.25, 1.0). it is similar to ease-in-out, though it accelerates more sharply at the beginning. ease-in the animation starts slowly, and then progressively speeds up until the end, at which point it stops abruptly. this keyword represents the easing function cubic-bezier(0.42, 0.0, 1.0, 1.0). ease-in-out the animation starts slowly, speeds up, and then slows down towards the end. this keyword represents the easing function cubic-bezier(0.42, 0.0, 0.58, 1.0). at the beginning, it behaves like the ease-in function; at the end, it is like the ease-out function. ease-out the animation starts ...
... until the end. this keyword represents the easing function steps(1, jump-start) or steps(1, start). step-end the animation stays in its initial state until the end, at which point it jumps directly to its final state. this keyword represents the easing function steps(1, jump-end) or steps(1, end). examples easing function comparison this example creates an animation that can be started and stopped again using the provided button, and a select menu that can be used to switch its easing function between the available keywords, plus a couple of cubic-bezier() and steps() options. the idea is to provide an easy comparison between different easing functions. html <div> <div></div> </div> <ul> <li> <button class="animation-button">start animation</button> </li> <li> <label f...
...enter; justify-content: center; margin-bottom: 20px; } javascript const selectelem = document.queryselector('select'); const startbtn = document.queryselector('button'); const divelem = document.queryselector('div > div'); startbtn.addeventlistener('click', () => { if(startbtn.textcontent === 'start animation') { divelem.style.animationname = 'move-right'; startbtn.textcontent = 'stop animation'; divelem.style.animationtimingfunction = selectelem.value; } else { divelem.style.animationname = 'unset'; startbtn.textcontent = 'start animation'; } }); selectelem.addeventlistener('change', () => { divelem.style.animationtimingfunction = selectelem.value; }); result cubic-bezier() function examples these cubic bézier curves are valid for use in css: /* the ...

Adding captions and subtitles to HTML5 video - Developer guides
urned on and the user has not made a specific selection. in addition to adding the <track> elements, we have also added a new button to control the subtitles menu that we will build. ...
...de a specific selection. in addition to adding the <track> elements, we have also added a new button to control the subtitles menu that we will build. ...
...pecific selection. in addition to adding the <track> elements, we have also added a new button to control the subtitles menu that we will build. ...

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
optional; you may instead use the <source> element within the audio block to specify the audio to embed. events event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed. canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. canplaythrough the browser estimates it can play the media up to its end without stopping for content buffering. complete the rendering of an offlineaudiocontext is terminated. durationchange the duration attribute has been updated. emptied the media has become empty; for example, this event is sent if the media has...
... loadeddata the first frame of the media has finished loading. loadedmetadata the metadata has been loaded. pause playback has been paused. play playback has begun. playing playback is ready to start after having been paused or delayed due to lack of data. ...
...ration completed. seeking a seek operation began. stalled the user agent is trying to fetch media data, but data is unexpectedly not forthcoming. suspend media data loading has been suspended. timeupdate the time indicated by the currenttime attribute has been updated. volumechange the volume has changed. ...

The legacy Iterator protocol - JavaScript
e, which is removed in firefox 58+. for future-facing usages, consider using for..of loops and the iterator protocol. the deprecated firefox-only iterator protocol firefox, prior to version 26 implemented another iterator protocol that is similar to the standard es2015 iterator protocol. an object is an legacy iterator when it implements a next() method with the following semantics, and throws stopiteration at the end of iteration. property value next a zero arguments function that returns an value. difference between legacy and es2015 iterator protocols the value was returned directly as a return value of calls to next, instead of the value property of a placeholder object iteration termination was expressed by throwing a stopiteration object. simple e...
...f calls to next, instead of the value property of a placeholder object iteration termination was expressed by throwing a stopiteration object. ...
...tor(array){ var nextindex = 0; return { next: function(){ if(nextindex < array.length){ return array[nextindex++]; else throw new stopiteration(); } } } var it = makeiterator(['yo', 'ya']); console.log(it.next()); // 'yo' console.log(it.next()); // 'ya' try{ console.log(it.next()); } catch(e){ if(e instanceof stopiteration){ // iteration over } } ...

SVG Presentation Attributes - SVG: Scalable Vector Graphics
ll fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transform unicode-bidi vector-effect visibility word-spacing writing-mode attributes alignment-baseline it specifies how an object is aligned along the font baseline with respect to its parent.
...ip-path it binds the element it is applied to with a given <clippath> element. value: none|<funciri>|inherit; animatable: yes clip-rule it indicates how to determine what side of a path is inside a shape in order to know how a <clippath> should clip its target. value: nonezero|evenodd|inherit; animatable: yes color it provides a potential indirect value (currentcolor) for the fill, stroke, stop-color, flood-color and lighting-color presentation attributes. value: <color>|inherit; animatable: yes color-interpolation it specifies the color space for gradient interpolations, color animations, and alpha compositing. value: auto|srgb|linearrgb|inherit; animatable: yes color-interpolation-filters it specifies the color space for imaging operations performed via filter effects. value: a...
...ouse event. value: bounding-box|visiblepainted|visiblefil|visiblestroke|visible |painted|fill|stroke|all|none; animatable: yes shape-rendering hints about what tradeoffs to make as the browser renders <path> element or basic shapes. value: auto|optimizespeed|crispedges|geometricprecision |inherit; animatable: yes solid-color - value:; animatable: - solid-opacity - value:; animatable: - stop-color indicates what color to use at that gradient stop. value: currentcolor|<color>|<icccolor>|inherit; animatable: yes stop-opacity defines the opacity of a given gradient stop. value: <opacity-value>|inherit; animatable: yes stroke defines the color used to paint the outline of the shape. value: <paint>; animatable: yes stroke-dasharray defines the pattern of dashes and gaps used to ...

Clipping and masking - SVG: Scalable Vector Graphics
ect as long as they don't let parts vanish completely. masking the effect of masking is most impressively presented with a gradient. if you want an element to fade out, you can achieve this effect quite quickly with masks. ...
...hey don't let parts vanish completely. masking the effect of masking is most impressively presented with a gradient. if you want an element to fade out, you can achieve this effect quite quickly with masks. ...
...mpletely. masking the effect of masking is most impressively presented with a gradient. if you want an element to fade out, you can achieve this effect quite quickly with masks. <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="gradient"> <stop offset="0" stop-color="black" /> <stop offset="1" stop-color="white" /> </lineargradient> <mask id="mask"> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" /> </mask> </defs> <rect x="0" y="0" width="200" height="200" fill="green" /> <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#mask)" /> </svg> you see a green-filled rect at the lowest layer and on top a red-filled rect. ...

<xsl:number> - XSLT: Extensible Stylesheet Language Transformations
els of the source tree should be considered in generating sequential numbers. it has three valid values: single, multiple, and any. the default value is single: single numbers sibling nodes sequentially, as in the items in a list. the processor goes to the first node in the ancestor-or-self axis that matches the count attribute and then counts that node plus all its preceding siblings (stopping when it reaches a match to the from attribute, if there is one) that also match the count attribute.if no match is found, the sequence will be an empty list. multiple numbers nodes as a composite sequence that reflects the hierarchic position of the node, e.g. 1.2.2.5. (the nested format can be specified with the format attribute, e.g. a.1.1). the processor looks at all ancesto...
...if there is one) that also match the count attribute.if no match is found, the sequence will be an empty list. multiple numbers nodes as a composite sequence that reflects the hierarchic position of the node, e.g. 1.2.2.5. (the nested format can be specified with the format attribute, e.g. a.1.1). the processor looks at all ancestors of the current node and the current node itself, stopping when it reaches a match for the from attribute, if there is one. for each node in this list that matches the count attribute, the processor counts how many preceding matching siblings it has, and adds one for the node itself. if no match is found, the sequence will be an empty list. any (not supported at this time.) numbers all matching nodes, regardless of level, sequentially.
...sor counts how many preceding matching siblings it has, and adds one for the node itself. if no match is found, the sequence will be an empty list. any (not supported at this time.) numbers all matching nodes, regardless of level, sequentially. the ancestor, self, and preceding axes are all considered. the processor starts at the current node and proceeds in reverse document order, stopping if it reaches a match to any from attribute. if no match to the count attribute is found, the sequence will be an empty list. this level is not supported at this time. from specifies where the numbering should start or start over. the sequence begins with the first descendant of the node that matches the from attribute. value applies a given format to a number. this is a quick w...

page-mod - Archive of obsolete content
e contentscript: if you do, you may have problems getting your add-on approved on amo. instead, keep the script in a separate file and load it using contentscriptfile. this makes your code easier to maintain, secure, debug and review. a page-mod only attaches scripts to documents loaded in tabs. it will not attach scripts to add-on panels, page-workers, sidebars, or firefox hidden windows. to stop a page-mod from making any more modifications, call its destroy() method. the pagemod constructor takes a number of other options to control its behavior: contentstyle lists stylesheets to attach, supplied as strings. contentstylefile lists stylesheets to attach, supplied in separate files. contentscriptoptions defines read-only values accessible to content s...
...abs.open("mozilla.org"); // matches tabs.open("addons.mozilla.org"); // matches tabs.open("developer.mozilla.org"); // no match pagemod a page-mod object. once created a page-mod will execute the supplied content scripts, and load any supplied stylesheets, in the context of any documents matching the pattern specified by the include property. methods destroy() stops the page-mod from making any more modifications. once destroyed the page-mod can no longer be used. modifications already made to open documents by content scripts will not be undone, but stylesheets added by contentstyle or contentstylefile, will be unregistered immediately. properties include a list of match pattern strings. these define the documents to which the page-mod applies. see the...

timers - Archive of obsolete content
out(function() { // do something in 0 ms }, 0) cleartimeout(id) given an id returned from settimeout(), prevents the callback with the id from being called (if it hasn't yet been called). parameters id : integer an id returned from settimeout(). example var { settimeout, cleartimeout } = require("sdk/timers"); var id = settimeout(function() { // do something in 1 sec }, 1000); // to stop/cancel this timeout cleartimeout(id); setinterval(callback, ms) schedules callback to be called repeatedly every ms milliseconds. any additional arguments are passed straight through to the callback. parameters callback : function function to be called. ms : integer interval in milliseconds at which the function will be called. returns integer : an id that can later be used to unschedul...
...mers"); setinterval(function() { // do something every 1 sec }, 1000) clearinterval(id) given an id returned from setinterval(), prevents the callback with the id from being called again. parameters id : integer an id returned from setinterval(). example var { setinterval, clearinterval } = require("sdk/timers"); var id = setinterval(function() { // do something every 1 sec // to stop/cancel this interval clearinterval(id); }, 1000); ...

jpm - Archive of obsolete content
overloading the built-in modules for more information. -p --profile profile by default, jpm uses a clean temporary firefox profile each time you call jpm run. use the --profile option to instruct jpm to launch firefox with an existing profile. the profile value may be a profile name or the path to the profile. see using profiles for more information. --stop-on-error by default, jpm test keeps running tests even after tests fail. specify --stop-on-error to stop running tests after the first failure: jpm test --stop-on-error --tbpl print test output in treeherder format --times number run tests number of times: jpm test --times 2 -v --verbose verbose operation. --no-copy ...
... only supported from jpm 1.0.3 onwards. when you make updates to your add-on to add features or fix bugs, you'll want any previously installed versions of the add-on to update themselves to the new version. if you list your add-on on addons.mozilla.org, then all you have to do here is submit the new version; add-ons default to checking addons.mozilla.org for new versions of themselves. you can stop reading this section. if you do not list your add-on on addons.mozilla.org, you need to generate a mozilla-signed xpi and tell firefox where it can find new versions of your add-on. the way this works is: you run jpm sign anytime you need to create a new version you host the signed add-on xpi and update it when you need to you host an "update manifest", which, among other things, contains a...

Examples and demos from articles - Archive of obsolete content
ich-text editors in web pages. [article] typewriter effect [html] the following example will delete and re-type simulating a typewriter all the text content of the nodelist which match a specified group of selectors. [article] fade in/out [html] sometimes a page uses dozens and dozens of animations. in such a condition is difficult and unnatural to keep track of all events started and then to stop them when appropriate through the cleartimeout() function. a possible approach to solve this problem is to nest all the informations needed by each animation to start, stop, etc. etc. in different objects and then to create a constructor for such class of objects in order to standardize and simplify the instantiation of them. here is a possible and minimalist example of such abstraction, which f...
...this example shows how to make a textarea really autogrowing during a typing. insert some custom text in a <textarea> this example shows how to insert some html tags or smiles or any custom text in a textarea. using setinterval within animations sometimes a page uses dozens and dozens of animations. in such a condition is difficult and unnatural to keep track of all events started and then to stop them when appropriate through the cleartimeout() function. a possible approach to solve this problem is to nest all the informations needed by each animation to start, stop, etc. etc. in different objects and then to create a constructor for such class of objects in order to standardize and simplify the instantiation of them. convert relative paths to absolute this example show how to translate...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
ethod to get a json text-string representation of the states of all currently open browser windows. in lines 7–9, we create the target file’s nslfile object by duplicating the _dir property. in line 10, we use the _writefile method (which we’ll get to shortly) to write the json string representing the session to the file. ...
...dow indicated by the parameter awindow to the state indicated by astate. if aoverwrite is true, the currently open tab is overwritten; otherwise, a new tab is created for the restored content. javascript debugging methods alert the easiest way to debug javascvript is using the window.alert method to display variables in a dialog (listing 29). except for asynchronous processes, all processing stops while the dialog is up, so this technique is useful when you want to pin down a value that can vary during a process. listing 29: check the value of variable foo alert(foo); dump in a windows environment, you can launch firefox with the -console argument, which opens a dump console. using the dump method, you can send text to the dump console (listing 30). the text output being sent to the c...

Creating a Web based tone generator - Archive of obsolete content
. the function mozcurrentsampleoffset() is used to know the position of the samples being played so that we can fill a 500 ms buffer of audio samples. <!doctype html> <html> <head> <title>javascript audio write example</title> </head> <body> <input type="text" size="4" id="freq" value="440"><label for="hz">hz</label> <button onclick="start()">play</button> <button onclick="stop()">stop</button> <script type="text/javascript"> function audiodatadestination(samplerate, readfn) { // initialize the audio output. var audio = new audio(); audio.mozsetup(1, samplerate); var currentwriteposition = 0; var prebuffersize = samplerate / 2; // buffer 500ms var tail = null; // the function called with regular interv...
...equency / samplerate; for (var i=0, size=sounddata.length; i<size; i++) { sounddata[i] = math.sin(k * currentsoundsample++); } } var audiodestination = new audiodatadestination(samplerate, requestsounddata); function start() { currentsoundsample = 0; frequency = parsefloat(document.getelementbyid("freq").value); } function stop() { frequency = 0; } </script> </body> </html> ...

Content states and the style system - Archive of obsolete content
that's done is to is to check whether the content state change something could affect any styles. this is done by walking the list of all css2.1 simple selectors in all style sheets applied to the page that have a state-dependent pseudo-class as part of the selector. this list is created during the parsing of the stylesheets involved. ...
... a state-dependent pseudo-class as part of the selector. this list is created during the parsing of the stylesheets involved. for each selector in this list we check whether it might have stopped matching the node or started matching it. if that has happened, then the style could depend on the state that changed and we have to reresolve style. the way we determine whether the selector might have stopped or started matching the node is by just checking whether it matches with the caveat that all the state-dependent pseudo-classes corresponding to the states that changed must be treated as matching (whether they actually do and whether they're negated or not). this is needed to catch both selectors that now match and selectors that no longer match. for example, say we have the selectors: a:...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
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. ctrlkey ctrlkey boolean property that returns whether the ctrl key was pressed during the event. fromel...
...est.responsexml; } function loadxml(){ myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "data.xml", true); myxmlhttprequest.onload = xmlloaded; myxmlhttprequest.send(null); } table 7 features a list of available methods and properties for mozilla's xmlhttprequest. table 7. xmlhttprequest methods and properties name description void abort() stops the request if it is still running. string getallresponseheaders() returns all response headers as one string. string getresponseheader(string headername) returns the value of the specified header. functionref onerror if set, the references function will be called whenever an error occurs during the request. functionref onload if set, the reference...

Tuning Pageload - Archive of obsolete content
ed, unless it ends up fully loaded before the delay expires. the idea here is twofold.this reduces ugly visual jitter as the new page comes in by not starting painting till after we have a bunch of the data.this makes overall page load time shorter by not doing extra repaints very early on. content.interrupt.parsing this preference, when true, means that the content sink can tell the parser to stop for now and return to the event loop, which allows layout and painting to happen. if the parser gets a large chunk of data, it will try to parse it all, building the corresponding content model. since layout and painting happen asynchronously, while the parser is working there is no layout or painting. so this preference is used to increase responsiveness, especially on cached loads (where data ...
... ...

MenuButtons - Archive of obsolete content
nto two parts, one with the label and image to carry out the default command and the second to show the menu. to create a button of this type, set the type attribute of the button to 'menu-button'. <toolbarbutton type="menu-button" label="save" oncommand="alert('save');"> <menupopup> <menuitem label="save this document"/> <menuitem label="save all" oncommand="alert('save all'); event.stoppropagation();"/> </menupopup> </toolbarbutton> here, the 'save' button has a type of 'menu-button', so a small arrow button will appear which will open the menu when pressed. pressing the label part of the button will invoke the command event on the button, so the 'save' alert will appear. however, we can associate a different command with the items on the submenu. when the command is fired,...
...the document. when the first item on the menu ('save this document') is activated, it will also display the 'save' alert as the command event bubbles up to the button. in this situation, this menuitem performs the same operation as pressing the regular part of the button. the second menu item ('save all') has a command event of its own that displays a different alert with the text 'save all'. the stoppropagation method is used to stop the bubbling effect so that the command event on the button does not get called as well. the effect is a button that performs one command with a menu for other commands. as with this example, the 'menu-button' type of button is usually used when the menu provides more specific options pertaining to the operation. we might want to extend this example to insert a ...

RDF Modifications - Archive of obsolete content
arc involving this triple so we can ignore this statement as well. the second triple, however, could cause a change, since the predicate attribute matches the predicate being added. the subject and object are variables so the builder accepts this as a possible change, and moves on to the next step. if the predicate was different, the builder would come to the end of the statements and could just stop there. for instance, if the predicate of the triple being added was 'http://purl.org/dc/elements/1.1/date', the builder could ignore it since the template doesn't even care about the date field. similarly, if the triple didn't use a variable but a static value, this value would also need to match in order to continue processing. now that we know the statements could cause a change in the template...
...of the thirty or so egyptian obelisks', ?start = http://www.xulplanet.com/rdf/myphotos, ?title = 'obelisk') as you can see, the result looks to have all the information necessary to create a new item in the output. if a statement hadn't generated a result, for instance if the photo did not have a title, or it wasn't contained in a parent container, there would be no match and the builder could stop processing the new triple. for instance, we might have added a description for a new photo, but haven't added the photo to the container resource. once we do add it to the container with another rdf assertion, the process described above is applied again and this time it may match. there are still two more things to do before a result is accepted as a new match. first, once the builder reaches th...

browser - Archive of obsolete content
autocompletepopup type: id the id of a popup element us...
...flag used when the reload button is pressed while the shift key is held down. load_flags_bypass_proxy: reload the page, ignoring the proxy server. load_flags_charset_change: this flag is used if the document needs to be reloaded because the character set changed. removeprogresslistener( listener ) return type: no return value remove a nsiwebprogresslistener from the browser. stop() return type: no return value equivalent to pressing the stop button, this method stops the currently loading document. swapdocshells( otherbrowser ) return type: no return value swaps the content, history and current state of this browser with another browser. during the swap, pagehide and pageshow events are fired on both browsers. this method can be used t...

splitter - Archive of obsolete content
se attribute on the splitter. for: <vbox></vbox> <splitter/> <vbox></vbox> ...the splitter will not move, unless there is a collapse attribute on the splitter, which will cause it to collapse as soon as it is dragged. for: <vbox/> <splitter/> <vbox height="500"> <vbox height="100"/> </vbox> ...the splitter can be dragged down to the 100px intrinsic height of the lower box, where it will stop (or collapse if the splitter has a collapse attribute). for: <vbox/> <splitter/> <vbox height="500" minheight="200"> <vbox height="100"/> </vbox> ...the splitter can be dragged down to the 200px minheight, where it will stop or collapse. for: <vbox/> <splitter/> <vbox height="500" style="min-height: 50"> <vbox height="100"/> </vbox> ...the splitter can be dragged down below the 100px ...
...that should also work with a minheight attribute specifying a value less than the intrinsic height. ...

NPP_URLNotify - Archive of obsolete content
oid* notifydata); parameters the function has the following parameters: instance pointer to the current plug-in instance. url url of the npn_geturlnotify() or npn_posturlnotify() request that has completed. reason reason code for completion of request. values: npres_done (most common): completed normally. npres_user_break: user canceled stream directly by clicking the stop button or indirectly by some action such as deleting the instance or initiating higher-priority network operations. npres_network_err: stream failed due to problems with network, disk i/o, lack of memory, or other problems. notifydata plug-in-private value for associating a previous npn_geturlnotify() or npn_posturlnotify() request with a subsequent npp_urlnotify() call. description ...
...completion of a npn_geturlnotify() or npn_posturlnotify() request to inform the plug-in that the request was completed and supply a reason code for the completion. the most common reason code is npres_done, indicating simply that the request completed normally. other possible reason codes are npres_user_break, indicating that the request was halted due to a user action (for example, clicking the stop button), and npres_network_err, indicating that the request could not be completed, perhaps because the url could not be found. the parameter notifydata is the plug-in-private value passed as an argument by a previous npn_geturlnotify() or npn_posturlnotify() call, and can be used as an identifier for the request. see also npn_geturlnotify() npn_geturl() npn_posturlnotify() npn_posturl() ...

Introduction to Public-Key Cryptography - Archive of obsolete content
ificate is located. the source can be either the verifier's local certificate database (on that client or server) or the certificate chain provided by the subject (for example, over an ssl connection). the certificate signature is verified using the public key in the issuer's certificate. if the issuer's certificate is trusted by the verifier in the verifier's certificate database, verification stops successfully here. otherwise, the issuer's certificate is checked to make sure it contains the appropriate subordinate ca indication in the red hat certificate type extension, and chain verification returns to step 1 to start again, but with this new certificate. figure 8 presents an example of this process. figure 8 shows what happens when only root ca is included in the verifier's local da...
...icate type extension, and chain verification returns to step 1 to start again, but with this new certificate. figure 8 presents an example of this process. figure 8 shows what happens when only root ca is included in the verifier's local database. if a certificate for one of the intermediate cas shown in figure 8, such as engineering ca, is found in the verifier's local database, verification stops with that certificate, as shown in figure 9. expired validity dates, an invalid signature, or the absence of a certificate for the issuing ca at any point in the certificate chain causes authentication to fail. for example, figure 10 shows how verification fails if neither the root ca certificate nor any of the intermediate ca certificates are included in the verifier's local database. for...

-ms-content-zoom-snap-type - Archive of obsolete content
ine-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values none initial value. indicates that zooming is unaffected by any defined snap-points. after the contact is picked up, the content will continue to move with inertia. proximity indicates that the motion of the content after the contact is picked up may be adjusted if the content would normally stop "close enough" to a snap-point. this implies that it is possible for the content zoom factor to end up between snap-points. mandatory indicates that the motion of the content after the contact is picked up is always adjusted so that it lands on a snap-point. the snap-point that is selected is the one that is closest to where the content zoom factor would normally stop. formal syntax ...
...ification. remarks this property has no effect on non-zoomable elements. see -ms-content-zooming for details on zoomable elements. when a user pans or scrolls and then lifts his or her contact (for instance, a finger), the content can continue to move with inertia. snap-points can change the animation that runs when the user lifts his or her finger so that you can adjust where the content will stop. by placing snap-points, you can make it easy for your users to manipulate your content and make it stop at convenient or key places. starting with windows 8.1, this property is also supported for touchpad interaction. this property requires windows or later. ...

Iterator - Archive of obsolete content
lsy, otherwise, if keyonly is truthy, it returns property_name for each iteration. if object is the iterator instance or generator instance, it returns object itself. properties iterator.prototype[@@iterator] returns a function that returns iterator object. methods iterator.prototype.next returns next item in the [property_name, property_value] format or property_name only. ...
.... methods iterator.prototype.next returns next item in the [property_name, property_value] format or property_name only. it throws stopiteration if there are no more items. ...

Array.unobserve() - Archive of obsolete content
description array.unobserve() should be called after array.observe() in order to remove an observer from an array. ...
... description array.unobserve() should be called after array.observe() in order to remove an observer from an array. ...

Object.unobserve() - Archive of obsolete content
return value the specified object. ...
... return value the specified object. ...

Using the Right Markup to Invoke Plugins - Archive of obsolete content
based on mozilla source code will allow the use of a special param element to specify where to get plugins that are not present, but this feature is not available in netscape 7. this feature is discussed in mozilla bug 167601. ie doesn't display nested object elements correctly according to the html 4.01 specification. ...
...01. ie doesn't display nested object elements correctly according to the html 4.01 specification. according to the specification, you can nest elements and browsers should stop if they can display the outermost element, or else keep going inwards till they can find something to display. ie displays everything as if they are in series, and not nested. ...

Windows Media in Netscape - Archive of obsolete content
g syntax that makes use of global namespace is important. ...
...s use of global namespace is important. here, for example, is a code snippet that works equally well on both netscape 7.1 and ie: <object id="player" height="0" width="0" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6"> <param name="autostart" value="true"> </object> <input type="button" name="playmedia" value="play" onclick="startmediaup()"> <input type="button" name="stopmedia" value="stop" onclick="shutmediadown()"> <p>this example shows a minimally-functional player <script> <!-- function startmediaup () { document.player.url = "preludesteel.wma"; document.player.controls.play(); } function shutmediadown () { document.player.controls.stop(); } --> </script> more extensive examples of working cross-browser code can be found in the examples section at the end. qualifyi...

Loop - MDN Web Docs Glossary: Definitions of Web-related terms
d number. examples for loop syntax: for (statement 1; statement 2; statement 3){ execute code block } statement 1 is executed once before the code block is run. statement 2 defines the condition needed to execute the code block. statement 3 is executed every time the code block is run. example: for(var i = 0; i < 10; i++){ console.log(i) } //this loop will print numbers 0-9, will stop when condition is met (i = 10) for the above example, the syntax is as follows: statement 1 sets the variable for the loop (var i = 0). statement 2 sets the loop condition (i < 10). statement 3 increases the value of i (i++) each time the code block is run. while loop syntax: while (condition){ execute code block } the code block will continue to loop as long as the condition is t...
...ble for the loop (var i = 0). statement 2 sets the loop condition (i < 10). statement 3 increases the value of i (i++) each time the code block is run. while loop syntax: while (condition){ execute code block } the code block will continue to loop as long as the condition is true. example: var i = 0; while(i < 5){ console.log(i) i++ } //this loop will print number 0-4, will stop when condition becomes false (i >=5) for the above example, the syntax is as follows: the code block will continue to run as long as the variable (i) is less than 5. ...

HTML: A good basis for accessibility - Learn web development
y content. i think is more interesting than the last one.</p> we've prepared a version with longer text for you to try out with a screen reader (see good-semantics.html). if you try navigating through this, you'll see that this is pretty easy to navigate: the screen reader reads each header out as you progress through the content, notifying you what a heading is, what is a paragraph, etc. it stops after each element, letting you go at whatever pace is comfortable for you. you can jump to the next/previous heading in many screen readers. you can also bring up a list of all headings in many screen readers, allowing you to use them as a handy table of contents to find specific content. people sometimes write headings, paragraphs, etc. using presentational html and line breaks, something ...
...een readers announce the whole image url if no alt is provided. in the above example, the image is acting as a visual decoration to the heading it's associated with. in cases like this, and in cases where an image is only decoration and has no content value, you should include an empty alt in your img elements. another alternative is to use the aria role attribute role="presentation" as this also stops screen readers from reading out alternative text. note: if possible you should use css to display images that are only decorative. more on links links ( the <a> element with an href attribute ), depending on how they are used, can help or harm accessibility. by default, links are accessible in appearance. they can improve accessibility by helping a user quickly navigate to different section...

HTML: A good basis for accessibility - Learn web development
y content. i think is more interesting than the last one.</p> we've prepared a version with longer text for you to try out with a screen reader (see good-semantics.html). if you try navigating through this, you'll see that this is pretty easy to navigate: the screen reader reads each header out as you progress through the content, notifying you what a heading is, what is a paragraph, etc. it stops after each element, letting you go at whatever pace is comfortable for you. you can jump to the next/previous heading in many screen readers. you can also bring up a list of all headings in many screen readers, allowing you to use them as a handy table of contents to find specific content. people sometimes write headings, paragraphs, etc. using presentational html and line breaks, something ...
...een readers announce the whole image url if no alt is provided. in the above example, the image is acting as a visual decoration to the heading it's associated with. in cases like this, and in cases where an image is only decoration and has no content value, you should include an empty alt in your img elements. another alternative is to use the aria role attribute role="presentation" as this also stops screen readers from reading out alternative text. note: if possible you should use css to display images that are only decorative. more on links links ( the <a> element with an href attribute ), depending on how they are used, can help or harm accessibility. by default, links are accessible in appearance. they can improve accessibility by helping a user quickly navigate to different section...

Mobile accessibility - Learn web development
e 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. ...
... note: you can also see fully functional examples showing how to implement different control mechanisms at implementing game control mechanisms. ...

Debugging CSS - Learn web development
ty to expand out shorthand properties. in our example the margin shorthand is used. click on the little arrow to expand the view, showing the different longhand properties and their values. you can toggle values in the rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear. uncheck a rule's checkbox, for example border-radius, and the css will stop applying. you can use this to do an a/b comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem. the following video provides some useful tips on debugging css using the firefox devtools: editing values in addition to turning properties...
...rom the problem any coding problem can be frustrating, especially css problems because you often don't get an error message to search for online to help with finding a solution. if you are becoming frustrated, take a step away from the issue for a while — go for a walk, grab a drink, chat to a co-worker, or work on some other thing for a while. sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier. do you have valid html and css? browsers expect your css and html to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. if you have mistakes in your code the browser needs to make ...

Type, class, and ID selectors - Learn web development
r element. to avoid this confusion we can add the universal selector to the :first-child selector, so it is obvious what the selector is doing. it is selecting any element which is the first-child of any descendant element of <article>: article *:first-child { } although both do the same thing, the readability is significantly improved. class selectors the class selector starts with a full stop (.) character and will select everything in the document with that class applied to it. in the live example below we have created a class called .highlight, and have applied it to several places in my document. all of the elements that have the class applied are highlighted. targeting classes on particular elements you can create a selector that will target specific elements with the class ap...
...er, we change the border-color. we can tell the browser that we only want to match the element if it has two classes applied by chaining them together with no white space between them. you'll see that the last <div> doesn't get any styling applied, as it only has the danger class; it needs notebox as well to get anything applied. id selectors an id selector begins with a # rather than a full stop character, but is basically used in the same way as a class selector. an id however can be used only once per document, and elements can only have a single id value applied to them. it can select an element that has the id set on it, and you can precede the id with a type selector to only target the element if both the element and id match. you can see both of these uses in the following example:...

Floats - Learn web development
h the float set on it (the <div> element in this case) is taken out of the normal layout flow of the document and stuck to the left-hand side of its parent container (<body>, in this case). any content that comes below the floated element in the normal layout flow will now wrap around it, filling up the space to the right-hand side of it as far up as the top of the floated element. there, it will stop. floating the content to the right has exactly the same effect, but in reverse — the floated element will stick to the right, and the content will wrap around it to the left. try changing the float value to right and replace margin-right with margin-left in the last ruleset to see what the result is. while we can add a margin to the float to push the text away, we can't add a margin to the te...
...9,185,227); padding: 10px; color: #fff; } the line boxes of our following element have been shortened so the text runs around the float, but due to the float being removed from normal flow the box around the paragraph still remains full width. clearing floats we have seen that the float is removed from normal flow and that other elements will display beside it, therefore if we want to stop the following element from moving up we need to clear it; this is achieved with the clear property. in your html from the previous example, add a class of cleared to the second paragraph below the floated item. then add the following to your css: .cleared { clear: left; } float example 3 <h1>simple float example</h1> <div class="box">float</div> <p class="special">lorem ipsum dolor sit...

How do you make sure your website works properly? - Learn web development
ndwidth. 403: forbidden you aren't allowed to display the resource. usually it has to do with a configuration mistake (e.g. your hosting provider forgot to give you access rights to a directory). 404: not found self-explanatory. we'll discuss how to solve this below. 500: internal server error something went wrong on the server. for instance, maybe the server-side language (php, .net, etc.) stopped working, or the web server itself has a configuration problem. usually it's best to resort to your hosting provider's support team. 503: service unavailable usually resulting from a shortterm system overload. the server has some sort of problem. try again in a little while. as beginners checking our (simple) website, we'll deal most often with 200, 304, 403, and 404. fixing the 404 so...
...3.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms 64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms ^c --- mozilla.org ping statistics --- 4 packets transmitted, 4 packets received, 0.0% packet loss round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms just keep in mind a handy keyboard shortcut: ctrl+c. ctrl+c sends an “interrupt” signal to the runtime and tells it to stop. if you don't stop the runtime, ping will ping the server indefinitely. a simple checklist check for 404s make sure all webpages are behaving as you expect check your website in several browsers to make sure it renders consistently next steps congratulations, your website is up and running for anyone to visit. that's a huge achievement. now, you can start digging deeper into various sub...

How to build custom form controls - Learn web development
first option is selected. the user hits the down arrow key when the last option is selected. finally, let's define how the control's options will behave: when the control is opened, the selected option is highlighted when the mouse is over an option, the option is highlighted and the previously highlighted option is returned to its normal state for the purposes of our example, we'll stop with that; however, if you're a careful reader, you'll notice that some behaviors are missing. for example, what do you think will happen if the user hits the tab key while the control is in its open state? the answer is... nothing. ok, the right behavior seems obvious but the fact is, because it's not defined in our specs, it is very easy to overlook this behavior. this is especially true in a t...
...ct> has natively. on the plus side, this control is fully accessible to a screen reader and fully navigable via the keyboard. however, this control isn't a <select> replacement. there is functionality that differs and/or is missing. for example, all four arrows navigate through the options, but clicking the down arrow when the user 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 require...

General asynchronous programming concepts - Learn web development
tand the basic concepts behind asynchronous programming, and how they manifest in web browsers and javascript. asynchronous? normally, a given program's code runs straight along, with only one thing happening at once. ...
...f another function, it has to wait for the other function to finish and return, and until that happens, the entire program is essentially stopped from the perspective of the user. mac users, for example, sometimes experience this as the spinning rainbow-colored cursor (or "beachball" as it is often called). this cursor is how the operating system says "the current program you're using has had to stop and wait for something to finish up, and it's taking so long that i was worried you'd wonder what was going on." this is a frustrating experience and isn't a good use of computer processing power — especially in an era in which computers have multiple processor cores available. there's no sense sitting there waiting for something when you could let the other task chug along on another proces...

Client-side storage - Learn web development
'.forget'); const form = document.queryselector('form'); const nameinput = document.queryselector('#entername'); const submitbtn = document.queryselector('#submitname'); const forgetbtn = document.queryselector('#forgetname'); const h1 = document.queryselector('h1'); const personalgreeting = document.queryselector('.personal-greeting'); next up, we need to include a small event listener to stop the form from actually submitting itself when the submit button is pressed, as this is not the behavior we want. add this snippet below your previous code: // stop the form from submitting when a button is pressed form.addeventlistener('submit', function(e) { e.preventdefault(); }); now we need to add an event listener, the handler function of which will run when the "say hello" button...
...) { console.log('transaction completed: database modification finished.'); // update the display of data to show the newly added item, by running displaydata() again. displaydata(); }; transaction.onerror = function() { console.log('transaction not opened due to error'); }; } this is quite complex; breaking it down, we: run event.preventdefault() on the event object to stop the form actually submitting in the conventional manner (this would cause a page refresh and spoil the experience). create an object representing a record to enter into the database, populating it with values from the form inputs. note that we don't have to explicitly include an id value — as we explained earlier, this is auto-populated. open a readwrite transaction against the notes_os objec...

Drawing graphics - Learn web development
dow.requestanimationframe(). it takes one parameter — the name of the function you want to run for each frame. the next time the browser is ready to update the screen, your function will get called. if that function draws the new update to your animation, then calls requestanimationframe() again just before the end of the function, the animation loop will continue to run. the loop ends when you stop calling requestanimationframe() or if you call window.cancelanimationframe() after calling requestanimationframe() but before the frame is called. note: it's good practice to call cancelanimationframe() from your main code when you're done using the animation, to ensure that no updates are still waiting to be run. the browser works out complex details such as making the animation run at a con...
... takes four arguments: the field of view: how wide the area in front of the camera is that should be visible onscreen, in degrees. the aspect ratio: usually, this is the ratio of the scene's width divided by the scene's height. using another value will distort the scene (which might be what you want, but usually isn't). the near plane: how close to the camera objects can be before we stop rendering them to the screen. think about how when you move your fingertip closer and closer to the space between your eyes, eventually you can't see it anymore. the far plane: how far away things are from the camera before they are no longer rendered. we also set the camera's position to be 5 distance units out of the z axis, which, like in css, is out of the screen towards you, the vie...

A first splash into JavaScript - Learn web development
mer mindset as possible: generate a random number between 1 and 100. record the turn number the player is on. start it on 1. provide the player with a way to guess what the number is. once a guess has been submitted first record it somewhere so the user can see their previous guesses. next, check whether it is the correct number. if it is correct: display congratulations message. stop the player from being able to enter more guesses (this would mess the game up). display control allowing the player to restart the game. if it is wrong and the player has turns left: tell the player they are wrong. allow them to enter another guess. increment the turn number by 1. if it is wrong and the player has no turns left: tell the player it is game over. ...
...the player from being able to enter more guesses (this would mess the game up). display control allowing the player to restart the game. if it is wrong and the player has turns left: tell the player they are wrong. allow them to enter another guess. increment the turn number by 1. if it is wrong and the player has no turns left: tell the player it is game over. stop the player from being able to enter more guesses (this would mess the game up). display control allowing the player to restart the game. once the game restarts, make sure the game logic and ui are completely reset, then go back to step 1. let's now move forward, looking at how we can turn these steps into code, building up the example, and exploring javascript features as we go. initi...

Working with Svelte stores - Learn web development
own stores without relying on svelte/store by implementing the store contract. its features must work like so: a store must contain a subscribe() method, which must accept as its argument a subscription function. all of a store's active subscription functions must be called whenever the store's value changes. the subscribe() method must return an unsubscribe() function, which when called must stop its subscription. a store may optionally contain a set() method, which must accept as its argument a new value for the store, and which synchronously calls all of the store's active subscription functions. a store with a set() method is called a writable store. first of all, let's add the following console.log() statements to our app.svelte component to see the todos store and its content in a...
... alert from './components/alert.svelte' import { todos } from './stores.js' </script> <alert /> <todos bind:todos={$todos} /> note: this is the only change we have to make in order to use our custom store. app.svelte is completely transparent in terms of what kind of store we are using. go ahead and try your app again. create a few todos and then close the browser. you may even stop the svelte server and restart it. upon revisiting the url, your todos will still be there. you can also inspect it in the devtools console. in the web console, enter the command localstorage.getitem('mdn-svelte-todo'). make some changes to your app, like pressing the uncheck all button, and check the web storage content once more. you will get something like this: svelte stores prov...

Handling common accessibility problems - Learn web development
lers 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 conveys its meaning and content on the page, to be picked up by a screenreader and read out to the user. note: for more info...
...lso 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. on the other hand, you shouldn't use visibility:hidden or display:none, because they do hide content from screenreaders. unless of course, there is a good reason why you want this content to be hidden from screenreaders. note: invisible content just for screen reader users has a lot more useful detail surrounding this topic. javascript javascript has the s...

Creating Sandboxed HTTP Connections
http notifications the above mentioned listener is a nsistreamlistener, which gets notified about events such as http redirects and data availability. onstartrequest - gets called when a new request is initiated. ondataavailable - new data is available. since this is a stream, it could be called multiple times (depending on the size of the returned data, networking conditions, etc). onstoprequest - the request has finished. onchannelredirect - when a redirect happens, a new nsichannel is created, and both the old and new ones are passed in as arguments. since nsistreamlistener does not cover cookies, the current channel being used will need to be stored as a global, since another listener will be used for cookie notifications (covered in the next section). it is usually best to...
...acontext) { this.mdata = ""; }, ondataavailable: function (arequest, acontext, astream, asourceoffset, alength) { var scriptableinputstream = components.classes["@mozilla.org/scriptableinputstream;1"] .createinstance(components.interfaces.nsiscriptableinputstream); scriptableinputstream.init(astream); this.mdata += scriptableinputstream.read(alength); }, onstoprequest: function (arequest, acontext, astatus) { if (components.issuccesscode(astatus)) { // request was successfull this.mcallbackfunc(this.mdata); } else { // request failed this.mcallbackfunc(null); } gchannel = null; }, // nsichanneleventsink onchannelredirect: function (aoldchannel, anewchannel, aflags) { // if redirecting, store the new ch...

Communicating with frame scripts
tlistener("click", function (event) { var results = sendsyncmessage("my-addon@me.org:my-e10s-extension-message", { details : "they clicked", tag : event.target.tagname }); content.console.log(results[0]); // "value from chrome" }, false); like arguments, return values from sendsyncmessage() must be json-serializable, so chrome can't return functions. removemessagelistener() to stop listening for messages from content, use the message manager's removemessagelistener() method: // chrome script messagemanager.removemessagelistener("my-addon@me.org:my-e10s-extension-message", listener); chrome to content to send a message from chrome to content, you need to know what kind of message manager you're using. if it's a browser message manager, you can use the message manager's se...
... for example, suppose we load a script into the current <browser> on some event, and keep the browser message manager in an array, so we can send it messages: var messagemanagers = []; ... // on some event var browsermm = gbrowser.selectedbrowser.messagemanager; browsermm.loadframescript("chrome://my-addon@me.org/content/frame-script.js", f...

Frame script loading and lifetime
ly ever load the frame script into that one tab. passing allowdelayedload is a way to ensure that the script is loaded correctly, in case the tab is not ready when making the call. if you use allowdelayedload, you can cancel it by using removedelayedframescript: var mm = window.messagemanager; mm.removedelayedframescript("chrome://my-e10s-extension/content/frame-script.js"); this means we will stop loading the script into new tabs. note that this function will not remove any scripts which have been loaded earlier. frame script lifetime frame scripts are loaded as soon as loadframescript() is called. if you've set allowdelayedload, the script is loaded into a new tab as soon as it is created. frame scripts are associated with a browser tab and not with a page. so once you load them, they ...
...ipts are not backwards loaded in message order in non-e10s. note: you might think that there is a race condition here due to the asynchronous nature of the message passing: your add-on is disabled for an upgrade. your add-on broadcasts "disable" to your frame scripts. your add-on is upgraded, and the new code loads new frame scripts. the new frame scripts receive the "disable" message and stop working. in fact, the message manager guarantees that loadframescript and broadcastasyncmessage are guaranteed to affect frame scripts in the order that they are called, so in this case "disable" will be received and consumed before the new frame scripts are loaded. at the moment, frame scripts are cached until the browser restarts: this problem is tracked as bug 1051238. this is a problem es...

mozbrowserscrollviewchange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserscrollviewchange event is fired when asynchronous scrolling (i.e. apcz) starts or stops. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or ...
...vent normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: state a domstring representing the current state of scrolling in the viewport — available values are started and stopped. example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollviewchange", function( event ) { console.log("scrolling has " + event.details.state + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrows...

Embedding Tips
vice implementations with their own. for example, the default prompt service uses xul to render prompt dialogs and embedders may wish to render them in a way more appropriate for their application and platform.. how do i load a page? get thensiwebnavigation interface on your webbrowser and call the loaduri method with the appropriate uri and flags. this interface also has methods for reloading, stopping a load and going back and forward in the history. how do i block a load? implement the nsiwebprogresslistener interface and register it with the appropriate web browser object via the nsiwebbrowser::addwebbrowserlistener() method. use the callbacks for after-the-fact cancellation. alternatively, implement a nsiuricontentlistener as described below. how do i watch/intercept a load before it...
...ersist() function takes a string url and a string file path. in response it creates a persist object, creates a listener and starts the operation. as the operation progresses, methods on the listener such as onstatechange, onprogresschange etc. are called, allowing the embedder to know what is happening. when the operation is completed, the onstatechange will be notified by a combination of state_stop | state_is_network state flags. you may also use the progress listener to query the request supplied in onstatechange for more information. for example, if you wanted to check the server response headers, you might check onstatechange for state_start | state_is_request flags, and from the nsirequest argument qi fornsihttpchanne and call methods on that to determine response codes and other infor...

IME handling guide
tored textcomposition instance. nstextframe nstextframe paints ime selections. mozilla::imecontentobserver imecontentobserver observes various changes of a focused editor. when an editor or a windowless plugin gets focus, an instance is created, starts to observe and notifies widget of ime getting focus. when the editor or windowless plugin loses focus, it notifies widget of ime losing focus, stops observing everything and is released. this class observes selection changes (caret position changes), text changes of a focused editor and layout changes (by reflow or scroll) of everything in the document. it depends on the result of nsiwidget::getimeupdatepreference() what is observed. when this notifies something of widget and/or ime, it needs to be safe to run script because notifying some...
...disables ime in the widget. after that, imestatemanager in the remote process will set proper input context for the focused editor. at this time, imestatemanager in the parent process does nothing. therefore, imecontentobserver is never created while a remote process has focus. when a remote process loses focus, imestatemanager in parent process notifies imestatemanager in the remote process of "stop ime state management". when imestatemanager::stopimestatemanagement() is called in the remote process by this, the imestatemanager forgets all focus information (i.e., that indicates nobody has focus). when imestatemanager in parent process is notified of pseudo focus move from or to menubar while a remote process has focus, it notifies the remote process of "menu keyboard listener installed". t...

Downloads.jsm
pdir, "example-download.html")); console.log("example-download.html has been downloaded."); }).then(null, components.utils.reporterror); observing downloads this example logs a message every time a change occurs in one of the global download lists. to demonstrate the logging, a new download is started while a message box is being shown. the download is stopped and removed from the list when the message box is closed, regardless of whether it has been completed or not. components.utils.import("resource://gre/modules/downloads.jsm"); components.utils.import("resource://gre/modules/osfile.jsm") components.utils.import("resource://gre/modules/task.jsm"); task.spawn(function () { let list = yield downloads.getlist(downloads.all); let view = { ...
...adremoved: download => console.log("removed", download) }; yield list.addview(view); try { let download = yield downloads.createdownload({ source: "http://www.mozilla.org/", target: os.path.join(os.constants.path.tmpdir, "example-download.html"), }); list.add(download); try { download.start(); alert("now monitoring all downloads. close the message to stop."); } finally { yield list.remove(download); yield download.finalize(true); } } finally { yield list.removeview(view); } }).then(null, components.utils.reporterror); conversion from nsidownloadmanager starting in firefox for desktop version 26, the nsidownloadmanager and nsidownload interfaces are not available anymore. the new module works differently from the ol...

PerfMeasurement.jsm
asuring performance using the perfmeasurement.jsm code module for details on how to use this api. note: at present, perfmeasurement.jsm is only functional on linux, but it is planned to add support for windows (bug 583322) and osx (bug 583323) as well, and we welcome patches for other operating systems. method overview static bool canmeasuresomething(); void reset(); void start(); void stop(); member fields recorded data variables these variables provide access to the recorded data. any measurable event that was not being recorded has a value of -1 (that is, 0xffffffffffffffff). note: these values are all zeroed (or set to -1, for events not being measured) when you initialize the perfmeasurement object, then they are not zeroed again unless you explicitly call the reset() metho...
...le. static bool canmeasuresomething(); parameters none. return value if even one of the event types can be recorded, this will return true. otherwise, it returns false. reset() resets all the enabled counters to zero. void reset(); parameters none. start() starts measuring the performance indicators that were specified when the perfmeasurement object was created. void start(); parameters none. stop() stops measuring performance data. for each enabled counter, the number of measured events of that type that occurred are added to the appropriate visible variable. void stop(); parameters none. ...

WebChannel.jsm
valid origin that should be part of requests for this channel. webchannel(string webchannelid, string originorpermission); 2nd argument is a permission for which the permission manager will be checked to determine if the request is allowed. note that in addition to the permission manager check, the request must be made over https. method overview listen(function callback); stoplistening(); send(object message, eventtarget target); attributes id string webchannel id methods listen() registers the callback for messages on this channel. registers the channel itself with the webchannelbroker. parameters callback callback function containing function(id, message, sendercontext) parameters. id - webchannel id of the ...
...this channel. registers the channel itself with the webchannelbroker. parameters callback callback function containing function(id, message, sendercontext) parameters. id - webchannel id of the incoming messages message - incoming message object sendercontext - incoming message context - this should be treated as an opaque object and passed to the .send() method stoplistening() resets the callback for messages on this channel. removes the channel from the webchannelbroker. parameters none send() sends messages over the webchannel id using the "webchannelmessagetocontent" event. parameters message the message object that will be sent sendercontext the sendercontext parameter passed to the .listen method. examples setting up a ...

Gecko Profiler FAQ
think there are three main challenges here. you need deterministic profiles that can be compared meaningfully, you need to gather enough data / samples, and you need a way to compare profiles. to increase determinism, you really want an automated way of gathering the data. and you’ll want to make sure the profiles only contain data for the time range you’re interested in. to stop the profiler from gathering more samples after the “startup end” marker that you’re interested in, you can call services.profiler.pause(); or you can insert a marker with a special string and then write a script that filters out all samples that were gathered after your marker. to increase the amount of data, you should run your automated gathering procedure many times, an...
... [jesup] ok, that's the equivalent to itimer_real, kinda, except that per the previous question it doesn't interrupt every thread at once and snapshot the thread you started the itimer on, it interrupts each thread one at a time, which likely means distortion of the measurement if the number of threads monitored is significant (especially at high sample rates). a cleaner snapshot would stop all threads, walk all their stacks, and then resume all threads, especially on high-core systems. (itimer_real (due to posix) requires the signal occur on the calling thread, not a random thread. itimer_prof interrupts the then-running thread, whichever one it is. is there a way to isolate or filter a profile (at least of mainthread and maybe one or two other ones that make sense) ...

JS::PerfMeasurement
note: at present, js::perfmeasurement is only functional on linux, but it is planned to add support for windows (bug 583322) and osx (bug 583323) as well, and we welcome patches for other operating systems. the js::perfmeasurement class, found in jsperf.h, lets you take detailed performance measurements of your code. it is a stopwatch profiler -- that is, it counts events that occur while code of interest is running; it does not do call traces or sampling. the current implementation can measure eleven different types of low-level hardware and software events: events that can be measured bitmask passed to constructor counter variable what it measures perfmeasurement::cpu_cycles .cpu_cycles raw cpu clock cycles ::instructions .instructions total instructions execut...
...have any more bits set than were set in the mask passed to the constructor, but if the os cannot or will not measure all of the requested events, then only those events that will actually be measured have their bits set. all the counter variables for events that are not being measured will have the fixed value (uint64)-1. void start() call this on a perfmeasurement instance to start timing. void stop() and call this to stop timing again. the counter variables do not update in real time; they only change when stop is called. counter values are accumulated across many start/stop cycles, and you can modify their values if you want; stop simply adds counts read back from the os to whatever is already in each counter. void reset() resets all enabled counters to zero. uint64 cpu_cycles, uint64 in...

Measuring performance using the PerfMeasurement.jsm code module
es | perfmeasurement.cache_misses); this creates a new perfmeasurement object, configured to record the specified event types. it doesn't, however, start to record data. now we want to benchmark a function that is pretty fast (but not fast enough), so we run it several thousand times: for (let i = 0; i < 10000; i++) { set_up_some_state(); monitor.start(); code_to_be_benchmarked(); monitor.stop(); clean_up_afterward(); } we call the perfmeasurement object's start() method when we want to start recording, and stop() when we want to stop recording. this lets us record information only for the specific code section we want to measure. since we enable monitoring immediately before calling code_to_be_benchmarked(), and disable it as soon as it returns, the code in set_up_some_state() and...
...t recording, and stop() when we want to stop recording. this lets us record information only for the specific code section we want to measure. since we enable monitoring immediately before calling code_to_be_benchmarked(), and disable it as soon as it returns, the code in set_up_some_state() and clean_up_afterward() is not measured. the monitor object automatically accumulates counts over start/stop cycles (that is, it doesn't automatically zero the counters each time you start recording). when you're done benchmarking, you can read out each of the counters you asked for as properties: let report = "cpu cycles: " + monitor.cpu_cycles + "\n" + "cache refs: " + monitor.cache_references + "\n" + "cache misses: " + monitor.cache_misses + "\n"; monitor.reset(); aler...

Reporting a Performance Problem
this article will guide you in reporting a performance problem using the built-in gecko profiler tool. enabling the profiler toolbar button these steps only work in firefox 75+. visit https://profiler.firefox.com/ click on "enable profiler menu button" the profiler toolbar button will show up in the top right of the url bar as a small stopwatch icon you can right-click on the button and remove it from the toolbar when you're done with it. using the profiler when enabled, the profiler toolbar button is not recording by default. recording can be done by clicking on the toolbar icon to open its panel. make sure to choose an appropriate setting for the recording (if you're not sure, choose firefox platform), and then choosing "start recording". the toolbar icon turns blue when...
... settings) for the profiler, you can adjust the size of the buffer (presently defaults to 90 mb) and the time interval between data collection (presently defaults to 1 ms). note that increasing the buffer size uses more memory and can make capturing a profile take longer. using the keyboard shortcuts is often more convenient than using the mouse to interact with the ui: ctrl+shift+1 - start/stop the profiler ctrl+shift+2 - take a profile and launch the viewer to view it capturing and sharing a profile while the profiler is recording, reproduce the performance problem. if possible let the problem manifest itself for 5-10 seconds. press ctrl+shift+2 or click on the profiler toolbar icon in the top right and select 'capture'. try to do this within a few seconds from reproducing the p...

Index
for each record: the plain hex/ascii output, and the parsed ssl output. -x turn on hex/ascii printing of undecoded data inside parsed ssl records. used only with the -s option. this option uses the same output format as the -h option. -l prefix turn on looping; that is, continue to accept connections rather than stopping after the first connection is complete. -p port change the default rendezvous port (1924) to another port. the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) u...
...s no summary! 224 building and installing nss nss this chapter describes how to build and install nss. 225 build instructions nss numerous optional features of nss builds are controlled through make variables. 226 installation guide nss no summary! 227 migration to hg the nspr, nss and related projects have stopped using mozilla'a cvs server, but have migrated to mozilla's hg (mercurial) server. each project now lives in its own separate space, they can be found at: https://hg.mozilla.org/projects/nspr/ https://hg.mozilla.org/projects/nss/ https://hg.mozilla.org/projects/jss/ https://hg.mozilla.org/projects/python-nss/ 228 sample manual installation nss no summary! ...

NSS_3.12_release_notes.html
pkix cert_rev_m_do_not_test_using_this_method cert_rev_m_test_using_this_method cert_rev_m_allow_network_fetching cert_rev_m_forbid_network_fetching cert_rev_m_allow_implicit_default_source cert_rev_m_ignore_implicit_default_source cert_rev_m_skip_test_on_missing_source cert_rev_m_require_info_on_missing_source cert_rev_m_ignore_missing_fresh_info cert_rev_m_fail_on_missing_fresh_info cert_rev_m_stop_testing_on_fresh_info cert_rev_m_continue_testing_on_fresh_info cert_rev_mi_test_each_method_separately cert_rev_mi_test_all_local_information_first cert_rev_mi_no_overall_info_requirement cert_rev_mi_require_some_fresh_info_available cert_policy_flag_no_mapping cert_policy_flag_explicit cert_policy_flag_no_any cert_enable_ldap_fetch cert_enable_http_fetch new macro in utilrename.h: smime_aes...
... fails, can result in crash if user tries to view certificate [[@ secitem_compareitem_util] [[@ memcmp] bug 396256: certutil and pp do not print all the generalnames in a crldp extension bug 398019: correct confusing and erroneous comments in der_asciitotime bug 422866: vfychain -pp command crashes in nss_shutdown bug 345779: useless assignment statements in ec_gf2m_pt_mul_mont bug 349011: please stop exporting these crmf_ symbols bug 397178: crash when entering chrome://pippki/content/resetpassword.xul in url bar bug 403822: pkix_pl_ocsprequest_create can leave some members uninitialized bug 403910: cert_findusercertbyusage() returns wrong certificate if multiple certs with same subject available bug 404919: memory leak in sftkdb_readsecmoddb() (sftkmod.c) bug 406120: allow application to sp...

NSS 3.45 release notes
nss 3.45 requires nspr 4.21 or newer. ...
... that libfreebl_64fpu_3.so builds bug 1554336 - optimize away unneeded loop in mpi.c bug 1559906 - fipstest: use ckm_tls12_master_key_derive instead of vendor specific mechanism bug 1558126 - tls_aes_256_gcm_sha384 should be marked as fips compatible bug 1555207 - helloretryrequestcallback return code for rejecting 0-rtt bug 1556591 - eliminate races in uses of pk11_setwrapkey bug 1558681 - stop using a global for anti-replay of tls 1.3 early data bug 1561510 - fix a bug where removing -arch xxx args from cc didn't work bug 1561523 - add a string for the new-ish error ssl_error_missing_post_handshake_auth_extension this bugzilla query returns all the bugs fixed in nss 3.45: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&prod...

Encrypt Decrypt_MAC_Using Token
*/ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen, maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "...
...= pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finalize macing. */ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen, maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac. */ secstatu...

NSS_3.12.3_release_notes.html
the following bugs have been fixed in nss 3.12.3. bug 159483: cert name matching: rfc 2818 vs. backwards compatibility (wildcards) bug 334678: prng_fips1861.c redefines the macro bsize on hp-ux bug 335016: mpp_pprime (miller-rabin probabilistic primality test) may choose 0 or 1 as the random integer bug 347037: make shlibsign depend on the softoken only bug 371522: auto-update of crls stops after first update bug 380784: pk11mode in non fips mode failed. bug 394077: libpkix need to return revocation status of a cert bug 412468: modify certutil bug 417092: modify pkix_certselector api to return an error if cert was rejected. bug 426413: audit messages need distinct types bug 438870: free freebl hashing code of dependencies on nspr and libutil bug 439115: db merge allow...
... bug 472319: vfychain validates chain even if revoked certificate. bug 47274...

Necko Architecture
ing data & nsistreamlistener you can read or write, from or to a channel using either the synchronous api, or the asynchronous api. if you want to move data asynchronously you need to be able to receive callbacks using an implementation of nsistreamlistener. an nsistreamlistener is told when the uri transaction has "started," when data is available (in the case of reading data), and when it has "stopped." it is up to the nsistreamlistener implementation to decide what to do with these various notifications. the ondataavailable() notification provides a chance for the nsistreamlistener to actually retrieve data that the channel has acquired. one of the arguments to the ondataavailable() notification is an nsiinputstream (which can be considered the underlying data). streams necko represents...
...ve callbacks that notify you when things are happening. in the case of an asynchronous read... when you receive the ondataavailable() callback, you are handed an nsiinputsteam which you can read the data from (you will more than likely need to be able to handle multiple ondataavailable() callbacks, buffering the data you receive as necessary). the transaction is not complete until you receive an "stopped" notification. transports underlying i/o functionality has been consolidated into "transports." there is a transport for each type of i/o. necko implements a file transport and a socket transport that the protocol implementations (channels) use to actually move bytes to and from. how do i add my own protocol handler? adding your own protocol handler is a straightforward process in necko.

Index
ion object, funobj equals a specified native function, call. if so, js_isnativefunction returns true. otherwise it returns false. 378 js_isrunning jsapi reference, spidermonkey js_isrunning determines if a script or function is currently executing in a specified jscontext, cx. if a script is executing, js_isrunning returns true. otherwise it returns false. 379 js_isstopiteration jsapi reference, reference, référence(2), spidermonkey js_isstopiteration returns true if v is stopiteration, otherwise false. 380 js_iteratecompartments jsapi reference, reference, référence(2), spidermonkey js_iteratecompartments calls compartmentcallback on every compartment. beware that there is no guarantee that the compartment will survive after t...
... suspends the calling thread's current request, if any, to allow the thread to block or perform time-consuming calculations. 488 js_threadsafe jsapi reference, spidermonkey js_threadsafe was a compile-time option that enables support for running multiple threads of javascript code concurrently as long as no objects or strings are shared between them. 489 js_throwstopiteration jsapi reference, spidermonkey js_throwstopiteration throws the appropriate stopiteration object for the function currently executing in cx. 490 js_toggleoptions jsapi reference, obsolete, spidermonkey js_toggleoptions toggles context-wide options. it is equivalent to js_setoptions(cx, js_getoptions(cx) ^ options). 491 js_tracerinit jsapi refe...

Introduction to the JavaScript shell
pt bytecode for the entire program, or for the specified function. for example, if you enter the javascript function below: function test() { var i = 3; print(i+2); } then run the command dis(test);, you get this output: main: 00000: uint16 3 00003: setvar 0 00006: pop 00007: name "print" 00010: pushobj 00011: getvar 0 00014: uint16 2 00017: add 00018: call 1 00021: pop 00022: stop source notes: 0: 0 [ 0] newline 1: 3 [ 3] decl offset 0 2: 7 [ 4] newline 3: 18 [ 11] xdelta 4: 18 [ 0] pcbase offset 11 dissrc([function]) disassembles the javascript bytecode for the entire program, or for the specified function, showing the source lines. this function only works with programs loaded from files, either using the -f flag on launchin...
...this is a thin wrapper for js_dumpheap. gczeal(zeal) enable extra-frequent gc, to help find gc hazards. zeal is an integer. the meaning is the same as for the parameter to js_setgczeal. notes([function]) shows the source notes for the specified function. source notes contain information that map the bytec...

JS_MapGCRoots
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. perform some action for each object in a jsruntime's gc root set. syntax uint32 js_mapgcroots(jsruntime *rt, jsgcrootmapfun map, void *data); callback syntax #define js_map_gcroot_next 0 /* continue mapping entries */ #define js_map_gcroot_stop 1 /* stop mapping entries */ #define js_map_gcroot_remove 2 /* remove and free the current entry */ typedef int (*jsgcrootmapfun)(void *rp, const char *name, void *data); description call js_mapgcroots to map the gc's roots table using map(rp, name, data). the root is pointed at by rp; if the root is unnamed, name is null; data is supplied from the third parameter to js_ma...
... typedef int (*jsgcrootmapfun)(void *rp, const char *name, void *data); description call js_mapgcroots to map the gc's roots table using map(rp, name, data). the root is pointed at by rp; if the root is unnamed, name is null; data is supplied from the third parameter to js_mapgcroots. the map function should return js_map_gcroot_remove to cause the currently enumerated root to be removed. to stop enumeration, return js_map_gcroot_stop. to continue mapping, return js_map_gcroot_next. these constants are flags; you can or them together. this function acquires and releases rt's gc lock around the mapping of the roots table, so the map function should run to completion in as few cycles as possible. the map function cannot call js_gc, js_maybegc, js_beginrequest, or any js api entry point tha...

Avoiding leaks in JavaScript XPCOM components
the dom node again the same way he did the first time, and would then expect the added properties to still be there. we currently implement this by making the wrapper a root in the javascript garbage collector once somebody sets a javascript property on a dom node. (this is roughly equivalent to making all the properties roots, but simpler.) once this happens, it remains a root until the document stops being displayed. this means that neither the element nor any of the properties nor any of the objects reachable from those properties can be freed until the document is no longer displayed. you might think that it's unusual to set arbitrary properties on dom nodes. and in many cases it is. but in one important case it's not: xbl. xbl fields are implemented as javascript properties on the bound ...
... observe and service. (but since service is a global variable, just fixing the cycle doesn't fix the leak.) don't store short-lived objects as javascript properties of short-lived dom nodes i mentioned earlier that, in versions of mozilla before 1.8, setting arbitrary javascript properties on elements (or using xbl fields) causes that element's javascript wrapper to be rooted until the document stops being displayed. this can be a problem if there are large objects reachable from that wrapper that should go away before the document stops being displayed. the worst example of this problem is tabbrowser. tabbrowser is an xbl binding that wraps browsers in tabs, creating and destroying them as needed. but the browsers are themselves xbl bindings, and much of the memory associated with the page...

XPCOM Stream Guide
rs implement three methods. from the nsistreamlistener interface, the .ondataavailable(request, context, inputstream, offset, count) method gives you the input stream and the number of bytes available. the stream listener must read exactly count bytes before exiting. ...
...stream listener must read exactly count bytes before exiting. from the nsirequestobserver interface, the .onstartrequest(request, context) method tells you when the request begins, while the .onstoprequest(request, context) method tells you when the request ends. a request will have one .onstartrequest(request, context) call, followed by at least one .ondataavailable(...) call, followed by one .onstoprequest(request, context) call. the context argument will be something passed from whoever invokes the request to the .onstartrequest(), .ondataavailable(), and .onstoprequest() methods of the listener. as for passing in the stream listener and starting the request: that will vary depending on the use case. seekable streams some streams are "seekable": they let you specify where in the stream ...

Components.isSuccessCode
asynchronous apis, it may be essential. for example, if you ask a component or service to asynchronously perform some task, you must usually pass in an object which will be notified when the task is completed. if the task is sufficiently complex that it can fail, the notification will include a status code indicating the success or failure of the operation (see, for example, nsirequestobserver.onstoprequest()). to determine the success or failure of the complex task, you would call components.issuccesscode() upon the status code included in the notification. examples checking whether copying a stream's data succeeded the following example demonstrates copying data from a buffered nsiinputstream to an nsioutputstream, checking for whether the copy succeeded using components.issuccesscode().
... using gecko 1.9.1 and earlier. ...

imgIContainer
you can only be guaranteed that querying this will not throw if status_decode_complete is set on the imgirequest. read only. exceptions thrown ns_error_not_available if the ani...
... atimeout ); parameters framenumber missing description atimeout missing description exceptions thrown missing exception missing description startanimation() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) void startanimation(); parameters none. exceptions thrown missing exception missing description stopanimation() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) void stopanimation(); parameters none. exceptions thrown missing exception missing description unlockimage() decreases the lock count on the image. if the lock count drops to zero, the image is allowed to discard its frame data to save memory. upon instantiation images have a lock count o...

nsIAppShell
section). in practice this runs arunnable once the currently executing event finishes. if called multiple times per task/event, all the runnables will be executed, in the order in which runinstablestate was called. void runinstablestate( in nsirunnable arunnable ); parameters arunnable an nsirunnable to run. spindown() obsolete since gecko 1.9 (firefox 3) prepare to stop processing events. void spindown(); parameters none. spinup() obsolete since gecko 1.9 (firefox 3) prepare to process events. void spinup(); parameters none. suspendnative() suspends the use of additional platform-specific methods (besides the nsiappshell->run() event loop) to run gecko events on the main application thread. under some circumstances these "additional m...
...ides the nsiappshell->run() event loop) to run gecko events on the main application thread. under some circumstances these "additional methods" can cause gecko event handlers to be re-entered, sometimes leading to hangs and crashes. calls to suspendnative and resumenative() may be nested. on some platforms (those that do not use any "additional methods") this will be a no-op. does not (in itself) stop gecko events from being processed on the main application thread. but if the nsiappshell->run() event loop is blocked when this call is made, gecko events will stop being processed until resumenative() is called (even if a plugin or library is temporarily processing events on a nested event loop). void suspendnative(); parameters none. ...

nsIDeviceMotion
change() method should be called with updated acceleration data. native code only!addwindowlistener sets the nsiaccelerometer as the source for mozorientation events on the specified dom window. void addwindowlistener( in nsidomwindow awindow ); parameters awindow the dom window that the accelerometer should begin sending mozorientation events to. removelistener() tells the accelerometer to stop sending updates to the specified nsidevicemotionlistener. void removelistener( in nsidevicemotionlistener alistener ); parameters alistener the nsidevicemotionlistener object to which no further updates should be sent. native code only!removewindowlistener removes the nsiaccelerometer as the source for mozorientation events on the specified dom window. void removewindowlistener( in nsidomw...
...n nsidevicemotionlistener alistener ); parameters alistener the nsidevicemotionlistener object to which no further updates should be sent. native code only!removewindowlistener removes the nsiaccelerometer as the source for mozorientation events on the specified dom window. void removewindowlistener( in nsidomwindow awindow ); parameters awindow the dom window that the accelerometer should stop sending mozorientation events to. see also mozorientation nsidomorientationevent nsidevicemotiondata nsidevicemotionlistener ...

nsIDownloadProgressListener
he status of downloads being processed by the download manager. inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) to use simply implement this interface in your code, then call nsidownloadmanager.addlistener() to start listening. when you no longer need to listen to the download manager's state, call nsidownloadmanager.removelistener() to stop listening. as the states of downloads change, the methods described here are called by the download manager so your code can take whatever steps it needs to. this interface works very similarly to the nsiwebprogress interface. it is important to note that there is no service for this listener. rather, the developer must create an object with the methods provided below to implement it. method o...
...1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) called when the status of a download request has changed. the received status message is intended to be displayed visibly to the user. note: if source and destination are identical, which is possible in case of file urls or chrome urls, this is called even in gecko 1.9.2. in such a situation no further event handlers are called and the stop flag is set; if there are more pending downloads in such a situation not yet started they never start. in normal situations this is never called. the method even if never called must be implemented in the listener, because the webprogress used to do the physical part of the download requires it and uses the listener instance provided to the download manager. void onstatuschange( in nsiwebprog...

nsILoadGroup
ad group will inherit its load flags from the request. void addrequest( in nsirequest arequest, in nsisupports acontext ); parameters arequest the request to be added to the load group. acontext the context to be passed to the onstartrequest notification. removerequest() removes a request from the group. ...
...server's onstoprequest will be called. by the time this call ends, arequest will have been removed from the loadgroup, even if this function throws an exception. void removerequest( in nsirequest arequest, in nsisupports acontext, in nsresult astatus ); parameters arequest the request to be removed from the load group. acontext the context to be passed to the onstoprequest notification. astatus the status to be passed to the onstoprequest notification. ...

nsIMsgMessageService
sageuri uri of message to stream aconsumer generally, a stream listener listening to the message. the consumer has to be a stream listener and in your listener's ondataavailable method, you can write out the stream data to a local file or concatenate it to a string. amsgwindow nsimsgwindow for progress and status feedback. aurllistener an nsiurllistener that is notified when url starts and stops. aconvertdata if aconvertdata is true, it will create a stream converter from message rfc2822 to */*. aadditionalheader header added to the uri. e.g., header=filter return the nsiuri that gets run example for example, the next piece of code shows the selected message code on a dialog: (taken from mozillazine) var content = ""; var messageuri = getfirstselectedmessage(); var msgse...
... alocalonly); parameters amessageuri uri of message to stream aconsumer nsistreamlistener generally, a stream listener listening to the message headers. the consumer has to be a stream listener and in your listener's ondataavailable method, you can write out the stream data to a local file or concatenate it to a string. aurllistener an nsiurllistener that is notified when url starts and stops, if we run a url. alocalonly whether data should be retrieved only from local caches. if streaming over the network is required and this is true, then an exception is thrown. this defaults to false. note if we're offline, then even if alocalonly is false, we won't stream over the network return the url that gets run, if any ismsginmemcache() determines whether a message is in the mem...

nsIPluginHost
native code only! methods native code only!createtempfiletopost to create temp file with content len header in, it will use by ht...
...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( in string amimetype, in nsiuri aurl, in nsiplugininstanceowner aowner ); parameters amimetype aurl aowner native code only!stopplugininstance void stopplugininstance( in nsiplugininstance ainstance ); parameters ainstance native code only!useragent void useragent( in nativechar resultingagentstring ); parameters examples list all plug-ins and associated mime types and get handler info this example here logs to browser console all the installed plug-ins and the associated mime types. then using nsiha...

nsIRequest
netwerk/base/nsirequest.idlscriptable this interface is used by the request initiator to control the request. inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) for example nsichannel typically passes itself as the nsirequest argument to the nsistreamlistener on each onstartrequest, ondataavaliable, and onstoprequest invocation. method overview void cancel(in nsresult astatus); boolean ispending(); void resume(); void suspend(); attributes attribute type description loadflags nsloadflags the load flags of this request. bits 0-15 are reserved. when added to a load group, this request's load flags are merged with the load flags of the load group...
...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 capable of handling events even after suspending a request. void suspend(); parameters none. ...

nsIServerSocketListener
nd by calling the nsisockettransport.getaddress() method or by inspecting nsisockettransport.gethost(), which returns a string representation of the client's ip address, which may be either an ipv4 or an ipv6 address. ...
...erv, in nsisockettransport atransport); void onstoplistening(in nsiserversocket aserv, in nsresult astatus); methods onsocketaccepted() this method is called when a client connection is accepted. void onsocketaccepted( in nsiserversocket aserv, in nsisockettransport atransport ); parameters aserv the server socket. atransport the connected socket transport. onstoplistening() this method is called when the listening socket stops for some reason. the server socket is effectively dead after this notification. void onstoplistening( in nsiserversocket aserv, in nsresult astatus ); parameters aserv the server socket. astatus the reason why the server socket stopped listening. if the server socket was manually closed, then this value will be...

nsITreeSelection
s adjustselection() called when the row count changes to adjust selection indices. void adjustselection( in long index, in long count ); parameters index index of the change. count number of rows changed. clearrange() clears the range. void clearrange( in long startindex, in long endindex ); parameters startindex index to clearing at. endindex index to stop clearing at. clearselection() clears the selection. void clearselection(); parameters none. getrangeat() returns two objects whose value properties represent the minimum and maximum indices of the given selection range. see the tree selection tutorial. void getrangeat( in long i, out long min, out long max ); parameters i index of range to get (0 <= i < getrangecount()) ...
... not the row at the specified index is part of the selection. boolean isselected( in long index ); parameters index index of the row to check. return value rangedselect() select the range specified by the indices. void rangedselect( in long startindex, in long endindex, in boolean augment ); parameters startindex index to start selecting at. endindex index to stop selecting at. this parameter is inclusive; to select one item, set endindex == startindex. augment if true, the range is added to the selection without clearing out anything else. if false, everything is cleared except for the specified range. select() deselect all rows and select the row at the specified index. void select( in long index ); parameters index index of the row ...

nsIWifiMonitor
/ thunderbird 3.0 / seamonkey 2.0) this is used, for example, by geolocation to use wifi access points for location detection. ...
...ces.nsiwifimonitor); method overview void startwatching(in nsiwifilistener alistener); void stopwatching(in nsiwifilistener alistener); methods startwatching() starts listening for changes to the wifi access point list. void startwatching( in nsiwifilistener alistener ); parameters alistener the nsiwifilistener object to receive notifications when the wifi access point list changes. stopwatching() stops listening for changes to the wifi access point list. void stopwatching( in nsiwifilistener alistener ); parameters alistener the nsiwifilistener object to stop receiving notifications on. see also monitoring wifi access points nsiwifilistener nsiwifiaccesspoint ...

nsIWindowsRegKey
th, in unsigned long mode); acstring readbinaryvalue(in astring name); unsigned long long readint64value(in astring name); unsigned long readintvalue(in astring name); astring readstringvalue(in astring name); void removechild(in astring relpath); void removevalue(in astring name); void startwatching(in boolean recurse); void stopwatching(); void writebinaryvalue(in astring name, in acstring data); void writeint64value(in astring name, in unsigned long long data); void writeintvalue(in astring name, in unsigned long data); void writestringvalue(in astring name, in astring data); attributes attribute type description childcount unsigned long this attrib...
... startwatching() this method starts watching the key to see if any of its values have changed. the key must have been opened with mode including access_notify. if recurse is true, then this key and any of its descendant keys are watched. otherwise, only this key is watched. void startwatching( in boolean recurse ); parameters recurse indicates whether or not to also watch child keys. stopwatching() this method stops any watching of the key initiated by a call to startwatching(). this method does nothing if the key is not being watched. void stopwatching(); parameters none. writebinaryvalue() this method writes the binary contents of the named value. the value will be created if it does not already exist. javascript callers should take care with the value passed to this method sin...

Address book sync client design
n has been completed. * * this method is called regardless of whether the the operation was * successful. * * atransactionid - the id for this particular request * astatus - status code for the sync request * amsg - a text string describing the error (if any). * acookie - hmmm...cooookies! */ void onstopauthoperation(in nsresult astatus, in wstring amsg, in string acookie); /** * notify the observer that the ab sync operation has begun. this method is * called only once, at the beginning of a sync transaction * */ void onstartoperation(in print32 atransactionid, in pruint32 amsgsize); /** * notify the observer that progress as occurred for the ab sync ...
...* notify the observer that the ab sync operation has been completed. ...

Debugging service workers - Firefox Developer Tools
kers registered on the same domain): this gives you a variety of information about your service worker: the url that the service worker is registered on. that last time the service worker was updated (if the service has not been updated, this is when it was first installed). the path to the service worker source file. the server worker’s status, which can be one of the following: stopped: the service worker is installed, but not currently running. when the service worker is stopped, a start button is provided to start it running, allowing you to trigger the service worker lifecycle. running: the service worker is running. there are a couple of other useful controls on this view, too. unregister on the right-hand side of the service workers view there is an unregist...
...when there are no longer any pages loaded that are still using the old service worker. as soon as there are no more such pages still loaded, the new service worker activates. debug important: the debug button is currently enabled only in firefox nightly. when your service worker is running, a debug button is available next to the source information (it is disabled when the service worker is stopped). when pressed, this takes you straight to the javascript debugger view of your service worker code, and you can use the full power of the debugger to debug it — stepping through code, etc. testing a service worker cache if you are using your service worker to store your site assets in cache storage (using the cache api), which is essential for creating offline apps, it can be annoying t...

Break on DOM mutation - Firefox Developer Tools
the code when the dom node on which you have set the breakpoint is modified. you set a dom mutation breakpoint in the page inspector. navigate to the dom node in which you are interested and use the context menu to set the breakpoint. there are three choices: subtree modification execution pauses if any of the elementʼs descendant nodes are modified. that means, the script execution is stopped whenever a child node or descendant node deeper in the dom structure is added to or removed from the element the option is set on. examples for when this breakpoint is triggered are calling node.appendchild() and node.removechild(), calling childnode.remove() or setting element.innerhtml on one of the subnodes. attribute modification execution pauses when any of the elementsʼ attributes ...
... in the dom structure is added to or removed from the element the option is set on. examples for when this breakpoint is triggered are calling node.appendchild() and node.removechild(), calling childnode.remove() or setting element.innerhtml on one of the subnodes. attribute modification execution pauses when any of the elementsʼ attributes are modified. that means, the script execution is stopped whenever an attribute is added to or removed from the element the option is set on or the value of one of its attributes is changed. examples for when this breakpoint is triggered are calling element.setattribute(), element.removeattribute(), and element.classlist.add(), or setting element.id. node removal execution pauses if the element the option is set on is removed. examples for wh...

Examine, modify, and watch variables - Firefox Developer Tools
this feature isn't yet supported in the new debugger. if you need to use it, you can, for now, switch back to the old debugger by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to false. to see the docs for the old debugger, please visit debugger (before firefox 52). examine variables when the code has stopped at a breakpoint, you can examine its state in the variables pane of the debugger: variables are grouped by scope: in function scope you'll see the built-in arguments and this variables as well as local variables defined by the function like user and greeting. similarly, in global scope you'll see global variables you've defined, like greetme, as well as built-in globals like localstorage and console. each object can be expanded...
...er, or by typing into the filter variables box, if you have enabled this in the debugger settings. if a variable exists in the source but has been optimized away by the javascript engine, then it is shown in the variables view, but is given the value (optimized away), and is not editable. in the screenshot below the variable upvar has been optimized away: modify variables when the code has stopped at a breakpoint, you can modify variables in the variables pane of the debugger. just click on the variable's current value and you'll be able to type there: watch an expression watch expressions are expressions that are evaluated each time execution pauses. you can then examine the results of these expressions. these are useful in that they let you inspect invariants in your code that you...

UI Tour - Firefox Developer Tools
tree for navigating the currently open file. use it to jump directly to a function, class or method definition. source pane this shows the javascript file currently loaded. when the source pane is focused you can search for a string in the file using ctrl + f (cmd + f on a mac). breakpoints have a blue arrow overlaid on the line number. conditional breakpoints have an orange arrow. if you're stopped at a breakpoint, the entire line gets a green overlay. in the screenshot below there are three breakpoints: line 82 has a normal breakpoint and execution is paused here line 85 has a logpoint which logs the contents of tablerow to the console line 100 has a conditional breakpoint the third column shows more information about the breakpoints. for example, the logpoint at line 85 logs t...
...ck: each level of the call stack gets a line, with the name of the function and the filename and line number. clicking a line selects the corresponding line in the source pane. note: if you click step over (f10) after changing the selected line in the source pane, the debugger executes until reaching the line following the newly-selected line (disregarding whatever line the debugger originally stopped at). right-clicking in the call stack pane opens a context menu with the following items: restart frame restarts execution at the beginning of the current frame. enable framework grouping collects items belonging to a framework into a collapsible group (for example, jquery in the screenshot above). when grouping is enabled, the menu option changes to disable framework grouping. copy sou...

Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
buggee of our debugger. dbg.adddebuggee(w.wrappedjsobject); // enable allocation tracking in dbg's debuggees. dbg.memory.trackingallocationsites = true; } window.demoplotallocations = function() { // grab the allocation log. var log = dbg.memory.drainallocationslog(); // neutralize the debugger, and drop it on the floor // for the gc to collect. console.log("stopping allocation tracking."); dbg.removealldebuggees(); dbg = undefined; // analyze and display the allocation log. plot(log); } function handleuncaughtexception(ex) { console.log('debugger hook threw:'); console.log(ex.tostring()); console.log('stack:'); console.log(ex.stack); }; function plot(log) { // given the log, compute a map from allocation sit...
...button > developer > browser console), and then evaluate the expression demotrackallocations() in the browser console. this begins logging allocations in the current browser tab. in the browser tab, click on the text that says "click here…". the event handler should add some text to the end of the page. back in the browser console, evaluate the expression demoplotallocations(). this stops logging allocations, and displays a tree of allocations: an allocation plot, displayed in the console the numbers at the left edge of each line show the total number of objects allocated at that site or at sites called from there. after the count, we see the function name, and the source code location of the call site or allocation. the (root) node's count includes objects allocat...

DevTools API - Firefox Developer Tools
of the tool to unregister. registertheme(themedefinition) registers a new theme. parameters: themedefinition {themedefinition} - an object that contains information about the theme. unregistertheme(theme) unregisters the given theme. parameters: theme {themedefinition|string} - the theme definition object or the theme identifier. showtoolbox(target [, toolid [, hosttype [, hostoptions]]]) opens a toolbox for given target either by creating a new one or activating an existing one. parameters: target {target} - the target the toolbox will debug. toolid {string} - the tool that should be activated. if unspecified the previously active tool is shown. hosttype {string} - the position the toolbox will be placed. one of bottom, side, window, custom. see hosttype for detai...
...]) opens a toolbox for given target either by creating a new one or activating an existing one. parameters: target {target} - the target the toolbox will debug. toolid {string} - the tool that should be activated. if unspecified the previously active tool is shown. hosttype {string} - the position the toolbox will be placed. one of bottom, side, window, custom. see hosttype for details. hostoptions {object} - an options object passed to the selected host. see hosttype for details. return value: a promise that is fulfilled with the toolbox instance once it has been initialized and the selected tool is loaded. gettoolbox(target) fetch the toolbox object for the given target. parameters: target {target} - the target the toolbox is debugging. return value: toolbox object or...

Index - Firefox Developer Tools
0 debug eval sources you can debug javascript code that is evaluated dynamically, either as a string passed to eval() or as a string passed to the function constructor. 121 disable breakpoints to disable a single breakpoint, uncheck the checkbox next to it in the breakpoints list. 122 examine, modify, and watch variables when the code has stopped at a breakpoint, you can examine its state in the variables pane of the debugger: 123 highlight and inspect dom nodes dom node, debugger, devtools, page inspector if you hover over a dom node in the watch expresions, it will be highlighted in the page. 124 ignore a source in modern web development, we often rely on libraries like jquery, ember, or ang...
...ssions when debugging code, sometimes it's useful to watch expressions as executions are paused. the debugger features a pane for entering expressions to be watched (watch expressions). as you step through code, the debugger will watch the expression and return any results. 131 step through code debugger, devtools, javascript, step through code when the debugger is stopped at a breakpoint, you can step through it using four buttons in the toolbar: 132 use a source map the javascript sources executed by the browser are often transformed in some way from the original sources created by a developer. for example: 133 use watchpoints firefox, guide, tools when debugging javascript code, it can be useful to know when properti...

DOM allocation example - Firefox Developer Tools
nce-scenarios/dom-allocs/alloc.html. ...
... return math.floor(math.random() * (max - min + 1)) + min; } function createtoolbarbutton() { var toolbarbutton = document.createelement("span"); toolbarbutton.classlist.add("toolbarbutton"); // stop spidermonkey from sharing instances toolbarbutton[getrandomint(0,5000)] = "foo"; return toolbarbutton; } function createtoolbar() { var toolbar = document.createelement("div"); // stop spidermonkey from sharing instances toolbar[getrandomint(0,5000)] = "foo"; for (var i = 0; i < toolbarbuttoncount; i++) { var toolbarbutton = createtoolbarbutton(); toolbar.appendchild(toolbarbutton); } return toolbar; } function createtoolbars() { var container = document.getelementbyid("container"); for (var i = 0; i < toolbarcount; i++) { var toolbar = createtoolbar();...

Intensive JavaScript - Firefox Developer Tools
lkthrough: the demo website looks like this: it has three controls: a radio button group to control how to run the javascript: as a single blocking operation in the main thread, as a series of smaller operations in the main thread using requestanimationframe(), or in another thread using a worker. a button to run the javascript, labeled "do pointless computations!". ...
...it gives us a compressed view of the waterfall, which tells us what kinds of operations the browser is doing during the recording. ...

AudioBufferSourceNode.loop - Web APIs
ooping is enabled, the sound begins playing at the time specified as the start point when start() is called. when the time specified by the loopend property is reached, playback continues at the time specified by loopstart example in this example, the audiocontext.decodeaudiodata function is used to decode an audio track and put it into an audiobuffersourcenode. buttons are provided to play and stop the audio playback, and a slider control is used to change the playbackrate property value on the fly. when the audio is played, it loops. you can run the full example live (or view the source.) function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload =...
... working draft ...

AudioBufferSourceNode.loopEnd - Web APIs
ch each loop will loop return to the beginning of the loop (that is, the current play time gets reset to audiobuffersourcenode.loopstart). this property is only used if the loop property is true. the default value is 0. example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio track and put it into an audiobuffersourcenode. buttons are provided to play and stop the audio playback, and slider controls are used to change the playbackrate, loopstart and loopend properties on the fly. when the audio is played to the end, it loops, but you can control how long the loops last by altering loopstart and loopend. for example, if you set their values to 20 and 25, respectively, then begin playback, the sound will play normally until it reaches the 25 second mark...
...to the end, it loops, but you can control how long the loops last by altering loopstart and loopend. for example, if you set their values to 20 and 25, respectively, then begin playback, the sound will play normally until it reaches the 25 second mark. then the current play position will loop back to the 20 second mark and continue playing until the 25 second mark, ad infinitum (or at least until stop() is called). for a full working example, see this code running live, or view the source. function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(bu...

AudioBufferSourceNode.playbackRate - Web APIs
krate do: a playbackrate of 1.0 plays the audio at full speed, or 44,100 hz. a playbackrate of 0.5 plays the audio at half speed, or 22,050 hz. a playbackrate of 2.0 doubles the audio's playback rate to 88,200 hz. example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio track, and put it into an audiobuffersourcenode. buttons are provided to play and stop the audio playback, and a slider control is used to change the playbackrate property value on the fly. you can run the example live (or view the source.) play the song and alter the playback rate for some fun results. <input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1"> <span class="playback-rate-value">1.0</span> function getdata() { source = audioc...
...data = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // wire up buttons to stop and play audio, and range slider control play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); playbackcontrol.removeattribute('disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); playbackcontrol.setattribute('disabled', 'disabled'); } playbackcontrol.oninput = function() { source.playbackrate.

AudioBufferSourceNode - Web APIs
and the actual audiobuffers can be reused for multiple plays of the sound. indeed, you can use these nodes in a "fire and forget" manner: create the node, call start() to begin playing the sound, and don't even bother to hold a reference to it. it will automatically be garbage-collected at an appropriate time, which won't be until sometime after the sound has finished playing. multiple calls to stop() are allowed. the most recent call replaces the previous one, if the audiobuffersourcenode has not already reached the end of the buffer. number of inputs 0 number of outputs 1 channel count defined by the associated audiobuffer constructor audiobuffersourcenode() creates and returns a new audiobuffersourcenode object. an audiobuffersourcenode ...
...de.loopstart optional a floating-point value indicating the time, in seconds, at which playback of the audiobuffer must begin when loop is true. its default value is 0 (meaning that at the beginning of each loop, playback begins at the start of the audio buffer). audiobuffersourcenode.loopend optional a floating-point number indicating the time, in seconds, at which playback of the audiobuffer stops and loops back to the time indicated by loopstart, if loop is true. the default value is 0. audiobuffersourcenode.playbackrate an a-rate audioparam that defines the speed factor at which the audio asset will be played, where a value of 1.0 is the sound's natural sampling rate. since no pitch correction is applied on the output, this can be used to change the pitch of the sample. this value is ...

AudioContext.createMediaStreamDestination() - Web APIs
node. examples in the following simple example, we create a mediastreamaudiodestinationnode, an oscillatornode and a mediarecorder (the example will therefore only work in firefox and chrome at this time.) the mediarecorder is set up to record information from the mediastreamdestinationnode. when the button is clicked, the oscillator starts, and the mediarecorder is started. when the button is stopped, the oscillator and mediarecorder both stop. stopping the mediarecorder causes the dataavailable event to fire, and the event data is pushed into the chunks array. after that, the stop event fires, a new blob is made of type opus — which contains the data in the chunks array, and a new window (tab) is then opened that points to a url created from the blob. from here, you can play and save t...
...d = false; var chunks = []; var ac = new audiocontext(); var osc = ac.createoscillator(); var dest = ac.createmediastreamdestination(); var mediarecorder = new mediarecorder(dest.stream); osc.connect(dest); b.addeventlistener("click", function(e) { if (!clicked) { mediarecorder.start(); osc.start(0); e.target.innerhtml = "stop recording"; clicked = true; } else { mediarecorder.stop(); osc.stop(0); e.target.disabled = true; } }); mediarecorder.ondataavailable = function(evt) { // push each chunk (blobs) in an array chunks.push(evt.data); }; mediarecorder.onstop = function(evt) { // make blob out of our blobs, and ope...

AudioContext.getOutputTimestamp() - Web APIs
onframe loop running, which constantly outputs the contexttime and performancetime. you can see full code of this example at output-timestamp (see it live also). ...
...he contexttime and performancetime. you can see full code of this example at output-timestamp (see it live also). ...

AudioScheduledSourceNode: ended event - Web APIs
the ended event of the audioscheduledsourcenode interface is fired when the source node has stopped playing. bubbles no cancelable no interface event event handler property audioscheduledsourcenode.onended usage notes this event occurs when a audioscheduledsourcenode has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played. ...
...de.onended usage notes this event occurs when a audioscheduledsourcenode has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played. examples in this simple example, an event listener for the ended event is set up to enable a "start" button in the user interface when the node stops playing: node.addeventlistener('ended', () => { document.getelementbyid("startbutton").disabled = false; }) you can also set up the event handler using the audioscheduledsourcenode.onended property: node.onended = function() { document.getelementbyid("startbutton").disabled = false; } for an example of the ended event in use, see our audio-buffer example on github. specifications ...

AudioScheduledSourceNode.onended - Web APIs
the onended event handler for the audioscheduledsourcenode interface specifies an eventhandler to be executed when the ended event occurs on the node. this event is sent to the node when the concrete interface (such as audiobuffersourcenode, oscillatornode, or constantsourcenode) determines that it has stopped playing. the ended event is only sent to a node configured to loop automatically when the node is stopped using its stop() method. this is the case, for example, when using an audiobuffersourcenode with its loop property set to true. syntax audioscheduledsourcenode.onended = eventhandler; value a function which is called by the browser when the ended event occurs on the audioscheduledsourcenode. the function receives as input a single parameter, which is an object of type event ...
...ended = eventhandler; value a function which is called by the browser when the ended event occurs on the audioscheduledsourcenode. the function receives as input a single parameter, which is an object of type event describing the event that occurred. examples in this simple example, an event listener for the ended event is set up to enable a "start" button in the user interface when the node stops playing. node.onended = function(event) { document.getelementbyid("startbutton").disabled = false; } specifications specification status comment web audio apithe definition of 'onended' in that specification. working draft initial specification. ...

AudioScheduledSourceNode.start() - Web APIs
m the beginning. duration optional a floating-point number indicating the duration, in seconds, to be played. if no value is passed then the duration will be equal to the length of the audio buffer minus the offset value return value undefined exceptions invalidstatenode the node has already been started. this error occurs even if the node is no longer running because of a prior call to stop(). rangeerror the value specified for when is negative. example this example demonstrates how to create an oscillatornode which is scheduled to start playing in 2 seconds and stop playing 1 second after that. the times are calculated by adding the desired number of seconds to the context's current time stamp returned by audiocontext.currenttime. context = new audiocontext(); osc = context.c...
...le demonstrates how to create an oscillatornode which is scheduled to start playing in 2 seconds and stop playing 1 second after that. the times are calculated by adding the desired number of seconds to the context's current time stamp returned by audiocontext.currenttime. context = new audiocontext(); osc = context.createoscillator(); osc.connect(context.destination); /* schedule the start and stop times for the oscillator */ osc.start(context.currenttime + 2); osc.stop(context.currenttime + 3); specifications specification status comment web audio apithe definition of 'start()' in that specification. working draft ...

BluetoothRemoteGATTCharacteristic - Web APIs
bluetoothremotegattcharacteristic.uuidread only returns a domstring containing the uuid of the characteristic, f...
...the value property if it is available and supported. otherwise it throws an error. bluetoothremotegattcharacteristic.writevalue() sets the value property to the bytes contained in an arraybuffer and returns a promise. bluetoothremotegattcharacteristic.startnotifications() returns a promise when navigator.bluetooth is added to the active notification context. bluetoothremotegattcharacteristic.stopnotifications() returns a promise when navigator.bluetooth is removed from the active notification context. specifications specification status comment web bluetooththe definition of 'bluetoothremotegattcharacteristic' in that specification. draft initial definition. ...

CanvasRenderingContext2D.createLinearGradient() - Web APIs
he start point. y0 the y-axis coordinate of the start point. x1 the x-axis coordinate of the end point. y1 the y-axis coordinate of the end point. return value canvasgradient a linear canvasgradient initialized with the specified line. examples filling a rectangle with a linear gradient this example initializes a linear gradient using the createlineargradient() method. three color stops between the gradient's start and end points are then created. finally, the gradient is assigned to the canvas context, and is rendered to a filled rectangle. html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // create a linear gradient // the start gradient point is at x=20, y=0 // the end gradient point is at x...
...t is assigned to the canvas context, and is rendered to a filled rectangle. html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // create a linear gradient // the start gradient point is at x=20, y=0 // the end gradient point is at x=220, y=0 var gradient = ctx.createlineargradient(20,0, 220,0); // add three color stops gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.5, 'cyan'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 200, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createlineargradient' in that specification. ...

CanvasRenderingContext2D.createRadialGradient() - Web APIs
s coordinate of the end circle. y1 the y-axis coordinate of the end circle. r1 the radius of the end circle. must be non-negative and finite. return value canvasgradient a radial canvasgradient initialized with the two specified circles. examples filling a rectangle with a radial gradient this example initializes a radial gradient using the createradialgradient() method. three color stops between the gradient's two circles are then created. finally, the gradient is assigned to the canvas context, and is rendered to a filled rectangle. html <canvas id="canvas" width="200" height="200"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // create a radial gradient // the inner circle is at x=110, y=90, with radius=30 // the ...
... filled rectangle. html <canvas id="canvas" width="200" height="200"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // create a radial gradient // the inner circle is at x=110, y=90, with radius=30 // the outer circle is at x=100, y=100, with radius=70 var gradient = ctx.createradialgradient(110,90,30, 100,100,70); // add three color stops gradient.addcolorstop(0, 'pink'); gradient.addcolorstop(.9, 'white'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 160, 160); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createradialgradient' in that specification. ...

Compositing and clipping - Web APIs
of a set of random stars to a particular region. ...
...ar region. ...

Console.timeEnd() - Web APIs
stops a timer that was previously started by calling console.time(). see timers in the documentation for details and examples. note: this feature is available in web workers. syntax console.timeend(label); parameters label the name of the timer to stop. once stopped, the elapsed time is automatically displayed in the web console along with an indicator that the time has ended. examples console.time("answer time"); alert("click to continue"); console.timelog("answer time"); alert("do a bunch of other stuff..."); console.timeend("answer time"); the output from the example above shows the time taken by the user to dismiss the first alert box, followed by the time it took for the user to dismiss the second alert: notice that the timer's name is displayed when the timer value i...
...in addition, the call to timeend() has the additional information, "timer ended" to make it obvious that the timer is no longer tracking time. specifications specification status comment console apithe definition of 'console.timeend()' in that specification. living standard initial definition ...

CredentialsContainer.get() - Web APIs
ntial type allowed by the options argument. for example: if options.password exists, then the passwordcredential.[[collectfromcredentialstore]] is called. this method is restricted to top-level contexts. calls to it within an <iframe> element will resolve without effect. ...
...credentialrequestoptions that contains options for the request. the options include criteria that the credentials are required or allowed to have, and options for interacting with the user. it can contain the following properties: password: a boolean indicating that returned credential instances should include user (as opposed to federated) credentials. federated: a federatedcredentialrequestoptions object containing requirements for returned federated credentials. the available options are: providers: an array of domstring instances of identity providers to search for. protocols an array of domstring instances of federation protocols to search for. publickey: an publickeycredentialrequestoptions object containing requirements for returned webauthn credentials. m...

Document - Web APIs
andlers.onabort is an eventhandler representing the code to be called when the abort event is raised. globaleventhandlers.onanimationcancel an eventhandler called when an animationcancel event is sent, indicating that a running css animation has been canceled. globaleventhandlers.onanimationend an eventhandler called when an animationend event is sent, indicating that a css animation has stopped playing. globaleventhandlers.onanimationiteration an eventhandler called when an animationiteration event has been sent, indicating that a css animation has begun playing a new iteration of the animation sequence. globaleventhandlers.onanimationstart an eventhandler called when an animationstart event is sent, indicating that a css animation has started playing. globaleventhandlers.on...
.... globaleventhandlers.onloadeddata is an eventhandler representing the code to be called when the loadeddata event is raised. globaleventhandlers.onloadedmetadata is an eventhandler representing the code to be called when the loadedmetadata event is raised. globaleventhandlers.onloadend is an eventhandler representing the code to be called when the loadend event is raised (when progress has stopped on the loading of a resource.) globaleventhandlers.onloadstart is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) globaleventhandlers.onlostpointercapture is an eventhandler representing the code to be called when the lostpointercapture event type is raised. globaleventhandlers.onmousedown is an...

Element.setPointerCapture() - Web APIs
. this lets you slide the element horizontally, even when you pointer moves outside of its boundaries. ...
... recommendation non-stable version. ...

Element - Web APIs
. element.shadowrootread only returns the open shadow root that is hosted by the element, or null if no open shadow root is present. element.openorclosedshadowroot read only returns the shadow root that is hosted by the element, regardless if its open or closed. available only to webextensions. element.slot returns the name of the shadow dom slot the element is inserted in. element.tabstop is a boolean indicating if the element can receive input focus via the tab key. element.tagname read only returns a string with the name of the tag for the given element. element.undomanager read only returns the undomanager associated with the element. element.undoscope is a boolean indicating if the element is an undo scope host, or not. note: dom level 3 defined namespaceuri,...
...eturns a csspseudoelement representing the child pseudo-element matched by the specified pseudo-element selector. element.queryselector() returns the first node which matches the specified selector string relative to the element. element.queryselectorall() returns a nodelist of nodes which match the specified selector string relative to the element. element.releasepointercapture() releases (stops) pointer capture that was previously set for a specific pointer event. childnode.remove() removes the element from the children list of its parent. element.removeattribute() removes the named attribute from the current node. element.removeattributens() removes the attribute with the specified name and namespace, from the current node. eventtarget.removeeventlistener() removes an event ...

Event.defaultPrevented - Web APIs
ndicates that the default user agent action was prevented, and false indicates that it was not. example this example logs attempts to visit links from two <a> elements. javascript is used to prevent the second link from working. ...
... living standard ...

GlobalEventHandlers.onanimationcancel - Web APIs
this can happen, for example, when the animation-name is changed such that the animation is removed, or when the animating node is hidden—either directly or because any of its containing nodes are hidden—using css. ...
...se from the top-left corner of the content box to the bottom-right corner. @keyframes slidebox { from { left:0; top:0; } to { left:calc(100% - var(--boxwidth)); top:calc(100% - var(--boxwidth)) } } since the animation is described as taking place an infinite number of times, alternating direction each time, the box will glide back and forth between the two corners until stopped or the page is closed. javascript before we get to the animation code, we define a function which logs information to a box on the user's screen. we'll use this to show information about the events we receive. note the use of animationevent.animationname and animationevent.elapsedtime to get information about the event which occurred. function log(msg, event) { let logbox = document.getel...

GlobalEventHandlers - Web APIs
andlers.onabort is an eventhandler representing the code to be called when the abort event is raised. globaleventhandlers.onanimationcancel an eventhandler called when an animationcancel event is sent, indicating that a running css animation has been canceled. globaleventhandlers.onanimationend an eventhandler called when an animationend event is sent, indicating that a css animation has stopped playing. globaleventhandlers.onanimationiteration an eventhandler called when an animationiteration event has been sent, indicating that a css animation has begun playing a new iteration of the animation sequence. globaleventhandlers.onanimationstart an eventhandler called when an animationstart event is sent, indicating that a css animation has started playing. globaleventhandlers.on...
.... globaleventhandlers.onloadeddata is an eventhandler representing the code to be called when the loadeddata event is raised. globaleventhandlers.onloadedmetadata is an eventhandler representing the code to be called when the loadedmetadata event is raised. globaleventhandlers.onloadend is an eventhandler representing the code to be called when the loadend event is raised (when progress has stopped on the loading of a resource.) globaleventhandlers.onloadstart is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) globaleventhandlers.onlostpointercapture is an eventhandler representing the code to be called when the lostpointercapture event type is raised. globaleventhandlers.onmousedown is an...

MSSiteModeEvent - Web APIs
dom information inheritance hierarchy event mssitemodeevent methods method description initevent initializes a new generic event that the createevent method created. *note that as of microsoft edge, the createevent()/initevent() constructor pattern for synthetic events is deprecated. preventdefault cancels the default action of an event. stopimmediatepropagation prevents any further propagation of an event. stoppropagation prevents propagation of an event beyond the current target. properties property description actionurl gets the url of a jump list item that is removed. *this property is not supported for windows store apps using javascript. bubbles gets a value that ind...
...ndicates whether an event propagates up from the event target. buttonid gets the thumbnail toolbar button id that is clicked. *this property is not supported for windows store apps using javascript. cancelable gets a value that indicates whether you can cancel an event's default action. cancelbubble gets or sets a value that indicates whether an event should be stopped from propagating up from the current target. currenttarget gets the event target that is currently being processed. defaultprevented gets a value that indicates whether the default action should be canceled. eventphase gets the event phase that is being evaluated. istrusted gets a value that indicates whether a trusted event source created an eve...

MediaRecorder.onerror - Web APIs
order.onerror = errorhandlerfunction; value a function to be called whenever an error occurs during the recorder's lifetime. in addition to other general errors that might occur, the following errors are specifically possible when using the mediastream recording api; to determine which occurred, check the value of mediarecordererrorevent.error.name. invalidstateerror an attempt was made to stop or pause or an inactive recorder, start or resume an active recorder, or otherwise manipulate the mediarecorder while in the wrong state. this exception can also occur when a request is made on a source that has been deleted or removed. securityerror the mediastream is configured to disallow recording. this may be the case, for example, with sources obtained using getusermedia() when the user d...
...ted due to the peeridentity constraint on the source stream. notsupportederror an attempt was made to instantiate a mediarecorder using a mime type that isn't supported on the user's device; one or more of the requested container, codecs, or profiles as well as other information may be invalid. unknownerror an non-security related error occurred that cannot otherwise be categorized. recording stops, the mediarecorder's state becomes inactive, one last dataavailable event is sent to the mediarecorder with the remaining received data, and finally a stop event is sent. these errors may occur either directly because of a call to a mediarecorder method, or indirectly due to a problem arising during the recording process. example this example creates a new mediarecorder instance and starts r...

MediaSession.setActionHandler() - Web APIs
syntax navigator.mediasession.setactionhandler(type, callback) parameters type a domstring representing an action type to listen for. it will be one of play, pause, seekbackward, seekforward, seekto, skipad,previoustrack, or nexttrack. ...
...rom the current position. seekforward seeks forward from the current position through the media. seekto moves the playback position to the specified time within the media. skipad skips past the currently playing advertisement or commercial. this action may or may not be available, depending on the platform and user agent, or may be disabled due to subscription level or other circumstances. stop halts playback entirely. examples adding action handlers this example implements seek forward and backward actions for an audio player by setting up the seekforward and seekbackward action handlers. let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon. audio.currenttime = math.

MediaStream.getAudioTracks() - Web APIs
early versions of this api included a special audiostreamtrack interface which was used as the type for each entry in the list of audio streams; however, this has since been merged into the main mediastreamtrack interface. ...
...iastreamtrack interface. example this example gets a webcam's audio and video in a stream using getusermedia(), attaches the stream to a <video> element, then sets a timer that, upon expiring, will stop the first audio track found on the stream. navigator.mediadevices.getusermedia({audio: true, video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; // stop the audio stream after 5 seconds settimeout(() => { const tracks = mediastream.getaudiotracks() tracks[0].stop() }, 5000) }) specifications specification status comment media capture and streamsthe definition of 'getaudiotracks()' in that specification. candidate recommendation initial definition. ...

MediaStreamTrack: ended event - Web APIs
the ended event of the mediastreamtrack interface is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available. bubbles no cancelable no interface event event handler property mediastreamtrack.onended usage notes ended events fire when the media stream track's source permanently stops sending data on the stream. there are various ways this can happen, including: there is no more data left to send. the user revoked the permissions needed for the data to be sent. the hardware generating the source data has been removed or ejected. a remote peer has permanently stopped sending data; pausing media does not generate an ended event. examples this example sets up an e...
...removed or ejected. a remote peer has permanently stopped sending data; pausing media does not generate an ended event. examples this example sets up an event handler for the ended event, which changes an on-screen icon to indicate that the track is no longer active. track.addeventlistener('ended', () => { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; }) you can also set up the event handler using the mediastreamtrack.onended property: track.onended = function() { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'ended' in that specification. candidat...

MediaTrackConstraints - Web APIs
uous". focusmode a string specifying one of "none", "manual", "single-shot", or "continuous". pointsofinterest the pixel coordinates on the sensor of one or more points of interest. this is either an object in the form { x:value, y:value } or an array of such objects, where value is a double-precision integer. exposurecompensation a constraindouble (a double-precision integer) specifying f-stop adjustment by up to ±3. colortemperature a constraindouble (a double-precision integer) specifying a desired color temperature in degrees kelvin. iso a constraindouble (a double-precision integer) specifying a desired iso setting. brightness a constraindouble (a double-precision integer) specifying a desired brightness setting. contrast a constraindouble (a double-precision integer) spe...
...ay be a single one of the following strings, or an array of them to allow the browser flexibility in deciding what to do about the cursor. always the mouse is always visible in the video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content. motion the mouse cursor is always included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. displaysurface a constraindomstring which specifies the types of display surface that may be selected by the user. this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the windows of the application chosen by the user r...

MediaTrackSettings - Web APIs
dicating the current value of the echocancellation property, specifying true if echo cancellation is enabled, otherwise false. latency a double-precision floating point value indicating the current value of the latency property, specifying the audio latency, in seconds. latency is the amount of time which elapses between the start of processing the audio and the data being available to the next stop in the audio utilization process. this value is a target value; actual latency may vary to some extent for various reasons. noisesuppression a boolean which indicates the current value of the noisesupression property, which is true if noise suppression is enabled and is false otherwise. samplerate a long integer value indicating the current value of the samplerate property, specifying the ...
... which indicates whether or not the mouse cursor is being included in the generated stream and under what conditions. possible values are: always the mouse is always visible in the video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content. motion the mouse cursor is always included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. displaysurface a domstring which specifies the type of source the track contains; one of: application the stream contains all of the windows of the application chosen by the user rendered into the one video track. browser the stream contains the contents of a single browser tab selected by the user. mo...

Capabilities, constraints, and settings - Web APIs
constraints:</h3> <textarea id="audioconstrainteditor" cols=32 rows=8></textarea> </div> <div class="rightside"> <h3>actual audio settings:</h3> <textarea id="audiosettingstext" cols=32 rows=8 disabled></textarea> </div> </div> <div class="button" id="applybutton"> apply constraints </div> </div> <video id="video" autoplay></video> <div class="button" id="stopbutton"> stop video </div> <div id="log"> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 150px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } .wrapper { ...
...(videoconstraints).then(function() { videosettingstext.value = json.stringify(videotrack.getsettings(), null, 2); }).catch(handleerror); } if (audiotrack) { audiotrack.applyconstraints(audioconstraints).then(function() { audiosettingstext.value = json.stringify(audiotrack.getsettings(), null, 2); }).catch(handleerror); } } }, false); handling the stop button then we set up the handler for the stop button. document.getelementbyid("stopbutton").addeventlistener("click", function() { if (videotrack) { videotrack.stop(); } if (audiotrack) { audiotrack.stop(); } videotrack = audiotrack = null; videoelement.srcobject = null; }); this simply stops the active tracks, sets the videotrack and audiotrack variables to null so we k...

MessagePort.close() - Web APIs
the close() method of the messageport interface disconnects the port, so it is no longer active. this stops the flow of messages to that port. note: this feature is available in web workers. syntax port.close() returns void. parameters none. example in the following code block, you can see a handlemessage handler function, run when a message is sent back to this document using eventtarget.addeventlistener. ...
...ort.close() returns void. parameters none. example in the following code block, you can see a handlemessage handler function, run when a message is sent back to this document using eventtarget.addeventlistener. channel.port1.addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textinput.value = ''; } channel.port1.start(); you could stop messages being sent at any time using channel.port1.close(); specifications specification status comment html living standardthe definition of 'close()' in that specification. living standard ...

MutationObserver.takeRecords() - Web APIs
the mutationobserver method takerecords() returns a list of all matching dom changes that have been detected but not yet processed by the observer's callback function, leaving the mutation queue empty. the most common use case for this is to immediately fetch all pending mutation records immediately prior to disconnecting the observer, so that any pending mutations can be processed when stopping down the observer. syntax const mutationrecords = mutationobserver.takerecords() parameters none. return value an array mutationrecord objects, each describing one change applied to the observed portion of the document's dom tree. note: the queue of mutations which have occurred, but not been delivered to the observer's callback is left empty after calling takerecords(). example in this ex...
... in this example, we demonstrate how to handle any undelivered mutationrecords by calling takerecords() just before disconnecting the observer. const targetnode = document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true } const observer = new mutationobserver(callback); observer.observe(targetnode, observeroptions); /* ...later, when it's time to stop observing... */ /* handle any still-pending mutations */ let mutations = observer.takerecords(); observer.disconnect(); if (mutations) { callback(mutations); } the code in lines 12–17 fetches any unprocessed mutation records, then invokes the callback with the records so that they can be processed. this is done immediately prior to calling disconnect() to stop observing the dom. specif...

MutationObserver - Web APIs
the mutationobserver interface provides the ability to watch for changes being made to the dom tree. it is designed as a replacement for the older mutation events feature, which was part of the dom3 events specification. constructor mutationobserver() creates and returns a new mutationobserver which will invoke a specified callback function when dom changes occur. methods disconnect() stops the mutationobserver instance from receiving further notifications until and unless observe() is called again. observe() configures the mutationobserver to begin receiving notifications through its callback function when dom changes matching the given options occur. takerecords() removes all pending notifications from the mutationobserver's notification queue and returns them in a new array ...
... living standard ...

OscillatorNode.onended - Web APIs
the onended property of the oscillatornode interface is used to set the event handler for the ended event, which fires when the tone has stopped playing. syntax var oscillator = audioctx.createoscillator(); oscillator.onended = function() { ... }; example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). ...
...lied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.value = 440; // value in hertz oscillator.start(); // start the tone playing oscillator.stop(5); // the tone will stop again in 5 seconds. oscillator.onended = function() { console.log('your tone has now stopped playing!'); } properties none. specifications specification status comment web audio apithe definition of 'onended' in that specification. working draft ...

OscillatorNode - Web APIs
shape of waveform to play; this can be one of a number of standard values, or custom to use a periodicwave to describe a custom waveform. different waves will produce different tones. standard values are "sine", "square", "sawtooth", "triangle" and "custom". the default is "sine". event handlers oscillatornode.onended sets the event handler for the ended event, which fires when the tone has stopped playing. methods inherits methods from its parent, audioscheduledsourcenode, and adds the following: oscillatornode.setperiodicwave() sets a periodicwave which describes a periodic waveform to be used instead of one of the standard waveforms; calling this sets the type to custom. this replaces the now-obsolete oscillatornode.setwavetable() method. oscillatornode.start() specifies the ...
...nt, audioscheduledsourcenode, and adds the following: oscillatornode.setperiodicwave() sets a periodicwave which describes a periodic waveform to be used instead of one of the standard waveforms; calling this sets the type to custom. this replaces the now-obsolete oscillatornode.setwavetable() method. oscillatornode.start() specifies the exact time to start playing the tone. oscillatornode.stop() specifies the time to stop playing the tone. examples the following example shows basic usage of an audiocontext to create an oscillator node and to start playing a tone on it. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscilla...

ParentNode.prepend() - Web APIs
each node can be specified as either a node object or as a string; strings are inserted as new text nodes. return value undefined. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...
...each node can be specified as either a node object or as a string; strings are inserted as new text nodes. return value undefined. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...

Pointer Lock API - Web APIs
tton clicking. the buttons are then freed up for other actions. other examples include apps for viewing maps or satellite imagery. pointer lock lets you access mouse events even when the cursor goes past the boundary of the browser or screen. for example, your users can continue to rotate or manipulate a 3d model by moving the mouse without end. without pointer lock, the rotation or manipulation stops the moment the pointer reaches the edge of the browser or screen. game players can now click buttons and swipe the mouse cursor back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse focus away from the game. basic concepts pointer lock is related to mouse capture. mouse capture provides continued delivery of events ...
... screen. game players can now click buttons and swipe the mouse cursor back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse focus away from the game. basic concepts pointer lock is related to mouse capture. mouse capture provides continued delivery of events to a target element while a mouse is being dragged, but it stops when the mouse button is released. pointer lock is different from mouse capture in the following ways: it is persistent: pointer lock does not release the mouse until an explicit api call is made or the user uses a specific release gesture. it is not limited by browser or screen boundaries. it continues to send events regardless of mouse button state. it hides the cursor. method/properti...

PublicKeyCredential.getClientExtensionResults() - Web APIs
ntifiers and their results after having being processed by the client. during the creation or fetching of a publickeycredential (respectively via navigator.credentials.create() and navigator.credentials.get()), it is possible to have "custom" processing by the client for different extensions which are respectively given by publickeycredentialcreationoptions.extensions and publickeycredentialrequestoptions.extensions. note: extensions are optional and different browsers may recognize different extensions. all extensions are optional for the client to process them: if a browser does not know of a given extension, that will not cause any failure. note: this method may only be used in top-level contexts and will not be available in an <iframe> for example. syntax maparraybuffer = publicke...
... syntax maparraybuffer = publickeycredential.getclientextensionresults() parameters none. return value an arraybuffer containing the result of the processing of the different extensions by the client. this object contains a map between the extensions' identifiers and their results from the processing. warning! as of march 2019, only appid (used during creation with publickeycredentialrequestoptions.extensions) is supported by chrome and edge. firefox does not seem to support any extension. examples var publickey = { // here are the extensions (as "inputs") extensions: { "loc": true, // this extension has been defined to include location information in attestation "uvi": true // user verification index: how the user was verified }, challenge: new uint8array(16) /* fr...

PublicKeyCredentialCreationOptions.extensions - Web APIs
nt extensions and their input values. extensions are values requesting additional processing by the client and by the authenticator. for instance, extensions may be used for: backward compatibility with the legacy fido js api, knowing the user verification process, etc. ...
...firefox does not seem to support any extension. also chrome doesn't plan to support any other extension in future extension identifier type description authnsel array of buffersource authenticator selection. ...

RTCPeerConnection.createOffer() - Web APIs
t otherwise. to emulate this behavior in modern implementations, the presence of this member with a value false, will set the direction of all existing audio transceivers to exclude reception (i.e. set to either "sendonly" or "inactive"). in modern implementations, the presence of this member with a value true, will ensure there is at least one transceiver set to receive audio that has not been stopped, and if there isn't one, one will be created. note: you shouldn't use this legacy property. instead, use rtcrtptransceiver to control whether or not to accept incoming audio. offertoreceivevideo optional (legacy) a legacy boolean option which used to control whether or not to offer to the remote peer the opportunity to try to send video. if this value is false, the remote peer will not ...
...t otherwise. to emulate this behavior in modern implementations, the presence of this member with a value false, will set the direction of all existing video transceivers to exclude reception (i.e. set to either "sendonly" or "inactive"). in modern implementations, the presence of this member with a value true, will ensure there is at least one transceiver set to receive video that has not been stopped, and if there isn't one, one will be created. note: you shouldn't use this legacy property. instead, use rtcrtptransceiver to control whether or not to accept incoming video. voiceactivitydetection optional some codecs and hardware are able to detect when audio begins and ends by watching for "silence" (or relatively low sound levels) to occur. this reduces network bandwidth used for au...

RTCRtpSender.replaceTrack() - Web APIs
the replace track request will fail. return value a promise which is fulfilled once the track has been successfully replaced. the promise is rejected if the track cannot be replaced for any reason; this is commonly because the change would require renegotiation of the codec, which is not allowed (see things that require negotiation). if newtrack was omitted or was null, replacetrack() simply stops the sender. no negotiation is required in this case. when the promise is fulfilled, the fulfillment handler receives a value of undefined. exceptions if the returned promise is rejected, one of the following exceptions is provided to the rejection handler: invalidmodificationerror replacing the rtcrtpsender's current track with the new one would require negotiation. invalidstateerror th...
... this case. when the promise is fulfilled, the fulfillment handler receives a value of undefined. exceptions if the returned promise is rejected, one of the following exceptions is provided to the rejection handler: invalidmodificationerror replacing the rtcrtpsender's current track with the new one would require negotiation. invalidstateerror the track on which this method was called is stopped rather than running. typeerror the new track's kind doesn't match the original track. usage notes things that trigger negotiation not all track replacements require renegotiation. in fact, even changes that seem huge can be done without requiring negotation. here are the changes that can trigger negotiaton: the new track has a resolution which is outside the bounds of the bounds of th...

ReadableStream.ReadableStream() - Web APIs
lestream object. exceptions rangeerror the supplied type value is neither "bytes" nor undefined. examples in the following simple example, a custom readablestream is created using a constructor (see our simple random stream example for the full code). the start() function generates a random string of text every second and enqueues it into the stream. a cancel() fuction is also provided to stop the generation if readablestream.cancel() is called for any reason. when a button is pressed, the generation is stopped, the stream is closed using readablestreamdefaultcontroller.close(), and another function is run, which reads the data back out of the stream. const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); ...
... living standard initial definition. ...

ReadableStreamDefaultController.close() - Web APIs
ue undefined. exceptions typeerror the source object is not a readablestreamdefaultcontroller. examples in the following simple example, a custom readablestream is created using a constructor (see our simple random stream example for the full code). the start() function generates a random string of text every second and enqueues it into the stream. a cancel() function is also provided to stop the generation if readablestream.cancel() is called for any reason. when a button is pressed, the generation is stopped, the stream is closed using readablestreamdefaultcontroller.close(), and another function is run, which reads the data back out of the stream. const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); ...
... living standard initial definition. ...

ReadableStreamDefaultController.enqueue() - Web APIs
rror the source object is not a readablestreamdefaultcontroller. examples in the following simple example, a custom readablestream is created using a constructor (see our simple random stream example for the full code). the start() function generates a random string of text every second and enqueues it into the stream — see controller.enqueue(string). a cancel() function is also provided to stop the generation if readablestream.cancel() is called for any reason. when a button is pressed, the generation is stopped, the stream is closed using readablestreamdefaultcontroller.close(), and another function is run, which reads the data back out of the stream. const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); ...
... living standard initial definition. ...

ReadableStreamDefaultController - Web APIs
streamdefaultcontroller.error() causes any future interactions with the associated stream to error. examples in the following simple example, a custom readablestream is created using a constructor (see our simple random stream example for the full code). the start() function generates a random string of text every second and enqueues it into the stream. a cancel() function is also provided to stop the generation if readablestream.cancel() is called for any reason. note that a readablestreamdefaultcontroller object is provided as the parameter of the start() and pull() functions. when a button is pressed, the generation is stopped, the stream is closed using readablestreamdefaultcontroller.close(), and another function is run, which reads the data back out of the stream. const stream = n...
... living standard initial definition ...

SourceBuffer.abort() - Web APIs
is sourcebuffer has been removed from the mediasource. example the spec description of abort() is somewhat confusing — consider for example step 1 of reset parser state. the mse api is fully asynchronous, but this step seems to suggest a synchronous (blocking) operation, which doesn't make sense. saying that, current implementations can be useful in certain situations, when you want to stop the current append (or whatever) operation occuring on a sourcebuffer, and then immediately start performing operations on it again. for example, consider this code: sourcebuffer.addeventlistener('updateend', function (_) { ... }); sourcebuffer.appendbuffer(buf); let's say that after the call to appendbuffer but before the updateend event fires (i.e. a buffer is being appended but the operat...
...de: sourcebuffer.addeventlistener('updateend', function (_) { ... }); sourcebuffer.appendbuffer(buf); let's say that after the call to appendbuffer but before the updateend event fires (i.e. a buffer is being appended but the operation has not yet completed) a user "scrubs" the video seeking to a new point in time. in this case you would want to manually call abort() on the source buffer to stop the decoding of the current buffer, then fetch and append the newly requested segment that relates to the current new position of the video. you can see something similar in action in nick desaulnier's bufferwhenneeded demo — in line 48, an event listener is added to the playing video so a function called seek() is run when the seeking event fires. in lines 92-101, the seek() function is defin...

SpeechRecognition: soundend event - Web APIs
the soundend event of the web speech api is fired when any sound — recognisable speech or not — has stopped being detected. ...
...t — has stopped being detected. bubbles no cancelable no interface event event handler property onsoundend examples you can use the soundend event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('soundend', function(event) { console.log('sound has stopped being received'); }); or use the onsoundend event handler property: recognition.onsoundend = function(event) { console.log('sound has stopped being received'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification. draft ...

SpeechRecognition: speechend event - Web APIs
the speechend event of the web speech api is fired when speech recognized by the speech recognition service has stopped being detected. ...
...service has stopped being detected. bubbles no cancelable no interface event event handler property onspeechend examples you can use the speechend event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('speechend', function() { console.log('speech has stopped being detected'); }); or use the onspeechend event handler property: recognition.onspeechend = function() { console.log('speech has stopped being detected'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification. draft ...

SpeechRecognition.start() - Web APIs
draft ...
... draft ...

SpeechSynthesis.cancel() - Web APIs
the cancel() method of the speechsynthesis interface removes all utterances from the utterance queue. if an utterance is currently being spoken, speaking will stop immediately. syntax speechsynthesisinstance.cancel(); returns void. parameters none. ...
...(); returns void. parameters none. examples var synth = window.speechsynthesis; var utterance1 = new speechsynthesisutterance('how about we say this now? this is quite a long sentence to say.'); var utterance2 = new speechsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); synth.cancel(); // utterance1 stops being spoken immediately, and both are removed from the queue specifications specification status comment web speech apithe definition of 'cancel()' in that specification. draft ...

Introduction to the Real-time Transport Protocol (RTP) - Web APIs
cause the streams for an rtcpeerconnection are implemented using rtp and the interfaces above, you can take advantage of the access this gives you to the internals of streams to make adjustments. among the simplest things you can do is to implement a "hold" feature, wherein a participant in a call can click a button and turn off their microphone, begin sending music to the other peer instead, and stop accepting incoming audio. note: this example makes use of modern javascript features including async functions and the await expression. this enormously simplifies and makes far more readable the code dealing with the promises returned by webrtc methods. in the examples below, we'll refer to the peer which is turning "hold" mode on and off as the local peer and the user being placed on hold a...
...er); await audiotransceiver.sender.replacetrack(null); audiotransceiver.direction = "recvonly"; await sendanswer(); } catch(err) { /* handle the error */ } } the steps taken here are: set the remote description to the specified offer by calling rtcpeerconnection.setremotedescription(). replace the audio transceiver's rtcrtpsender's track with null, meaning no track. this stops sending audio on the transceiver. set the audio transceiver's direction property to "recvonly", instructing the transceiver to only accept audio and not to send any. the sdp answer is generated and sent using a method called sendanswer(), which generates the answer using createanswer() then sends the resulting sdp to the other peer over the signaling service. deactivating hold mode local pe...

Using DTMF with WebRTC - Web APIs
delivered to callerpc. the event listener for these is implemented as the handletonechangeevent() function. function handletonechangeevent(event) { if (event.tone !== "") { log("tone played: " + event.tone); } else { log("all tones have played. disconnecting."); callerpc.getlocalstreams().foreach(function(stream) { stream.gettracks().foreach(function(track) { track.stop(); }); }); receiverpc.getlocalstreams().foreach(function(stream) { stream.gettracks().foreach(function(track) { track.stop(); }); }); audio.pause(); audio.srcobject = null; receiverpc.close(); callerpc.close(); } } the tonechange event is used both to indicate when an individual tone has played and when all tones have finished playing. th...
...ing, tone is an empty string; when that's the case, rtcdtmfsender.tonebuffer is empty. in this example, we log to the screen which tone just finished playing. in a more advanced application, you might update the user interface, for example, to indicate which note is currently playing. on the other hand, if the tone buffer is empty, our example is designed to disconnect the call. this is done by stopping each stream on both the caller and the receiver by iterating over each rtcpeerconnection's track list (as returned by its gettracks() method) and calling each track's stop() method. once both the caller's and the receiver's media tracks are all stopped, we pause the <audio> element and set its srcobject to null. this detaches the audio stream from the <audio> element. then, finally, each rt...

Movement, orientation, and motion: A WebXR example - Web APIs
the webxr session is toggled on and off by the handler for click events on the button, whose label is appropriately set to either "enter webxr" or "exit webxr". this is done by the onxrbuttonclick() event handler. async function onxrbuttonclick(event) { if (!xrsession) { navigator.xr.requestsession(session_type) .then(sessionstarted); } e...
...f xrsession to see if we already have a xrsession object representing an ongoing webxr session. if we don't, the click represents a request to enable webxr mode, so we check to see if the desired webxr session type is supported. if it is, we call sessionstarted() to begin running the scene in the webxr session. if we already have an ongoing session, on the other hand, we call its end() method to stop the session. the last thing we do in this code is to check to see if xrsession is still non-null. if it is, we call sessionended(), the handler for the end event. this code should not be necessary, but there appears to be an issue in which at least some browsers are not correctly firing the end event. by running the event handler directly, we complete the close-out process manually in this situa...

Example and tutorial: Simple synth keyboard - Web APIs
data-pressed attribute; if there isn't one (which indicates that the note isn't already playing), we call playtone() to start playing the note, passing in the value of the element's data-frequency attribute. the returned oscillator is stored into osclist for future reference, and data-pressed is set to yes to indicate that the note is playing so we don't start it again next time this is called. ...
...ote is playing so we don't start it again next time this is called. stopping a tone the notereleased() function is the event handler called when the user releases the mouse button or moves the mouse out of the key that's currently playing. function notereleased(event) { let dataset = event.target.dataset; if (dataset && dataset["pressed"]) { osclist[dataset["octave"][dataset["note"]]].stop(); osclist[dataset["octave"][dataset["note"]]] = null; delete dataset["pressed"]; } } notereleased() uses the data-octave and data-note custom attributes to look up the key's oscillator, then calls the oscillator's inherited stop() method to stop playing the note. finally, the osclist entry for the note is cleared and the data-pressed attribute is removed from the key element (as iden...

Web Authentication API - Web APIs
he previously generated key pair for the service rather than creating an attestation with the key pair that was burned into the authenticator during manufacturing. again, the description of authentication below is a broad overview rather than getting into all the options and features of the web authentication api. the specific options for authenticating can be found in the publickeycredentialrequestoptions dictionary, and the resulting data can be found in the publickeycredential interface (where publickeycredential.response is the authenticatorassertionresponse interface) . figure 2 - similar to figure 1, a diagram showing the sequence of actions for a web authentication and the essential data associated with each action. application requests authentication - the application makes the i...
...st for the new key pair that has been generated. authenticatorassertionresponse returned by credentialscontainer.get() when a publickeycredential is passed, and provides proof to a service that it has a key pair and that the authentication request is valid and approved. options publickeycredentialcreationoptions the options passed to credentialscontainer.create(). publickeycredentialrequestoptions the options passed to credentialscontainer.get(). examples for security reasons, web authentication calls (create() and get()) are cancelled if the browser window loses focus while the call is pending. // sample arguments for registration var createcredentialdefaultargs = { publickey: { // relying party (a.k.a. - service): rp: { name: "acme" },...

XRSession: selectend event - Web APIs
e object the user has begun to drag. upon receiving a select event, the mydropobject() function is called with the target object and the current target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the selectend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform. xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetra...
...raymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "selectstart": targetobj = mybegintracking(targetraypose.matrix); break; case "select": mydropobject(targetobj, targetraypose.matrix); break; case "selectend": mystoptracking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler for selectend events by setting the xrsession object's onselectend event handler property to a function that handles the event: xrsession.onselectstart = onselectionevent; xrsession.onselect = onselectionevent; xrsession.onselectend = onselectionevent; specifications specification ...

XRSession: selectstart event - Web APIs
e object the user has begun to drag. upon receiving a select event, the mydropobject() function is called with the target object and the current target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the selectend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform. xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetra...
...raymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "selectstart": targetobj = mybegintracking(targetraypose.matrix); break; case "select": mydropobject(targetobj, targetraypose.matrix); break; case "selectend": mystoptracking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler for selectend events by setting the xrsession object's onselectend event handler property to a function that handles the event: xrsession.onselectstart = onselectionevent; xrsession.onselect = onselectionevent; xrsession.onselectend = onselectionevent; specifications specification ...

XRSession: squeezeend event - Web APIs
object the user has begun to drag. upon receiving a squeeze event, the mydropobject() function is called with the target object and the current target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform. xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode...
...mode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "squeezestart": targetobj = mybegintracking(targetraypose.matrix); break; case "squeeze": mydropobject(targetobj, targetraypose.matrix); break; case "squeezeend": mystoptracking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler these events by setting the xrsession object's onsqueezeend event handler property to a function that handles the event: xrsession.onsqueezestart = onsqueezeevent; xrsession.onsqueeze = onsqueezeevent; xrsession.onsqueezeend = onsqueezeevent; specifications specification status ...

XRSession: squeezestart event - Web APIs
object the user has begun to drag. upon receiving a squeeze event, the mydropobject() function is called with the target object and the current target ray pose transform as inputs. this places the object into its new position in the world and triggers any effects that may arise from doing so (like scheduling an animation of a splash if dropped in water, etc). the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform. xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode...
...mode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "squeezestart": targetobj = mybegintracking(targetraypose.matrix); break; case "squeeze": mydropobject(targetobj, targetraypose.matrix); break; case "squeezeend": mystoptracking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler these events by setting the xrsession object's onsqueezeend event handler property to a function that handles the event: xrsession.onsqueezestart = onsqueezeevent; xrsession.onsqueeze = onsqueezeevent; xrsession.onsqueezeend = onsqueezeevent; specifications specification status ...

Web APIs
er performanceobserverentrylist performancepainttiming performanceresourcetiming performanceservertiming performancetiming periodicwave permissionstatus permissions photocapabilities plugin pluginarray point pointerevent popstateevent positionoptions processinginstruction progressevent promiserejectionevent publickeycredential publickeycredentialcreationoptions publickeycredentialrequestoptions pushevent pushmanager pushmessagedata pushregistrationmanager pushsubscription r rtcansweroptions rtccertificate rtcconfiguration rtcdtmfsender rtcdtmftonechangeevent rtcdatachannel rtcdatachannelevent rtcdtlstransport rtcerror rtcerrorevent rtcicecandidate rtcicecandidateinit rtcicecandidatepair rtcicecandidatepairstats rtcicecandidatestats rtcicecandidatetype rtcicecompone...
...ment svglineargradientelement svgmpathelement svgmaskelement svgmatrix svgmeshelement svgmetadataelement svgmissingglyphelement svgnumber svgnumberlist svgpathelement svgpatternelement svgpoint svgpolygonelement svgpolylineelement svgpreserveaspectratio svgradialgradientelement svgrect svgrectelement svgrenderingintent svgsvgelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstringlist svgstylable svgstyleelement svgswitchelement svgsymbolelement svgtrefelement svgtspanelement svgtests svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtransform svgtransformlist svgtransformable svgurireference svgunittypes svguseelement svgvkernelement svgviewelement svgzoomandpan screen screenorientation scriptprocesso...

Operable - Accessibility
hotel or flight booking often has a time limit), the user should be given controls to allow them to adjust, extend or turn off the time limit. exceptions to this are activities with time limits longer than 20 hours, real time events (e.g. live multiplayer games), and any other activity that requires a time limit and would be invalidated if it were turned off. 2.2.2 pausing, stopping, hiding (a) for moving/blinking content that starts automatically, lasts longer than 5 seconds, and is shown alongside other content, controls should be provided to pause, stop, or hide it. this does not apply to moving/blinking content that is essential to the experience. examples include scrolling text and videos. for auto-updating information that starts automatically and is s...
...this does not apply to auto-updating content that is essential to the experience. examples include carousels or rotating annoucements. ...

mix-blend-mode - CSS: Cascading Style Sheets
<div class="col"> <div class="note">blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <defs> <lineargradient id="red"> <stop offset="0" stop-color="hsl(0,100%,50%)" /> <stop offset="100%" stop-color="hsl(0,0%,100%)" /> </lineargradient> <lineargradient id="green"> <stop offset="0" stop-color="hsl(120,100%,50%)" /> <stop offset="100%" stop-color="hsl(120,0%,100%)" /> </lineargradient> <lineargradie...
...100%,50%)" /> <stop offset="100%" stop-color="hsl(0,0%,100%)" /> </lineargradient> <lineargradient id="green"> <stop offset="0" stop-color="hsl(120,100%,50%)" /> <stop offset="100%" stop-color="hsl(120,0%,100%)" /> </lineargradient> <lineargradient id="blue"> <stop offset="0" stop-color="hsl(240,100%,50%)" /> <stop offset="100%" stop-color="hsl(240,0%,100%)" /> </lineargradient> </defs> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ...

Link prefetching FAQ - HTTP
is technique is part of the scope of html 5, see the current working draft, section §5.11.3.13. link type "prefetch". how is browser idle time determined? in the current implementation (mozilla 1.2), idle time is determined using the nsiwebprogresslistener api. we attach a listener to the toplevel nsiwebprogress object ("@mozilla.org/docloaderservice;1"). from this, we receive document start & stop notifications, and we approximate idle time as the period between the last document stop and the next document start. the last document stop notification occurs roughly when the onload handler would fire for the toplevel document. this is when we kick off prefetch requests. if a subframe contains prefetching hints, prefetching will not begin until the top-most frame and all its "child" frames fin...
...he onload handler would fire for the toplevel document. this is when we kick off prefetch requests. if a subframe contains prefetching hints, prefetching will not begin until the top-most frame and all its "child" frames finish loading. what happens if i click on a link while something is being prefetched? when the user clicks on a link, or initiates any kind of page load, link prefetching will stop and any prefetch hints will be discarded. if a prefetched document is partially downloaded, then the partial document will still be stored in the cache provided the server sent an "accept-ranges: bytes" response header. this header is typically generated by webservers when serving up static content. when the user visits a prefetched document for real, the remaining portion of the document will be...

Loops and iteration - JavaScript
s to false. a do...while statement looks as follows: do statement while (condition); statement is always executed once before the condition is checked. (to execute multiple statements, use a block statement ({ ... }) to group those statements.) if condition is true, the statement executes again. at the end of every execution, the condition is checked. when the condition is false, execution stops, and control passes to the statement following do...while. example in the following example, the do loop iterates at least once and reiterates until i is no longer less than 5. let i = 0; do { i += 1; console.log(i); } while (i < 5); while statement a while statement executes its statements as long as a specified condition evaluates to true. a while statement looks as follows: while (c...
...owing example, the do loop iterates at least once and reiterates until i is no longer less than 5. let i = 0; do { i += 1; console.log(i); } while (i < 5); while statement a while statement executes its statements as long as a specified condition evaluates to true. a while statement looks as follows: while (condition) statement if the condition becomes false, statement within the loop stops executing and control passes to the statement following the loop. the condition test occurs before statement in the loop is executed. if the condition returns true, statement is executed and the condition is tested again. if the condition returns false, execution stops, and control is passed to the statement following while. to execute multiple statements, use a block statement ({ ... }) to gr...

Array.from() - JavaScript
nts array.from([1, 2, 3], x => x + x); // [2, 4, 6] // generate a sequence of numbers // since the array is initialized with `undefined` on each position, // the value of `v` below will be `undefined` array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4] sequence generator (range) // sequence generator function (commonly referred to as "range", e.g. ...
...; // [2, 4, 6] // generate a sequence of numbers // since the array is initialized with `undefined` on each position, // the value of `v` below will be `undefined` array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4] sequence generator (range) // sequence generator function (commonly referred to as "range", e.g. ...

WeakRef - JavaScript
cannot change the target of a weakref, it will always only ever be the original target object or undefined when that target has been reclaimed. a weakref might never return undefined from deref, even if nothing strongly holds the target, because the garbage collector may never decide to reclaim the object. ...
...; } start() { if (this.timer) { return; } this.count = 0; const tick = () => { // get the element from the weak reference, if it still exists const element = this.ref.deref(); if (element) { element.textcontent = ++this.count; } else { // the element doesn't exist anymore console.log("the element is gone."); this.stop(); this.ref = null; } }; tick(); this.timer = setinterval(tick, 1000); } stop() { if (this.timer) { clearinterval(this.timer); this.timer = 0; } } } const counter = new counter(document.getelementbyid("counter")); counter.start(); settimeout(() => { document.getelementbyid("counter").remove(); }, 5000); specifications specificat...

return - JavaScript
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 return [[expression]]; expression the expression whose value is to be returned. if omitted, undefined is returned instead. description when a return statement is used in a function body, the execution of the function is stopped. if specified, a given value is returned to the function caller. for example, the following function returns the square of its argument, x, where x is a number. function square(x) { return x * x; } var demo = square(3); // demo will equal 9 if the value is omitted, undefined is returned instead. the following return statements all break the function execution: return; return true; retu...
...pression. return a + b; is transformed by asi into: return; a + b; the console will warn "unreachable code after return statement". starting with firefox 40, a warning is shown in the console if unreachable code is found after a return statement. to avoid this problem (to prevent asi), you could use parentheses: return ( a + b ); examples interrupt a function a function immediately stops at the point where return is called. function counter() { for (var count = 1; ; count++) { // infinite loop console.log(count + 'a'); // until 5 if (count === 5) { return; } console.log(count + 'b'); // until 4 } console.log(count + 'c'); // never appears } counter(); // output: // 1a // 1b // 2a // 2b // 3a // 3b // 4a // 4b // 5a returning a functi...

The "codecs" parameter in common media types - Web media technologies
t.709). f a one-digit flag indicating whether the color should be allowed to use the full range of possible values (1), or should be constrained to those values considered legal for the specified color configuration (that is, the studio swing representation). the default is 0 (use the studio swing representation). all fields from m (monochrome flag) onward are optional; you may stop including fields at any point (but can't arbitrarily leave out fields). the default values are included in the table above. some example av1 codec strings: av01.2.15m.10.0.100.09.16.09.0 av1 professional profile, level 5.3, main tier, 10 bits per color component, 4:2:2 chroma subsampling using itu-r bt.2100 color primaries, transfer characteristics, and ycbcr color matrix. the studio swing re...
...inues to be indicated as either vorbis or opus. in this format, the codecs parameter's value begins with a four-character code identifying the codec being used in the container, which is then followed by a series of period (.) separated two-digit values. cccc.pp.ll.dd.cc[.cp[.tc[.mc[.ff]]]] the first five components are required; everything from cp (color primaries) onward is optional; you can stop including components at any point from then onward. each of these components is described in the following table. following the table are some examples. webm codecs parameter components component details cccc a four-character code indicating which indicates which of the possible codecs is being described. potential values are: four-character codes for...

x1 - SVG: Scalable Vector Graphics
the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applie...
...fluenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applied to --> <lineargradient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the shape it is applied to --> <lineargradient x1="80%" id="g1"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red"...

x2 - SVG: Scalable Vector Graphics
the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the shape it is appli...
...enced by the gradientunits attributs value <length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the shape it is applied to --> <lineargradient x2="100%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the shape it is applied to --> <lineargradient x2="20%" id="g1"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red"...

xlink:href - SVG: Scalable Vector Graphics
none animatable yes lineargradient for <lineargradient>, xlink:href defines the reference to a different <lineargradient> or <radialgradient> element within the current svg document fragment. any <lineargradient> attributes which are defined on the referenced element which are not defined on this element are inherited by this element. if this element has no defined gradient stops, and the referenced element does (possibly due to its own xlink:href attribute), then this element inherits the gradient stop from the referenced element. inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attribute or gradient stops due to its own xlink:href attribute, then the current element can inherit those attributes or gradient stops. val...
...ult value none animatable yes radialgradient for <radialgradient>, xlink:href defines the to a different <lineargradient> or <radialgradient> element within the current svg document fragment. any <radialgradient> attributes which are defined on the referenced element which are not defined on this element are inherited by this element. if this element has no defined gradient stops, and the referenced element does (possibly due to its own xlink:href attribute), then this element inherits the gradient stop from the referenced element. inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attribute or gradient stops due to its own xlink:href attribute, then the current element can inherit those attributes or gradient stops. val...

SVG Attribute reference - SVG: Scalable Vector Graphics
pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage t tabindex tablevalues target targetx targety text-anchor text-decoration text-rendering textlength to transform transform-origin type u ...
...eline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing, writing-mode filters attributes filter primitive attributes height, result, width, x, y transfer function attributes ...

SVG element reference - SVG: Scalable Vector Graphics
pointlight> <fespecularlighting> <fespotlight> <fetile> <feturbulence> <filter> <foreignobject> g <g> h <hatch> <hatchpath> i <image> l <line> <lineargradient> m <marker> <mask> <mesh> <meshgradient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> <polyline> r <radialgradient> <rect> s <script> <set> <solidcolor> <stop> <style> <svg> <switch> <symbol> t <text> <textpath> <title> <tspan> u <unknown> <use> v <view> svg elements by category animation elements <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <discard>, <mpath>, <set> basic shapes <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect> container elements <a>, <defs>, <g>, <marker>, <mask>, <missing-g...
..., <fedropshadow>, <feflood>,<fefunca>, <fefuncb>, <fefuncg>, <fefuncr>,<fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence> font elements <font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern> gradient elements <lineargradient>, <meshgradient>, <radialgradient>, <stop> graphics elements <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> graphics referencing elements <mesh>, <use> light source elements <fedistantlight>, <fepointlight>, <fespotlight> never-rendered elements <clippath>, <defs>, <hatch>, <lineargradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialgradient>, <script>, <st...

How to turn off form autocompletion - Web security
[…] </form> <form method="post" action="/form"> […] <div> <label for="cc">credit card:</label> <input type="text" id="cc" name="cc" autocomplete="off"> </div> </form> setting autocomplete="off" on fields has two effects: it tells the browser not to save data inputted by the user for later autocompletion on similar forms, though heuristics for complying vary by browser. it stops the browser from caching form data in the session history. when form data is cached in session history, the information filled in by the user is shown in the case where the user has submitted the form and clicked the back button to go back to the original form page. if a browser keeps on making suggestions even after setting autocomplete to off, then you have to change the name attribute of th...
...internet explorer (since version 11). preventing autofilling with autocomplete="new-password" if you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password". this is a hint, which browsers are not required to comply with. however modern browsers have stopped autofilling <input> elements with autocomplete="new-password" for this very reason. for example, firefox version 67 (see bug 1119063) stopped autofilling in this case; however, firefox 70 (see bug 1565407) can suggest securely-generated passwords, but does not autofill a saved password. see the autocomplete compat table for more details. ...

For Further Reading - XSLT: Extensible Stylesheet Language Transformations
anding xslt author: jay greenspan location: http://hotwired.lycos.com/webmonkey/...l?tw=authoring what is xslt? author: g. ...
... http://hotwired.lycos.com/webmonkey/...l?tw=authoring what is xslt? author: g. ...

Reddit Example - Archive of obsolete content
e click if it isn't on a link. if (t.nodename != "a") return; // don't intercept the click if it was on one of the links in the header // or next/previous footer, since those links should load in the panel itself. if ($(t).parents('#header').length || $(t).parents('.nextprev').length) return; // intercept the click, passing it to the addon, which will load it in a tab. event.stoppropagation(); event.preventdefault(); self.port.emit('click', t.tostring()); }); this script uses jquery to interact with the dom of the page and the self.port.emit function to pass urls back to the add-on script. to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-on's "data" directory. you could download this icon: . ...

self - Archive of obsolete content
essage); this takes a single parameter, the message payload, which may be any json-serializable value. on() start listening to messages from the main add-on code: self.on("message", function(addonmessage) { // handle the message }); this takes two parameters: the name of the event, and the handler function. the handler function is passed the message payload. once() exactly like on(), but stop listening after the first message is received. removelistener() remove a listener to an event. this takes two parameters: the name of the event to stop listening to, and the listener function to remove. ...

Content Scripts - Archive of obsolete content
ods.pagemod({ include: ['*'], contentscriptfile: self.data.url("content-script.js"), onattach: startlistening }); function startlistening(worker) { worker.port.on('click', function(html) { worker.port.emit('warning', 'do not click this again'); }); } // content-script.js window.addeventlistener('click', function(event) { self.port.emit('click', event.target.tostring()); event.stoppropagation(); event.preventdefault(); }, false); self.port.on('warning', function(message) { window.alert(message); }); in the add-on above there are two messages: click is sent from the page-mod to the add-on, when the user clicks an element in the page warning sends a silly string back to the page-mod from tab.attach() the tab.attach() method returns the worker you can use to comm...

context-menu - Archive of obsolete content
oes not specify a context, the page context applies. an item that is in a submenu is visible unless you specify a context. the page context occurs when the user invokes the context menu on a non-interactive portion of the page. try right-clicking a blank spot in this page, or on text. make sure that no text is selected. the menu that appears should contain the items "back", "forward", "reload", "stop", and so on. this is the page context. the page context is appropriate when your item acts on the page as a whole. it does not occur when the user invokes the context menu on a link, image, or other non-text node, or while a selection exists. declarative contexts you can specify some simple, declarative contexts when you create a menu item by setting the context property of the options object ...

hotkeys - Archive of obsolete content
y. 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. pageup: the page up key. pagedown: the page down key. onpress function function that is invoked when the key combination hotkey is pressed. hotkey methods destroy() stops this instance of hotkey from reacting to the key combinations. once destroyed a hotkey can no longer be used. ...

panel - Archive of obsolete content
width number the width of the panel in pixels. optional. height number the height of the panel in pixels. optional. position object the position of the panel. optional. see panel's options for further details. focus boolean set to false to prevent taking the focus away when the panel is shown. hide() stops displaying the panel. resize(width, height) resizes the panel. parameters width : number the new width of the panel in pixels. height : number the new height of the panel in pixels. on(type, listener) registers an event listener with the panel. parameters type : string the type of event to listen for. listener : function the listener function that handles the event. removelistener...

lang/functional - Archive of obsolete content
ute the function more than once per wait milliseconds. parameters fn : function the function to debounce. wait : integer the number of milliseconds to wait before the function is executed. options : object by default the function is called as soon as it is invoked (the leading edge of the wait period), and at the end of wait (the trailing edge of the wait period). pass {leading : false} to stop the function being called at the leading edge, and {trailing : false} to stop it being called at the trailing edge. returns function : the throttled version of fn. ...

remote/parent - Archive of obsolete content
list of all running processes: const { processes } = require("sdk/remote/parent"); for (var p of processes) { console.log(p.isremote); } each element in this list is a process. there will always be at least one process in this list, the main process. a multiprocess application will usually have at least one more process. listen to attach and detach events to hear as processes are started and stopped: const { processes } = require("sdk/remote/parent"); processes.on("attach", function(process) { console.log("new process is remote: " + process.isremote); }); methods forevery(callback) calls the callback for every existing process and any new processes created in the future. this is a shortcut for enumerating existing processes and then listening for attach events. properties port a...

system/events - Archive of obsolete content
icular event type parameters type : string the event type name to watch. listener : function function that will be called when an event is fired. strong : boolean default is false, a weak reference, which means it can be garbage collected at any time if there are no other references to it. determines if we should keep a strong or weak reference to the listener method. off(type, listener) stop listening for an event parameters type : string the event type name to unsubscribe to. listener : function the function we registered to listen for events. ...

test/httpd - Archive of obsolete content
this module was removed in firefox 36, please use the addon-httpd npm module instead. an http server for the mozilla platform, which can be used in unit tests. usage the most basic usage is: var { startserverasync } = require("sdk/test/httpd"); var srv = startserverasync(port, basepath); require("sdk/system/unload").when(function cleanup() { srv.stop(function() { // you should continue execution from this point. }) }); this starts a server in background (assuming you're running this code in an application that has an event loop, such as firefox). the server listens at http://localhost:port/ and serves files from the specified directory. you can serve static content or use sjs scripts, as described in documentation on developer.mozilla.org. you can also use nshttpserver to start th...

cfx - Archive of obsolete content
this flag is set and the add-on includes its own copies of the sdk modules, then the add-on will use the sdk modules in the add-on, not the ones built into firefox. this flag is particularly useful for sdk developers or people working with the development version of the sdk, who may want to run an add-on using newer versions of the modules than than those shipping in firefox. --stop-on-error stop running tests after the first failure. internal options --addons=addons paths of add-ons to install, comma-separated. addons may be specified as full paths or relative to the current directory. --e10s if this option is set then the add-on runs in a separate process. this option is currently not implemented. --keydir=keydir supply a diff...

console - Archive of obsolete content
console.log(). console.log(object[, object, ...]) logs the arguments to the console, preceded by "info:" and the name of your add-on: console.log("this is an informational message"); info: my-addon: this is an informational message console.time(name) starts a timer with a name specified as an input parameter. up to 10,000 simultaneous timers can run on a given page. console.timeend(name) stops the specified timer and logs the elapsed time in seconds since its start. see timers. console.trace() logs a stack trace at the point the function is called. console.warn(object[, object, ...]) logs the arguments to the console, preceded by "warn:" and the name of your add-on: console.warn("this is a warning message"); warn: my-addon: this is a warning message logging levels logging's ...

Creating annotations - Archive of obsolete content
age element. ...

Displaying annotations - Archive of obsolete content
ipt is here: self.on('message', function onmessage(annotations) { annotations.foreach( function(annotation) { if(annotation.url == document.location.tostring()) { createanchor(annotation); } }); $('.annotated').css('border', 'solid 3px yellow'); $('.annotated').bind('mouseenter', function(event) { self.port.emit('show', $(this).attr('annotation')); event.stoppropagation(); event.preventdefault(); }); $('.annotated').bind('mouseleave', function() { self.port.emit('hide'); }); }); function createanchor(annotation) { annotationanchorancestor = $('#' + annotation.ancestorid); annotationanchor = $(annotationanchorancestor).parent().find( ':contains(' + annotation.anchortext + ')').last(); $(annotationanchor).addcl...

Storing annotations - Archive of obsolete content
list = $('#annotation-list'); annotationlist.empty(); storedannotations.foreach( function(storedannotation) { var annotationhtml = $('#template .annotation-details').clone(); annotationhtml.find('.url').text(storedannotation.url) .attr('href', storedannotation.url); annotationhtml.find('.url').bind('click', function(event) { event.stoppropagation(); event.preventdefault(); self.postmessage(storedannotation.url); }); annotationhtml.find('.selection-text') .text(storedannotation.anchortext); annotationhtml.find('.annotation-text') .text(storedannotation.annotationtext); annotationlist.append(annotationhtml); }); }); it builds the dom for the pane...

Creating Event Targets - Archive of obsolete content
isited events. it duplicates the previous code, but with a few changes: import emit(), on(), once(), and off() from event/core replace listener functions with calls to emit(), passing the appropriate event type export its own event api. this consists of three functions: on(): start listening for events or a given type once(): listen for the next occurrence of a given event, and then stop removelistener(): stop listening for events of a given type the on() and once() exports delegate to the corresponding function from event/core, and use bind() to pass the exports object itself as the target argument to the underlying function. the removelistener() function is implemented by calling the underlying off() function. we can use this module in the same way we use any other m...

JavaScript timers - Archive of obsolete content
nds since the navigationstart attribute of the performance.timing interface. date.now() date.now() returns the number of milliseconds elapsed since 1 january 1970 00:00:00 utc. using javascript timers within workers workers can use timeouts and intervals just like the main thread can. this can be useful, for example, if you want to have your worker thread run code periodically instead of nonstop. functions available to workers in addition to the standard javascript set of functions (such as string, array, object, json etc), there are a variety of functions available from the dom to workers. this article provides a list of those. basic animations since we're using script to control canvas elements it's also very easy to make (interactive) animations. unfortunately the canvas element w...

Toolbar - Archive of obsolete content
start the application. notes insert your button by default only once, at first run, or when an extension update adds a new button. please only add your button by default if it adds real value to the user and will be a frequent entry point to your extension. you must not insert your toolbar button between any of the following elements: the combined back/forward button, the location bar, the stop botton, or the reload button. these elements have special behaviors when placed next to eachother, and will break if separated by another element. /** * installs the toolbar button with the given id into the given * toolbar, if it is not already present in the document. * * @param {string} toolbarid the id of the toolbar to install to. * @param {string} id the id of the button to install. ...

xml:base support in old browsers - Archive of obsolete content
3 : 2; // if the file protocol has an extra slashe, prepare to also skip it in the separator search var att2 = att.indexof('/', protocolpos+skipfile); // find first path separator ('/') after protocol if (att2 !== -1) { att = att.substring(0, att2 - 1); // don't want any trailing slash, as the absolute path ...

Default Preferences - Archive of obsolete content
+--|preferences to add preferences simply drop a .js file into that directory and mozilla will read it and set the appropriate preferences. the actual file, despite having .js extension, is not a javascript file. you may not set variables inside of it, nor may do any kind of program flow control (ifs, loops etc.) nor even calculated values (i.e. 3600 * 24 * 5). doing so will cause mozilla to stop processing your preferences file without any notification, warning, error, or exception. think of it more as an .ini file. comments are perfectly acceptable. inside your file you set preferences using the pref() function: pref("name", "value") example: pref('extensions.defaultprefs.example.int', 1); pref('extensions.defaultprefs.example.float', 0.1); pref('extensions.defaultprefs.example.string'...

Extension Etiquette - Archive of obsolete content
df data; creating a new xul about box is usually unnecessary. you can decrease download size by omitting a customized about box. make one only if you have a special feature that needs to be included — for example, a custom updater. theming if you have xul buttons in your extension that do functions similar to ones that already exist in a browser — for example, a feed reader that reloads and stops — use icons from the browser's theme. the icons makes the extension lighter, while providing more consistency, especially for users using different themes. extension icons unique icons are usually worth their download weight. they allow for easy identification among other extensions in the extensions manager. coding practices namespace conflicts there are many namespaces which extensions ...

Installing Extensions and Themes From Web Pages - Archive of obsolete content
e because your site isn't whitelisted, and since it was updateenabled that discovered this, not a call to install, there will be no notification to the user. ...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
tocomplete does; this will be covered in chapter 4. opening a page if you specify a uri value for the src attribute in the browser element, that uri will be opened by default. if the src attribute's value changes, you can dynamically open a different web page or xul document. functions like back, forward, reload can all be called using the goback(), goforward(), and reload() methods. using the stop() method stops loading the page currently in the process of being opened. access restrictions with frames defined using html's frame and iframe elements, it is possible for a child frame to access its parent and ancestor frames by getting the parent and top properties of window objects. for an application that can open any web page, this could give a script on a web page access to an xul docume...

Intercepting Page Loads - Archive of obsolete content
you'll need to compare the page url with some string or regular expression: if (some_regular_expression.test(doc.defaultview.location.href)) you can access and modify the dom of the loaded page, just like you normally would for xul and html documents. you can't, however, easily cancel the page load. you can close the tab, redirect the tab to about:blank or another page, or tell the browser to stop loading this page, but in general you don't want to do this because it will be visible to the user and it will look like a bug. there are better ways to intercept page loads before any content is downloaded, and before the user sees anything in the tab. http observers another common way of detecting and intercepting loads is using http observer topics. this is how the tamper data extension and ...

Mozilla Documentation Roadmap - Archive of obsolete content
s is very complete, but it isn't nearly as useful as the documentation that existed at xulplanet and was later taken down. xulplanet allowed you to navigate between interfaces and their related components, which makes locating components very easy. hopefully this will be corrected in the future. in the meantime, you can still navigate xulplanet using the wayback machine. mdc should be your first stop when looking for documentation. if you find it lacking or missing some piece of information, please consider adding it once you've found it. everyone looking for it later will thank you for it. the amo developer hub the amo developer hub is a great guide for add-on developers. it includes links to tutorials and documentation, development tools, and most notably, the mozilla add-ons forum. this ...

Performance best practices in extensions - Archive of obsolete content
ript compartment containing 100s of mbs of memory, which is much larger than usual. avoid writing slow css read the "writing efficient css" guide. remember that any selector in your rule which might match many different nodes is a source of inefficiency during either selector matching or dynamic update processing. this is especially bad for the latter if the selector can dynamically start or stop matching. avoid unqualified ":hover" like the plague. avoid dom mutation event listeners dom mutation event listeners are extremely expensive and, once added to a document even briefly, significantly harm its performance. as mutation events are officially deprecated, and there are many alternatives, they should be avoided at all costs. lazily load services the xpcomutils javascript module pr...

Updating addons broken by private browsing changes - Archive of obsolete content
after reading this document, contact josh matthews with further questions or clarifications, or file a bug if your extension has stopped working due to a change described here and you are having trouble updating it. how do i know if my addon is affected by these changes? if your code refers to any of the following interfaces: ff 15: nsidomstoragemanager ff 16: nsitransferable ff 18: imgicache moziasyncfavicons nsifaviconservice nsiwebbrowserpersist ff 19: nsicontentprefservice nsidownloadmanager nsidownload nsihttpauthmanager nsistricttransportsecurityservice ff 20: nsiprivatebrowsingservice nsirecentbadcertservice furthermore, if your code uses any of these common chrome apis: ff 19: saveurl saveinternal openlinkin ff 20: openbrowserwindow gprivatebrowsingui finally, if y...

Index of archived content - Archive of obsolete content
array properly using css and javascript in xhtml documents examples reference server-side javascript back to the server: server-side javascript on the rise sharp variables in javascript standards-compliant authoring tools stopiteration styling the amazing netscape fish cam page using javascript generators in firefox window.importdialog() writing javascript for xhtml xforms building mozilla xforms community developing mozilla xforms implementation status mozilla xforms specials ...

List of Former Mozilla-Based Applications - Archive of obsolete content
mango im client last news item on site from january 2007 mobidvd dvd/vcd/cd ripping software site down mozilla suite internet application suite development shifted to firefox, thunderbird and seamonkey applications netscape navigator browser support for netscape ended on february 1, 2008 nvu web authoring tool development stopped in 2005 and is being continued as an unofficial bugfix release by the kompozer project pogo browser from at&t site no longer accessible as of may 2009 pyro desktop desktop environment last news item on site from july 2007 script editor editor inactive skipstone gtk+ browser last news item on site from february 2008 xabyl v...

List of Mozilla-Based Applications - Archive of obsolete content
o, audio, and even devices such as zen, zune, pocketpcs, ipods, and psps mekhala browser part of the khmeros linux distro midbrowser mobile web browser mockery mockup creation tool built on xulrunner mongodb database project uses spidermonkey moyura email client part of the khmeros linux distro mozcards, jolistopwatch, jolitimer simple apps for maemo uses xulrunner moznet .net control embeddable gecko for .net applications wraps xulrunner for use in .net applications my internet browser localized browser uses gecko myna application server javascript application server for java uses mozilla rhino nextcms (fr) cms nightingale ...

MMgc - Archive of obsolete content
e amount of memory the application is using). one way to avoid this unbounded pause is to break up the work the gc needs to do into "increments". in order to collect garbage we must trace all the live objects and mark them. this is the part of the gc work that takes the most time and the part that needs to be incrementalized. in order to incrementalize marking it needs to be a process that can be stopped and started. our marking algorithm is a conservative marking algorithm that makes marking automatic, there are no mark() methods the gc engine needs to call, marking is simply a tight loop that processes a queue. the way it works is that all gc roots are registered with the gc library and it can mark everything by traversing the roots. at the beginning all the gc roots are pushed onto the work...

Images, Tables, and Mysterious Gaps - Archive of obsolete content
consider what happens when we put that line in a table cell (figure 6). and there you have it-- spaces opening up where none have ever been seen before. it gets even worse with small images, like ones that are one pixel tall, as illustrated in figure 7. now there's all kinds of space unexpectedly opening up. it's enough to drive a designer mad. how about a fix? there is one obvious fix-- stop creating designs that are dependent on tables and sliced up or single-pixel images-- but it's not terribly practical for many designers, and it sure doesn't help fix old designs that are suddenly blowing apart in recent browsers. there's another obvious fix, which is to make sure your document doesn't trigger the "standards"rendering mode. you can do this by using a doctype that will trigger eit...

Autodial for Windows NT - Archive of obsolete content
s | enable autodial by location is set for some location a dialup connection has been configured there is no lan connected or the dialup connection has been used to access the internet address in question. most systems are not set up correctly for this to happen, and most users have no idea how all these details work. so, as more people move to windows xp from windows 98, the autodial suddenly stops working for them. in fact, it's not mozilla that is broken, it's that microsoft has changed the way things work from windows 98 to windows xp. in an attempt to help users who want to use the autodial feature of the os, i added the autodial helper feature requested in bug 93002. how the feature works this feature doesn't do anything on linux, mac, or the consumer versions of windows. the "corr...

Automatically Handle Failed Asserts in Debug Builds - Archive of obsolete content
t.cpp, line 3173 (note that i have my source tree in d:/cvs-1.11.4/mozilla) if you have a dword in hkcu\software\mozilla.org\windbgdlg\ named "d:/cvs-1.11.5/mozilla/content/xul/content/src/nsxulelement.cpp," (with the comma - matches are whole-word only) and value 0x5, the assert would automatically be ignored. if you also had a dword named "3173", it would have no effect here because the handler stops comparing values at the first match. note that double quotes which delimit an item (") are ignored in value names and the assertion string, so "silly" and silly will both be matched by a value named silly. "silly", will only be matched by a value named "silly", since the quotes are internal to the string. ...

Building TransforMiiX standalone - Archive of obsolete content
lla/client.mk mozilla/aclocal.m4 mozilla/configure mozilla/configure.in mozilla/makefile.in plus nspr and xpcom from the cvs repository. building from a full mozilla tree is not supported. it is recommended to add ac_add_options --disable-gtktest ac_add_options --without-jpeg ac_add_options --without-zlib ac_add_options --without-png ac_add_options --without-x to your .mozconfig, too, as it stops configure from testing unneeded libs. make -f client.mk build as usual. of course, make -f client.mk checks out and builds just transformiix alright. the binary transformiix(.exe) will be in extensions/transformiix/source and dist/bin/ (symbolic link). run it via run-mozilla.sh transformiix on unices and just transformiix.exe on windows. original document information author: axel he...

Drag and Drop - Archive of obsolete content
er interfaces allow one to drag particular objects around within the interface. for example, dragging files to other directories, or dragging an icon to another window to open the document it refers to. mozilla and xul provide a number of events that can handle when the user attempts to drag objects around. a user can start dragging by holding down the mouse button and moving the mouse. the drag stops when the user releases the mouse. event handlers are called when the user starts and ends dragging, and at various points in-between. mozilla implements dragging by using a drag session. when a user requests to drag something that can be dragged, a drag session should be started. the drag session handles updating the mouse cursor and where the object should be dropped. if something cannot be dr...

Style System Overview - Archive of obsolete content
e data structs on the stack (the structs used by nscssdeclaration) style data computation get*data calls nsrulenode::walkruletree, which walks from the style context's rule node towards the root rule node. to fill in the data, we call nsistylerule::mapruleinfointo on the rules. mapruleinfointo implementations must check that the property is not filled in before filling it in. walkruletree stops walking up when it finds either a none bit, a cached struct, a dependent bit, or all the properties have been filled in. walkruletree also remembers the first rule that contributed non-empty data. style data computation after walkruletree stops walking up, it calls nsrulenode::compute*data to turn the specified values into the mostly-computed style data in the style struct. compute*data u...

Helper Apps (and a bit of Save As) - Archive of obsolete content
eference). calls show() on the nsihelperapplauncherdialog, which asynchronously puts up the helper app dialog. nsexternalapphandler::ondataavailable here we just copy the newly arrived data over into our temporary file. if any read or write errors occur, abort the whole process: cancel the channel. pull down the helper app dialog (if any). remove the temp file. nsexternalapphandler::onstoprequest set a flag that we're done, then do whatever the user wants if the user has decided (save to disk and open in helper are the current options the user has). helper app dialog this is our implementation of nsihelperapplauncherdialog it calls back to the nsexternalapphandler to let it know what the user picked saving to disk if a user decides to "save to disk", we just move/copy the t...

Microsummary XML grammar reference - Archive of obsolete content
tion> 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 summarized. if the expression evaluates to true, firefox applies that element's interval and stops processing child elements. thus, the first matching <condition> determines the update interval. if there are no <condition> child elements, or if none of their expressions evaluate to true, firefox applies the value of the <update> element's interval attribute. if the <update> element does not include an interval attribute, firefox applies the interval specified by the browser.microsummary.u...

Mozilla Application Framework - Archive of obsolete content
enable mozilla-based application authors to take advantage of the exploding world of web services. xpinstall our cross-platform installer for trivial packaging and installation of your mozilla framework applications. and much much more... tools venkman a javascript debugger with support for breakpoints, conditional breakpoints, local variable inspection, watch variables, single step, stop on error, profile data collection, report generation, code reformatting (pretty printing), and more. dom inspector a tool for inspecting and editing the structure and widgets of your user interface while your application is running. xulmaker a gui builder currently under development that lets you drag-and-drop widgets onto a grid to build your user interface. bugzilla the mozilla b...

Nanojit - Archive of obsolete content
int 2 twoplustwo = add two, two ret twoplustwo this adds two and two in the most hardcoded way possible. the conversion from lir to a program like one shown above is the task of the parser. guards guards are special lir instructions, similar to conditional branches, with the difference that when they are called, instead of going to a particular address, they leave the jit code entirely, and stop the trace. need guards are required in a cross platform dynamic language like javascript. certain assumptions are made when a particular jit code is generated. for example, in an instruction inr x, a guard would check that x doesn't overflow the range for a 32 bit integer. the jit code would have a guard checking this condition(an xt guard), and would return to the interpreter if the condition...

Supporting private browsing mode - Archive of obsolete content
n a preference specific to that extension, and set that preference to true by default. for example, the fire.fm extension has a preference called "disable station history and scrobble when firefox is in private mode", and disabling publishing of that information inside the private browsing mode by default. it provides a means of disabling this behavior for users who do not want the extension to stop publishing the information in private browsing mode. note: it is not acceptable for an extension that records things like urls or domains visited to even offer the option to opt out of private browsing mode. private browsing for theme designers if you want to make your theme look different when used in private browsing mode, you can do so quite easily by using the browsingmode attribute in the...

Tamarin Build System Documentation - Archive of obsolete content
le, smoke, test sandbox builds are displayed in next 3 sections: sandbox compile, sandbox smoke, sandbox test tamarin-central is considered a "sandbox" and will appear under sandbox phase what are the build phases? compile, smoke, test. when all of the slave machines are free they all start the first build phase simultaneously. if an error or failure occurs on any slave in a phase the build stops. the next phase is started when all slaves have completed the previous phase successfully. the compile phase compiles all of the tamarin source code and builds all of the shell executables, any errors will stop the phase and a red box will appear on the slave where the error occurred. the compile phase takes about 20-25 minutes. the smoke phase runs a set of tests on each platform until 2 mi...

Using gdb on wimpy computers - Archive of obsolete content
the debugger uses a lot of memory. how do i fix it? if your computer has less than 256 mb of memory, your computer will become unhappy as gdb loads mozilla's shared libraries. the solution to this is to delay loading shared libraries until they are actually needed. however, you need to make sure that the base libraries like libc and pthreads are loaded before you tell gdb to stop loading shared libraries. if you don't allow those libraries to be loaded then gdb will not be able to properly debug threads on linux. mozilla uses pthreads for its networking library so you need to be able to work in a threaded environment. the best way to do this is to set a breakpoint in main, let the program run until main and then turn off automatic library loading. from there you can allow the program to conti...

reserved - Archive of obsolete content
in future releases, the event handler will never be called for the given keyboard shortcut. ...

Building accessible custom components in XUL - Archive of obsolete content
ocus as we navigate within the spreadsheet. <caption>focus is tracked properly during keyboard navigation</caption> further reading document object model events adding editing capabilities download stage-5.zip install stage-5.xpi we now have a fully accessible xul spreadsheet, correctly focusable, correctly keyboard-navigable, and correctly exposed to assistive technologies. we could stop now, but we won't. what good is a spreadsheet if you can't edit it? we need to define a specific action that will trigger editing the currently focused cell. to maintain compatibility with the accessible html spreadsheet demo, i chose the enter key to trigger editing mode. when the user presses enter, we replace the currently focused xul label element with a xul textbox element, copy the initial ...

Menus - Archive of obsolete content
s an image images context-sendimage sends an image in an email images context-setdesktopbackground sets an image as the desktop background images context-blockimage blocks an image images context-back goes back a page context-forward goes forward a page context-reload reloads a page context-stop stops loading a page context-bookmarkpage bookmarks a page context-savepage saves a page context-sendpagetodevice send page to device context-sendpage send page in an email context-viewbgimage views a background image context-undo undo editable text context-cut cuts to clipboard...

How to implement a custom XUL query processor component - Archive of obsolete content
generateresults: function(adatasource, aref, aquery) { // preform any query and pass the data to the result set return new templateresultset(this._data); }, addbinding: function(arulenode, avar, aref, aexpr) { // add a variable binding for a particular rule, which we aren't using yet }, translateref: function(adatasource, arefstring) { // if we return null, everything stops return new templateresult(null); }, compareresults: function(aleft, aright, avar) { // -1 less, 0 ==, +1 greater var leftvalue = aleft.getbindingfor(avar); var rightvalue = aright.getbindingfor(avar); if (leftvalue < rightvalue) { return -1; } else if (leftvalue > rightvalue) { return 1; } else { return 0; } } }; var components ...

Index - Archive of obsolete content
no summary! 581 showpane xul methods, xul reference no summary! 582 showpopup needshelp, needsrewrite, xul methods, xul reference no summary! 583 sizeto xul methods, xul reference no summary! 584 startediting xul methods, xul reference no summary! 585 startfind no summary! 586 stop xul methods, xul reference no summary! 587 stopediting xul methods, xul reference no summary! 588 swapdocshells xul methods, xul reference no summary! 589 syncsessions needshelp, xul methods, xul reference no summary! 590 timedselect xul methods, xul reference no summary! 591 togglehighlight ...

selectTabAtIndex - Archive of obsolete content
...

Methods - Archive of obsolete content
tab removeitemat removeitemfromselection removenotification removeprogresslistener removesession removetab removetabsprogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection related dom element methods dom:element.addeventlistener dom:element.appendchild dom:element.comparedocumentposition dom:element.dispatchevent dom:element.getattribute dom:element.getattributenode dom:element.getattributenodens dom:element.getattributens dom:element.getelementsbytagname dom:elem...

PopupEvents - Archive of obsolete content
ue = (new date()).tolocaleformat('%t')"> <label value="time:"/> <label id="time"/> </panel> <toolbarbutton label="show time" popup="time-panel"/> you can prevent a menu or popup from appearing by calling the preventdefault method of the event from within a popupshowing listener. the default operation of the popupshowing event is to continue showing the popup. the preventdefault method will stop this from happening and the popup will not be opened. <menu label="edit"> <menupopup onpopupshowing="if (gdisallowed) event.preventdefault();"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> in this example, a global variable gdisallowed is checked and the preventdefault method is called. if you want to prevent a context menu from opening it is better to call ...

Things I've tried to do with XUL - Archive of obsolete content
listboxes, you can't use the appenditem api: // auto-create and attach 1st cell var row = mylistbox.appenditem( label, value ); // create and attach 2nd cell var cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ... while this works at first, after a number of rows have been added it breaks and stops displaying the first cell (the one specified by the appenditem call). instead, you must build up your own listitem full of listcells, and then add that listitem to the listbox, using generic dom calls: var row = document.createelement('listitem'); // create and attach 1st cell var cell = document.createelement('listcell'); cell.setattribute('label', label ); cell.setattribute('value', value ); ...

Custom toolbar button - Archive of obsolete content
r button or buttons to other users, you must make some changes to avoid conflicts when they install your extension. create a new extension id, in the form: something@domain-name it must contain an at-sign (@), making it look something like an e-mail address, but it does not need to be a real e-mail address. before and after the at-sign, it can only contain the characters a-z, a-z, 0-9, full stop, hyphen and underscore. if you do not own a domain name, you can make up something else. if you want to make it clear that your made-up name is not a real domain, add .invalid to the end. use your new extension id to rename the directory, and specify the same id in your install.rdf file. in your install.rdf file, remove the sections for applications where your button does not work. for example,...

Element Positioning - Archive of obsolete content
ment can be. the values are always measured in pixels. you can also use the corresponding css properties, min-width, min-height, max-width and max-height. these properties are only useful for flexible elements. by setting a maximum height, for example, a stretchy button will only grow to a certain maximum height. you will still be able to resize the window beyond that point but the button will stop growing in size. the box the button is inside will also continue to grow, unless you set a maximum height on the box also. if two buttons are equally flexible, normally both will share the amount of extra space. if one button has a maximum width, the second will still continue to grow and take all of the remaining space. if a box has a maximum width or height, the children cannot grow larger th...

Tree Selection - Archive of obsolete content
elect event first, let's see how we can determine when an item is selected. the onselect() event handler may be added to the tree element. when the user selects an item from the tree, the event handler is called. the user may also change the selection by using the cursor keys. if the user holds down the cursor key to rapidly scroll through the items, the event handler is not called until the user stops. this results in a performance improvement. this also means that the highlight will appear on several items even though the select event is never fired for those items. the syntax of the onselect() event handler is shown below. <tree id="treeset" onselect="alert('you selected something!');"> tree indices the tree has a property currentindex, which can be used to get the currently selected item,...

Using the Editor from XUL - Archive of obsolete content
editorshell.init(); editorshell.seteditortype(editortype); editorshell.webshellwindow = window; editorshell.contentwindow = window._content; the webshellwindow (a settable attribute on nsieditorshell) points to the top-level window element, from which the editorshell can get the xul document in which it is living. it needs this to poke the ui (e.g. for command state maintenance, starting and stopping the throbber etc.). the contentwindow (another settable attribute on nsieditorshell) points to the xul element which is to become editable. note: since we already know this when we have an <editor></editor> tag, we should remove the need to call this. editorstartup() does some other minor bits of setup before finally kicking off the url load, which the most important part he...

XUL FAQ - Archive of obsolete content
if you want to access elements inside <prefpane>, you should put script in the <prefpane> or write script into "onpaneload" of the <prefpane>.) note, that prefwindow only works in chrome xul. ...

XUL Questions and Answers - Archive of obsolete content
l) || aiid.equals(components.interfaces.nsisupportsweakreference) || aiid.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_nointerface; } listobj.onstatechange = function(aprogress, arequest, aflag, astatus) { if (aflag & listobj.wpl.state_start) { // this fires when the load event is initiated } else { if (aflag & listobj.wpl.state_stop) { if ( aflag & listobj.wpl.state_is_window ) { // this fires when all load finish } if ( aflag & listobj.wpl.state_is_network ) { // fires when all load are really over, // do something "final" here // (my two cents) } else { // this fires when a load finishes } } } return 0; } // this fires when the location bar cha...

XUL accessibility guidelines - Archive of obsolete content
hen an image serves a purely decorative function. use the "alt" attribute to describe html images and use the "tooltiptext" attribute on xul elements that use images (i.e. image elements, buttons with images). for toolbar buttons with images it is recommended to use both a text label in the label attribute and image alt text in the tooltiptext attribute. view the code examples below. <image src="stop.png" tooltiptext="stop" /> <html:img src="stop.jpg" alt="stop" /> <html:img src="decorative_image.jpg" alt="" /> <!-- in html the alt attribute is required. --> <toolbarbutton label="stop" image="stop.png" tooltiptext="stop loading the page" /> title provide unique titles to window container elements such as windows, wizards, and dialogs. titles provide users the most basic information about...

XUL controls - Archive of obsolete content
typed, used for entering passwords. <textbox type="password"/> textbox reference <textbox type="search"> a textbox for searching. <textbox type="search"/> textbox reference <textbox type="timed"> deprecated in gecko 1.9.1 a textbox for responding to user input. the command event is fired after the user stops typing, or if the user tabs away or hits enter. <textbox type="timed"/> textbox reference <timepicker> a timepicker displays a set of textboxes for entering a time. <timepicker value="12:05"/> timepicker reference <toolbarbutton> a button that is displayed on a toolbar. <toolbarbutton label="reload"/...

toolbox - Archive of obsolete content
on="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="toolbox example" width="300"> <toolbox> <toolbar> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton label="stop"/> <toolbarbutton label="reload"/> </toolbar> </toolbox> <textbox multiline="true" value="we have two toolbars inside of one toolbox above." width="20"/> </window> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, f...

tree - Archive of obsolete content
ntlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata startediting( row, column ) return type: no return value activates user editing of the given cell, which is specified by row index number and the nsitreecolumn in which it is located. the tree view's nsitreeview.getcelltext() method is called to obtain the cell contents. stopediting( shouldaccept ) return type: no return value stops editing the cell currently being edited. if the shouldaccept parameter is true, the cell's label is changed to the edited 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, tre...

Debugging a XULRunner Application - Archive of obsolete content
, true) must be set. to log js errors to disk, set the environment variable xre_console_log to the path to the filename. i.e. export xre_console_log=/path/to/logfile or set xre_console_log=c:\path\to\logfile. to output messages to the javascript console there are two ways to output messages to the js console: components.utils.reporterror(str) will output str as an "error" (i.e. with the red stop icon next to it). jsdump(str) (function defined below) will output str as a "message" with a speech bubble icon next to it: function jsdump(str) { components.classes['@mozilla.org/consoleservice;1'] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage(str); } for more information about the error console see the error console and browser console art...

nsIContentPolicy - Archive of obsolete content
63 introduced gecko 1.0 inherits from: nsicontentpolicybase last changed in gecko 42 (firefox 42 / thunderbird 42 / seamonkey 2.39) you can observe content that is being loaded into your browser by implementing nsicontentpolicy. this interface can be very useful if you are developing a content-aware plugin (blocking ads or altering the look of content, for example), or if you want to stop or allow user-browsed urls. warning: do not block the caller in your implementations of shouldload() or shouldprocess() (for example, by launching a dialog to prompt the user for something).") note: in reality, much of this interface is defined in the nsicontentpolicybase interface, but for now is documented here until someone has time to split things up. method overview short sh...

2006-10-27 - Archive of obsolete content
ounced final ff 2.0 and gives download links on its own site. update check failing in firefox 2.0 if add-on type is 8 testing a custom update.rdf file for a langpack using the official version of firefox 2.0 rc 3. discussions developing a spelling dictionary developing a spelling dictionary. alternative german locale while the alternative locale is active, the auto update of firefox stops working. problem with belarusian firefox 2 rc3 the broken message is displayed after user tries to visit non-existing site. meetings none for this week. authors paul yanchun gu (gpaul) aditya nanda kuswanto(vipers101) ...

2006-12-01 - Archive of obsolete content
2.x (now or when ff2.0.0.1 is released). also discussed is the the mozilla_1_8_branch's npotb (not part of the build) checkin policy. this newsgroup or "governance"? mitchell baker asks where should topics about organization and governance, moz.dev.planning or moz.governance? mozilla.org staff, project drivers, and technical oversight mike connor starts a discussion about the need for a "buck stops here" group and the replacement of drivers@mozilla.org. three replacement groups (with sample makeup) are proposed. meetings november 29th gecko 1.9/gran paradiso status meeting: (agenda). november 27 weekly project status meeting: (agenda) ...

Multi-process plugin architecture - Archive of obsolete content
for more details on hang protection, see the page on the plugin hang detector. ...

NPN_DestroyStream - Archive of obsolete content
yntax #include <npapi.h> nperror npn_destroystream(npp instance, npstream* stream, nperror reason); parameters the function has the following parameters: instance pointer to current plug-in instance. stream pointer to current stream, initiated by either the browser or the plug-in. reason reason the stream was stopped so the application can give the user appropriate feedback. values: npres_done (most common): stream completed normally; all data was sent by the plug-in to the browser. npres_user_break: plug-in is terminating the stream due to a user request. npres_network_err: stream failed due to network problems. returns if successful, the function returns nperr_no_error. if unsuccessf...

NPP_DestroyStream - Archive of obsolete content
am, npreason reason); parameters the function has the following parameters: instance pointer to current plug-in instance. stream pointer to current stream. reason reason the stream was destroyed. values: npres_done (most common): completed normally; all data was sent to the instance. npres_user_break: user canceled stream directly by clicking the stop button or indirectly by some action such as deleting the instance or initiating higher-priority network operations. npres_network_err: stream failed due to problems with network, disk i/o, lack of memory, or other problems. returns if successful, the plug-in should return nperr_no_error. if unsuccessful, the plug-in should return an error code. for possible values, see error codes. ...

NPP_WriteReady - Archive of obsolete content
or necessary; for example, if only 8k of data is available in a network buffer. if the plug-in is allocating memory for the entire stream at once (an as_file stream), it can return a very large number. because it is not processing streaming data, the browser can pass as much data to the instance as necessary in a single npp_write. if the browser receives a value of zero, the data flow temporarily stops. the browser checks to see if the plug-in can receive data again by resending the data at regular intervals. see also npp_write, npstream, npp ...

Sunbird Theme Tutorial - Archive of obsolete content
in and follow the instructions more carefully. creating a unique identifier create an identifier that is likely to be unique, in the form: <tt>something@domain-name</tt> it must contain an at-sign (<tt>@</tt>), making it look something like an e-mail address, but it does not need to be a real e-mail address. before and after the at-sign, it can only contain the characters a-z, a-z, 0-9, full stop, hyphen and underscore. if you do not own a domain name, you can make up something else. if you want to make it clear that your made-up name is not a real domain, add <tt>.invalid</tt> to the end. create a new directory in the <tt>extensions</tt> directory. use the identifer as your new directory's name. this new directory is your theme directory. go into your theme directory. creating informat...

Using IO Timeout And Interrupt On NT - Archive of obsolete content
tation in our nt implementation. conclusions as long as we need to support nt 3.51, we need to program under the guideline that after an io timeout or interrupt error, the thread must make sure the file descriptor is closed before it exits. programs should also take care in sharing file descriptors and using io timeout or interrupt on files that need to stay open throughout the process. when we stop supporting nt 3.51, we can look into using nt 4's <tt>cancelio()</tt> function to cancel outstanding overlapped io requests when we get io timeout or interrupt errors. if <tt>cancelio()</tt> really works as advertised, that should fundamentally solve this problem. if these limitations with io timeout and interrupt are not acceptable to the needs of your programs, you can consider using the win95 ...

Using SSH to connect to CVS - Archive of obsolete content
l need to replace the occurances of "%%" in the first line with "%". finally, note that ssh-add needs the environment variable home to be set with the cygwin path to your cygwin home directory. mozillabuild if you're using mozillabuild, ssh-agent should be started when you run the start-msvc???.bat file. you should be prompted to enter your passphrase. mozillabuild 1.2 contains a bug that will stop ssh-agent from automatically starting with msys. to fix this, apply this diff to c:\mozilla-build\msys\etc\profile.d\profile-sshagent.sh. ...

-ms-content-zoom-snap-points - Archive of obsolete content
ification. remarks this property has no effect on non-zoomable elements. see -ms-content-zooming for details on zoomable elements. when a user pans or scrolls and then lifts his or her contact (for instance, a finger), the content can continue to move with inertia. snap-points can change the animation that runs when the user lifts his or her finger so that you can adjust where the content will stop. by placing snap-points, you can make it easy for your users to manipulate your content and make it stop at convenient or key places. starting with windows 8.1, this property is also supported for touchpad interaction. this property requires windows 8 or later. ...

-ms-overflow-style - Archive of obsolete content
ut area for the content are reduced by the width (for vertical scrollbars) or height (for horizontal scrollbars) of the scrollbar(s). -ms-autohiding-scrollbar auto-hiding scrollbars are used if the element's content overflows. auto-hiding scrollbars are displayed during scrolling or shortly after the pointer interacts with the page, and are hidden shortly after scrolling and pointer interaction stops. when they are visible, auto-hiding scrollbars overlap the element's content. formal syntax auto | none | scrollbar | -ms-autohiding-scrollbar specifications not part of any specification. ...

Using JavaScript Generators in Firefox - Archive of obsolete content
yield; } generator = databaseoperation(); generator.next(); ...

Object.prototype.unwatch() - Archive of obsolete content
ted and removed in firefox 58+. in addition, using watchpoints has a serious negative impact on performance, which is especially true when used on global objects, such as window. you can usually use setters and getters or proxies instead. the unwatch() method removes a watchpoint set with the watch() method. syntax obj.unwatch(prop) parameters prop the name of a property of the object to stop watching. return value undefined. description the javascript debugger has functionality similar to that provided by this method, as well as other debugging options. for information on the debugger, see venkman. by default, this method is inherited by every object descended from object. note: the reason for unwatch() to take the property name prop as its only parameter is due to the "singl...

background-size - Archive of obsolete content
<html> but it didn't seem to be explicitly mentioned in the cascading and inheritance section and both the background-image and border-image say 'inherited: no'. and anyway, it's more the -moz-border-image that seems to be the problem - that gets inherited even if i add in -moz-border-image: none, to <body> or <html>, and setting the height to 100% is more a matter of covering it up rather than stopping it happening (see further examples a, b and c - b and c look ok, but adding margin or padding reveals that the image applies to both <body> and <html> even though explicitly set to none) user:robertc 2009-08-14 see also bug 509681 and bug 497995. user:jürgen jeka 2009-08-23 ...

forEach - Archive of obsolete content
d it should be mentioned that they should *_not_* be used on web pages. --gandalf 07:18, 31 may 2005 (pdt) is there a way to make foreach make use of break? [1].foreach(function(value, index, array){ print(value); //break? if (value>1){ return false;//we could have some way to break when we return false } }); //woulld print 1 2 --porfirio 11:17, 22-06-2008 another option would be to throw stopiteration and catch it within foreach(). --bencollver 11:18, 13-08-2008 ...

Archived open Web documentation - Archive of obsolete content
same object. standards-compliant authoring tools creating cross-browser code upfront will save you lots of time quality testing your web content. the following authoring tools adhere to the w3 standards. if you're using older versions of tools that rely on old browser bugs or generate browser-specific code, it may be time to upgrade: stopiteration the stopiteration object was used to tell the end of the iteration in the legacy iterator protocol. do not use this ancient feature. styling the amazing netscape fish cam page using javascript generators in firefox generators can be used to simplify asynchronous code in firefox by opting in to using javascript vers...

Building up a basic demo with Babylon.js - Game development
e scene actually visible we have to render it. add these lines at the end of the <script> element, just before the closing </script>. var renderloop = function () { scene.render(); }; engine.runrenderloop(renderloop); we're using the engine's runrenderloop() method to execute the renderloop() function repeatedly on every frame — the loop will continue to render indefinitely until told to stop. creating a camera now the setup code is in place we need to think about implementing the standard scene components: camera, light and objects. let's start with the camera — add this line to your code below the scene creation and the line where we defined the clearcolor. var camera = new babylon.freecamera("camera", new babylon.vector3(0, 0, -10), scene); there are many cameras available i...

Move the ball - Game development
delete all the javascript you currently have inside your html file except for the first two lines, and add the following below them. the draw() function will be executed within setinterval every 10 miliseconds: function draw() { // drawing code } setinterval(draw, 10); thanks to the infinite nature of setinterval the draw() function will be called every 10 milliseconds forever, or until we stop it. now, let's draw the ball — add the following inside your draw() function: ctx.beginpath(); ctx.arc(50, 50, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); try your updated code now — the ball should be repainted on every frame. making it move you won't notice the ball being repainted constantly at the moment, as it's not moving. let's change that. first, in...

Paddle and keyboard controls - Game development
om of your javascript: document.addeventlistener("keydown", keydownhandler, false); document.addeventlistener("keyup", keyuphandler, false); when the keydown event is fired on any of the keys on your keyboard (when they are pressed), the keydownhandler() function will be executed. the same pattern is true for the second listener: keyup events will fire the keyuphandler() function (when the keys stop being pressed). add these to your code now, below the addeventlistener() lines: function keydownhandler(e) { if(e.key == "right" || e.key == "arrowright") { rightpressed = true; } else if(e.key == "left" || e.key == "arrowleft") { leftpressed = true; } } function keyuphandler(e) { if(e.key == "right" || e.key == "arrowright") { rightpressed = false; ...

Bounce off the walls - Game development
the easiest way to get our ball bouncing off the walls is to tell the framework that we want to treat the boundaries of the <canvas> element as walls and not let the ball move past them. in phaser this can be easily accomplished using the collideworldsbound property. add this line right after the existing game.physics.enable() method call: ball.body.collideworldbounds = true; now the ball will stop at the edge of the screen instead of disappearing, but it doesn't bounce. to make this occur we have to set its bounciness. add the following line below the previous one: ball.body.bounce.set(1); try reloading index.html again — now you should see the ball bouncing off all the walls and moving inside the canvas area. compare your code you can check the finished code for this lesson in the ...

Build the brick field - Game development
« previousnext » ...

Buttons - Game development
et the playing variable to true. finally for this section, go back into your create() function, find the ball.body.velocity.set(150, -150); line, and remove it. you only want the ball to move when the button is pressed, not before! keeping the paddle still before the game starts it works as expected, but we can still move the paddle when the game hasn't started yet, which looks a bit silly. to stop this, we can take advantage of the playing variable and make the paddle movable only when the game has started. to do that, adjust the update() function like so: function update() { game.physics.arcade.collide(ball, paddle, ballhitpaddle); game.physics.arcade.collide(ball, bricks, ballhitbrick); if(playing) { paddle.x = game.input.x || game.world.width*0.5; } } that way...

Physics - Game development
sprite(50, 50, 'ball'); game.physics.enable(ball, phaser.physics.arcade); ball.body.velocity.set(150, 150); } function update() { } try reloading index.html again — the ball should now be moving constantly in the given direction. at the moment, the physics engine has gravity and friction set to zero. adding gravity would result in the ball falling down while friction would eventually stop the ball. fun with physics you can do much more with physics, for example by adding ball.body.gravity.y = 100; you will set the vertical gravity of the ball. as a result it will be launched upwards, but then fall due to the effects of gravity pulling it down. this kind of functionality is just the tip of the iceberg — there are various functions and variables that can help you manipulate the...

2D maze game with device orientation - Game development
elapsed through the whole game, and a button to press that takes you to the main menu. if the current level is lower than 5, all the neccesary variables are reset and the next level is loaded. ideas for new features this is merely a working demo of a game that could have lots of additional features. we can for example add power-ups to collect along the way that will make our ball roll faster, stop the timer for a few seconds or give the ball special powers to go through obstacles. there’s also room for the traps which will slow the ball down or make it more difficult to reach the hole. you can create more levels of increasing difficulty. you can even implement achievements, leaderboards and medals for different actions in the game. there are endless possibilities — they only depend on ...

Asynchronous - MDN Web Docs Glossary: Definitions of Web-related terms
ed rather than xml in modern applications—is a mechanism that requests relatively small amounts of data from the server using http, with the result being returned when available rather than immediately. software design asynchronous software design expands upon the concept by building code that allows a program to ask that a task be performed alongside the original task (or tasks), without stopping to wait for the task to complete. when the secondary task is completed, the original task is notified using an agreed-upon mechanism so that it knows the work is done, and that the result, if any, is available. there are a number of programming techniques for implementing asynchronous software. see the article asynchronous javascript for an introduction to them. learn more technical re...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
n of the url following "<locale>/docs/". 426 smoke test composing, glossary, intro, qa, testing a smoke test consists of functional or unit tests of critical software functionality. smoke testing comes before further, in-depth testing. 427 snap positions glossary, snap positions a scroll container may set snap positions — points that the scrollport will stop moving at after a scrolling operation is completed. this allows a scrolling experience that gives the effect of paging through content rather than needing to drag content into view. 428 specification glossary, openpractices, standardization a specification is a document that lays out in detail what functionality or attributes a product must include before delivery. in the con...

Recursion - MDN Web Docs Glossary: Definitions of Web-related terms
n smaller sub-problems. a recursive function can receive two inputs: a base case (ends recursion) or a recursive case (resumes recursion). examples recursive function calls itself until condition met the following python code defines a function that takes a number, prints it, and then calls itself again with the number's value -1. it keeps going until the number is equal to 0, in which case it stops. def recurse(x): if x > 0: print(x) recurse(x - 1) recurse(10) the output will look like this: 10 9 8 7 6 5 4 3 2 1 0 learn more general knowledge recursion (computer science) on wikipedia more details about recursion in javascript ...

Snap positions - MDN Web Docs Glossary: Definitions of Web-related terms
this allows a scrolling experience that gives the effect of paging through content rather than needing to drag content into view. ...

Style origin - MDN Web Docs Glossary: Definitions of Web-related terms
e from adding styles using a developer tool or from a browser extension that automatically applies custom styles to content, such as stylus or stylish. author origin the author origin is the style origin which contains all of the styles which are part of the document, whether embedded within the html or loaded from an external stylesheet file. the style origins are used to determine where to stop rolling back (or backtracking through) the cascade of styles that have been applied to an element when removing styles, such as when using the unset or revert keywords. learn more technical information css cascading and inheritance: cascading origins ...

Syntax - MDN Web Docs Glossary: Definitions of Web-related terms
ntax applies both to programming languages (commands to the computer) and markup languages (document structure information) alike. syntax only governs ordering and structure; the instructions must also be meaningful, which is the province of semantics. code must have correct syntax in order to compile correctly, otherwise a syntax error occurs. even small errors, like a missing parenthesis, can stop source code from compiling successfully. frameworks are said to have a "clean" syntax if they produce simple, readable, concise results. if a codebase uses "a lot of syntax", it requires more characters to achieve the same functionality. learn more general knowledge syntax (programming languages) on wikipedia ...

Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
d prefixes to experimental or nonstandard css properties and javascript apis, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process. developers should wait to include the unprefixed property until browser behavior is standardized. browser vendors are working to stop using vendor prefixes for experimental features. web developers have been using them on production web sites, despite their experimental nature. this has made it more difficult for browser vendors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to add other browsers' prefixes in order to load popular web sites. lately, the trend ...

Backgrounds and borders - Learn web development
ase, the actual image is just a single star. if you specify a background color in addition to a background image then the image displays on top of the color. try adding a background-color property to the example above to see that in action. controlling background-repeat the background-repeat property is used to control the tiling behavior of images. the available values are: no-repeat — stop the background from repeating altogether. repeat-x — repeat horizontally. repeat-y — repeat vertically. repeat — the default; repeat in both directions. try these values out in the example below. we have set the value to no-repeat so you will only see one star. try out the different values — repeat-x and repeat-y — to see what their effects are. sizing the background image in t...

Fundamental CSS comprehension - Learn web development
: write a ruleset that targets both the card header, and card footer, giving them both a computed total height of 50px (including a content height of 30px and padding of 10px on all sides.) but express it in ems. the default margin applied to the <h2> and <p> elements by the browser will interfere with our design, so write a rule that targets all these elements and sets their margin to 0. to stop the image from spilling out of the main business card content (the <article> element), we need to give it a specific height. set the <article>'s height to 120px, but expressed in ems. also give it a background color of semi-transparent black, resulting in a slightly darker shade that lets the background red color shine through a bit too. write a ruleset that gives the <h2> an effective font size...

Images, media, and form elements - Learn web development
when setting widths and heights on form elements. for consistency it is a good idea to set margins and padding to 0 on all elements, then add these back in when styling particular controls button, input, select, textarea { box-sizing: border-box; padding: 0; margin: 0; } other useful settings in addition to the rules mentioned above, you should also set overflow: auto on <textarea>s to stop ie showing a scrollbar when there is no need for one: textarea { overflow: auto; } putting it all together into a "reset" as a final step, we can wrap up the various properties discussed above into the following "form reset" to provide a consistent base to work from. this includes all the items mentioned in the last three sections: button, input, select, textarea { font-family: inherit; ...

Test your skills: Selectors - Learn web development
k purposes, download the starting point for this task to work in your own editor or in an online editor. selectors two without changing the html, make the following changes to the look of the content in this example: give the element with an id of special a yellow background. give the element with a class of alert a 1px grey border. if the element with a class of alert also has a class of stop, make the background red. if the element with a class of alert also has a class of go, make the background green. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors three in this example, try making the following changes withou...

Sizing items in CSS - Learn web development
them at their intrinsic width while making sure they don't become larger than that width. as an example, if you were to set width: 100% on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. if you instead use max-width: 100%, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size. in the example below, we have used the same image three times. the first image has been given width: 100% and is in a container which is larger than it, therefore it stretches to the container width. the second image has max-width: 100% set on it and therefore does not stretch to fill the container. the third box contains the same image again, also with max-width: 100% set; ...

The box model - Learn web development
box using the standard box model will actually be 410px (350 + 25 + 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 pag...

Flexbox - Learn web development
that can specify up to three different values: the unitless proportion value we discussed above. this can be specified individually using the flex-grow longhand property. a second unitless proportion value — flex-shrink — that comes into play when the flex items are overflowing their container. this specifies how much of the overflowing amount is taken away from each flex item's size, to stop them overflowing their container. this is quite an advanced flexbox feature, and we won't be covering it any further in this article. the minimum size value we discussed above. this can be specified individually using the flex-basis longhand value. we'd advise against using the longhand flex properties unless you really have to (for example, to override something previously set). they lead to ...

Legacy layout methods - Learn web development
ew copy of your previous example page, or make a local copy of our simple-grid-finished.html code to use as a starting point. update the second css rule (with the .wrapper selector) as follows: body { width: 90%; max-width: 980px; margin: 0 auto; } .wrapper { padding-right: 2.08333333%; } not only have we given it a percentage width, we have also added a max-width property in order to stop the layout becoming too wide. next, update the fourth css rule (with the .col selector) like so: .col { float: left; margin-left: 2.08333333%; width: 6.25%; background: rgb(255, 150, 150); } now comes the slightly more laborious part — we need to update all our .col.span rules to use percentages rather than pixel widths. this takes a bit of time with a calculator; to save you some ef...

Getting started with CSS - Learn web development
hers. the most common way to do this is to add a class to your html element and target that class. in your html document, add a class attribute to the second list item. your list will now look like this: <ul> <li>item one</li> <li class="special">item two</li> <li>item <em>three</em></li> </ul> in your css you can target the class of special by creating a selector that starts with a full stop character. add the following to your css file: .special { color: orange; font-weight: bold; } save and refresh to see what the result is. you can apply the class of special to any element on your page that you want to have the same look as this list item. for example, you might want the <span> in the paragraph to also be orange and bold. try adding a class of special to it, then reload you...

Advanced form styling - Learn web development
ort the -webkit- prefixed version (-webkit-appearance). firefox settled on this because web developers mostly seemed to be using the -webkit- prefixed version, so it was better for compatibility. if you look at the reference page you'll see a lot of different possible values listed for -webkit-appearance, however by far the most helpful value, and probably the only one you'll use, is none. this stops any control you apply it to from using system-level styling, as much as possible, and lets you build up the styles yourself using css. for example, let's take the following controls: <form> <p> <label for="search">search: </label> <input id="search" name="search" type="search"> </p> <p> <label for="text">text: </label> <input id="text" name="text" type="text"> </p> <p...

Other form controls - Learn web development
a>, and overriden using css. the default value if none is specified is 2. wrap specifies how the control wraps text. the values are soft (the default value), which means the text submitted is not wrapped but the text rendered by the browser is wrapped; hard (the cols attribute must be specified when using this value), which means both the submitted and rendered texts are wrapped, and off, which stops wrapping. controlling textarea resizability the ability to resize a <textarea> is controlled with the css resize property. its possible values are: both: the default — allows resizing horizontally and vertically. horizontal: allows resizing only horizontally. vertical: allows resizing only vertically. none: allows no resizing. block and inline: experimental values that allow resizing...

UI pseudo-classes - Learn web development
with better user experience. if the value is valid when the input receives focus, the element may match :invalid as the user enters data if the value is temporarily invalid, but will only match :user-invalid when the element loses focus. if the value was originally invalid, it will match both :invalid and :user-invalid for the whole duration of the focus. in a similar manner to :invalid, it will stop matching :user-invalid if the value does become valid. 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: advanced styling. summary this completes our look at ui pseudo-classes that relate to form inputs. keep...

JavaScript basics - Learn web development
handlers. these are code structures that listen for activity in the browser, and run code in response. the most obvious example is handling the click event, which is fired by the browser when you click on something with your mouse. to demonstrate this, enter the following into your console, then click on the current webpage: document.queryselector('html').onclick = function() { alert('ouch! stop poking me!'); } there are many ways to attach an event handler to an element. here we select the <html> element, setting its onclick handler property equal to an anonymous (i.e. nameless) function, which contains the code we want the click event to run. note that document.queryselector('html').onclick = function() {}; is equivalent to let myhtml = document.queryselector('html'); myhtml.oncli...

Tips for authoring fast-loading HTML pages - Learn web development
in this article are common-sense techniques which apply to any user agent, and can be applied to any web page, regardless of browser-support requirements. use async and defer, if possible make the javascript scripts such that they are compatible with both the async and the defer attributes, and use async whenever possible, especially if you have multiple script tags. with that, the page can stop rendering while javascript is still loading. otherwise, the browser will not render anything that is after the script tags that do not have these attributes. note: even though these attributes do help a lot the first time a page is loaded, you should use them but not assume they will work in all browsers. if you already follow all javascript best practices, there is no need to change your code. ...

Creating hyperlinks - Learn web development
sts to verify that you've retained this information before you move on — see test your skills: links. summary that's it for links, for now anyway! you'll return to links later on in the course when you start to look at styling them. next up for html, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — advanced text formatting is your next stop. previous overview: introduction to html next in this module getting started with html what’s in the head? metadata in html html text fundamentals creating hyperlinks advanced text formatting document and website structure debugging html marking up a letter structuring a page of content ...

Document and website structure - Learn web development
all rights reversed.</p> </footer> </body> </html> take some time to look over the code and understand it — the comments inside the code shou...

Adding vector graphics to the Web - Learn web development
lick', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = ''; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.

Video and audio content - Learn web development
the video you want to embed. it works in exactly the same way. controls users must be able to control video and audio playback (it's especially critical for people who have epilepsy.) you must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate javascript api. at a minimum, the interface must include a way to start and stop the media, and to adjust the volume. the paragraph inside the <video> tags this is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older browsers. this can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way r...

HTML table basics - Learn web development
: <td>hi, i'm your first cell.</td> <td>i'm your second cell.</td> <td>i'm your third cell.</td> <td>i'm your fourth cell.</td> as you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. each <td> element creates a single cell and together they make up the first row. every cell we add makes the row grow longer. to stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element ('tr' stands for 'table row'). let's investigate this now. place the four cells you've already created inside <tr> tags, like so: <tr> <td>hi, i'm your first cell.</td> <td>i'm your second cell.</td> <td>i'm your third cell.</td> <td>i'm your fourth cell.</td> </tr> now you'v...

Index - Learn web development
...

Introducing asynchronous JavaScript - Learn web development
ime. but web browsers define functions and apis that allow us to register functions that should not be executed synchronously, and should instead be invoked asynchronously when some kind of event occurs (the passage of time, the user's interaction with the mouse, or the arrival of data over the network, for example). this means that you can let your code do several things at the same time without stopping or blocking your main thread. whether we want to run code synchronously or asynchronously will depend on what we're trying to do. there are times when we want things to load and happen right away. for example when applying some user-defined styles to a webpage you'll want the styles to be applied as soon as possible. if we're running an operation that takes time however, like querying a da...

Test your skills: Strings - Learn web development
ended up with in the previous task, but it is somewhat broken! we want you to fix and update it, like so: change the casing to correct sentence case (all lowercase, except for upper case first letter). store the new quote in a variable called fixedquote. in fixedquote, replace "green eggs and ham" with another food that you really don't like. there is one more small fix to do — add a full stop onto the end of the quote, and save the final version in a variable called finalquote. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. strings 4 in the final string task, we have given you the name of a theorem, two numeric values, and an incomplete string (the bits that need a...

What is JavaScript? - Learn web development
ypass the problem of the blocking script — async and defer (which we saw above). let's look at the difference between these two. scripts loaded using the async attribute (see below) will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. you get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. it is best to use async when the scripts in the page run independently from each other and depend on no other script on the page. for example, if you have the following script elements: <script async src="js/vendor/jquery.js"></script> <script async src="js/script2.js"></script> <script async src="js/script3.js"></script> you can't rely on the order the ...

What went wrong? Troubleshooting JavaScript - Learn web development
and css, an understanding of what javascript is. objective: to gain the ability and confidence to start fixing problems in your own code. types of error generally speaking, when you do something wrong in code, there are two main types of error that you'll come across: syntax errors: these are spelling errors in your code that actually cause the program not to run at all, or stop working part way through — you will usually be provided with some error messages too. these are usually okay to fix, as long as you are familiar with the right tools and know what the error messages mean! logic errors: these are errors where the syntax is actually correct but the code is not what you intended it to be, meaning that program runs successfully but gives incorrect results. these a...

Adding features to our bouncing balls demo - Learn web development
stroke(). we also want to make the stroke a bit thicker, so you can see the evil circle a bit more easily. this can be achieved by setting a value for linewidth somewhere after the beginpath() call (3 will do). checkbounds() this method will do the same thing as the first part of ball()'s update() function — look to see whether the evil circle is going to go off the edge of the screen, and stop it from doing so. again, you can mostly just copy the ball.prototype.update definition, but there are a few changes you should make: get rid of the last two lines — we don't want to automatically update the evil circle's position on every frame, because we will be moving it in some other way, as you'll see below. inside the if() statements, if the tests return true we don't want to update v...

JavaScript object basics - Learn web development
try these in the js console: person['eyes'] = 'hazel'; person.farewell = function() { alert("bye everybody!"); } you can now test out your new members: person['eyes'] person.farewell() one useful aspect of bracket notation is that it can be used to set not only member values dynamically, but...

Test your skills: JSON - Learn web development
se it into json before you can get any data out of it. you'll probably want to use an outer loop to loop through the cats and add their names to the motherinfo variable string, and an inner loop to loop through all the kittens, add up the total of all/male/female kittens, and add those details to the kitteninfo variable string. the last mother cat name should have an "and" before it, and a full stop after it. how do you make sure this can work, no matter how many cats are in the json? why are the para1.textcontent = motherinfo; and para2.textcontent = kitteninfo; lines inside the displaycatinfo() function, and not at the end of the script? this has something to do with async code. try updating the live code below to recreate the finished example: warning: to answer this question, you'...

Ember interactivity: Events, classes and state - Learn web development
e todos, there needs to be a way to swap out our static "buy movie tickets" todos with the todos we're actually creating. in the todolist component, we'll want to get the todos out of the service, and render a todo component for each todo. in order to retrieve the todos from the service, our todolist component first needs a backing component class to contain this functionality. press ctrl + c to stop the development server, and enter the following terminal command: ember generate component-class todo-list this generates the new component class todomvc/app/components/todo-list.js. populate this file with the following code, which simply exposes the todo-data service, via the todos property, to our template. this makes it accessible via this.todos inside both the class and the template: imp...

Ember app structure and componentization - Learn web development
alues to move it next to the input, rather than it being inside the "main" section. using the cli to create our components for us so to represent our app, we want to create 4 components: header list individual todo footer to create a component, we use the ember generate component command, followed by the name of the component. let’s create the header component first. to do so: stop the server running by going to the terminal and pressing ctrl + c. enter the following command into your terminal: ember generate component header these will generate some new files, as shown in the resulting terminal output: installing component create app/components/header.hbs skip app/components/header.js tip to add a class, run `ember generate component-class header` inst...

Beginning our React todo list - Learn web development
inal to delete some unneeded files. make sure you’re starting in the app's root directory! # move into the src directory of your project cd src # delete a few files rm -- app.test.js app.css logo.svg serviceworker.js setuptests.js # move back up to the root of the project cd .. notes: two of the files we’re deleting are for testing the application. we will not cover testing here. if you stopped your server to do the terminal tasks mentioned above, you’ll have to start it again using npm start. project starter code as a starting point for this project, we're going to provide two things: an app() function to replace the one you have now, and some css to style your app. the jsx copy the following snippet to your clipboard, then paste it into app.js so that it replaces the existin...

Creating our first Vue component - Learn web development
labels to their checkboxes. to fix this, we can programmatically set the id in the component data. we can use the lodash package's uniqueid() method to help keep the index unique. this package exports a function that takes in a string and appends a unique integer to the end of the prefix. this will be sufficient for keeping component ids unique. let’s add the package to our project with npm; stop your server and enter the following command into your terminal: npm install --save lodash.uniqueid note: if you prefer yarn, you could instead use yarn add lodash.uniqueid. we can now import this package into our todoitem component. add the following line at the top of todoitem.vue’s <script> element: import uniqueid from 'lodash.uniqueid'; next, add add an id field to our data property,...

Introduction to cross browser testing - Learn web development
t. normally your development will involve a combination of the above three approaches. the most important thing is that you test each small part before committing it — don't leave all the testing till the end! testing/discovery after each implementation phase, you will need to test the new functionality. to start with, you should make sure there are no general issues with your code that are stopping your feature from working: test it in a couple of stable browsers on your system, like firefox, safari, chrome, or ie/edge. do some lo-fi accessibility testing, such as trying to use your site with only the keyboard, or using your site via a screen reader to see if it is navigable. test on a mobile platform, such as android or ios. at this point, fix any problems you find with your new...

Setting up your own test automation environment - Learn web development
of firefox automatically open up! google should automatically be loaded in a tab, "webdriver" should be entered in the search box, and the search button will be clicked. webdriver will then wait for 2 seconds; the document title is then accessed, and if it is "webdriver - google search", we will return a message to claim the test is passed. webdriver will then close down the firefox instance and stop. testing in multiple browsers at once there is also nothing to stop you running the test on multiple browsers simultaneously. let's try this! create another new file inside your project directory called google_test_multiple.js. you can feel free to change the references to some of the other browsers we added, remove them, etc., depending on what browsers you have available to test on your op...

Introducing a complete toolchain - Learn web development
er running at http://localhost:1234 ✨ built in 129ms. parcel also installs the dependencies that we will use in our code, including react, react-dom, react-async-hook, date-fns, and format-number. this first run will therefore be longer than a typical run of parcel. note: if you run parcel on this project and are faced with an error that reads error: enoent: no such file or directory, stop the process using ctrl + c and then try re-running it. the server is now running on the url that was printed (in this case localhost:1234). go to this url in your browser and you will see the example app running! another clever trick parcel has up its sleeve is that any changes to your source code will now trigger an update in the browser. to try this out: load up the file s...

Package management basics - Learn web development
velopment are not needed in the final site, so will be stripped out for production, e.g. "hot module replacement", "live reloading", and "uncompressed and commented source code". though far from exhaustive, these are some of the common web development features that are very helpful at the development stage, but are not very useful in production. in production, they will just bloat your site. now stop the previous parcel command (using ctrl + c). we can now prepare our bare bones example site for an imaginary deployment. parcel provides an additional command to generate files that are suited to publication, making bundles (mentioned earlier) with the build option. run the following command: parcel build index.html you should see an output like so: ✨ built in 9.35s. dist/my-project.fb7...

Mozilla accessibility architecture
they are fired by gecko whenever nodes in the document are created, moved or changed. common reasons f...

Embedding API for Accessibility
ground_color", "#abcdef" /* hex color value */); setcharpref("browser.display.background_color", "#abcdef" /* hex color value */); setboolpref("browser.display.use_system_colors", boolsystemcolors); setboolpref("browser.display.use_document_colors", booluseauthorcolors); /* setting use_document_colors also stops background images from loading */ moz 0.8 link appearance setcharpref("browser.anchor_color", "#abcdef" /* hex color value */); setcharpref("browser.visited_color", "#abcdef" /* hex color value */); setboolpref("browser.underline_anchors", boolunderlinelinks); moz...

Mozilla’s UAAG evaluation report
sheet the prefs are at preferences, appearances, fonts 4.3 configure text colors. (p1) vg can be changed through preferences or by editing the prefs.js file the prefs are at preferences, appearances, colors to use any color offered in windows, the prefs.js file must be edited by hand 4.4 slow multimedia. (p1) ni cannot slow animations 4.5 start, stop, pause, and navigate multimedia. (p1) na 4.6 position captions. (p1) na 4.7 slow other multimedia. (p2) na this is similar to checkpoint 4.4, except that includes animation through style cannot control animation rate of animated images 4.8 control other multimedia. (p2) na 4.9 global volume control. (p1) na 4.1...

Application cache implementation overview
asynchronous recursive calls to processnexturi(), a method searching always a single entry that is scheduled to load. when found, channel is open for it (+onprogress event is invoked). processnexturi then invokes it self asynchronously via dispatch to a main thread when not already on the concurrency limit of 15 loads. when concurrency limit is reached, the processnexturi self-invocation cycle is stopped. from now on processnexturi can only be called from loadcompleted() again. note: the processnexturi method early returns when state of the update is different then downloading. on downloading state loadcompleted checks whether load of the item succeeded. if so, its marked as valid in the new cache version and processnexturi() is called. otherwise, the update invokes onerror and '...

Bugzilla
later. how to tell if a bug has already been reported it's useful (but not mandatory) for you to check if the problem you're reporting has been already tracked. this guide will help you do so. view all... other materials an introduction to bugzilla bugzilla for humans bugzilla quicksearch help page. quicksearch is a quick, easy, and very effective way of quickly querying bugzilla. ...

HTTP logging
t of modules that you want to log: this list has the exact same format as the moz_log environment variable (see below). generally the default list is ok, unless a mozilla developer has told you to modify it. click on start logging. reproduce the bug (i.e. go to the web site that is broken for you and make the bug happen in the browser) make a note of the value of "current log file". click on stop logging. go to the folder containing the specified log file, and gather all the log files. you will see several files that look like: log.txt-main.1806, log.txt-child.1954, log.txt-child.1970, etc. this is because firefox now uses multiple processes, and each process gets its own log file. for many bugs, the "log.txt-main" file is the only thing you need to upload as a file attachment to your ...

Eclipse CDT
ux, you may also need to set the "working directory" to {your-obj-dir}/dist/bin, and then select the environment tab and set ld_library_path to ".:./plugins:." and library_path to ".:./components:.". (are these variables really necessary? if so, why? isn't library_path for compile time, not runtime, linking?) in the workspace preferences, you may want to go to "c/c++ > debug > gdb" and deselect "stop on startup at", so that eclipse won't automatically break in main() when it launches firefox for debugging. to debug, click the debug button on the toolbar, or select "run > debug" from the menu bar. it's not obvious, but you can get a gdb prompt in the console so that you can type gdb commands directly. after you've finished debugging, you can get back to the c/c++ perspective (i.e. window la...

Contributing to the Mozilla code base
mation from" box, and add the reviewer's name. if they don't respond within a day or two, you can ask for help on matrix in the #introduction:mozilla.org or #developers:mozilla.org channels, or contact mike hoye directly. don't hesitate to contact your mentor as well if this isn't moving. step 4: repeat thank you! you've fixed your very first bug, and the open web is stronger for it. but don't stop now. go back to step 1, as there is plenty more to do. your mentor might suggest a new bug for you to work on, or find one that interests you. now that you've got your first bug fixed you should request level 1 access to the repository to push to the try server and get automated feedback about your changes on multiple platforms. after fixing a nontrivial number of bugs you should request level ...

Listening to events on all tabs
s value is a combination of one of the state transition flags and one or more of the state type flags defined in the nsiwebprogresslistener documentation. any undefined bits are reserved for future use. astatus error status code associated with the state change; this indicates whether or not the request was successful. this parameter should be ignored unless astateflags includes the state_stop bit. note: astatus may be a success code even for server generated errors, such as the http 404 file not found error. in such cases, the request itself should be queried for extended error information (e.g., for http requests see nsihttpchannel). onstatuschange notification that the status of a request has changed. the status message is intended to be displayed to the user (e.g., in the status...

SVG Guidelines
gecko and now deprecated by the filter effects specification) id (id on root element has no effect) xmlns:xlink attribute when there are no xlink:href attributes used throughout the file other unused xml namespace definitions xml:space when there is no text used in the file other empty tags, this may be obvious, but those are sometimes found in svgs unreferenced ids (usually on gradient stops, but also on shapes or paths) clip-rule attribute when the element is not a descendant of a <clippath> fill-rule attribute when the element is a descendant of a <clippath> unreferenced/unused clip paths, masks or defs (example) styling basics privilege short lowercase hex for colors don't use excessive precision for numeric values (usually comes from illustrator) use descriptive ids ...

Frame script environment
the frame script's global is a contentframemessagemanager, giving it the following environment: content the dom window of the content loaded in the browser. may be null (see below) docshell the nsidocshell associated with the browser. addeventlistener() listen to events from content. removeeventlistener() stop listening to events from content. addmessagelistener() listen to messages from chrome. removemessagelistener() stop listening to messages from chrome. sendasyncmessage() send an asynchronous message to chrome. sendsyncmessage() send a synchronous message to chrome. dump() print a message to the console. atob() base64 decode. btoa() base64 encode. ...

Frame script environment
the frame script's global is a contentframemessagemanager, giving it the following environment: content the dom window of the content loaded in the browser may be null (see below) docshell the nsidocshell associated with the browser. addeventlistener() listen to events from content. removeeventlistener() stop listening to events from content. addmessagelistener() listen to messages from chrome. removemessagelistener() stop listening to messages from chrome. sendasyncmessage() send an asynchronous message to chrome. sendsyncmessage() send a synchronous message to chrome. dump() print a message to the console. atob() base64 decode. btoa() base64 encode. ...

Limitations of frame scripts
manipulates data structures will just work. xhr and workers will work. however, some apis that work in the chrome process will not work in a frame script. this article lists the most important of these apis. file i/o you should not write to or read from the disk from a frame script, in particular, the profile directory. even if this is possible, you should not do it and may expect that it could stop working at any time. file i/o should all be done in the chrome process. for example: nsifileinputstream nsifileoutputstream constructing a file from a string or nsifile (but file objects can be sent via message manager) htmlinputelement.mozsetfilenamearray (alternative: mozsetfilearray) file: uris, see bug 1187099 <...> xul and browser ui anything that tries to touch the browser ui or ...

mozbrowseraudioplaybackchange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowseraudioplaybackchange event is fired when audio starts or stops playing within a browser <iframe>. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bub...

HTMLIFrameElement.reload()
y change in the future. the reload() method of the htmliframeelement interface is used to reload the content of the <iframe>. syntax instanceofhtmliframeelement.reload(hardreload); returns void. parameters hardreload optional a boolean that indicates whether all the resources to reload must be revalidated (true) or may be taken directly from the browser cache (false). examples stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); specification not part of any specification. ...

Getting Started with Chat
if this happens, you can type this command to resolve this issue. /server server-name manually connect to a server /topic topic changes the topic of the channel. the topic is a message that displays first when you join a channel. /whois nickname display information about the specified user. this information displa...

How to get a stacktrace with WinDbg
int" may have been triggered. if you are prompted for a command but don't see an error about a crash, go back to the debug menu and press go. once the browser crashes, you will see an error (such as "access violation") in the windbg command window. if firefox hangs and there is no command prompt available in the debugger, open the debug menu and choose break. once the browser has crashed or been stopped, continue with the steps below. after the crash or hang you need to capture the debug information to include in a bug comment or support request. enter these three commands, one at a time, to get the stacktrace, crash/hang analysis and log of loaded modules. (again, press enter after each command.) ~* kp !analyze -v -f lm after these steps are completed, find the file c:\temp\firefox-debug...

Creating a New Protocol
is pcontent. you should know what protocol will manage the new protocol and what lifetime issues that creates. if there is any doubt, ask on irc in the #content channel. building the new protocol to build the new protocol declaration and generate headers, make in ipc/ipdl: make -c objdir/ipc/ipdl if there are any protocol-level errors, the ipdl compiler will print the relevant error messages and stop. to view the generated headers, look in objdir/ipc/ipdl/_ipdlheaders . creating the implementation the c++ implementation inherits from the abstract ipdl-generated classes pnewprotocolparent and pnewprotocolchild. it must implement abstract methods for receiving the appropriate messages on each side. the method signatures can be read from the generated pnewprotocolparent.h and pnewprotocolchild.h...

Implementing Download Resuming
get the entityid from the channel, and store it for later use. the entity id is what ensures that the file remains unchanged. this can also be used to check whether the download is resumable: if it is not (e.g. the server is not using http 1.1), then accessing this attribute will throw an ns_error_not_resumable exception. if the download gets interrupted, necko will call the stream listener's onstoprequest method with a failure status. (todo: document what webbrowserpersist/exthandler do). the front-end code can then notify the user of this, and offer to resume the download. resuming a download in order to resume a download, you should create a channel as usual (using nsiioservice). then, you can check if it implements nsiresumablechannel. if it does not, the protocol does not support res...

JavaScript-DOM Prototypes in Mozilla
all those constructor will be correctly set up. this means that the next time the name of a class constructor is resolved in the same scope, say htmlanchorelement, the code will resolve the name htmlanchorelement, find the parent name, which is htmlelement, and resolve that, but since we've already resolved htmlelement as a result of resolving the name htmlimageelement earlier, the recursion will stop right there. ok, so that's how class constructor and their prototype properties are set up, what about the actual prototype chain of a xpconnected dom object? the beauty of this code is that the prototype property of a class constructor is the real xpconnect prototype for that class. when xpconnect wraps a dom object (i.e. creates a xpconnect javascript wrapper for a dom object), xpconnect will ...

DeferredTask.jsm
ing is needed on completion, it can be better handled from within the task itself, for example using a try/catch/finally clause in the task. the "finalize" method can be used in the common case of waiting for completion on shutdown. void arm(); disarm cancel any request for a delayed execution of the task, though the task itself cannot be canceled in case it is already running. this method stops any currently running timer, thus the delay will restart from its original value in case the "arm" method is called again. void disarm(); finalize ensure that any pending task is executed from start to finish, while preventing any attempt to arm the timer again. if the task is running and the timer is armed, then one last execution from start to finish will happen again, immediately aft...

DownloadSummary
on the contents of a downloadlist. a reference to a downloadsummary object can be obtained using the downloads.getsummary() function. method overview promise bindtolist(downloadlist alist); promise addview(object aview); promise removeview(object aview); properties attribute type description allhavestopped read only boolean indicates whether all the downloads are currently stopped. progresstotalbytes read only number indicates the total number of bytes to be transferred before completing all the downloads that are currently in progress. for downloads that do not have a known final size, the number of bytes currently transferred is report...

OS.File for the main thread
uires firefox 18 or a more recent version. example: write a string to a file the following snippet writes the text "this is some text" to a string "file.txt", using the default encoding (utf-8). ...

PromiseWorker.jsm
: github :: promiseworker transfer arraybuffer - worker side rejecting the promise to reject the promise from the worker, simply throw. various error objects are supported; each one has its specific meaning; they're described below. supported built-in javascript error are following: evalerror internalerror rangeerror referenceerror syntaxerror typeerror urierror in addition to them, stopiteration is also supported (note that stopiteration is deprecated). you can also construct and throw your own custom error objects as needed. when custom error is caught by abstractworker, tomsg method will be called to convert it into message. the tomsg function should return an object which has exn property, that is the property key for the frommsg function in main thread side. // worker //...

Localizing with Koala
from koala. once you "hg add" every new file in the repository that you want to track in mercurial, you will need to "hg commit" these new files so as to create a new revision in the repository's history. this process need to be repeated for every new file that you add. also, removing files works in a similar manner: not only do you have to delete the file, but also you need to tell mercurial to stop tracking the file with "hg remove". see "hg help add", "hg help remove" and "hg help addremove" for more details. let's now add and commit these two files from koala. in the "locale files" view in the sidebar, right click on search.properties and choose "add file to repository". this will execute "hg add" on this file in the background. koala will show you a message if the "hg add" was successf...

Mozilla Style System Documentation
is mostly in nsstylecontext::getstyledata, nsrulenode::getstyledata, and nsrulenode::walkruletree. when nsrulenode::walkruletree computes a struct, it walks the rules, starting with the style context's rule node, towards the root of the rule tree. it uses the appropriate declaration struct and has each rule fill in any properties specified by that rule that are not filled in already. the walking stops when all of the properties are filled in or when the root of the rule tree is reached. then the style struct is computed from the declaration and stored at the appropriate location in the rule tree or on the style context. problems: dynamic style changes often destroy too much data. css stylesheet backend css stylesheet loading [this section needs to be written. i'm reluctant to write it bot...

Activity Monitor, Battery Status Menu and top
nitor will be opened and that application’s entry will be highlighted. based on these facts it seems reasonable to assume that “energy impact” is again being used to determine which applications are "using significant energy". testing shows that once an energy-intensive application is started it takes less than a minute for it to show up in the battery status menu. and once the application stops using high amounts of energy it takes a few minutes to disappear. the exception is when the application is closed, in which case it disappears immediately. and it appears that a program with an “energy impact” of roughly 20 or more will eventually show up as significant, and programs that have much higher “energy impact” values tend to show up more quickly. all of these battery status m...

Memory Profiler
face is still under construction. it can be obtained by installing the memory profiler add-on. you may need to set the "xpinstall.signatures.required" pref to false in order to install it, since the xpi is not yet signed. using the add-on open the devtools panel or webide. select the memoryprofiler tab. to take a profile you can use the buttons in the profiler panel. start - start profiling stop - stop profiling reset - clear profile data when profiler is stopped profile data is accumulated and resumed after start. use reset to start a new recording. understanding the profiles traditional memory analysis tools look at the data. they build the referring-to, namely retaining graphs. this is helpful in exploring the relationships among objects and identifying memory leaks. however,...

Profiling with Instruments
iew basic usage select "time profiler" from the "choose a profiling template for:" dialog. in the top left, next to the record and pause button, there will be a "[machine name] > all processes". click "all processes" and select "firefox" from the "running applications" section. click the record button (red circle in top left) wait for the amount of time that you want to profile click the stop button command line tools there is instruments and iprofiler. how do we monitor performance counters (cache miss etc.)? instruments has a "counters" instrument that can do this. memory profiling instruments will record a call stack at each allocation point. the call tree view can be quite helpful here. switch from "statistics". this malloc profiling is done using the malloc_logger infrastru...

Scroll-linked effects
y; top: 0px; margin-top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this version works well with asynchronous scrolling because position of the "toolbar" div is updated by the browser as the user scrolls. example 2: scroll snapping below is an implementation of scroll snapping, where the scroll position snaps to a particular destination when the user's scrolling stops near that destination. <body style="height: 5000px"> <script> function snap(destination) { if (math.abs(destination - window.scrolly) < 3) { scrollto(window.scrollx, destination); } else if (math.abs(destination - window.scrolly) < 200) { scrollto(window.scrollx, window.scrolly + ((destination - window.scrolly) / 2)); settimeout(snap, 20,...

powermetrics
sudo powermetrics --samplers tasks --show-process-coalition --show-process-gpu -n 1 -i 5000 --samplers tasks tells it to just do per-process measurements. --show-process-coalition tells it to group coalitions of related processes, e.g. the firefox parent process and child processes. --show-process-gpu tells it to show per-process gpu measurements. -n 1 tells it to take one sample and then stop. -i 5000 tells it to use a sample length of 5 seconds (5000 ms). change this number to get shorter or longer samples. the following is example output from such an invocation: *** sampled system activity (fri sep 4 17:15:14 2015 +1000) (5009.63ms elapsed) *** *** running tasks *** name id cpu ms/s user% deadlines (<2 ms, 2-5 ms) wakeups (intr, pkg idle) ...

ui.tooltipDelay
ui.tooltipdelay stores the delay in milliseconds between the mouse stopping over an element and the appearing of its tooltip. type:integer default value:500 exists by default: no application support: gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamonkey 2.8) status: active; last updated 2012-02-21 introduction: pushed to nightly on 2011-12-15 bugs: bug 204786 values integer (milliseconds, default: 500) the time for delay between the mouse stopping over the element and the tooltip appearing is stored in milliseconds and the default value is 500ms. ...

Preference reference
...

PLHashEnumerator
syntax #include <plhash.h> typedef printn (pr_callback *plhashenumerator)(plhashentry *he, printn index, void *arg); /* return value */ #define ht_enumerate_next 0 /* continue enumerating entries */ #define ht_enumerate_stop 1 /* stop enumerating entries */ #define ht_enumerate_remove 2 /* remove and free the current entry */ #define ht_enumerate_unhash 4 /* just unhash the current entry */ description plhashenumerator is a function type used in the enumerating a hash table. when all the table entries are enumerated, each entry is passed to a user-specified function of type plhashenumerator with the hash table entry, an integer index, and an arbitrary piece of user data as argument. remark the meaning of ht_enumerate_unhash is not clear. in the current implementati...

PR_Abort
...

PR_Interrupt
> prstatus pr_interrupt(prthread *thread); parameter pr_interrupt has the following parameter: thread the thread whose interrupt request you want to set. returns the function returns one of the following values: if the specified thread is currently blocked, pr_success. otherwise, pr_failure. description the purpose of pr_interrupt is to request that a thread performing some task stop what it is doing and return to some control point. it is assumed that a control point has been mutually arranged between the thread doing the interrupting and the thread being interrupted. when the interrupted thread reaches the prearranged point, it can communicate with its peer to discover the real reason behind the change in plans. the interrupt request remains in the thread's state until it ...

PR_dtoa
esults the principle output is the null-terminated string stored in buf. if rve is not null, *rve is set to point to the end of the returned value. description this function converts the specified floating point number to a string, using the method specified by mode. possible modes are: 0 shortest string that yields d when read in and rounded to nearest. 1 like 0, but with steele & white stopping rule. for example, with ieee 754 arithmetic, mode 0 gives 1e23 whereas mode 1 gives 9.999999999999999e22. 2 max(1, ndigits) significant digits. this gives a return value similar to that of ecvt, except that trailing zeros are suppressed. 3 through ndigits past the decimal point. this gives a return value similar to that from fcvt, except that trailing zeros are suppressed, and ndigits can...

Cryptography functions
genericobjects mxr 3.9.2 and later pk11_destroymergelog mxr 3.12 and later pk11_destroyobject mxr 3.2 and later pk11_destroytokenobject mxr 3.2 and later pk11_digestbegin mxr 3.2 and later pk11_digestkey mxr 3.2 and later pk11_digestop mxr 3.2 and later pk11_digestfinal mxr 3.2 and later pk11_doesmechanism mxr 3.2 and later pk11_exportencryptedprivatekeyinfo mxr 3.2 and later pk11_exportencryptedprivkeyinfo mxr 3.9 and later pk11_exportprivatekeyinfo mxr 3.2 and later ...

Encrypt Decrypt MAC Keys As Session Objects
ed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen, maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "c...

Encrypt and decrypt MAC using token
ed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen, maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "c...

NSS 3.12.4 release notes
884: object leak in libpkix library upon error bug 488067: pk11_importcrl reports sec_error_crl_not_found when it fails to import a crl bug 488350: nspr-free freebl interface need to do post tests only in fips mode. bug 488396: dbm needs to be fips certifiable. ...

NSS 3.53 release notes
us compile warnings in nss bug 1640041 - fix a null pointer in security/nss/lib/ssl/sslencode.c:67 bug 1640042 - fix a null pointer in security/nss/lib/ssl/sslsock.c:4460 bug 1638289 - avoid multiple definitions of sha{256,384,512}_* symbols when linking libfreeblpriv3.so in firefox on ppc64le bug 1636389 - relocate deprecated seed algorithm bug 1637083 - lib/ckfw: no such file or directory. stop. bug 1561331 - additional modular inverse test bug 1629553 - rework and cleanup gmake builds bug 1438431 - remove mkdepend and "depend" make target bug 290526 - support parallel building of nss when using the makefiles bug 1636206 - hacl* update after changes in libintvector.h bug 1636058 - fix building nss on debian s390x, mips64el, and riscv64 bug 1622033 - add option to build without se...

NSS API Guidelines
secbufferleninlen) encrypt and decrypt like functions which have different properties, additional parameters, callbacks, etc., should insert their additional parameters between the context (first parameter) and the output buffer. all hashing update, macing update, and encrypt/decrypt functions which act like filters should have a consistent signature: secstatus pk11_digestop(pk11context *context, unsigned char *inbuf, secbufferleninlen) functions like these which have different properties, for example, additional parameters, callbacks, etc., should insert their additional parameters between the context (first parameter) and the input buffer. within your layer, multiple similar functions should have consistent parameter ...

Enc Dec MAC Output Public Key as CSR
ed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen, maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "c...

NSS Sample Code Sample_3_Basic Encryption and MACing
ed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen, maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "c...

EncDecMAC using token object - sample 3
pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen, maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } re...

Migration to HG
each project now lives in its own separate space, they can be found at: https://hg.mozilla.org/projects/nspr/ https://hg.mozilla.org/projects/nss/ https://hg.mozilla.org/projects/jss/ https://hg.mozilla.org/projects/python-nss/ this migration has been used as an opportunity to change the layout of the source directories. for nspr, "mozilla/nsprpub" has been removed from the directory hierarchy, all files now live in the top directory of the nspr repository. likewise for nss and jss, "mozilla/security" has been removed and files now live at the top level. ...

NSS functions
genericobjects mxr 3.9.2 and later pk11_destroymergelog mxr 3.12 and later pk11_destroyobject mxr 3.2 and later pk11_destroytokenobject mxr 3.2 and later pk11_digestbegin mxr 3.2 and later pk11_digestkey mxr 3.2 and later pk11_digestop mxr 3.2 and later pk11_digestfinal mxr 3.2 and later pk11_doesmechanism mxr 3.2 and later pk11_exportencryptedprivatekeyinfo mxr 3.2 and later pk11_exportencryptedprivkeyinfo mxr 3.9 and later pk11_exportprivatekeyinfo mxr 3.2 and later ...

NSS tools : ssltab
of the certificate. if the -s option is used with -h, two separate parts are printed for each record: the plain hex/ascii output, and the parsed ssl output. -x turn on hex/ascii printing of undecoded data inside parsed ssl records. used only with the -s option. this option uses the same output format as the -h option. -l prefix turn on looping; that is, continue to accept connections rather than stopping after the first connection is complete. -p port change the default rendezvous port (1924) to another port. the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information. although you can run the tool a...

NSS tools : ssltap
of the certificate. if the -s option is used with -h, two separate parts are printed for each record: the plain hex/ascii output, and the parsed ssl output. -x turn on hex/ascii printing of undecoded data inside parsed ssl records. used only with the -s option. this option uses the same output format as the -h option. -l prefix turn on looping; that is, continue to accept connections rather than stopping after the first connection is complete. -p port change the default rendezvous port (1924) to another port. the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information. although you can run the tool a...

NSS Tools ssltap
ber of the certificate. if the -s option is used with -h, two separate parts are printed for each record: the plain hex/ascii output, and the parsed ssl output. -x turn on hex/ascii printing of undecoded data inside parsed ssl records. used only with the -s option. this option uses the same output format as the -h option. -l turn on looping; that is, continue to accept connections rather than stopping after the first connection is complete. -p port change the default rendezvous port (1924) to another port. the following are well-known port numbers: http 80 https 443 smtp 25 ftp 21 imap 143 imaps 993 (imap over ssl) nntp 119 nntps 563 (nntp over ssl) examples you can use the ssl debugging tool to intercept any connection information. although you can run the ...

NSS tools : ssltap
for each record: the plain hex/ascii output, and the parsed ssl output. -x turn on hex/ascii printing of undecoded data inside parsed ssl records. used only with the -s option. this option uses the same output format as the -h option. -l prefix turn on looping; that is, continue to accept connections rather than stopping after the first connection is complete. -p port change the default rendezvous port (1924) to another port. the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) u...

Necko Interfaces Overview
ance via newuri method creates nsichannel instance from nsiuri instance via newchannel method nsistreamlistener : nsirequestobserver implemented by the consumer of a nsichannel instance passed to nsichannel::asyncopen method nsirequestobserver::onstartrequest - notifies start of async download nsistreamlistener::ondataavailable - notifies presence of downloaded data nsirequestobserver::onstoprequest - notifies completion of async download, possibly w/ error nsiloadgroup : nsirequest attribute of a nsirequest channel impl adds itself to its load group during invocation of asyncopen channel impl removes itself from its load group when download completes load groups in gecko own all channels used to load a particular page (until the channels complete) all channels owned by a load...

Rhino Debugger
the f8 key on the keyboard execution will resume until the current function returns or a breakpoint is hit. go to resume execution of a script you may do any of the following: select the debug->go menu item on the menu bar press the go button on the toolbar press the f5 key on the keyboard execution will resume until a breakpoint is hit or the script completes. break to stop all running scripts and give control to the debugger you may do any of the following: select the debug->break menu item on the menu bar press the break button on the toolbar press the pause/break key on the keyboard break on exceptions to give control to the debugger whenever a javascript is exception is thrown select the debug->break on exceptions checkbox from the menu bar. whe...

Rhino history
rhino gets its name from the animal on the cover of the o'reilly book about javascript. the rhino project was started at netscape in the autumn of 1997. at the time, netscape was planning to produce a version of navigator written entirely in java and so it needed an implementation of javascript written in java. when netscape stopped work on "javagator," as it was called, somehow rhino escaped the axe (rumor had it that the executives "forgot" it existed). for a time, a couple of major companies (including sun) licensed rhino for use in their products and paid netscape to do so, allowing work on rhino to continue. now rhino is part of mozilla's open-source repository. originally, rhino compiled all javascript code to java bytecodes in generated classfiles. this produced the best perfo...

Bytecode Descriptions
ack frame, this is undefined. every stack frame has a returnvalue slot, used by top-level scripts, generators, async functions, and derived class constructors. plain functions usually use jsop::return instead. setrval stack: rval ⇒ store rval in the current stack frame's returnvalue slot. this instruction must not be used in a toplevel script compiled with the noscriptrval option. retrval stop execution and return the current stack frame's returnvalue. if no jsop::setrval instruction has been executed in this stack frame, this is undefined. also emitted at end of every script so consumers don't need to worry about running off the end. if the current script is a derived class constructor, returnvalue must be an object. the script can use jsop::checkreturn to ensure this. checkreturn ...

Garbage collection
l, non-incremental gc in order to reclaim some memory and continue execution. incremental write barrier the problem that requires a write barrier incremental gc requires a write barrier for correctness. todo decent diagrams the basic problem is as follows (see dictionary for color terms). say object a is black and contains a pointer field. let object b be white. now let the incremental slice stop, so the mutator resumes. if the mutator stores b into a, so that a contains a pointer to b, and deletes all existing pointers to b, then: b is live, because a is black and contains a pointer to b. b will not be marked, because b is only reachable through a and we are all done with a, because a is black. thus, b is live but will be collected. the write barrier is a piece of code that runs j...

JSAPI User Guide
note that the kind of attack we're talking about here is where a hacker uses javascript to attack the c++ code of the engine itself (or your embedding). the rest of the items in this list talk about security issues that arise within javascript itself, even if the engine is working properly. block simple denial-of-service attacks - a program like while(true){} should not hang your application. to stop execution of scripts that run too long, use js_setoperationcallback. likewise, a function like function f(){f();} should not crash your application with a stack overflow. to block that, use js_setnativestackquota. control access to sensitive data - your application might expose data to some scripts that other scripts should not be able to see. for example, you might let your customers write scri...

JSProtoKey
enceerror referenceerror mxr search for jsproto_referenceerror jsproto_syntaxerror syntaxerror mxr search for jsproto_syntaxerror jsproto_typeerror typeerror mxr search for jsproto_typeerror jsproto_urierror urierror mxr search for jsproto_urierror jsproto_iterator iterator mxr search for jsproto_iterator jsproto_stopiteration stopiteration mxr search for jsproto_stopiteration jsproto_arraybuffer arraybuffer mxr search for jsproto_arraybuffer jsproto_int8array int8array mxr search for jsproto_int8array jsproto_uint8array uint8array mxr search for jsproto_uint8array jsproto_int16array int16array mxr search for jsproto_int16array ...

JS_CompileUTF8FileHandle
le. file is the file handle. js_compileutf8filehandle does not close the file handle. if principals is non-null, it points to a jsprincipals object that is associated with the new script and any functions it creates. on success, js_compileutf8filehandle reads file to eof and returns an object representing the newly compiled script. if an error occurs during compilation, js_compileutf8filehandle stops reading from the file and returns null. js_compileutf8filehandle and js_compileutf8filehandleforprincipals are deprecated, use file, use js::compile instead. see also the jsapi user guide contains example code using compiled scripts. mxr id search for js_compileutf8filehandle js::compile js_decompilescript js::evaluate js_executescript bug 805080 ...

JS_DefineFunctions
(the macro js_fs_end can be used for the last element.) js_definefunctions creates one function for each non-zero element in the array. propertydefinitionbehavior is used to select if properties with jsprop_define_late flag should be defined on the object. normal jsapi consumers probably always want defineallproperties here. on success, js_definefunctions returns true. on error or exception, it stops defining functions and returns false. see also mxr id search for js_definefunctions js_callfunctionname js_defineobject js_defineproperties js_newfunction bug 959787 - make fs type to const bug 825199 - added propertydefinitionbehavior ...

JS_InitStandardClasses
these global objects, functions, constructors, and constants are created as properties of obj. as a side effect, js_initstandardclasses establishes obj as the global object for cx, if one is not already established. this means that scripts executed in cx will see the properties of obj as global variables. see js_setglobalobject for details. obj must be of a js...

JS_SetBranchCallback
sing js_setoptions(). if the callback returns js_true, the js engine continues to execute the script. if the callback raises an exception using js_setpendingexception() and returns js_false, then the javascript engine propagates the exception to the script that was executing at the time. if the callback returns js_false without raising an exception, then the javascript engine immediately stops running the script with an uncatchable error. the engine does not execute finally blocks in this case; this is the same behavior as any native method or callback. description js_setbranchcallback specifies a callback function that is automatically called when a script branches backward during execution, when a function returns, and at the end of the script. one typical use for a callback is in...

JS_SetFunctionCallback
k(jscontext *cx, jsfunctioncallback fcb); 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. fcb jsfunctioncallback the callback to execute when javascript functions are invoked and exited. specify null to stop calling the current callback. the callback must not modify the current state of execution. the call stack cannot be relied upon, because this callback may be invoked from the jit code when the stack frame and context are in an indeterminate state. description js_setfunctioncallback sets a c function to be called each time a javascript function is invoked or exits. fcb is a pointer to the...

JS_SetGCCallback
ack may be called on multiple threads at the same time (e.g. if a thread that is not in an active request calls js_gc while gc is already happening on another thread). in a js_threadsafe build, a jsgc_begin callback can happen on one thread before or while a jsgc_end callback for the previous gc cycle runs on another thread. in a js_threadsafe build, the jsgc_end callback is called after each stop-the-world rendezvous during which one or more garbage collection cycles finished. the callback executes on the same thread that performed gc, after the gc lock has been released. other threads may be running in active requests. see also mxr id search for js_setgccallback js_setfinalizecallback bug 723286 ...

JSAPI reference
lete since jsapi 52 js_errorfromexception js_geterrorprototype jsreport_is_exception jsreport_is_strict jsreport_is_warning jsreport_is_strict_mode_error the following functions allow c/c++ functions to throw and catch javascript exceptions: js::createerror added in spidermonkey 38 js_isexceptionpending js_getpendingexception js_setpendingexception js_clearpendingexception js_throwstopiteration added in spidermonkey 1.8 js_isstopiteration added in spidermonkey 31 typedef jsexceptionstate js_saveexceptionstate js_restoreexceptionstate js_dropexceptionstate these functions translate errors into exceptions and vice versa: js_reportpendingexception js_errorfromexception js_throwreportederror obsolete since jsapi 29 values and types typedef jsval js::value ...

JSDBGAPI
etglobaldebughooks js_setcontextdebughooks memory usage js_getobjecttotalsize js_getfunctiontotalsize js_getscripttotalsize system objects js_issystemobject js_newsystemobject profiling these functions can be used to profile a spidermonkey application using the mac profiler, shark. see profiling javascript with shark. js_connectshark js_disconnectshark js_startchudremote js_stopchudremote the following jsnative functions can be used to expose the above four apis to scripts. js_connectshark js_disconnectshark js_startshark js_stopshark ...

Profiling SpiderMonkey
xul and static builds. make -c my-obj-dir/js/src other ways to profile for linux, there are global jprof functions available. see the documentation on the --enable-jprof mozconfig option. we're working to add support for other profilers, such as oprofile, intel vtune, and callgrind. when we have js scriptable profiling options available for all tier 1 platforms, we'll look at adding global start/stop profiling functions. if you'd like to profile something at a higher level of detail than the js shark functions allow, there are corresponding c functions available at the bottom of jsdbgapi.h. costs of thread safety currently, threadsafe spidermonkey costs us 10-15% on some benchmarks vs. a non-threadsafe js shell. if you're looking to investigate that, build a standalone copy of spidermonkey an...

SpiderMonkey 1.8
rns a newly allocated, writable buffer which the application must js_free. js_reportallocationoverflow can be used (instead of js_reportoutofmemory) to indicate that the script is trying to do something that would require more memory than the implementation is designed to handle. the main difference is that js_reportallocationoverflow throws an exception which the application may catch. js_throwstopiteration throws the appropriate stopiteration exception object for the given context. two new context options can be used with js_setoptions: jsoption_relimit, which causes extremely long-running regular expression searches to fail with an error, and jsoption_anonfunfix, which bans anonymous functions from appearing anyplace where a statement could appear, such as in the argument to eval(). fun...

SpiderMonkey 45
js::getsavedframecolumn (bug 1216819) js::getsavedframefunctiondisplayname (bug 1216819) js::getsavedframeasynccause (bug 1216819) js::getsavedframeasyncparent (bug 1216819) js::getsavedframeparent (bug 1216819) js::buildstackstring (bug 1133191) js::flushperformancemonitoring (bug 1181175) js::resetperformancemonitoring (bug 1181175) js::disposeperformancemonitoring (bug 1208747) js::setstopwatchismonitoringcpow (bug 1156264) js::getstopwatchismonitoringcpow (bug 1156264) js::setstopwatchismonitoringjank (bug 1156264) js::getstopwatchismonitoringjank (bug 1156264) js::isstopwatchactive (bug 674779) js::getperfmonitoringtestcpurescheduling (bug 1181175) js::addcpowperformancedelta (bug 1181175) js::setstopwatchstartcallback (bug 1208747) js::setstopwatchcommitcallback (bug 120...

A Web PKI x509 certificate primer
ed cross-signing). extensions while rfc 5280 defines 16 extensions for webpki in this document we will be describing the six extensions we considered critical for understanding. certificates can have other extensions 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 c...

Animated PNG graphics
e 0 to (2^16)-1; and a byte shall be an 8-bit unsigned integer with the range 0 to (2^8)-1. error handling apng is designed to allow incremental display of frames before the entire image has been read. this implies that some errors may not be detected until partway through the animation. it is strongly recommended that when any error is encountered decoders should discard all subsequent frames, stop the animation, and revert to displaying the default image. a decoder which detects an error before the animation has started should display the default image. an error message may be displayed to the user if appropriate. structure an apng stream is a normal png stream as defined in the png specification, with three additional chunk types describing the animation and providing additional frame d...

Gecko events
window object is about to be minimized or maximized is supported: no event_minimize_end a window object has been minimized or maximized is supported: no event_document_load_start is supported: yes event_document_load_complete the loading of the document has completed. is supported: yes event_document_reload the document contents are being reloaded. is supported: yes event_document_load_stopped the loading of the document was interrupted. is supported: yes event_document_attributes_changed the document wide attributes of the document object have changed. is supported: no event_document_content_changed the contents of the document have changed. is supported: no event_property_changed is supported: no event_selection_changed is supported: yes event_text_attribute_changed ...

Places Developer Guide
; var visitdate = date.now() * 1000; // in microseconds browserhistory.addpagewithdetails(oururi, "mozilla", visitdate); // add a visit to a url, with extended behavior information // via nsiglobalhistory3. var globalhistory = cc["@mozilla.org/browser/global-history;2"]. getservice(ci.nsiglobalhistory2); var oururi = uri("http://www.mozilla.com"); var isredirect = false; var istoplevel = true; globalhistory.adduri(oururi, isredirect, istoplevel, referreruri); globalhistory.setpagetitle(oururi, "mozilla"); deleting from history // places deals in uris, so here's a helper for creating them. function uri(spec) { return cc["@mozilla.org/network/io-service;1"]. getservice(ci.nsiioservice). newuri(spec, null, null); } var browserhistory = histsvc.queryinter...

Places Expiration
s the next one will expire more entries, otherwise if the previous step completed the cleanup the next step will be delayed. this ensures expiration doesn't lag behind without hitting performances when there is no need for it. apart this periodic expiration, there are other steps on idle, on shutdown on clear history. on idle on idle it expires a larger chunk of pages, then timed expiration is stopped. this ensures to not interfere with standby tasks and preserves battery on mobile. on shutdown most of the times the adaptive algorithm will ensure the database is clean before shutdown, so the only task executed on shutdown will be removal of session data (like session annotations). in some cases, like when a clear history is executed just before shutdown, a larger step is executed instead.

Using the Places history service
("place:" uri) back to the actual query objects and options. miscellaneous nsinavhistoryservice.addobserver: adds a history observer, which will be notified of changes to the history system. nsinavhistoryservice.removeobserver: removes a previously added observer. nsinavhistoryservice.beginupdatebatch: call when you will be making many small changes to the history system. observers generally stop updating ui when they are inside a batch, potentially making the operations faster. if you are just doing a few changes, it is probably better to not use a batch since incremental updates are not done. be sure to call endupdatebatch when you are done or the ui will be permanently broken. nsinavhistoryservice.endupdatebatch: ends a batch operation previously started with beginupdatebatch. see al...

places.sqlite Database Troubleshooting
e folder to the work folder. download the latest precompiled binary sqlite command-line shell from: https://www.sqlite.org/download.html extract sqlite3 executable into the work folder. open a terminal window and navigate to the work folder. then open an sqlite shell: my_work_folder> sqlite3 places.sqlite-corrupt sqlite> pragma integrity_check; if the result is ok, this guide won't help; stop here and please file a bug. sqlite> .clone places.sqlite sqlite> pragma user_version; note the version number returned by the last pragma query. sqlite> .exit open a new shell for the new database: my_work_folder> sqlite3 places.sqlite sqlite> pragma integrity_check; if the result is not ok, the file cannot be recovered; stop here and please file a bug. let's fix the schema version. ...

Accessing the Windows Registry Using XPCOM
you must call startwatching() for the key to be monitored. the method takes one parameter, a boolean indicating whether child keys should be watched. after that, you can call haschanged() to determine whether or not you need to reread the value. calling haschanged() automatically resets the watch, so you can be sure that if it returns true there are changes. t...

XPCOM array guide
<t> is about as fast as, if not faster than, standard loop-based iteration. the callback mechanism can be useful when integrating with existing callback-style code however. one particularly nice thing about the callback mechanism is that it is typesafe. for instance: pr_callback prbool getfirstvisible(nsielement* element, void* closure) { prbool isvisible; element->isvisible(&isvisible); // stop at first object if (isvisible) { ns_static_cast(closureobject*,closure)->element = element; return pr_false; } return pr_true; } ... // enumerate to find the object closureobject closureobject = { 0 }; if (!melements.enumerateforwards(getfirstvisible, closureobject)) processelement(closureobject->element); ... enumerators a nsisimpleenumerator can be created to provide access to a ...

Component Internals
application is ready to shutdown xpcom, it calls ns_shutdownxpcom. when that method is called, the following sequence of events occurs: xpcom fires a shutdown notification to all registered observers. xpcom closes down the component manager, the service manager and associated services. xpcom frees all global services. ns_shutdownxpcom returns and the application may exit normally. the unstoppable shutdown note that shutdown observation is unstoppable. in other words, the event you observe cannot be used to implement something like a "are you sure you want to quit?" dialog. rather, the shutdown event gives the component or embedding application a last chance to clean up any leftovers before they are released. in order to support something like an "are you sure you want to quit" dialo...

imgIRequest
rs_anonymous 2 cors_use_credentials 3 methods cancelandforgetobserver() cancels this request as in nsirequest.cancel(); further, also nulls out decoderobserver so it gets no further notifications from us. note: you should not use this in any new code; instead, use cancel(). note that cancel() is asynchronous, which means that some time after you call it, the listener/observer will get an onstoprequest(). this means that, if you're the observer, you can not call cancel() from your destructor. void cancelandforgetobserver( in nsresult astatus ); parameters astatus clone() clone this request; the returned request will have aobserver as the observer. aobserver will be notified synchronously (before the clone call returns) with all the notifications that have already been dispatched fo...

mozIStorageStatementCallback
s from: nsisupports method overview void handlecompletion(in unsigned short areason); void handleerror(in mozistorageerror aerror); void handleresult(in mozistorageresultset aresultset); constants constant value description reason_finished 0 the statement has finished executing normally. reason_canceled 1 the statement stopped executing because it was canceled. reason_error 2 the statement stopped executing because an error occurred. methods handlecompletion() called when a statement finishes executing. void handlecompletion( in unsigned short areason ); parameters areason the reason the statement stopped executing; see the list of possible values in the constants section. handle...

nsIAccessibleEvent
as ended on a scroll bar. event_minimize_start 0x0028 0x0025 a window object is about to be minimized or maximized. event_minimize_end 0x0029 0x0026 a window object has been minimized or maximized. event_document_load_complete 0x002b 0x0027 the loading of the document has completed. event_document_reload 0x002c 0x0028 the document contents are being reloaded. event_document_load_stopped 0x002d 0x0029 the loading of the document was interrupted. event_document_attributes_changed 0x002e 0x002a the document wide attributes of the document object have changed. event_document_content_changed 0x002f 0x002b the contents of the document have changed. event_property_changed 0x0030 0x002c event_selection_changed 0x0031 0x002d event_text_attribute_changed 0x003...

nsIComponentManager
on() unregisters the chrome.manifest file previously registered with the addbootstrappedmanifestlocation() method. see addbootstrappedmanifestlocation() for details. void removebootstrappedmanifestlocation( in interface nsilocalfile alocation ); parameters examples using addbootstrappedmanifestlocation in a bootstrapped extension for firefox 8 and 9: alocation the directory or xpi to stop reading the chrome.manifest from. function startup(params, areason) { if (services.vc.compare(services.appinfo.platformversion, "10.0") < 0) components.manager.addbootstrappedmanifestlocation(params.installpath); } function shutdown(params, areason) { if (services.vc.compare(services.appinfo.platformversion, "10.0") < 0) components.manager.removebootstrappedmanifestlocation(params.

nsIContentPrefService
edprefs() remove all grouped prefs. useful for removing references to the sites the user has visited when the user clears their private data. void removegroupedprefs(); removeobserver() removes an observer that's presently monitoring a preference for changes. void removeobserver( in astring aname, in nsicontentprefobserver aobserver ); parameters aname the name of the preference to stop observing. you may specify null to remove a generic observer that is monitoring all preference changes. aobserver the name of the observer that will cease receiving notifications of changes to the preference's value. removepref() removes the specified preference. note: prior to gecko 2.0, the site could only be specified by nsiuri. now a string can be used as well. void removepref( ...

nsIDOMGeoGeolocation
geopositionerrorcallback errorcallback, [optional] in nsidomgeopositionoptions options); attributes attribute type description lastposition nsidomgeoposition the most recently retrieved location as seen by the provider. may be null. read only. methods clearwatch() when the clearwatch() method is called, the watch() process stops calling for new position identifiers and cease invoking callbacks. void clearwatch( in unsigned short watchid ); parameters none. getcurrentposition() acquires the user's current position via a new position object. if this fails, errorcallback is invoked with an nsidomgeopositionerror argument. void getcurrentposition( in nsidomgeopositioncallback successcallback, [optional] in nsidomgeopo...

nsIDOMWindowInternal
eters were required. ...

nsIDirIndexParser
netwerk/streamconv/public/nsidirindexlistener.idlscriptable a parser for 'application/http-index-format' directories. inherits from: nsistreamlistener last changed in gecko 1.7 called for each directory entry. attributes attribute type description comment string the comment given, if any. this result is only valid after onstoprequest has occurred, because it can occur anywhere in the datastream. read only. encoding string the encoding to use. listener nsidirindexlistener the interface to use as a callback for new entries. ...